Merge branch 'develop' into add-badges-component

scss/form/_index.scss

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

scss/form/inputs.scss

@@ -58,7 +58,7 @@
 }
 
 @media screen and (max-width: 768px) {
-  .field.is-inline {
+  .nes-field.is-inline {
     display: block;
 
     > label {
@@ -66,7 +66,7 @@
       text-align: left;
     }
 
-    .input {
+    .nes-input {
       max-width: 100%;
     }
   }

scss/form/selects.scss

@@ -0,0 +1,64 @@
+.nes-select {
+  // prettier-ignore
+  $dropdown: (
+    (1,1,1,1,1,1,1),
+    (1,1,1,1,1,1,1),
+    (0,1,1,1,1,1,0),
+    (0,1,1,1,1,1,0),
+    (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%;
+  margin: 4px;
+
+  select {
+    width: 100%;
+    padding: 0.5rem 2.5rem 0.5rem 1rem;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: $cursor-click-url, pointer;
+    border: none;
+    border-radius: 0;
+    outline-color: map-get($default-colors, "hover");
+    box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
+
+    &:invalid {
+      color: map-get($disabled-colors, shadow);
+    }
+  }
+
+  &::after {
+    @include pixelize($dropdown, $colors);
+
+    position: absolute;
+    top: calc(50% - 11px);
+    right: 36px;
+    font-size: 3px;
+    pointer-events: none;
+    content: "";
+  }
+
+  // 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");
+
+  @each $type in $types {
+    &.is-#{nth($type, 1)} {
+      $color: nth($type, 2);
+
+      &::after {
+        color: $color;
+      }
+
+      select {
+        outline-color: nth($type, 3);
+        box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
+      }
+    }
+  }
+}