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

🎉 checkboxesを追加

Browse Source
This commit is contained in:
BcRikko
2018-11-26 09:50:57 +09:00
parent 1a34fe4bff
commit 96d37041ca
6 changed files with 92 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/elements/_index.scss
View File

@@ -3,3 +3,4 @@
@import "buttons.scss";
@import "containers.scss";
@import "radios.scss";
@import "checkboxes.scss";

51
scss/elements/checkboxes.scss Normal file
View File

@@ -0,0 +1,51 @@
.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)
);
$colors: ($base-color);
margin-left: 28px;
-webkit-appearance: none;
appearance: none;
& + span {
position: relative;
}
& + span::before,
&:checked + span::before {
position: absolute;
top: -3px;
left: -28px;
content: "";
}
// prettier-ignore
& + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox, $colors, 2px);
}
&:checked + span::before {
@include pixelize($checkbox-checked, $colors, 2px);
}
}