feat(component): implement select states, add examples to the demo page

re #152
nostalgic-css · Dec 20, 2018 · 13d4d7e · 13d4d7e
1 parent 6713344
commit 13d4d7e
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <title>NES.css - NES-style CSS Framework</title>
 
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-    <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+    <link href="./css/nes.min.css" rel="stylesheet" />
     <link href="./style.css" rel="stylesheet" />
 
     <meta property="og:type" content="website" />
@@ -132,6 +132,39 @@ <h2 class="title">Form</h2>
         <label for="textarea_field">Textarea</label>
         <textarea id="textarea_field" class="nes-textarea"></textarea>
       </div>
+      <div class="field">
+        <label for="selects">Select</label>
+        <div id="selects" class="selects">
+          <div class="nes-select">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+          <div class="nes-select is-success">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+          <div class="nes-select is-warning">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+          <div class="nes-select is-error">
+            <select required>
+              <option value="" disabled selected hidden>Select...</option>
+              <option value="0">To be</option>
+              <option value="1">Not to be</option>
+            </select>
+          </div>
+        </div>
+      </div>
     </section>
 
     <section class="balloon nes-container with-title">

diff --git a/scss/form/select.scss b/scss/form/select.scss
@@ -8,27 +8,28 @@
     (0,0,1,1,1,0,0),
     (0,0,0,1,0,0,0),
   );
-  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   position: relative;
   width: 100%;
 
   select {
     width: 100%;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 2.5rem 0.5rem 1rem;
     -webkit-appearance: none;
     appearance: none;
     cursor: $cursor-click-url, pointer;
     border: none;
     border-radius: 0;
-    box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529;
+    box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
 
     &:invalid {
       color: $color-00;
     }
   }
 
   &::after {
+    $colors: ($base-color, map-get($default-colors, "shadow"));
+
     @include pixelize($dropdown, $colors);
 
     position: absolute;
@@ -40,4 +41,46 @@
     content: "";
     transform: scale(1.5);
   }
+
+  &.is-success {
+    $color: map-get($success-colors, "normal");
+
+    &::after {
+      $colors: ($color, map-get($default-colors, "shadow"));
+
+      @include pixelize($dropdown, $colors);
+    }
+
+    select {
+      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+    }
+  }
+
+  &.is-warning {
+    $color: map-get($warning-colors, "normal");
+
+    &::after {
+      $colors: ($color, map-get($default-colors, "shadow"));
+
+      @include pixelize($dropdown, $colors);
+    }
+
+    select {
+      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+    }
+  }
+
+  &.is-error {
+    $color: map-get($error-colors, "normal");
+
+    &::after {
+      $colors: ($color, map-get($default-colors, "shadow"));
+
+      @include pixelize($dropdown, $colors);
+    }
+
+    select {
+      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+    }
+  }
 }
diff --git a/style.css b/style.css
@@ -16,6 +16,20 @@ div.containers > .nes-container {
   max-width: 400px;
 }
 
+.selects {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 4px;
+}
+
+.selects .nes-select {
+  display: inline-flex;
+}
+
+.nes-select + .nes-select {
+  margin: 0 0 0 24px;
+}
+
 .balloon.nes-container .nes-balloon {
   max-width: 600px;
   margin: 2rem 2rem;