Unify focus of custom select box.

WordPress · Mar 25, 2020 · 1a22569 · 1a22569
1 parent a3edb49
commit 1a22569
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
@@ -8,18 +8,21 @@
 	margin-bottom: 5px;
 }
 
+$input-focus-width: calc(var(--border-width-focus) - #{ $border-width });
+
 .components-custom-select-control__button {
-	border: 1px solid $dark-gray-200;
-	border-radius: 4px;
-	color: $dark-gray-500;
+	border: 1px solid $medium-gray-text;
+	border-radius: $radius-block-ui;
 	display: inline;
 	min-height: 30px;
 	min-width: 130px;
 	position: relative;
 	text-align: left;
 
-	&:focus {
-		border-color: $blue-medium-500;
+	&:focus:not(:disabled) {
+		border-color: $theme-color;
+		box-shadow: 0 0 0 ($border-width-focus - $border-width) $theme-color;
+		box-shadow: 0 0 0 $input-focus-width $theme-color;
 	}
 
 	&-icon {
@@ -32,7 +35,17 @@
 }
 
 .components-custom-select-control__menu {
-	background: $white;
+	background-color: $white;
+
+	// Show border around the dropdown menu when open.
+	&:focus {
+		// Block UI appearance.
+		border: $border-width solid $dark-gray-primary;
+		border-radius: $radius-block-ui;
+		outline: none;
+		transition: none;
+	}
+
 	max-height: 400px;
 	min-width: 100%;
 	overflow: auto;