fix(styles): prevent focus ring from causing layout shift on select f…

…ocus (#385)
dequelabs · Nov 11, 2021 · 6f2d09f · 6f2d09f
1 parent 2346423
commit 6f2d09f
Showing 1 changed file with 9 additions and 8 deletions.
diff --git a/packages/styles/select.css b/packages/styles/select.css
@@ -42,7 +42,7 @@
   font-size: var(--text-size-small);
   color: var(--field-content-color);
   text-decoration: rgb(102, 102, 102);
-  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   appearance: none;
 }
 
@@ -51,13 +51,14 @@
 }
 
 .Field__select--wrapper select:focus {
-  border: 2px solid var(--field-border-color-focus);
-  box-shadow: 0px 0px 4px var(--field-border-color-focus-glow),
-    inset 0px 1px 2px rgba(0, 0, 0, 0.05);
+  border-color: var(--field-border-color-focus);
+  box-shadow: 0 0 0 1px var(--field-border-color-focus),
+    0 0 5px var(--field-border-color-focus-glow),
+    inset 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .Field__select--wrapper select:focus:hover {
-  border: 2px solid var(--field-border-color-focus-hover);
+  border-color: var(--field-border-color-focus-hover);
 }
 
 .Field__select--wrapper select:invalid,
@@ -73,9 +74,9 @@
 .Field__select--wrapper select:invalid:focus,
 .Field__select--wrapper.Field--has-error select:focus {
   border-width: var(--space-quarter);
-  border: 2px solid var(--field-border-color-error);
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px inset,
-    var(--field-border-color-error-focus-glow) 0px 0px 4px 0px;
+  border-color: var(--field-border-color-error);
+  box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0 inset,
+    var(--field-border-color-error-focus-glow) 0 0 4px 0;
 }
 
 .Field__select--wrapper select:invalid:focus:hover,