refactor: css for error

TRIPTYK · Nov 28, 2024 · cc28abc · cc28abc
1 parent a1711aa
commit cc28abc
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 35 deletions.
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-bic.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-bic.css
@@ -1,5 +1,5 @@
 .tpk-bic-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-bic-container .tpk-bic-input {
@@ -14,7 +14,10 @@
   @apply input-error text-error;
 }
 
-.tpk-bic-container[data-has-error~="true"] .tpk-validation-errors,
 .tpk-bic-container[data-has-error~="true"] .tpk-label {
   @apply text-error label;
-}
+}
+
+.tpk-bic-container[data-has-error~="true"] .tpk-validation-errors {
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-checkbox.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-checkbox.css
@@ -1,5 +1,5 @@
 .tpk-checkbox-container {
-  @apply form-control 
+  @apply form-control relative pb-4;
 }
 
 .tpk-checkbox-container .tpk-label {
@@ -14,7 +14,10 @@
   @apply checkbox checkbox-error;
 }
 
-.tpk-checkbox-container[data-has-error~="true"] .tpk-validation-errors,
 .tpk-checkbox-container[data-has-error~="true"] .tpk-label {
   @apply text-error label;
-}
+}
+
+.tpk-checkbox-container[data-has-error~="true"] .tpk-validation-errors {
+  @apply text-error text-sm justify-self-end absolute -bottom-1;
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-currency.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-currency.css
@@ -1,5 +1,5 @@
 .tpk-currency-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-currency-container .tpk-label {
@@ -14,9 +14,9 @@
   @apply input-error;
 }
 
-.tpk-currency-container[data-has-error~="true"] 
+.tpk-currency-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-currency-container[data-has-error~="true"] .tpk-label{
@@ -25,4 +25,4 @@
 
 .tpk-currency-container[data-has-error~="true"] .tpk-currency-input {
   @apply text-error;
-}
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-datepicker-range.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-datepicker-range.css
@@ -1,22 +1,22 @@
 .tpk-datepicker-range-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-datepicker-range-container .tpk-label {
   @apply label;
 }
 
 .tpk-datepicker-range-input {
-  @apply input input-bordered;
+  @apply input input-bordered w-full;
 }
 
 .tpk-datepicker-range-container[data-has-error~="true"] .tpk-datepicker-range-input {
   @apply input-error;
 }
 
-.tpk-datepicker-range-container[data-has-error~="true"] 
+.tpk-datepicker-range-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-datepicker-range-container[data-has-error~="true"] .tpk-label{
@@ -25,4 +25,4 @@
 
 .tpk-datepicker-range-container[data-has-error~="true"] .tpk-datepicker-range-input {
   @apply text-error;
-}
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-email.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-email.css
@@ -1,5 +1,5 @@
 .tpk-email-container {
-  @apply form-control;
+  @apply form-control relative pb-5;
 }
 
 .tpk-email-container .tpk-label {
@@ -14,9 +14,9 @@
   @apply input-error;
 }
 
-.tpk-email-container[data-has-error~="true"] 
+.tpk-email-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-email-container[data-has-error~="true"] .tpk-label{
@@ -25,4 +25,4 @@
 
 .tpk-email-container[data-has-error~="true"] .tpk-email-input {
   @apply text-error;
-}
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-file.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-file.css
@@ -1,5 +1,5 @@
 .tpk-file-container {
-  @apply form-control w-full;
+  @apply form-control relative pb-4 w-full;
 }
 
 .tpk-file-container .tpk-label {
@@ -14,9 +14,9 @@
   @apply input-error;
 }
 
-.tpk-file-container[data-has-error~="true"] 
+.tpk-file-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-file-container[data-has-error~="true"] .tpk-label{
@@ -29,4 +29,4 @@
 
 .tpk-file-container[data-has-error~="true"] .tpk-file-input::file-selector-button {
   @apply bg-red-100 border border-none text-error;
-}
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-iban.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-iban.css
@@ -1,5 +1,5 @@
 .tpk-iban-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-iban-container .tpk-label {
@@ -14,9 +14,9 @@
   @apply input-error;
 }
 
-.tpk-iban-container[data-has-error~="true"] 
+.tpk-iban-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-iban-container[data-has-error~="true"] .tpk-label{
@@ -25,4 +25,4 @@
 
 .tpk-iban-container[data-has-error~="true"] .tpk-iban-input {
   @apply text-error;
-}
+}
diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-input.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-input.css
@@ -1,5 +1,5 @@
 .tpk-input-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-input-container .tpk-label {
@@ -16,7 +16,7 @@
 
 .tpk-input-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-input-container[data-has-error~="true"] .tpk-label {

diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-integer.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-integer.css
@@ -1,5 +1,5 @@
 .tpk-integer-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-integer-container .tpk-label {
@@ -16,7 +16,7 @@
 
 .tpk-integer-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-integer-container[data-has-error~="true"] .tpk-label {

diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-national-number.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-national-number.css
@@ -1,5 +1,5 @@
 .tpk-national-number-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-national-number-container .tpk-label {
@@ -16,7 +16,7 @@
 
 .tpk-national-number-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-national-number-container[data-has-error~="true"] .tpk-label{

diff --git a/packages/ember-input-validation/src/components/prefabs/styles/tpk-number.css b/packages/ember-input-validation/src/components/prefabs/styles/tpk-number.css
@@ -1,5 +1,5 @@
 .tpk-number-container {
-  @apply form-control;
+  @apply form-control relative pb-4;
 }
 
 .tpk-number-container .tpk-label {
@@ -16,7 +16,7 @@
 
 .tpk-number-container[data-has-error~="true"]
 .tpk-validation-errors {
-  @apply text-error label justify-self-end;
+  @apply text-error text-sm justify-self-end right-0 -bottom-1 absolute;
 }
 
 .tpk-number-container[data-has-error~="true"] .tpk-label {