How Can I Override Bourbon Styles in Modal Refill?

Question

I am using the Bourbon modal reset. Its close button comes with the following styling:

  .modal-close {
    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
    @include size(1.5em);
    background: $modal-background;
    cursor: pointer;

    &:after,
    &:before {
      @include position(absolute, 3px 3px 0 50%);
      @include transform(rotate(45deg));
      @include size(0.15em 1.5em);
      background: $modal-close-color;
      content: '';
      display: block;
      margin: -3px 0 0 -1px;
    }

    &:hover:after,
    &:hover:before {
      background: darken($modal-close-color, 10%);
    }

    &:before {
      @include transform(rotate(-45deg));
    }
  }

This makes it look like a grey × in the upper right of the modal. However, I would like to change it to look like a button that says "Save and Close". I'm wondering what the best method of overriding these styles is. On properties like margin, I can simply set it to whatever I want. However on @include position(....);, I am not really sure how I can reset that to none, initial, or unset. What is the best method for doing something like this? I don't want to simply remove the properties in the original refill file; I would like to keep a separate _modalOverride.scss, so I can include it where I want, but keep the original in tact. How can I override these "custom" @include properties?

Answer 1

Refills was designed to be overwritten so I'd just do the following to the HTML:

...
<div class="modal-close" for="modal-1">Close and Save</div>
...

and for the Scss:

...
.modal-close {
  @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
  @include size(8em 1.5em);
  background: tomato;
  cursor: pointer;
}
...

But if you want to do an overwrite file it might be a bit trickier. You could do something like this in a file that comes after the modal.scss:

.modal-close {
  position: inherit;

  &:after,
  &:before {
    background: transparent;
  }

  &:hover:after,
  &:hover:before {
    background: transparent; 
  }
}