chore(element-container): do not animate labels color change

discue · Oct 28, 2022 · 407aec4 · 407aec4
1 parent 26774ab
commit 407aec4
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/src/components/form-element-container-with-label.vue b/src/components/form-element-container-with-label.vue
@@ -3,7 +3,7 @@
         class="dsq-form-element-container-with-label border-solid cursor-text flex flex-col rounded transition-colors ease-in-out duration-500">
         <div class="relative">
             <label :for="id" :class="[isInvalid ? 'text-attention-800' : 'text-gray-800 ']"
-                class="cursor-text -left-3 -top-3.5 bg-white py-1 px-2 absolute leading-7 text-md text-gray-900 font-bold  transition-colors ease-in-out duration-500"
+                class="cursor-text -left-3 -top-3.5 bg-white py-1 px-2 absolute leading-7 text-md text-gray-900 font-bold"
                 @mousedown="onFocusRequest">{{ label }}</label>
             <Transition name="form-element-hint">
                 <span v-if="showPattern" class="
@@ -135,9 +135,10 @@ const showFormat = computed(() => {
 const parentClazz = computed(() => {
     const clazz = ['border-2']
     if (hasFocus.value) {
-        clazz.push('border-gray-800', 'hover:ring-2', 'hover:ring-primary-500')
-    } else if (isInvalid.value) {
-        return clazz.push('border-attention-800')
+        clazz.push('hover:ring-2', 'hover:ring-primary-500')
+    }
+    if (isInvalid.value) {
+        clazz.push('border-attention-800')
     } else {
         clazz.push('border-gray-800')
     }