🎉 inputsを追加

css/nes.css

@@ -698,6 +698,51 @@ button,
   box-shadow: -4px 0 #212529, 4px 0 #212529, 4px 4px #fff, 0 4px #212529, 8px 4px #212529, 4px 8px #212529, 8px 8px #212529;
 }
 
+.input {
+  padding: 0.5rem 1rem;
+  margin: 4px;
+  border: none;
+  box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529;
+}
+
+.input.is-success {
+  box-shadow: 0 4px #209cee, 0 -4px #209cee, 4px 0 #209cee, -4px 0 #209cee;
+}
+
+.input.is-warning {
+  box-shadow: 0 4px #f7d51d, 0 -4px #f7d51d, 4px 0 #f7d51d, -4px 0 #f7d51d;
+}
+
+.input.is-error {
+  box-shadow: 0 4px #e76e55, 0 -4px #e76e55, 4px 0 #e76e55, -4px 0 #e76e55;
+}
+
+.field > label {
+  display: block;
+}
+
+.field .input {
+  display: block;
+}
+
+.field.is-inline {
+  display: flex;
+  align-items: center;
+}
+
+.field.is-inline > label {
+  flex-basis: 0;
+  flex-grow: 1;
+  margin: 0;
+  margin-right: 1.5rem;
+  text-align: right;
+}
+
+.field.is-inline .input {
+  flex-basis: 0;
+  flex-grow: 5;
+}
+
 .icon {
   position: relative;
   display: inline-block;

index.html

@@ -78,6 +78,23 @@
       </label>
     </div>
 
+    <div class="field">
+      <label>Your name</label>
+      <input type="text" class="input">
+    </div>
+    <div class="field is-inline">
+      <label>.input.is-success</label>
+      <input type="text" class="input is-success" placeholder="NES.css">
+    </div>
+    <div class="field is-inline">
+      <label>.input.is-warning</label>
+      <input type="text" class="input is-warning" placeholder="8bit.css">
+    </div>
+    <div class="field is-inline">
+      <label>.input.is-error</label>
+      <input type="text" class="input is-error" placeholder="awesome.css">
+    </div>
+
     <div class="balloon from-left">
       <p>Hello NES.css</p>
     </div>

scss/form/_index.scss

@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+@import "inputs.scss";

scss/form/inputs.scss

@@ -0,0 +1,52 @@
+.input {
+  @mixin border-style($color) {
+    // prettier-ignore
+    box-shadow:
+    0 4px $color,
+    0 -4px $color,
+    4px 0 $color,
+    -4px 0 $color;
+  }
+
+  padding: 0.5rem 1rem;
+  margin: 4px;
+  border: none;
+  @include border-style($base-color);
+
+  &.is-success {
+    @include border-style(#209cee);
+  }
+  &.is-warning {
+    @include border-style(#f7d51d);
+  }
+  &.is-error {
+    @include border-style(#e76e55);
+  }
+}
+
+.field {
+  > label {
+    display: block;
+  }
+  .input {
+    display: block;
+  }
+
+  &.is-inline {
+    display: flex;
+    align-items: center;
+
+    > label {
+      flex-basis: 0;
+      flex-grow: 1;
+      margin: 0;
+      margin-right: 1.5rem;
+      text-align: right;
+    }
+
+    .input {
+      flex-basis: 0;
+      flex-grow: 5;
+    }
+  }
+}

scss/nes.scss

@@ -7,5 +7,6 @@
 @import "base/_index.scss";
 @import "utilities/_index.scss";
 @import "elements/_index.scss";
+@import "form/_index.scss";
 @import "icons/_index.scss";
 @import "pixel-arts/_index.scss";