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

👍 チェックボックスの追加

Browse Source
This commit is contained in:
BcRikko
2018-09-25 19:32:38 +09:00
parent 1fdc9e5b22
commit 9716a2e722
7 changed files with 133 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/elements/_index.scss
View File

@@ -4,3 +4,4 @@
@import "button.scss";
@import "radio.scss";
@import "container.scss";
@import "checkbox.scss";

96
scss/elements/checkbox.scss Normal file
View File

@@ -0,0 +1,96 @@
.checkbox[type="checkbox"] {
position: relative;
margin-right: 1rem;
vertical-align: middle;
cursor: pointer;
visibility: hidden;
&::before {
position: absolute;
top: -10px;
left: -6px;
width: 2px;
height: 2px;
visibility: visible;
content: "";
background-color: transparent;
// prettier-ignore
box-shadow:
6px 6px 0 $black,
8px 6px 0 $black,
10px 6px 0 $black,
12px 6px 0 $black,
14px 6px 0 $black,
16px 6px 0 $black,
18px 6px 0 $black,
20px 6px 0 $black,
6px 8px 0 $black,
20px 8px 0 $black,
6px 10px 0 $black,
20px 10px 0 $black,
6px 12px 0 $black,
20px 12px 0 $black,
6px 14px 0 $black,
20px 14px 0 $black,
6px 16px 0 $black,
20px 16px 0 $black,
6px 18px 0 $black,
20px 18px 0 $black,
6px 20px 0 $black,
8px 20px 0 $black,
10px 20px 0 $black,
12px 20px 0 $black,
14px 20px 0 $black,
16px 20px 0 $black,
18px 20px 0 $black,
20px 20px 0 $black;
}
&:checked::before {
// prettier-ignore
box-shadow:
6px 6px 0 $black,
8px 6px 0 $black,
10px 6px 0 $black,
12px 6px 0 $black,
14px 6px 0 $black,
16px 6px 0 $black,
18px 6px 0 $black,
22px 6px 0 $black,
24px 6px 0 $black,
6px 8px 0 $black,
20px 8px 0 $black,
22px 8px 0 $black,
24px 8px 0 $black,
6px 10px 0 $black,
18px 10px 0 $black,
20px 10px 0 $black,
6px 12px 0 $black,
8px 12px 0 $black,
16px 12px 0 $black,
18px 12px 0 $black,
6px 14px 0 $black,
8px 14px 0 $black,
10px 14px 0 $black,
14px 14px 0 $black,
16px 14px 0 $black,
20px 14px 0 $black,
6px 16px 0 $black,
10px 16px 0 $black,
12px 16px 0 $black,
14px 16px 0 $black,
20px 16px 0 $black,
6px 18px 0 $black,
12px 18px 0 $black,
20px 18px 0 $black,
6px 20px 0 $black,
8px 20px 0 $black,
10px 20px 0 $black,
12px 20px 0 $black,
14px 20px 0 $black,
16px 20px 0 $black,
18px 20px 0 $black,
20px 20px 0 $black;
}
}

1
scss/elements/radio.scss
View File

@@ -1,5 +1,6 @@
.radios {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;