Extract focus settings

cerner · Jul 11, 2023 · 4875aea · 4875aea
1 parent 4b37657
commit 4875aea
Showing 1 changed file with 6 additions and 21 deletions.
diff --git a/packages/terra-search-field/src/SearchField.module.scss b/packages/terra-search-field/src/SearchField.module.scss
@@ -11,6 +11,12 @@
     vertical-align: middle;
     width: var(--terra-search-field-max-width, 16.5rem);
 
+    *:focus {
+      box-shadow: var(--terra-search-field-focus-box-shadow, none);
+      outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);
+      outline-offset: var(--terra-search-field-focus-keyboard-outline-offset, 1px);
+    }
+
     .input-group {
       display: inline-flex;
       flex: 1 1 auto;
@@ -47,9 +53,6 @@
       }
 
       &:focus {
-        box-shadow: var(--terra-search-field-clear-focus-box-shadow);
-        outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);
-        outline-offset: var(--terra-search-field-focus-keyboard-outline-offset, 1px);
         z-index: 1;
       }
     }
@@ -79,8 +82,6 @@
       margin-top: var(--terra-search-field-button-margin-top, 0);
 
       &:focus {
-        outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);
-        outline-offset: var(--terra-search-field-focus-keyboard-outline-offset, 1px);
         z-index: 1;
       }
     }
@@ -150,21 +151,5 @@
       color: var(--terra-search-field-input-placeholder-disabled-color, rgba(21, 33, 41, 0.62));
       font-style: var(--terra-search-field-input-placeholder-disabled-font-style, italic);
     }
-
-    &:focus {
-      background-color: var(--terra-search-field-input-focus-background-color, #fff);
-      background-size: auto;
-      color: var(--terra-search-field-focus-input-focus-color);
-      outline: var(--terra-search-field-focus-keyboard-outline, 2px dashed #000);
-      outline-offset: var(--terra-search-field-focus-keyboard-outline-offset, 1px);
-
-      [dir=ltr] & {
-        box-shadow: var(--terra-search-field-input-focus-ltr-box-shadow);
-      }
-
-      [dir=rtl] & {
-        box-shadow: var(--terra-search-field-input-focus-rtl-box-shadow);
-      }
-    }
   }
 }