fix(input): update input focus border-color in default to match design

telerik · Apr 29, 2022 · fd01025 · fd01025
1 parent cf6068a
commit fd01025
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
@@ -85,6 +85,11 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 $kendo-input-outline-hover-border: null !default;
 
+$kendo-input-outline-focus-bg: null !default;
+$kendo-input-outline-focus-text: null !default;
+$kendo-input-outline-focus-border: null !default;
+$kendo-input-outline-focus-shadow: null !default;
+
 $kendo-input-flat-bg: transparent !default;
 $kendo-input-flat-text: null !default;
 $kendo-input-flat-border: null !default;

diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
@@ -85,6 +85,11 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
 
+$kendo-input-outline-focus-bg: null !default;
+$kendo-input-outline-focus-text: null !default;
+$kendo-input-outline-focus-border: null !default;
+$kendo-input-outline-focus-shadow: null !default;
+
 $kendo-input-flat-bg: transparent !default;
 $kendo-input-flat-text: $kendo-input-text !default;
 $kendo-input-flat-border: $kendo-input-border !default;

diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -178,6 +178,16 @@
             );
         }
 
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-outline-focus-text,
+                $kendo-input-outline-focus-bg,
+                $kendo-input-outline-focus-border
+             );
+            @include box-shadow ( $kendo-input-outline-focus-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,

diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
@@ -85,6 +85,11 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
 
+$kendo-input-outline-focus-bg: null !default;
+$kendo-input-outline-focus-text: null !default;
+$kendo-input-outline-focus-border: $kendo-input-outline-border !default;
+$kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
+
 $kendo-input-flat-bg: transparent !default;
 $kendo-input-flat-text: $kendo-input-text !default;
 $kendo-input-flat-border: $kendo-input-border !default;

diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss
@@ -85,6 +85,11 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 $kendo-input-outline-hover-border: null !default;
 
+$kendo-input-outline-focus-bg: null !default;
+$kendo-input-outline-focus-text: null !default;
+$kendo-input-outline-focus-border: null !default;
+$kendo-input-outline-focus-shadow: null !default;
+
 $kendo-input-flat-bg: transparent !default;
 $kendo-input-flat-text: null !default;
 $kendo-input-flat-border: null !default;