From b8686b6af5890a477d16cf6862e45e8550cf13bc Mon Sep 17 00:00:00 2001
From: Wojciech Olejnik <divoolej@gmail.com>
Date: Sat, 22 Dec 2018 20:31:29 +0100
Subject: [PATCH] refactor(select): add @BcRikko's suggestions for the select
 component

Change select.scss to selects.scss, add margin to .nes-select, use different color variables,
refactor handling of different select states
---
 scss/form/_index.scss                   |  2 +-
 scss/form/{select.scss => selects.scss} | 52 +++++++++----------------
 style.css                               |  2 +-
 3 files changed, 20 insertions(+), 36 deletions(-)
 rename scss/form/{select.scss => selects.scss} (51%)

diff --git a/scss/form/_index.scss b/scss/form/_index.scss
index 70c4e1f..0d50df3 100644
--- a/scss/form/_index.scss
+++ b/scss/form/_index.scss
@@ -1,4 +1,4 @@
 @charset "utf-8";
 
 @import "inputs.scss";
-@import "select.scss";
+@import "selects.scss";
diff --git a/scss/form/select.scss b/scss/form/selects.scss
similarity index 51%
rename from scss/form/select.scss
rename to scss/form/selects.scss
index a0a241f..69dd0dc 100644
--- a/scss/form/select.scss
+++ b/scss/form/selects.scss
@@ -12,6 +12,7 @@
 
   position: relative;
   width: 100%;
+  margin: 4px;
 
   select {
     width: 100%;
@@ -25,7 +26,7 @@
     box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
 
     &:invalid {
-      color: $color-00;
+      color: map-get($disabled-colors, shadow);
     }
   }
 
@@ -36,45 +37,28 @@
     top: calc(50% - 11px);
     right: 36px;
     font-size: 3px;
+    pointer-events: none;
     content: "";
   }
 
-  &.is-success {
-    $color: map-get($success-colors, "normal");
+  // prettier-ignore
+  $types:
+    "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
+    "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
+    "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
 
-    &::after {
-      color: $color;
-    }
+  @each $type in $types {
+    &.is-#{nth($type, 1)} {
+      $color: nth($type, 2);
 
-    select {
-      outline-color: map-get($success-colors, "hover");
-      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
-    }
-  }
+      &::after {
+        color: $color;
+      }
 
-  &.is-warning {
-    $color: map-get($warning-colors, "normal");
-
-    &::after {
-      color: $color;
-    }
-
-    select {
-      outline-color: map-get($warning-colors, "hover");
-      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
-    }
-  }
-
-  &.is-error {
-    $color: map-get($error-colors, "normal");
-
-    &::after {
-      color: $color;
-    }
-
-    select {
-      outline-color: map-get($error-colors, "hover");
-      box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+      select {
+        outline-color: nth($type, 3);
+        box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+      }
     }
   }
 }
diff --git a/style.css b/style.css
index 11d97d1..0d4f80b 100644
--- a/style.css
+++ b/style.css
@@ -27,7 +27,7 @@ div.containers > .nes-container {
 }
 
 .nes-select + .nes-select {
-  margin: 0 0 0 24px;
+  margin-left: 24px;
 }
 
 .balloon.nes-container .nes-balloon {