Fix search type button outer spacing

WordPress · Jan 16, 2023 · 722978e · 722978e
1 parent 3c649eb
commit 722978e
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 11 deletions.
diff --git a/src/components/VContentSwitcher/VSearchTypes.vue b/src/components/VContentSwitcher/VSearchTypes.vue
@@ -9,11 +9,11 @@
     <div
       v-for="(category, index) in contentTypeGroups"
       :key="index"
-      class="flex flex-col py-2"
+      class="flex flex-col"
       :class="{
         'border-t border-dark-charcoal-20 bg-dark-charcoal-06':
           index > 0 && !bordered,
-        'w-66 gap-1': size === 'small',
+        'w-66 gap-1 py-2': size === 'small',
       }"
     >
       <h4

diff --git a/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue b/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
@@ -4,7 +4,7 @@
     @submit.prevent="handleSearch"
   >
     <div
-      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm border p-0.5px pe-1.5px rounded-e-none border-e-0 focus-within:border-1.5 focus-within:p-0 focus-within:pe-1.5px"
+      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm border p-0.5px pe-2 rounded-e-none border-e-0 focus-within:border-1.5 focus-within:p-0 focus-within:pe-2 focus-within:border-e-0"
       :class="[
         isHomeRoute ? 'border-tx' : 'border-black',
         hasPopover ? 'focus-within:border-tx' : 'focus-within:border-pink',

diff --git a/src/components/VHomepageContent.vue b/src/components/VHomepageContent.vue
@@ -19,7 +19,7 @@
       <VSearchTypeButton
         id="search-type-button"
         ref="searchTypeButtonRef"
-        class="me-2"
+        class="ms-2"
         v-bind="{ ...triggerA11yProps, ...searchTypeProps }"
         :show-label="isSm"
         aria-controls="content-switcher-popover"

diff --git a/src/components/VItemGroup/VItem.vue b/src/components/VItemGroup/VItem.vue
@@ -54,8 +54,8 @@
           contextProps.direction === 'vertical' &&
           contextProps.showCheck
         "
-        class="absolute end-2"
-        :class="contextProps.size === 'small' ? 'end-3' : 'end-6'"
+        class="absolute"
+        :class="contextProps.size === 'small' ? 'end-3' : 'end-5'"
         :icon-path="itemIndicator"
       />
     </VButton>
@@ -205,10 +205,6 @@ export default defineComponent({
   @apply flex flex-row items-center;
 }
 
-.has-check .vertical-content {
-  @apply pe-8;
-}
-
 .vertical-popover-item {
   @apply pb-0;
 }
@@ -248,6 +244,6 @@ export default defineComponent({
   @apply p-3;
 }
 .medium-button {
-  @apply px-6 py-5;
+  @apply p-5 ps-6;
 }
 </style>