keyrune/sass/_setsymbol.scss

43 lines
1.3 KiB
SCSS
Raw Permalink Normal View History

2016-12-14 17:54:48 +00:00
// _keyrune.scss
2017-03-14 13:03:40 +00:00
/** Set Symbol Base Class ========================
2016-12-14 17:54:48 +00:00
*/
.#{$keyrune_prefix} {
display: inline-block;
font: $keyrune_font;
font-size: inherit;
line-height: 1em;
text-rendering: auto;
transform: translate(0, 0);
speak: none;
text-transform: none;
vertical-align: middle;
// Better font rendering
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: grayscale;
// default symbol if the set does not exist yet, or setcode does not match
&:before {
content: "#{$keyrune_default_content}";
}
}
2017-03-14 13:03:40 +00:00
/** Set Symbol Glyphs ============================
2016-12-14 17:54:48 +00:00
* | Originally, this was inside of the .#{$keyrune_prefix} class above,
* | and used a '&' parent selector.
* | However, the loop caused a strange
* | interatction and printed all of the the set name comments above all
* | of the set glyh classes; making a giant block of comments on top of
* | a huge list of classes.
* |
* | Temporary solution for proper selector specificity was to prefix the
* | class with the same variable as the main .ss class above. Not really
* | best practice (DRY, etc...) but fixes weird compilation.
*/
@each $set in $mtg_setlist {
/* #{nth($set, 1)} */
.#{$keyrune_prefix}.#{$keyrune_prefix}-#{nth($set, 2)}:before {
content: "#{nth($set, 3)}";
}
}