mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 17:30:23 +02:00
Code Issues Releases Wiki Activity

feat(checkbox): add dark mode to checkbox

Browse Source 
We need to add styles when the checkbox is on dark mode, currently, the
checkbox is not visible at all if the container is dark.
This commit is contained in:
Ilyeo
2019-01-29 22:40:18 -06:00
parent e26de687a9
commit 9c4afae3d4
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
scss/form/checkboxes.scss
View File

@@ -46,6 +46,7 @@
(2,2,2,2,2,2,2,2,0,0) (2,2,2,2,2,2,2,2,0,0)
); );
$colors: ($base-color, map-get($default-colors, "shadow")); $colors: ($base-color, map-get($default-colors, "shadow"));
$colors-checkbox-dark: ($color-white, map-get($default-colors, "shadow"));
margin-left: 28px; margin-left: 28px;
-webkit-appearance: none; -webkit-appearance: none;
@@ -80,4 +81,24 @@
&:checked:focus + span::before { &:checked:focus + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors); @include pixelize(2px, $checkbox-checked-focus, $colors);
} }
&.is-dark {
+ span {
color: $color-white;
}
// prettier-ignore
+ span::before { /* stylelint-disable-line no-descending-specificity */
color: $color-white;
}
&:checked + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
color: $color-white;
}
&:checked:focus + span::before {
@include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
color: $color-white;
}
}
} }