YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

[style] fix checkbox svg icon colors

Browse source
This commit is contained in:
axolotle 2022-11-23 16:35:30 +01:00
parent 2d9aafa231
commit dfd27fa02c
2 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/src/scss/_variables.scss
View file

@ -95,6 +95,18 @@ $list-group-item-padding-x: 1rem;
// Hard coded for scss compilation to pass
$b-toast-background-opacity: 100%;
// fixes for svg icon color not working with css variables
@function get-checkbox-icon-checked($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
}
@function get-checkbox-icon-indeterminate($color) {
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$color}' d='M0 2h4'/></svg>");
}
$custom-checkbox-indicator-icon-checked: get-checkbox-icon-checked('%23fff');
$custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate('%23fff');
// Import default variables after the above setup to compute all other variables.
@import '~bootstrap/scss/functions.scss';
@import '_functions-override.scss';

15
app/src/scss/main.scss
View file

@ -96,11 +96,6 @@
}
}
}
// FIX svg fill not working with CSS variables
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='white' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>"));
}
}
[dark-theme="true"] {
@ -135,8 +130,14 @@
}
// FIX svg fill not working with CSS variables
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#202020' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>"));
.custom-checkbox .custom-control-input {
&:checked ~ .custom-control-label::after {
background-image: escape-svg(get-checkbox-icon-checked('#202020'));
}
&:indeterminate ~ .custom-control-label::after {
background-image: escape-svg(get-checkbox-icon-indeterminate('#202020'));
}
}
}