@a-vision-software/vue-input-components 1.3.13 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.3.13",
+    "version": "1.3.14",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",

package/src/components/TextInput.vue

@@ -234,6 +234,34 @@ defineExpose({
       grid-template-columns: 1fr;
     }
   }
+
+  &.text-input--has-error {
+    border-color: var(--danger-color);
+
+    .text-input__icon {
+      color: var(--danger-color);
+    }
+
+    &:hover .error-indicator::after {
+      content: attr(data-error);
+      display: block;
+      position: absolute;
+      bottom: 0.25rem;
+      right: 0;
+      padding: 0.25rem 0.75rem;
+      color: white;
+      background-color: var(--danger-color);
+      line-height: var(--line-height);
+      min-width: 200px;
+      border-radius: 0.25rem;
+      z-index: 1;
+    }
+
+    input,
+    textarea {
+      color: var(--danger-color);
+    }
+  }
 }
 
 .text-input.label-top {
@@ -289,31 +317,10 @@ defineExpose({
     border-color: var(--text-input-active-color);
     box-shadow: 0 0 2px var(--text-input-active-color) inset;
   }
-
-  &.text-input--has-error {
-    border-color: var(--danger-color);
-
-    .text-input__icon {
-      color: var(--danger-color);
-    }
-
-    &:hover .error-indicator::after {
-      content: attr(data-error);
-      display: block;
-      position: absolute;
-      bottom: 0.25rem;
-      right: 0;
-      padding: 0.25rem 0.75rem;
-      color: white;
-      background-color: var(--danger-color);
-      line-height: var(--line-height);
-      min-width: 200px;
-      border-radius: 0.25rem;
-      z-index: 1;
-    }
-  }
 }
 
+.text-input {}
+
 .text-input--disabled {
   opacity: 0.6;
   cursor: not-allowed;