mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-09-02 18:42:47 +02:00
Code Issues Releases Wiki Activity

chore(form): moved radios and checkboxes to form folder

Browse Source 
#219
This commit is contained in:
Igor Guastalla de Lima
2019-01-30 19:57:24 -02:00
parent b7b9a37203
commit 596505fb1e
4 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
scss/form/checkboxes.scss Normal file
View File

@@ -0,0 +1,84 @@
.nes-checkbox {
// prettier-ignore
$checkbox: (
(1,1,1,1,1,1,1,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,0,0,0,0,0,0,1,0,0),
(1,1,1,1,1,1,1,1,0,0),
);
// prettier-ignore
$checkbox-checked: (
(1,1,1,1,1,1,1,0,1,1),
(1,0,0,0,0,0,0,1,1,1),
(1,0,0,0,0,0,1,1,0,0),
(1,1,0,0,0,1,1,0,0,0),
(1,1,1,0,1,1,0,1,0,0),
(1,0,1,1,1,0,0,1,0,0),
(1,0,0,1,0,0,0,1,0,0),
(1,1,1,1,1,1,1,1,0,0)
);
// prettier-ignore
$checkbox-focus: (
(2,2,2,2,2,2,2,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,0,0,0,0,0,0,2,0,0),
(2,2,2,2,2,2,2,2,0,0),
);
// prettier-ignore
$checkbox-checked-focus: (
(2,2,2,2,2,2,2,0,1,1),
(2,0,0,0,0,0,0,1,1,1),
(1,0,0,0,0,0,1,1,0,0),
(1,1,0,0,0,1,1,0,0,0),
(2,1,1,0,1,1,0,2,0,0),
(2,0,1,1,1,0,0,2,0,0),
(2,0,0,1,0,0,0,2,0,0),
(2,2,2,2,2,2,2,2,0,0)
);
$colors: ($base-color, map-get($default-colors, "shadow"));
margin-left: 28px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
& + span {
position: relative;
cursor: $cursor-click-url, pointer;
}
& + span::before,
&:checked + span::before {
position: absolute;
top: -3px;
left: -28px;
font-size: 2px;
content: "";
}
// prettier-ignore
& + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox, $colors);
}
// prettier-ignore
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox-focus, $colors);
}
&:checked + span::before {
@include pixelize($checkbox-checked, $colors);
}
&:checked:focus + span::before {
@include pixelize($checkbox-checked-focus, $colors);
}
}