feat(lib): MazInput - adding style color for autofill (#208)

LouisMazel · Mar 9, 2022 · b3ae969 · b3ae969
1 parent 173e764
commit b3ae969
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/packages/lib/package-lock.json b/packages/lib/package-lock.json
diff --git a/packages/lib/package/components/MazInput.vue b/packages/lib/package/components/MazInput.vue
@@ -311,6 +311,7 @@
 
 <style lang="postcss" scoped>
   /* stylelint-disable no-descending-specificity */
+
   .m-input {
     @apply maz-flex maz-flex-col;
 
@@ -390,9 +391,16 @@
     }
 
     &-input {
-      @apply maz-outline-none maz-m-0 maz-block maz-w-full maz-appearance-none maz-border-none maz-bg-transparent maz-shadow-none;
-
-      @apply maz-h-auto maz-py-0 maz-px-4 maz-text-normal;
+      @apply maz-outline-none maz-m-0 maz-block maz-h-full maz-w-full maz-appearance-none
+      maz-border-none maz-bg-transparent maz-py-0 maz-px-4 maz-text-normal maz-shadow-none;
+
+      &:-webkit-autofill,
+      &:-webkit-autofill:hover,
+      &:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(--maz-color-text);
+        box-shadow: 0 0 0 1000px var(--maz-color-primary-50) inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
     }
 
     &-label {
@@ -464,5 +472,15 @@
         @apply maz-border-color-lighter;
       }
     }
+
+    & .m-input-input {
+      &:-webkit-autofill,
+      &:-webkit-autofill:hover,
+      &:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(--maz-color-text);
+        box-shadow: 0 0 0 1000px var(--maz-color-bg-lighter) inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+    }
   }
 </style>
diff --git a/packages/testing/src/App.vue b/packages/testing/src/App.vue
@@ -10,6 +10,33 @@
       Dark Switch
     </MazBtn>
 
+    <form action="">
+      <MazInput
+        v-model="data.username"
+        autocomplete="username"
+        label="username"
+      />
+      <MazInput
+        v-model="data.password"
+        autocomplete="password"
+        label="password"
+        type="password"
+      />
+      <MazInput
+        v-model="data.age"
+        autocomplete="age"
+        label="age"
+        type="number"
+      />
+      <MazInput
+        v-model="data.telephone"
+        autocomplete="telephone"
+        label="telephone"
+        type="tel"
+      />
+      <MazInput v-model="data.name" autocomplete="name" label="name" />
+    </form>
+
     <code class="maz-mb-2">
       {{ dateValue }}
     </code>
@@ -71,8 +98,16 @@
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue'
   // import { MazTabsItem } from 'maz-ui/package/components/MazTabsBar.vue'
+  const data = ref({
+    username: undefined,
+    password: undefined,
+    name: undefined,
+    telephone: undefined,
+    age: undefined,
+  })
   import {
     MazBtn,
+    MazInput,
     // MazTabsBar,
     // MazTabsContent,
     // MazTabsContentItem,