@use 'sass:math'; /** * 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 / #{math.div($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}-khc::before { content: "\e9c5"; } &.#{$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; } }