fix(inputs): use k-hidden instead of display none to show hide warnin…

…g icon
telerik · Sep 11, 2021 · 7e387d7 · 7e387d7
1 parent 046d443
commit 7e387d7
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 22 deletions.
diff --git a/packages/default/scss/datetime/_layout.scss b/packages/default/scss/datetime/_layout.scss
@@ -79,17 +79,12 @@
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             right: $padding-x;
             top: 50%;
             transform: translateY(-50%);
             overflow: visible;
         }
-        &.k-invalid .k-i-warning,
-        &.k-state-invalid .k-i-warning {
-            display: inline-block;
-        }
 
 
         // RTL
@@ -191,18 +186,12 @@
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             right: calc( #{ $button-inner-calc-size } + #{ $input-padding-x-sm });
             transform: translateY(-50%);
             overflow: visible;
         }
-        .k-state-invalid {
-            .k-i-warning {
-                display: inline-block;
-            }
-        }
 
 
         // RTL
@@ -292,18 +281,12 @@
 
         // Validation icon
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             right: calc( #{ $button-inner-calc-size } * 2 + #{ $input-padding-x-sm });
             transform: translateY(-50%);
             overflow: visible;
         }
-        .k-state-invalid {
-            .k-i-warning {
-                display: inline-block;
-            }
-        }
 
 
         // RTL

diff --git a/packages/default/scss/maskedtextbox/_layout.scss b/packages/default/scss/maskedtextbox/_layout.scss
@@ -23,15 +23,10 @@
 
             &.k-state-invalid {
                 transition: none;
-
-                + .k-i-warning {
-                    display: inline-block;
-                }
             }
         }
 
         .k-i-warning {
-            display: none;
             position: absolute;
             top: 50%;
             transform: translateY(-50%);

diff --git a/packages/default/scss/numerictextbox/_theme.scss b/packages/default/scss/numerictextbox/_theme.scss
@@ -3,6 +3,10 @@
     // Numeric
     .k-numerictextbox {
 
+        .k-i-warning {
+            color: $error;
+        }
+
         // Normal state
         .k-numeric-wrap {
             @include fill(