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

css/nes.css

@@ -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 */

index.html

@@ -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>

scss/elements/_index.scss

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

scss/elements/checkbox.scss

@@ -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;
+  }
+}

scss/elements/radio.scss

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