added variables for shadow styles

JedWatson · Apr 10, 2017 · 9150107 · 9150107
1 parent a0e5855
commit 9150107
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/less/control.less b/less/control.less
@@ -12,7 +12,7 @@
 // "classic" focused styles: maintain for legacy
 .Select-focus-state-classic() {
 	border-color: @select-input-border-focus lighten(@select-input-border-focus, 5%) lighten(@select-input-border-focus, 5%);
-	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@select-input-border-focus,50%);
+	box-shadow: @select-input-box-shadow-focus;
 }
 
 // base
@@ -61,7 +61,7 @@
 	width: 100%;
 
 	&:hover {
-		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+		box-shadow: @select-input-hover-box-shadow;
 	}
 
 	.Select-input:focus {

diff --git a/less/menu.less b/less/menu.less
@@ -14,7 +14,7 @@
 	background-color: @select-input-bg;
 	border: 1px solid @select-input-border-color;
 	border-top-color: mix(@select-input-bg, @select-input-border-color, 50%);
-	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+	box-shadow: @select-menu-box-shadow;
 	box-sizing: border-box;
 	margin-top: -1px;
 	max-height: @select-menu-max-height;

diff --git a/less/select.less b/less/select.less
@@ -18,19 +18,22 @@
 @select-input-border-color:         #ccc;
 @select-input-border-radius:        4px;
 @select-input-border-focus:         @select-primary-color;
+@select-input-box-shadow-focus:     inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade(@select-input-border-focus, 50%);
 @select-input-border-width:         1px;
 @select-input-height:               36px;
 @select-input-internal-height:      (@select-input-height - (@select-input-border-width * 2));
 @select-input-placeholder:          #aaa;
 @select-text-color:                 #333;
 @select-link-hover-color:           @select-input-border-focus;
+@select-input-hover-box-shadow:     0 1px 0 rgba(0, 0, 0, 0.06);
 
 @select-padding-vertical:           8px;
 @select-padding-horizontal:         10px;
 
 // menu options
 @select-menu-zindex:                1;
 @select-menu-max-height:            200px;
+@select-menu-box-shadow:            @select-input-hover-box-shadow;
 
 @select-option-color:               lighten(@select-text-color, 20%);
 @select-option-bg:                  @select-input-bg;

diff --git a/scss/control.scss b/scss/control.scss
@@ -48,7 +48,7 @@
 	width: 100%;
 
 	&:hover {
-		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+		box-shadow: $select-input-hover-box-shadow;
 	}
 
 	.Select-input:focus {
@@ -83,7 +83,7 @@
 
 .is-focused:not(.is-open) > .Select-control {
 	border-color: $select-input-border-focus lighten($select-input-border-focus, 5%) lighten($select-input-border-focus, 5%);
-	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus,50%);
+	box-shadow: $select-input-box-shadow-focus;
 }
 
 // placeholder

diff --git a/scss/menu.scss b/scss/menu.scss
@@ -14,7 +14,7 @@
 	background-color: $select-input-bg;
 	border: 1px solid $select-input-border-color;
 	border-top-color: mix($select-input-bg, $select-input-border-color, 50%);
-	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+	box-shadow: $select-menu-box-shadow;
 	box-sizing: border-box;
 	margin-top: -1px;
 	max-height: $select-menu-max-height;

diff --git a/scss/select.scss b/scss/select.scss
@@ -15,19 +15,22 @@ $select-input-bg-disabled:          #f9f9f9 !default;
 $select-input-border-color:         #ccc !default;
 $select-input-border-radius:        4px !default;
 $select-input-border-focus:         #08c !default; // blue
+$select-input-box-shadow-focus:     inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px fade($select-input-border-focus, 50%) !default;
 $select-input-border-width:         1px !default;
 $select-input-height:               36px !default;
 $select-input-internal-height:      ($select-input-height - ($select-input-border-width * 2)) !default;
 $select-input-placeholder:          #aaa !default;
 $select-text-color:                 #333 !default;
 $select-link-hover-color:           $select-input-border-focus !default;
+$select-input-hover-box-shadow:     0 1px 0 rgba(0, 0, 0, 0.06) !default;
 
 $select-padding-vertical:           8px !default;
 $select-padding-horizontal:         10px !default;
 
 // menu options
 $select-menu-zindex:                1000 !default;
 $select-menu-max-height:            200px !default;
+$select-menu-box-shadow:            $select-input-hover-box-shadow !default;
 
 $select-option-color:               lighten($select-text-color, 20%) !default;
 $select-option-bg:                  $select-input-bg !default;