Merge pull request #1998 from aronstrandberg/input-focus-bg

Add variable for focused input background
JedWatson · Oct 22, 2017 · 3cf1b7d · 3cf1b7d
2 parents decbac7 + 535bc23
commit 3cf1b7d
Show file tree

Hide file tree

Showing 4 changed files with 22 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
@@ -67,6 +69,10 @@
 		}
 	}
 
+	&.is-focused > .Select-control {
+		background: @select-input-bg-focus;
+	}
+
 	&.is-focused:not(.is-open) > .Select-control {
 		.Select-focus-state(@select-input-border-focus);
 	}
@@ -90,6 +96,10 @@
 				outline: none;
 				text-decoration: underline;
 			}
+
+			&:focus {
+				background: @select-input-bg-focus;
+			}
 		}
 	}
 
@@ -128,6 +138,7 @@
 
 	.Select-input:focus {
 		outline: none;
+		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:             @select-input-bg;
 @select-input-border-color:         #ccc;
 @select-input-border-radius:        4px;
 @select-input-border-focus:         @select-primary-color;

diff --git a/scss/control.scss b/scss/control.scss
@@ -54,6 +54,10 @@
 		}
 	}
 
+	&.is-focused > .Select-control {
+		background: $select-input-bg-focus;
+	}
+
 	&.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: $select-input-box-shadow-focus;
@@ -79,6 +83,10 @@
 				outline: none;
 				text-decoration: underline;
 			}
+
+			&:focus {
+				background: $select-input-bg-focus;
+			}
 		}
 	}
 
@@ -117,6 +125,7 @@
 
 	.Select-input:focus {
 		outline: none;
+		background: $select-input-bg-focus;
 	}
 }
 

diff --git a/scss/select.scss b/scss/select.scss
@@ -12,6 +12,7 @@
 // control options
 $select-input-bg:                   #fff !default;
 $select-input-bg-disabled:          #f9f9f9 !default;
+$select-input-bg-focus:             $select-input-bg !default;
 $select-input-border-color:         #ccc !default;
 $select-input-border-radius:        4px !default;
 $select-input-border-focus:         #08c !default; // blue