mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-02-24 01:12:31 +01: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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/nes.css
View File

@ -629,12 +629,25 @@ button,
box-shadow: 2px 2px #212529,4px 2px #212529,6px 2px #212529,8px 2px #212529,10px 2px #212529,12px 2px #212529,14px 2px #212529,16px 2px #212529,2px 4px #212529,16px 4px #212529,2px 6px #212529,16px 6px #212529,2px 8px #212529,16px 8px #212529,2px 10px #212529,16px 10px #212529,2px 12px #212529,16px 12px #212529,2px 14px #212529,16px 14px #212529,2px 16px #212529,4px 16px #212529,6px 16px #212529,8px 16px #212529,10px 16px #212529,12px 16px #212529,14px 16px #212529,16px 16px #212529;;
}
.checkbox:focus + span::before {
/* stylelint-disable-line no-descending-specificity */
width: 2px;
height: 2px;
box-shadow: 2px 2px #adafbb,4px 2px #adafbb,6px 2px #adafbb,8px 2px #adafbb,10px 2px #adafbb,12px 2px #adafbb,14px 2px #adafbb,16px 2px #adafbb,2px 4px #adafbb,16px 4px #adafbb,2px 6px #adafbb,16px 6px #adafbb,2px 8px #adafbb,16px 8px #adafbb,2px 10px #adafbb,16px 10px #adafbb,2px 12px #adafbb,16px 12px #adafbb,2px 14px #adafbb,16px 14px #adafbb,2px 16px #adafbb,4px 16px #adafbb,6px 16px #adafbb,8px 16px #adafbb,10px 16px #adafbb,12px 16px #adafbb,14px 16px #adafbb,16px 16px #adafbb;;
}
.checkbox:checked + span::before {
width: 2px;
height: 2px;
box-shadow: 2px 2px #212529,4px 2px #212529,6px 2px #212529,8px 2px #212529,10px 2px #212529,12px 2px #212529,14px 2px #212529,18px 2px #212529,20px 2px #212529,2px 4px #212529,16px 4px #212529,18px 4px #212529,20px 4px #212529,2px 6px #212529,14px 6px #212529,16px 6px #212529,2px 8px #212529,4px 8px #212529,12px 8px #212529,14px 8px #212529,2px 10px #212529,4px 10px #212529,6px 10px #212529,10px 10px #212529,12px 10px #212529,16px 10px #212529,2px 12px #212529,6px 12px #212529,8px 12px #212529,10px 12px #212529,16px 12px #212529,2px 14px #212529,8px 14px #212529,16px 14px #212529,2px 16px #212529,4px 16px #212529,6px 16px #212529,8px 16px #212529,10px 16px #212529,12px 16px #212529,14px 16px #212529,16px 16px #212529;;
}
.checkbox:checked:focus + span::before {
width: 2px;
height: 2px;
box-shadow: 2px 2px #adafbb,4px 2px #adafbb,6px 2px #adafbb,8px 2px #adafbb,10px 2px #adafbb,12px 2px #adafbb,14px 2px #adafbb,18px 2px #212529,20px 2px #212529,2px 4px #adafbb,16px 4px #212529,18px 4px #212529,20px 4px #212529,2px 6px #212529,14px 6px #212529,16px 6px #212529,2px 8px #212529,4px 8px #212529,12px 8px #212529,14px 8px #212529,2px 10px #adafbb,4px 10px #212529,6px 10px #212529,10px 10px #212529,12px 10px #212529,16px 10px #adafbb,2px 12px #adafbb,6px 12px #212529,8px 12px #212529,10px 12px #212529,16px 12px #adafbb,2px 14px #adafbb,8px 14px #212529,16px 14px #adafbb,2px 16px #adafbb,4px 16px #adafbb,6px 16px #adafbb,8px 16px #adafbb,10px 16px #adafbb,12px 16px #adafbb,14px 16px #adafbb,16px 16px #adafbb;;
}
.balloon {
position: relative;
display: inline-block;

2
css/nes.css.map
View File

File diff suppressed because one or more lines are too long

2
css/nes.min.css vendored
View File

File diff suppressed because one or more lines are too long

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);
}
}