feat(inline-select): Add inline-select component (#98)

src/components/select/_select.scss

@@ -23,7 +23,6 @@
     display: block;
     width: 100%;
     padding: .75rem 2.75rem .75rem 1rem;
-    height: rem(40px);
     color: $text-01;
     background-color: $field-01;
     border: none;
@@ -72,3 +71,25 @@
     }
   }
 }
+
+.bx--select--inline {
+  display: flex;
+  align-items: center;
+
+  .bx--label {
+    white-space: nowrap;
+    margin: 0 .5rem 0 0;
+    font-weight: 400;
+  }
+
+  .bx--select-input {
+    background-color: transparent;
+    color: $brand-01;
+    font-weight: 600;
+
+    &:disabled ~ * {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+  }
+}

src/components/select/inline-select.html

@@ -0,0 +1,20 @@
+<div class="bx--form-item">
+  <div class="bx--select bx--select--inline">
+    <label for="select-id" class="bx--label">Select label</label>
+    <select id="select-id" class="bx--select-input">
+      <option class="bx--select-option" disabled selected hidden>Pick an option</option>
+      <option class="bx--select-option" value="solong">A much longer option that is worth having around to check how text flows</option>
+      <optgroup class="bx--select-optgroup" label="Category 1">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+      <optgroup class="bx--select-optgroup" label="Category 2">
+        <option class="bx--select-option" value="option1">Option 1</option>
+        <option class="bx--select-option" value="option2">Option 2</option>
+      </optgroup>
+    </select>
+    <svg class="bx--select__arrow">
+      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--caret--down"></use>
+    </svg>
+  </div>
+</div>