fix(input): apply correct styles to focused outline picker when hovered

telerik · Apr 29, 2022 · 9cec247 · 9cec247
1 parent d2e9c1c
commit 9cec247
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 1 deletion.
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
@@ -121,7 +121,17 @@ $kendo-picker-outline-border: $kendo-picker-outline-text !default;
 
 $kendo-picker-outline-hover-bg: $kendo-button-text !default;
 $kendo-picker-outline-hover-text: $body-bg !default;
-$kendo-picker-outline-hover-border: null !default;
+$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
+
+$kendo-picker-outline-focus-bg: transparent !default;
+$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
+$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
+
+$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
+$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
+$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+
 
 $kendo-picker-flat-bg: transparent !default;
 $kendo-picker-flat-text: null !default;

diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
@@ -133,6 +133,15 @@ $kendo-picker-outline-hover-bg: null !default;
 $kendo-picker-outline-hover-text: null !default;
 $kendo-picker-outline-hover-border: null !default;
 
+$kendo-picker-outline-focus-bg: transparent !default;
+$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
+$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
+
+$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
+$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
+$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+
 $kendo-picker-flat-bg: transparent !default;
 $kendo-picker-flat-text: $kendo-button-text !default;
 $kendo-picker-flat-border: $kendo-button-border !default;

diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -172,6 +172,27 @@
                 $kendo-picker-outline-hover-border
             );
         }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-picker-outline-focus-text,
+                $kendo-picker-outline-focus-bg,
+                $kendo-picker-outline-focus-border
+            );
+            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+        }
+
+        &:focus:hover,
+        &:focus.k-hover,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            @include fill (
+                $kendo-picker-outline-hover-focus-text,
+                $kendo-picker-outline-hover-focus-bg,
+                $kendo-picker-outline-hover-focus-border
+            );
+        }
     }
 
     // Flat

diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
@@ -123,6 +123,15 @@ $kendo-picker-outline-hover-bg: $kendo-button-text !default;
 $kendo-picker-outline-hover-text: $body-bg !default;
 $kendo-picker-outline-hover-border: null !default;
 
+$kendo-picker-outline-focus-bg: transparent !default;
+$kendo-picker-outline-focus-text: $kendo-picker-outline-text !default;
+$kendo-picker-outline-focus-border: $kendo-picker-outline-border !default;
+$kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
+
+$kendo-picker-outline-hover-focus-bg: $kendo-picker-outline-hover-bg !default;
+$kendo-picker-outline-hover-focus-text: $kendo-picker-outline-hover-text !default;
+$kendo-picker-outline-hover-focus-border: $kendo-picker-outline-hover-border !default;
+
 $kendo-picker-flat-bg: transparent !default;
 $kendo-picker-flat-text: $kendo-button-text !default;
 $kendo-picker-flat-border: $kendo-button-border !default;

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