👍 ラジオボタンを追加

css/nes.css

@@ -108,6 +108,15 @@ a {
   text-decoration: none;
 }
 
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
 .title {
   font-weight: 700;
   word-break: break-word;
@@ -290,6 +299,51 @@ a {
   font-size: 2em;
 }
 
+.radios {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.radios:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.radios > label {
+  display: flex;
+  cursor: pointer;
+}
+
+.radios > label:not(:last-child) {
+  margin-right: 1rem;
+}
+
+.radios > label > .radio[type="radio"] {
+  margin-right: 0.3rem;
+  vertical-align: middle;
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.radios > label > .radio[type="radio"]::before {
+  visibility: visible;
+  content: "";
+  animation: blink 1s infinite steps(1);
+}
+
+.radios > label > .radio[type="radio"]:checked::before {
+  content: "\203A";
+}
+
+.radios.-columns {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.radios.-columns > label:not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+
 .container {
   position: relative;
   padding: 1.5rem 2rem;
@@ -361,5 +415,4 @@ a {
   color: #f7f7f7;
   background-color: #333;
 }
-
 /*# sourceMappingURL=nes.css.map */

css/nes.min.css

@@ -1,3 +1,3 @@
 /*!
 * NES.css v0.0.1(alpha)
-*//*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}audio,embed,iframe,img,object,video{max-width:100%;height:auto}iframe{border:0}table{border-spacing:0;border-collapse:collapse}td,th{padding:0;text-align:left}html{font-size:16px;color:#333;background-color:#f7f7f7}body,button,code,input,pre,select,textarea{font-family:"Press Start 2P";font-size:16px}a{color:#333;text-decoration:none}.title{font-weight:700;word-break:break-word}.title:not(:last-child){margin-bottom:1.5rem}.title.-h1{font-size:3rem}.title.-h2{font-size:2.5rem}.title.-h3{font-size:2rem}.title.-h4{font-size:1.5rem}.title.-h5{font-size:1.25rem}.title.-h6{font-size:1rem}.subtitle{font-weight:400}.subtitle:not(:last-child){margin-bottom:1.5rem}.subtitle.-h1{font-size:3rem}.subtitle.-h2{font-size:2.5rem}.subtitle.-h3{font-size:2rem}.subtitle.-h4{font-size:1.5rem}.subtitle.-h5{font-size:1.25rem}.subtitle.-h6{font-size:1rem}.button{position:relative;display:inline-block;padding:10px 12px;margin:3px;vertical-align:middle;cursor:pointer;background-color:#f7f7f7;outline:0;box-shadow:inset -4px -4px 0 0 #adafbc}.button:hover{background-color:#e7e7e7;box-shadow:inset -6px -6px 0 0 #adafbc}.button:active{box-shadow:inset 4px 4px 0 0 #adafbc}.button::after,.button::before{position:absolute;box-sizing:content-box;width:100%;height:100%;content:"";border-color:#333;border-style:solid}.button::before{top:-3px;left:0;border-right:6px;border-left:6px}.button::after{top:0;left:-3px;border-top:6px;border-bottom:6px}.button.-primary{color:#f7f7f7;background-color:#92cc41;box-shadow:inset -4px -4px 0 0 #4aa52e}.button.-primary:hover{background-color:#76c442;box-shadow:inset -6px -6px 0 0 #4aa52e}.button.-primary:active{box-shadow:inset 4px 4px 0 0 #4aa52e}.button.-success{color:#f7f7f7;background-color:#209cee;box-shadow:inset -4px -4px 0 0 #006bb3}.button.-success:hover{background-color:#108de0;box-shadow:inset -6px -6px 0 0 #006bb3}.button.-success:active{box-shadow:inset 4px 4px 0 0 #006bb3}.button.-warning{color:#f7f7f7;background-color:#f7d51d;box-shadow:inset -4px -4px 0 0 #e59400}.button.-warning:hover{background-color:#f2c409;box-shadow:inset -6px -6px 0 0 #e59400}.button.-warning:active{box-shadow:inset 4px 4px 0 0 #e59400}.button.-error{color:#f7f7f7;background-color:#e76e55;box-shadow:inset -4px -4px 0 0 #8c2022}.button.-error:hover{background-color:#ce372b;box-shadow:inset -6px -6px 0 0 #8c2022}.button.-error:active{box-shadow:inset 4px 4px 0 0 #8c2022}.button.-small{font-size:.6em}.button.-medium{font-size:1em}.button.-large{font-size:2em}.container{position:relative;padding:20px 30px}.container::after,.container::before{position:absolute;content:"";border-radius:4px}.container::before{top:0;right:0;bottom:0;left:0;border-radius:4px}.container::after{top:2px;right:2px;bottom:2px;left:2px;border:4px solid;border-radius:4px}
+*//*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}audio,embed,iframe,img,object,video{max-width:100%;height:auto}iframe{border:0}table{border-spacing:0;border-collapse:collapse}td,th{padding:0;text-align:left}html{font-size:16px;color:#333;background-color:#f7f7f7}body,button,code,input,pre,select,textarea{font-family:"Press Start 2P";font-size:16px}a{color:#333;text-decoration:none}@keyframes blink{0%{opacity:1}50%{opacity:0}}.title{font-weight:700;word-break:break-word}.title:not(:last-child){margin-bottom:1rem}.title.-is-1{font-size:48px}.title.-is-2{font-size:40px}.title.-is-3{font-size:32px}.title.-is-4{font-size:24px}.title.-is-5{font-size:20px}.title.-is-6{font-size:16px}.subtitle{font-weight:400}.subtitle:not(:last-child){margin-bottom:1.5rem}.subtitle.-is-1{font-size:48px}.subtitle.-is-2{font-size:40px}.subtitle.-is-3{font-size:32px}.subtitle.-is-4{font-size:24px}.subtitle.-is-5{font-size:20px}.subtitle.-is-6{font-size:16px}.button{position:relative;display:inline-block;padding:10px 12px;margin:3px;vertical-align:middle;cursor:pointer;background-color:#f7f7f7;outline:0;box-shadow:inset -4px -4px 0 0 #adafbc}.button:hover{background-color:#e7e7e7;box-shadow:inset -6px -6px 0 0 #adafbc}.button:active{box-shadow:inset 4px 4px 0 0 #adafbc}.button::after,.button::before{position:absolute;box-sizing:content-box;width:100%;height:100%;content:"";border-color:#333;border-style:solid}.button::before{top:-3px;left:0;border-right:6px;border-left:6px}.button::after{top:0;left:-3px;border-top:6px;border-bottom:6px}.button.-primary{color:#f7f7f7;background-color:#92cc41;box-shadow:inset -4px -4px 0 0 #4aa52e}.button.-primary:hover{background-color:#76c442;box-shadow:inset -6px -6px 0 0 #4aa52e}.button.-primary:active{box-shadow:inset 4px 4px 0 0 #4aa52e}.button.-success{color:#f7f7f7;background-color:#209cee;box-shadow:inset -4px -4px 0 0 #006bb3}.button.-success:hover{background-color:#108de0;box-shadow:inset -6px -6px 0 0 #006bb3}.button.-success:active{box-shadow:inset 4px 4px 0 0 #006bb3}.button.-warning{color:#f7f7f7;background-color:#f7d51d;box-shadow:inset -4px -4px 0 0 #e59400}.button.-warning:hover{background-color:#f2c409;box-shadow:inset -6px -6px 0 0 #e59400}.button.-warning:active{box-shadow:inset 4px 4px 0 0 #e59400}.button.-error{color:#f7f7f7;background-color:#e76e55;box-shadow:inset -4px -4px 0 0 #8c2022}.button.-error:hover{background-color:#ce372b;box-shadow:inset -6px -6px 0 0 #8c2022}.button.-error:active{box-shadow:inset 4px 4px 0 0 #8c2022}.button.-small{font-size:.6em}.button.-medium{font-size:1em}.button.-large{font-size:2em}.radios{display:flex;align-items:center;justify-content:flex-start}.radios:not(:last-child){margin-bottom:1.5rem}.radios>label{display:flex;cursor:pointer}.radios>label:not(:last-child){margin-right:1rem}.radios>label>.radio[type=radio]{margin-right:.3rem;vertical-align:middle;cursor:pointer;visibility:hidden}.radios>label>.radio[type=radio]::before{visibility:visible;content:"";animation:blink 1s infinite steps(1)}.radios>label>.radio[type=radio]:checked::before{content:"\203A"}.radios.-columns{flex-direction:column;align-items:flex-start}.radios.-columns>label:not(:last-child){margin-bottom:.5rem}.container{position:relative;padding:1.5rem 2rem}.container::after,.container::before{position:absolute;content:"";border-radius:4px}.container::before{top:0;right:0;bottom:0;left:0;z-index:-2;background-color:#f7f7f7;border-radius:4px}.container::after{top:2px;right:2px;bottom:2px;left:2px;z-index:-1;border:4px solid;border-radius:4px}.container:not(:last-child){margin-bottom:1.5rem}.container.-with-title{display:flex;justify-content:flex-start;padding-top:2rem}.container.-with-title.-center{justify-content:center}.container.-with-title.-right{justify-content:flex-end}.container.-with-title>.title{position:absolute;top:0;padding:0 .5rem;margin:0;font-size:16px;font-weight:400;background-color:#f7f7f7}.container.-dark{color:#f7f7f7}.container.-dark::before{background-color:#333}.container.-dark>.title{color:#f7f7f7;background-color:#333}

docs/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="https://rawgit.com/BcRikko/NES.css/master/css/nes.css" rel="stylesheet">
+  <link href="https://rawgit.com/BcRikko/NES.css/master/css/nes.min.css" rel="stylesheet">
   <link href="./style.css" rel="stylesheet">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41640153-4"></script>
   <script>
@@ -44,6 +44,25 @@
       <a class="button -warning">warning</a>
       <a class="button -error">error</a>
     </section>
+
+    <section class="container">
+      <h2 class="title -is-3">Radios</h2>
+      <h3 class="title -is-4">rows</h3>
+      <div class="radios">
+        <label><input class="radio" type="radio" name="radios1" checked>FIGHT</label>
+        <label><input class="radio" type="radio" name="radios1">SPELL</label>
+        <label><input class="radio" type="radio" name="radios1">ITEM</label>
+        <label><input class="radio" type="radio" name="radios1">RUN</label>
+      </div>
+      <h3 class="title -is-4">columns</h3>
+      <div class="radios -columns">
+        <label><input class="radio" type="radio" name="radios2" checked>FIGHT</label>
+        <label><input class="radio" type="radio" name="radios2">SPELL</label>
+        <label><input class="radio" type="radio" name="radios2">ITEM</label>
+        <label><input class="radio" type="radio" name="radios2">RUN</label>
+      </div>
+    </section>
+
     <section class="container">
       <h2 class="title -is-3">Container</h2>
       <h3 class="title -is-4">normal</h3>

scss/base/_index.scss

@@ -3,3 +3,4 @@
 @import "reset.scss";
 @import "variables.scss";
 @import "generic.scss";
+@import "animation.scss";

scss/base/animation.scss

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

scss/elements/_index.scss

@@ -2,4 +2,5 @@
 
 @import "title.scss";
 @import "button.scss";
+@import "radio.scss";
 @import "container.scss";

scss/elements/radio.scss

@@ -0,0 +1,44 @@
+.radios {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
+  > label {
+    display: flex;
+    cursor: pointer;
+
+    &:not(:last-child) {
+      margin-right: 1rem;
+    }
+
+    > .radio[type="radio"] {
+      margin-right: 0.3rem;
+      vertical-align: middle;
+      cursor: pointer;
+      visibility: hidden;
+
+      &::before {
+        visibility: visible;
+        content: "";
+        animation: blink 1s infinite steps(1);
+      }
+
+      &:checked::before {
+        content: "\203A";
+      }
+    }
+  }
+
+  &.-columns {
+    flex-direction: column;
+    align-items: flex-start;
+
+    > label:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+  }
+}