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

👍 focus時のcheckboxをスタイルを修正

Browse Source
This commit is contained in:
BcRikko
2018-11-28 18:59:52 +09:00
parent b735f29340
commit 8451cea4d9
4 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
scss/elements/checkboxes.scss
View File

@@ -22,7 +22,30 @@
(1,0,0,1,0,0,0,1,0,0),
(1,1,1,1,1,1,1,1,0,0)
);
$colors: ($base-color);
// 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, #adafbb);
margin-left: 28px;
-webkit-appearance: none;
@@ -45,8 +68,15 @@
& + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox, $colors, 2px);
}
// prettier-ignore
&:focus + span::before { /* stylelint-disable-line no-descending-specificity */
@include pixelize($checkbox-focus, $colors, 2px);
}
&:checked + span::before {
@include pixelize($checkbox-checked, $colors, 2px);
}
&:checked:focus + span::before {
@include pixelize($checkbox-checked-focus, $colors, 2px);
}
}