fix searchbox

iTwin · Jun 1, 2023 · 737371c · 737371c
1 parent 45c6840
commit 737371c
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/packages/itwinui-css/src/searchbox/searchbox.scss b/packages/itwinui-css/src/searchbox/searchbox.scss
@@ -15,24 +15,27 @@
 }
 
 .iui-expandable-searchbox {
-  width: var(--_iui-input-min-height);
-  transition: width var(--iui-duration-1) ease-in-out;
+  // increase specificity to override input-flex-container
+  &#{&} {
+    width: var(--_iui-input-min-height);
+    transition: width var(--iui-duration-1) ease-in-out;
 
-  &:has(.iui-searchbox-open-button:focus-visible) {
-    outline: 2px solid var(--_iui-input-accent-border-color);
-    outline-offset: -2px;
-  }
-
-  @supports not selector(:has(+ *)) {
-    &:where(.iui-searchbox-open-button:focus-visible) {
+    &:has(.iui-searchbox-open-button:focus-visible) {
       outline: 2px solid var(--_iui-input-accent-border-color);
       outline-offset: -2px;
     }
-  }
 
-  &:where([data-iui-expanded='true']) {
-    width: 100%;
-    border-color: var(--_iui-input-border-color);
+    @supports not selector(:has(+ *)) {
+      &:where(.iui-searchbox-open-button:focus-visible) {
+        outline: 2px solid var(--_iui-input-accent-border-color);
+        outline-offset: -2px;
+      }
+    }
+
+    &:where([data-iui-expanded='true']) {
+      width: 100%;
+      border-color: var(--_iui-input-border-color);
+    }
   }
 }