css - How Can I Override Bourbon Styles in Modal Refill? -
i using bourbon modal reset. close button comes 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 grey × in upper right of modal. however, change button says "save , close". i'm wondering best method of overriding these styles is. on properties margin
, can set whatever want. on @include position(....);
, not sure how can reset none
, initial
, or unset
. best method doing this? don't want remove properties in original refill file; keep separate _modaloverride.scss
, can include want, keep original in tact. how can override these "custom" @include
properties?
refills designed overwritten i'd following html:
... <div class="modal-close" for="modal-1">close , save</div> ...
and 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 want overwrite file might bit trickier. in file comes after modal.scss:
.modal-close { position: inherit; &:after, &:before { background: transparent; } &:hover:after, &:hover:before { background: transparent; } }
Comments
Post a Comment