Select options hever/selected color settings

samuelmc · Oct 5, 2016 · 13c3c10 · 13c3c10
1 parent 05e4ae9
commit 13c3c10
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/dist/css/foundation-select.css b/dist/css/foundation-select.css
@@ -89,7 +89,7 @@
           .select-wrapper .select-container .select-dropdown > div ul > li, .select-wrapper .select-container .multiple-select > div ul > li {
             display: block; }
           .select-wrapper .select-container .select-dropdown > div ul li a, .select-wrapper .select-container .multiple-select > div ul li a {
-            color: black;
+            color: #0a0a0a;
             padding: 0.5rem;
             font-size: 1rem;
             line-height: 1.5;

diff --git a/dist/css/foundation-select.min.css b/dist/css/foundation-select.min.css
diff --git a/src/scss/plugin/_foundation-select.scss b/src/scss/plugin/_foundation-select.scss
@@ -9,6 +9,8 @@ $select-border: $input-border !default;
 $select-shadow: $input-shadow !default;
 $select-border-focus: $input-border-focus !default;
 $select-shadow-focus: $input-shadow-focus !default;
+$select-option-hover-color: $select-color !default;
+$select-option-selected-color: $select-option-hover-color !default;
 $select-option-hover-background: rgba($secondary-color, .15) !default;
 $select-option-selected-background: $select-option-hover-background !default;
 $select-dropdown-height: rem-calc(300) !default;
@@ -44,19 +46,19 @@ $select-multiple-size-max: 12 !default;
       @include menu-direction(vertical);
       li {
         a {
-          color: darken($input-color, 16.5%);
+          color: $select-color;
           padding: $form-spacing / 2;
           font-size: $input-font-size;
           line-height: $global-lineheight;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           &:hover, &:focus{
-            color: $input-color;
+            color: $select-option-hover-color;
             background: $select-option-hover-background;
           }
           &.selected {
-            color: $input-color;
+            color: $select-option-selected-color;
             background: $select-option-selected-background;
           }
         }