61 lines
2.0 KiB
SCSS
61 lines
2.0 KiB
SCSS
// output the correct glyphs for the 3 layers' pseudoelements
|
|
@mixin layers($layers) {
|
|
@if (map-get($layers, border)) {
|
|
// always mask the border on the element itself and the rarity on the ::before
|
|
mask-image: url(svg_content(map-get($layers, border), map-get($layers, viewbox)));
|
|
&::before {
|
|
mask-image: url(svg_content(map-get($layers, rarity), map-get($layers, viewbox)));
|
|
}
|
|
} @else {
|
|
background: var(--ss-rarity);
|
|
mask-image: url(svg_content(map-get($layers, rarity), map-get($layers, viewbox)));
|
|
&::before {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
// inner layer
|
|
&.#{$keyrune-prefix}-inner {
|
|
@if (map-get($layers, inner)) {
|
|
// mask the filled rarity on the before
|
|
&::before{
|
|
mask-image: url(svg_content(map-get($layers, filled), map-get($layers, viewbox)));
|
|
}
|
|
// mask the inner on the ::after
|
|
&::after {
|
|
mask-image: url(svg_content(map-get($layers, inner), map-get($layers, viewbox)));
|
|
}
|
|
} @else {
|
|
&::after {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// border layer
|
|
&.#{$keyrune-prefix}-border {
|
|
// if there's no inner, composite subtract it out of the element's mask
|
|
&:not(.#{$keyrune-prefix}-inner) {
|
|
mask-image:
|
|
url(svg_content(map-get($layers, border), map-get($layers, viewbox))),
|
|
url(svg_content(map-get($layers, inner), map-get($layers, viewbox)));
|
|
mask-composite: subtract;
|
|
}
|
|
}
|
|
}
|
|
|
|
// return the css variable for the glyph's aspect ratio
|
|
@mixin ratio($ratio) {
|
|
--aspect-ratio: #{$ratio};
|
|
}
|
|
|
|
// correctly parse the glyph's unicode for css
|
|
@function svg_content($svg, $viewbox) {
|
|
@if $svg {
|
|
@return unquote("\"#{$keyrune-svg-tag-open}#{$viewbox}#{$keyrune-svg-tag-inner}#{$svg}#{$keyrune-svg-tag-close}\"");
|
|
} @else {
|
|
@return unquote("\"#{$keyrune-svg-empty}\"");
|
|
}
|
|
}
|