improved select styles (#130)

src/index.html

@@ -136,6 +136,14 @@
 <section id="main" class="main">
     <div class="main__wrapper">
         <div class="main__content">
+          <div class="subheader">How many wcs in the property?</div>
+          <div class="select-wrapper">
+            <select class="select">
+              <option value="1">One</option>
+              <option value="2">Two</option>
+              <option value="3">Three</option>
+            </select>
+          </div>
             <div class="subheader">How many bedrooms in the property?</div>
             <div class="input-container">
                 <input type="text" class="input input--range" placeholder="2 bedrooms">

src/styles/_components/_inputs.scss

@@ -582,9 +582,10 @@ $checkbox-size: 32px;
     height: $input-height;
     @include height-modifiers();
     font-size: em(18px);
-    color: color('text', 'input');
+    background: color("dropdown", "background");
+    color: color("dropdown");
     padding: 0 46px 0 14px;
-    border: 2px solid color('borders');
+    border: 2px solid color("dropdown", "border");
     border-radius: 4px;
 
     will-change: border;
@@ -593,7 +594,7 @@ $checkbox-size: 32px;
 
     &:-moz-focusring {
         color: transparent;
-        text-shadow: 0 0 0 color('text', 'input');
+        text-shadow: 0 0 0 color("text", "input");
     }
 
     &-wrapper {
@@ -608,7 +609,7 @@ $checkbox-size: 32px;
             width: 8px;
             height: 2px;
             top: 50%;
-            background-color:  color('text', 'input');
+            background-color: color("dropdown");
         }
 
         &:before {
@@ -623,7 +624,7 @@ $checkbox-size: 32px;
     }
 
     &:focus {
-        border: 2px solid color('input', 'border-focus');
+        border: 2px solid color("dropdown", "active");
         outline: none;
     }
 }

src/styles/demo.scss

@@ -305,3 +305,7 @@ body {
 .multi-selector {
     @include multi-selector();
 }
+
+.select {
+  @include select();
+}