fix(inputs): remove hover styles in focused state (#122)

archilogic-com · Oct 4, 2023 · 6dd82c1 · 6dd82c1
1 parent 516a322
commit 6dd82c1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/NumberInput.vue b/src/components/NumberInput.vue
@@ -48,7 +48,7 @@ export default defineComponent({
       v-bind="$attrs"
       ref="inputRef"
       type="number"
-      class="a-number-input enabled:group-hover:a-text-input-hover"
+      class="a-number-input group-hover:a-text-input-hover"
       @update:model-value="updateValue" />
     <div
       class="invisible absolute bottom-0 right-0 top-0 flex flex-col justify-center text-warsaw"

diff --git a/tailwind/tailwind-preset.cjs b/tailwind/tailwind-preset.cjs
@@ -114,16 +114,18 @@ module.exports = {
         '.a-text-input-base': {
           '@apply w-full rounded-sm border p-2 text-newyork': {}
         },
+        '.a-text-input-hover': {
+          '&:not(:disabled):not(:focus-within)': {
+            '@apply bg-athens': {}
+          }
+        },
         '.a-text-input-focus': {
-          '@apply border-blueribbon bg-white shadow-border shadow-blueribbon outline-none': {}
+          '@apply border-blueribbon bg-white shadow-border shadow-blueribbon outline-none hover:bg-white': {}
         },
         '.a-text-input-placeholder': {
           '@apply text-warsaw': {},
           '-webkit-text-fill-color': theme('colors.warsaw')
         },
-        '.a-text-input-hover': {
-          '@apply bg-athens': {}
-        },
         '.a-text-input-disabled': {
           '@apply text-stone cursor-not-allowed': {},
           '-webkit-text-fill-color': theme('colors.stone'),
@@ -136,7 +138,7 @@ module.exports = {
           '&::placeholder': {
             '@apply a-text-input-placeholder': {}
           },
-          '&:hover:not(:disabled)': {
+          '&:hover': {
             '@apply a-text-input-hover': {}
           },
           '&:focus': {
@@ -156,7 +158,7 @@ module.exports = {
         '.a-text-input--default': {
           '@apply border-gray bg-whisper': {},
           '&:disabled': {
-            '@apply border-athens hover:bg-whisper': {}
+            '@apply border-athens': {}
           }
         },
         '.a-text-input--subtle': {