Merge pull request #217 from Divoolej/select-tag

Styles for the <select /> element

docs/select.stories.js

@@ -0,0 +1,26 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Select', module);
+stories.addDecorator(withKnobs);
+
+stories.add('select', () => {
+  const selectedClass = radios('class', {
+    default: '',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+  }, '');
+
+  return `
+    <div class="nes-select ${selectedClass}">
+      <select required>
+        <option value="" disabled selected hidden>Select...</option>
+        <option value="0">To be</option>
+        <option value="1">Not to be</option>
+      </select>
+    </div>
+  `;
+});

index.html

@@ -132,6 +132,39 @@
         <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">

scss/form/_index.scss

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

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;
+      }
+    }
+  }
+}

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-left: 24px;
+}
+
 .balloon.nes-container .nes-balloon {
   max-width: 600px;
   margin: 2rem 2rem;