mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-04-21 22:52:42 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/nes.css
View File

@ -301,6 +301,7 @@ a {
.radios {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
@ -415,4 +416,28 @@ a {
color: #f7f7f7;
background-color: #333;
}
.checkbox[type="checkbox"] {
position: relative;
margin-right: 1rem;
vertical-align: middle;
cursor: pointer;
visibility: hidden;
}
.checkbox[type="checkbox"]::before {
position: absolute;
top: -10px;
left: -6px;
width: 2px;
height: 2px;
visibility: visible;
content: "";
background-color: transparent;
box-shadow: 6px 6px 0 #333, 8px 6px 0 #333, 10px 6px 0 #333, 12px 6px 0 #333, 14px 6px 0 #333, 16px 6px 0 #333, 18px 6px 0 #333, 20px 6px 0 #333, 6px 8px 0 #333, 20px 8px 0 #333, 6px 10px 0 #333, 20px 10px 0 #333, 6px 12px 0 #333, 20px 12px 0 #333, 6px 14px 0 #333, 20px 14px 0 #333, 6px 16px 0 #333, 20px 16px 0 #333, 6px 18px 0 #333, 20px 18px 0 #333, 6px 20px 0 #333, 8px 20px 0 #333, 10px 20px 0 #333, 12px 20px 0 #333, 14px 20px 0 #333, 16px 20px 0 #333, 18px 20px 0 #333, 20px 20px 0 #333;
}
.checkbox[type="checkbox"]:checked::before {
box-shadow: 6px 6px 0 #333, 8px 6px 0 #333, 10px 6px 0 #333, 12px 6px 0 #333, 14px 6px 0 #333, 16px 6px 0 #333, 18px 6px 0 #333, 22px 6px 0 #333, 24px 6px 0 #333, 6px 8px 0 #333, 20px 8px 0 #333, 22px 8px 0 #333, 24px 8px 0 #333, 6px 10px 0 #333, 18px 10px 0 #333, 20px 10px 0 #333, 6px 12px 0 #333, 8px 12px 0 #333, 16px 12px 0 #333, 18px 12px 0 #333, 6px 14px 0 #333, 8px 14px 0 #333, 10px 14px 0 #333, 14px 14px 0 #333, 16px 14px 0 #333, 20px 14px 0 #333, 6px 16px 0 #333, 10px 16px 0 #333, 12px 16px 0 #333, 14px 16px 0 #333, 20px 16px 0 #333, 6px 18px 0 #333, 12px 18px 0 #333, 20px 18px 0 #333, 6px 20px 0 #333, 8px 20px 0 #333, 10px 20px 0 #333, 12px 20px 0 #333, 14px 20px 0 #333, 16px 20px 0 #333, 18px 20px 0 #333, 20px 20px 0 #333;
}
/*# sourceMappingURL=nes.css.map */

5
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

7
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>NES.css - NES-style CSS Framework</title>
<link href="./css/nes.min.css" rel="stylesheet">
<link href="./css/nes.css" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
<script>
@ -63,6 +63,11 @@
</div>
</section>
<section class="container">
<h2 class="title -is-3">Checkbox</h2>
<label><input class="checkbox" type="checkbox" checked>agree</label>
</section>
<section class="container">
<h2 class="title -is-3">Container</h2>
<h3 class="title -is-4">normal</h3>

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;