Add variable for focused input background

Adds a variable to make it possible to configure the input's background color when focused
JedWatson · Sep 13, 2017 · a218808 · a218808
1 parent 28281a2
commit a218808
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/less/control.less b/less/control.less
@@ -8,11 +8,13 @@
 .Select-focus-state(@color) {
 	border-color: @color;
 	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px fade(@color, 10%);
+	background: @select-input-bg-focus;
 }
 // "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: @select-input-box-shadow-focus;
+	background: @select-input-bg-focus;
 }
 
 // base
@@ -66,6 +68,7 @@
 
 	.Select-input:focus {
 		outline: none;
+		background: @select-input-bg-focus;
 	}
 }
 
@@ -98,6 +101,10 @@
 	.Select-focus-state(@select-input-border-focus);
 }
 
+.is-focused > .Select-control {
+	background: @select-input-bg-focus;
+}
+
 // placeholder
 .Select-placeholder,
 .Select--single > .Select-control .Select-value {
@@ -132,6 +139,7 @@
 			color: @select-link-hover-color;
 			outline: none;
 			text-decoration: underline;
+			background: @select-input-bg-focus;
 		}
 	}
 }

diff --git a/less/select.less b/less/select.less
@@ -15,6 +15,7 @@
 // control options
 @select-input-bg:                   #fff;
 @select-input-bg-disabled:          #f9f9f9;
+@select-input-bg-focus:             #fff;
 @select-input-border-color:         #ccc;
 @select-input-border-radius:        4px;
 @select-input-border-focus:         @select-primary-color;