🎉 radiosを追加

css/nes.css

@@ -363,6 +363,15 @@ button,
   -webkit-appearance: none;
 }
 
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
 .btn {
   position: relative;
   display: inline-block;
@@ -543,4 +552,26 @@ button,
   color: #fff;
   background-color: #212529;
 }
+
+.radio {
+  margin-right: 20px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+}
+
+.radio + span {
+  position: relative;
+}
+
+.radio:checked + span::before {
+  position: absolute;
+  top: -2px;
+  left: -20px;
+  content: "";
+  width: 2px;
+  height: 2px;
+  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);
+}
 /*# sourceMappingURL=nes.css.map */

index.html

@@ -7,10 +7,7 @@
     <meta name="description" content="NES.css is NES-style CSSFramework." />
     <meta name="keywords" content="html5,css,framework,sass,NES,8bit" />
     <meta name="author" content="© 2018 B.C.Rikko" />
-    <link
-      rel="shortcut icon"
-      href="https://bcrikko.github.io/NES.css/favicon.ico"
-    />
+    <link rel="shortcut icon" href="https://bcrikko.github.io/NES.css/favicon.ico" />
 
     <title>NES.css - NES-style CSS Framework</title>
 
@@ -30,10 +27,7 @@
       content="https://user-images.githubusercontent.com/5305599/45937791-a5db2100-bffe-11e8-8bfd-fc3f534b28aa.gif"
     />
 
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"
-    ></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
@@ -63,9 +57,12 @@
     </div>
     <div class="container is-dark with-title">
       <label class="title">Container.is-dark</label>
-      <p style="color: white;">
-        Good morning. Thou hast had a good night's sleep I hope.
-      </p>
+      <p style="color: white;">Good morning. Thou hast had a good night's sleep I hope.</p>
+    </div>
+
+    <div>
+      <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>
   </body>
 </html>

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "nes.css",
-  "version": "0.0.1",
+  "name": "NES.css",
+  "version": "0.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -58,6 +58,9 @@
       "git add"
     ]
   },
+  "prettier": {
+    "printWidth": 100
+  },
   "stylelint": {
     "plugins": [
       "stylelint-scss"

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 + ";");
+}