fix(input): ensure correct styles are applied to input and picker whe…

…n in invalid state
telerik · Apr 29, 2022 · 4cce02a · 4cce02a
1 parent 6ac2e1d
commit 4cce02a
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
@@ -131,6 +131,11 @@ $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .08 ) !default;
 $kendo-picker-flat-hover-text: null !default;
 $kendo-picker-flat-hover-border: null !default;
 
+$kendo-picker-flat-focus-bg: transparent !default;
+$kendo-picker-flat-focus-text: null !default;
+$kendo-picker-flat-focus-border: $primary !default;
+$kendo-picker-flat-focus-shadow: $kendo-input-focus-shadow !default;
+
 $kendo-input-placeholder-text: $input-placeholder-color !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
@@ -158,6 +158,11 @@ $kendo-picker-flat-hover-bg: null !default;
 $kendo-picker-flat-hover-text: null !default;
 $kendo-picker-flat-hover-border: null !default;
 
+$kendo-picker-flat-focus-bg: null !default;
+$kendo-picker-flat-focus-text: null !default;
+$kendo-picker-flat-focus-border: null !default;
+$kendo-picker-flat-focus-shadow: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -190,6 +190,25 @@
                 $kendo-input-flat-focus-border
             );
         }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
     }
 
     .k-picker-flat {
@@ -207,6 +226,35 @@
                 $kendo-picker-flat-hover-border
             );
         }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-picker-flat-focus-text,
+                $kendo-picker-flat-focus-bg,
+                $kendo-picker-flat-focus-border
+            );
+            @include box-shadow( $kendo-picker-flat-focus-shadow );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
     }
 
 }
diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
@@ -131,6 +131,11 @@ $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
 $kendo-picker-flat-hover-text: null !default;
 $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
 
+$kendo-picker-flat-focus-bg: null !default;
+$kendo-picker-flat-focus-text: null !default;
+$kendo-picker-flat-focus-border: null !default;
+$kendo-picker-flat-focus-shadow: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss
@@ -131,6 +131,11 @@ $kendo-picker-flat-hover-bg: null !default;
 $kendo-picker-flat-hover-text: null !default;
 $kendo-picker-flat-hover-border: null !default;
 
+$kendo-picker-flat-focus-bg: null !default;
+$kendo-picker-flat-focus-text: null !default;
+$kendo-picker-flat-focus-border: null !default;
+$kendo-picker-flat-focus-shadow: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;