Fix search bar focus styles

WordPress · Oct 11, 2024 · 301de50 · 301de50
1 parent df547fa
commit 301de50
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue b/frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
@@ -50,14 +50,14 @@ defineExpose({ focusInput })
   <form
     action="/search"
     role="search"
-    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16 dark:bg-overlay dark:focus-within:bg-default"
+    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16 dark:bg-overlay"
     @submit.prevent="handleSearch"
   >
     <div
-      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm rounded-e-none border border-e-0 p-0.5px pe-2 focus-within:border-1.5 focus-within:border-e-0 focus-within:p-0 focus-within:pe-2"
+      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm rounded-e-none border border-e-0 p-0.5px pe-2"
       :class="[
         route === 'home' ? 'border-tx' : 'border-black dark:border-tx',
-        hasPopover ? 'focus-within:border-tx' : 'focus-within:border-focus',
+        { 'has-popover': hasPopover },
       ]"
     >
       <input
@@ -79,3 +79,13 @@ defineExpose({ focusInput })
     <VSearchButton :route="route" />
   </form>
 </template>
+
+<style scoped>
+.input-field:has(#search-bar:focus-visible) {
+  @apply border-1.5 border-e-0 border-focus p-0 pe-2;
+}
+
+.input-field.has-popover:has(#search-bar:focus-visible) {
+  @apply border-tx;
+}
+</style>