60 lines
2.1 KiB
SCSS
60 lines
2.1 KiB
SCSS
@mixin svgicon($icon, $color, $size: "16", $prefix: false, $has2x: false, $light-dark: false) {
|
|
background:
|
|
-make-icon-background($icon, $color, $size, $prefix, $has2x) no-repeat center/contain,
|
|
|
|
// Invisible backgrounds to preload all variants:
|
|
-make-icon-background($icon, 'white', $size, $prefix, $has2x) center/0,
|
|
-make-icon-background($icon, 'light', $size, $prefix, $has2x) center/0,
|
|
-make-icon-background($icon, 'dark', $size, $prefix, $has2x) center/0;
|
|
@if ($color == 'universal') {
|
|
@if ($light-dark) {
|
|
@include light-dark(fill, nth($light-dark, 1), nth($light-dark, 2));
|
|
}
|
|
@else {
|
|
fill: currentColor;
|
|
}
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
}
|
|
|
|
@mixin svgicon-menu($icon, $color, $size: "16", $prefix: false, $has2x: false, $light-dark: false) {
|
|
// Disable 2x because list-style-image doesn't support image-set
|
|
list-style-image: -make-icon-background($icon, $color, $size, $prefix, false);
|
|
@if ($color == 'universal') {
|
|
@if ($light-dark) {
|
|
@include light-dark(fill, nth($light-dark, 1), nth($light-dark, 2));
|
|
}
|
|
@else {
|
|
fill: currentColor;
|
|
}
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
}
|
|
|
|
@function -make-icon-background($icon, $color, $size, $prefix, $has2x) {
|
|
@if $has2x {
|
|
@if $prefix {
|
|
@return image-set(
|
|
url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg') 1x,
|
|
url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}@2x.svg') 2x
|
|
);
|
|
}
|
|
|
|
@else {
|
|
@return image-set(
|
|
url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg') 1x,
|
|
url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}@2x.svg') 2x
|
|
);
|
|
}
|
|
}
|
|
|
|
@else {
|
|
@if $prefix {
|
|
@return url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg');
|
|
}
|
|
|
|
@else {
|
|
@return url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg');
|
|
}
|
|
}
|
|
}
|