43 lines
1.3 KiB
SCSS
43 lines
1.3 KiB
SCSS
// _keyrune.scss
|
|
|
|
/** Set Symbol Base Class ========================
|
|
*/
|
|
.#{$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}";
|
|
}
|
|
}
|
|
|
|
/** Set Symbol 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)}";
|
|
}
|
|
}
|