fix(input): apply $invallid-border to invalid focus state outline inp…

…ut and picker in default theme
telerik · Apr 29, 2022 · 983ee4f · 983ee4f
1 parent e5ebc2b
commit 983ee4f
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -155,6 +155,39 @@
             $kendo-input-outline-bg,
             $kendo-input-outline-border
         );
+
+        & > .k-input-button {
+            border-color: inherit;
+        }
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-outline-hover-text,
+                $kendo-input-outline-hover-bg,
+                $kendo-input-outline-hover-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
     }
 
     .k-picker-outline {
@@ -193,6 +226,25 @@
                 $kendo-picker-outline-hover-focus-border
             );
         }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
     }
 
     // Flat