Fixed themes styles

Author: lcdsantos

public/themes/flat-red/selectric.scss

@@ -1,14 +1,14 @@
 /*======================================
   Selectric
 ======================================*/
-$main-color: #DDD;
+$main-color     : #DDD;
 $secondary-color: #FFF;
-$bg-color: #00A1D9;
-$text-color: #FFF;
-$height: 40px;
-$spacing: 10px;
-$border-width: 1px;
-$inner-height: $height - ($border-width * 2);
+$bg-color       : #333745;
+$text-color     : #FFF;
+$height         : 40px;
+$spacing        : 10px;
+$border-width   : 1px;
+$inner-height   : $height - ($border-width * 2);
 
 .selectric-wrapper {
   position: relative;
@@ -29,7 +29,7 @@ $inner-height: $height - ($border-width * 2);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin: 0 $inner-height  0$spacing;
+    margin: 0 $inner-height 0 $spacing;
     font-size: 12px;
     line-height: $inner-height;
     color: $text-color;
@@ -65,6 +65,10 @@ $inner-height: $height - ($border-width * 2);
   }
 }
 
+.selectric-focus .selectric {
+  background: darken($bg-color, 10%);
+}
+
 .selectric-hover .selectric {
   background: darken($bg-color, 5%);
 
@@ -101,7 +105,26 @@ $inner-height: $height - ($border-width * 2);
   select {
     position: absolute;
     left: -100%;
-    display: none;
+  }
+
+  &.selectric-is-native {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+
+    select {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      border: none;
+      z-index: 1;
+      box-sizing: border-box;
+      opacity: 0;
+    }
   }
 }
 
@@ -133,7 +156,7 @@ $inner-height: $height - ($border-width * 2);
   position: absolute;
   top: 100%;
   left: 0;
-  background: #F8F8F8;
+  background: $bg-color;
   border: 1px solid darken($main-color, 10%);
   z-index: -1;
   box-shadow: 0 0 10px -6px;
@@ -159,20 +182,23 @@ $inner-height: $height - ($border-width * 2);
 
   li {
     display: block;
-    padding: 8px;
-    border-top: 1px solid #FFF;
-    border-bottom: 1px solid #EEE;
-    color: #666;
+    padding: 10px;
+    color: #FFF;
     cursor: pointer;
 
     &.selected {
-      background: #EFEFEF;
-      color: #444;
+      background: mix($bg-color, #FFF, 80%);
+      color: #FFF;
+    }
+
+    &.highlighted {
+      background: mix($bg-color, #FFF, 90%);
+      color: #FFF;
     }
 
     &:hover {
-      background: #F0F0F0;
-      color: #444;
+      background: mix($bg-color, #FFF, 70%);
+      color: #FFF;
     }
   }
 
@@ -181,7 +207,7 @@ $inner-height: $height - ($border-width * 2);
     opacity: 0.5;
     cursor: default !important;
     background: none !important;
-    color: #666 !important;
+    color: #FFF !important;
     user-select: none;
   }
 
@@ -192,7 +218,7 @@ $inner-height: $height - ($border-width * 2);
       cursor: default;
       user-select: none;
       background: none;
-      color: #444;
+      color: #FFF;
     }
 
     &.disabled li {
@@ -204,4 +230,4 @@ $inner-height: $height - ($border-width * 2);
       padding-left: 25px;
     }
   }
-}
+}