keyrune/sass/_helpers.scss

108 lines
2.4 KiB
SCSS

/**
* Sizes */
@each $class, $size in $keyrune_sizes {
.#{$keyrune_prefix}.#{$keyrune_prefix}-#{$class} {
font-size: #{$size};
}
}
/**
* Fixed width */
.#{$keyrune_prefix}.#{$keyrune_prefix}-fw {
width: calc(18em / #{$keyrune_font_size / ($keyrune_font_size * 0 + 1)});
text-align: center;
}
/**
* Force no border */
.#{$keyrune_prefix}.#{$keyrune_prefix}-no-border {
-webkit-text-stroke: 0;
text-stroke: 0;
}
/**
* Icon borders */
.#{$keyrune_prefix}.#{$keyrune_prefix}-border {
&:after {
content: "";
position: absolute;
left: -0.05em;
top: 0.0em;
z-index: -1;
color: $white;
font-size: 1.15em;
background: $white;
-webkit-text-stroke: 0.05em $white;
-webkit-background-clip: $keyrune_background_clip;
-webkit-text-fill-color: $keyrune_text_fill;
}
// adding a white version of the symbol for these problem sets,
// instead of using the generic text-stroke above
@each $set, $code, $glyph in $border-corrections {
&.#{$keyrune_prefix}-#{$code}:after { /* #{$set} */
content: ss-content($glyph);
}
}
// corrections for various duo icons
// SIS: the regular symbol becomes the border now
&.#{$keyrune_prefix}-sis {
&::before {
content: "\e9b3";
}
}
}
/**
* Dual-layered symbols */
.#{$keyrune_prefix}.#{$keyrune_prefix}-duo {
// base border styles
&::after {
color: #000;
content: '';
display: block;
font-size: 1em;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
// set default inner to white unless a rarity is declared
color: #fff;
// sets
@each $code, $glyph in $dual-layered {
&.#{$keyrune_prefix}-#{$code}::after {
content: ss-content($glyph);
}
}
// manual corrections
&.#{$keyrune_prefix}-ncc::before {
content: "\e98f";
}
&.#{$keyrune_prefix}-40k::before {
content: "\e999";
}
&.#{$keyrune_prefix}-dmc::before {
content: "\e995";
}
&.#{$keyrune_prefix}-ltc::before {
content: "\e9b7";
}
// rarity border colors
&.#{$keyrune_prefix}-common {
color: #fff;
}
&.#{$keyrune_prefix}-uncommon::after,
&.#{$keyrune_prefix}-rare::after,
&.#{$keyrune_prefix}-mythic::after {
color: #000;
}
}