keyrune/sass/_setsymbol.scss
2016-12-13 18:08:32 -06:00

43 lines
1.5 KiB
SCSS

// _setsymbol.scss
/** Setsymbol Base Class ========================
*/
.#{$keyrune_prefix} {
display: $setsymbol_display;
font: $setsymbol_font;
font-size: $setsymbol_font_size;
line-height: $setsymbol_line_height;
text-rendering: $setsymbol_text_rendering;
transform: $setsymbol_transform;
speak: $setsymbol_speak;
text-transform: $setsymbol_text_transform;
vertical-align: $setsymbol_vertical_align;
// Better font rendering
-webkit-font-smoothing: $setsymbol_webkit_font_smoothing;
-moz-font-smoothing: $setsymbol_moz_font_smoothing;
// default symbol if the set does not exist yet, or setcode does not match
&:before {
content: "#{$setsymbol_default_content}";
}
}
/** Setsymbol Glyphs ============================
* | 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)}";
}
}