🎉 radiosを追加

scss/elements/_index.scss

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

scss/elements/radios.scss

@@ -0,0 +1,32 @@
+.radio {
+  // prettier-ignore
+  $radio: (
+    (1,1,0,0,0,0),
+    (1,1,1,1,0,0),
+    (1,1,1,1,1,0),
+    (1,1,1,1,1,1),
+    (1,1,1,1,1,0),
+    (1,1,1,1,0,0),
+    (1,1,0,0,0,0),
+  );
+  $colors: ($base-color);
+
+  margin-right: 20px;
+  -webkit-appearance: none;
+  appearance: none;
+
+  & + span {
+    position: relative;
+  }
+
+  &:checked + span::before {
+    position: absolute;
+    top: -2px;
+    left: -20px;
+    content: "";
+
+    @include pixelize($radio, $colors, 2px);
+
+    animation: blink 1s infinite steps(1);
+  }
+}

scss/nes.scss

@@ -5,4 +5,5 @@
 */
 
 @import "base/_index.scss";
+@import "utilities/_index.scss";
 @import "elements/_index.scss";

scss/utilities/_index.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+@import "animations.scss";
+@import "icon-mixin.scss";

scss/utilities/animations.scss

@@ -0,0 +1,9 @@
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+}

scss/utilities/icon-mixin.scss

@@ -0,0 +1,24 @@
+@mixin pixelize($matrix, $colors, $size) {
+  $ret: "";
+
+  @for $i from 1 through length($matrix) {
+    $row: nth($matrix, $i);
+
+    @for $j from 1 through length($row) {
+      $dot: nth($row, $j);
+
+      @if $dot != 0 {
+        @if $ret != "" {
+          $ret: $ret + ",";
+        }
+
+        $color: nth($colors, $dot);
+        $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
+      }
+    }
+  }
+
+  width: $size;
+  height: $size;
+  box-shadow: unquote($ret + ";");
+}