fix(input): update flat input border-color on focus to match design

telerik · Apr 29, 2022 · 275748c · 275748c
1 parent 1e54437
commit 275748c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
@@ -85,6 +85,10 @@ $kendo-input-flat-bg: transparent !default;
 $kendo-input-flat-text: null !default;
 $kendo-input-flat-border: null !default;
 
+$kendo-input-flat-focus-bg: null !default;
+$kendo-input-flat-focus-text: null !default;
+$kendo-input-flat-focus-border: $primary !default;
+
 $kendo-input-flat-border-radius: 4px 4px 0px 0px !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;

diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
@@ -95,6 +95,10 @@ $kendo-input-flat-bg: transparent !default;
 $kendo-input-flat-text: null !default;
 $kendo-input-flat-border: null !default;
 
+$kendo-input-flat-focus-bg: null !default;
+$kendo-input-flat-focus-text: null !default;
+$kendo-input-flat-focus-border: null !default;
+
 $kendo-input-flat-border-radius: null !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;

diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -181,6 +181,15 @@
             $kendo-input-flat-bg,
             $kendo-input-flat-border
         );
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+        }
     }
 
     .k-picker-flat {

diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
@@ -85,6 +85,10 @@ $kendo-input-flat-bg: transparent !default;
 $kendo-input-flat-text: $kendo-input-text !default;
 $kendo-input-flat-border: $kendo-input-border !default;
 
+$kendo-input-flat-focus-bg: null !default;
+$kendo-input-flat-focus-text: null !default;
+$kendo-input-flat-focus-border: null !default;
+
 $kendo-input-flat-border-radius: 4px 4px 0px 0px !default;
 
 $kendo-picker-bg: $kendo-button-bg !default;

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