61 lines
1.6 KiB
SCSS
61 lines
1.6 KiB
SCSS
// stylelint-disable order/order
|
|
// stylelint-disable scss/operator-no-newline-after
|
|
@use "sass:math";
|
|
@use "sass:string";
|
|
|
|
@function encode-svg($svg) {
|
|
$encoded: "";
|
|
$slice: 2000;
|
|
$index: 0;
|
|
$loops: math.ceil(math.div(string.length($svg), $slice));
|
|
|
|
@if not string.index($svg, xmlns) {
|
|
$svg: str-replace($svg, "<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
|
|
}
|
|
|
|
@for $i from 1 through $loops {
|
|
$chunk: string.slice($svg, $index, $index + $slice - 1);
|
|
$chunk: str-replace($chunk, '"', "'");
|
|
$chunk: str-replace($chunk, "%", "%25");
|
|
$chunk: str-replace($chunk, "#", "%23");
|
|
$chunk: str-replace($chunk, "{", "%7B");
|
|
$chunk: str-replace($chunk, "}", "%7D");
|
|
$chunk: str-replace($chunk, "<", "%3C");
|
|
$chunk: str-replace($chunk, ">", "%3E");
|
|
$encoded: #{$encoded}#{$chunk};
|
|
$index: $index + $slice;
|
|
}
|
|
@return url("data:image/svg+xml;utf8,#{$encoded}");
|
|
}
|
|
|
|
@mixin background-svg($svg) {
|
|
background-image: encode-svg($svg);
|
|
}
|
|
|
|
@mixin mask-svg($svg, $color: currentColor) {
|
|
background-color: $color;
|
|
|
|
-webkit-mask-image: encode-svg($svg);
|
|
mask-image: encode-svg($svg);
|
|
-webkit-mask-position: 50%;
|
|
mask-position: 50%;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 1em;
|
|
mask-size: 1em;
|
|
}
|
|
|
|
@function str-replace($string, $search, $replace: "") {
|
|
$index: string.index($string, $search);
|
|
@return if(
|
|
$index,
|
|
string.slice($string, 1, $index - 1) + $replace +
|
|
str-replace(
|
|
string.slice($string, $index + string.length($search)),
|
|
$search,
|
|
$replace
|
|
),
|
|
$string
|
|
);
|
|
}
|