mirror of
https://github.com/andrewgioia/keyrune.git
synced 2024-11-16 19:54:46 +00:00
115 lines
2.5 KiB
SCSS
115 lines
2.5 KiB
SCSS
@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;
|
|
}
|
|
|
|
}
|