mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Preload variants of item type SVG icons

Browse source
This commit is contained in:
Abe Jellinek 2023-10-18 08:33:07 -04:00 committed by Dan Stillman
parent c7286194f8
commit c6ad31ca0a
3 changed files with 38 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
scss/_zotero.scss
View file

@ -3,10 +3,10 @@
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "abstracts/utilities";
@import "abstracts/split-button";
@import "abstracts/svgicon";
:root {
color-scheme: light dark;

27
scss/abstracts/_mixins.scss
View file

@ -1,27 +0,0 @@
//
// Mixins
// --------------------------------------------------
@mixin svgicon($icon, $color, $size: "16", $prefix: false, $has2x: false) {
@if $has2x {
@if $prefix {
background-image: image-set(url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg') 1x,
url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}@2x.svg') 2x);
}
@else {
background-image: image-set(url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg') 1x,
url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}@2x.svg') 2x);
}
}
@else {
@if $prefix {
background-image: url('chrome://zotero/skin/#{$prefix}/#{$size}/#{$color}/#{$icon}.svg');
}
@else {
background-image: url('chrome://zotero/skin/#{$size}/#{$color}/#{$icon}.svg');
}
}
}

37
scss/abstracts/_svgicon.scss Normal file
View file

@ -0,0 +1,37 @@
@mixin svgicon($icon, $color, $size: "16", $prefix: false, $has2x: false) {
background:
-make-icon-background($icon, $color, $size, $prefix, $has2x),
// 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;
}
@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');
}
}
}