🎉 checkboxesを追加

css/nes.css

@@ -574,4 +574,36 @@ button,
   box-shadow: 2px 2px #212529,4px 2px #212529,2px 4px #212529,4px 4px #212529,6px 4px #212529,8px 4px #212529,2px 6px #212529,4px 6px #212529,6px 6px #212529,8px 6px #212529,10px 6px #212529,2px 8px #212529,4px 8px #212529,6px 8px #212529,8px 8px #212529,10px 8px #212529,12px 8px #212529,2px 10px #212529,4px 10px #212529,6px 10px #212529,8px 10px #212529,10px 10px #212529,2px 12px #212529,4px 12px #212529,6px 12px #212529,8px 12px #212529,2px 14px #212529,4px 14px #212529;;
   animation: blink 1s infinite steps(1);
 }
+
+.checkbox {
+  margin-left: 28px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+}
+
+.checkbox + span {
+  position: relative;
+}
+
+.checkbox + span::before,
+.checkbox:checked + span::before {
+  position: absolute;
+  top: -3px;
+  left: -28px;
+  content: "";
+}
+
+.checkbox + span::before {
+  /* stylelint-disable-line no-descending-specificity */
+  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,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: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;;
+}
 /*# sourceMappingURL=nes.css.map */

index.html

@@ -64,5 +64,9 @@
       <label><input type="radio" class="radio" name="answer" checked /><span>Yes</span></label>
       <label><input type="radio" class="radio" name="answer" /><span>No</span></label>
     </div>
+
+    <div>
+      <label><input type="checkbox" class="checkbox" checked /><span>Enable</span></label>
+    </div>
   </body>
 </html>

scss/elements/_index.scss

@@ -3,3 +3,4 @@
 @import "buttons.scss";
 @import "containers.scss";
 @import "radios.scss";
+@import "checkboxes.scss";

scss/elements/checkboxes.scss

@@ -0,0 +1,51 @@
+.checkbox {
+  // prettier-ignore
+  $checkbox: (
+    (1,1,1,1,1,1,1,1,0,0),
+    (1,0,0,0,0,0,0,1,0,0),
+    (1,0,0,0,0,0,0,1,0,0),
+    (1,0,0,0,0,0,0,1,0,0),
+    (1,0,0,0,0,0,0,1,0,0),
+    (1,0,0,0,0,0,0,1,0,0),
+    (1,0,0,0,0,0,0,1,0,0),
+    (1,1,1,1,1,1,1,1,0,0),
+  );
+
+  // prettier-ignore
+  $checkbox-checked: (
+    (1,1,1,1,1,1,1,0,1,1),
+    (1,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),
+    (1,1,1,0,1,1,0,1,0,0),
+    (1,0,1,1,1,0,0,1,0,0),
+    (1,0,0,1,0,0,0,1,0,0),
+    (1,1,1,1,1,1,1,1,0,0)
+  );
+  $colors: ($base-color);
+
+  margin-left: 28px;
+  -webkit-appearance: none;
+  appearance: none;
+
+  & + span {
+    position: relative;
+  }
+
+  & + span::before,
+  &:checked + span::before {
+    position: absolute;
+    top: -3px;
+    left: -28px;
+    content: "";
+  }
+
+  // prettier-ignore
+  & + span::before { /* stylelint-disable-line no-descending-specificity */
+    @include pixelize($checkbox, $colors, 2px);
+  }
+
+  &:checked + span::before {
+    @include pixelize($checkbox-checked, $colors, 2px);
+  }
+}