feat(input): make invalid pseudo class optional

This PR makes automatic browser invalidation via :invalid pseudo class optional via new variables @variationInputInvalid @variationFormInvalid
fomantic · Nov 2, 2022 · 69527dc · 69527dc
1 parent 14a4f8c
commit 69527dc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -591,7 +591,7 @@
       border-radius: @formStates[@@state][borderRadius];
       box-shadow: @formStates[@@state][boxShadow];
     }
-    & when (@state=error) {
+    & when (@state=error) and (@variationFormInvalid) {
       .ui.form .field input:not(:placeholder-shown):invalid {
         color: @c;
         background: @bg;

diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less
@@ -191,7 +191,7 @@
       color: @formStates[@@state][color];
       box-shadow: @formStates[@@state][boxShadow];
     }
-    & when (@state=error) {
+    & when (@state=error) and (@variationInputInvalid) {
       .ui.input > input:not(:placeholder-shown):invalid {
         background-color: @formStates[@@state][background];
         border-color: @formStates[@@state][borderColor];
@@ -718,12 +718,13 @@
       color: @fileButtonTextColor;
     }
   }
-
-  .ui.form .field input[type="file"]:required:invalid,
-  .ui.file.input input[type="file"]:required:invalid {
-    color: @negativeTextColor;
-    background: @negativeBackgroundColor ;
-    border-color: @negativeBorderColor;
+  & when (@variationInputInvalid) {
+    .ui.form .field input[type="file"]:required:invalid,
+    .ui.file.input input[type="file"]:required:invalid {
+      color: @negativeTextColor;
+      background: @negativeBackgroundColor;
+      border-color: @negativeBorderColor;
+    }
   }
 
   input[type="file"].ui.invisible.file.input,

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -126,6 +126,7 @@
 @variationInputDisabled: true;
 @variationInputInverted: true;
 @variationInputStates: @variationAllStates;
+@variationInputInvalid: true;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;
@@ -272,6 +273,7 @@
 @variationFormTransparent: true;
 @variationFormLoading: true;
 @variationFormStates: @variationAllStates;
+@variationFormInvalid: true;
 @variationFormRequired: true;
 @variationFormInline: true;
 @variationFormGrouped: true;