From 9cec2470c83263f8bb9e57ab5eb079c8aef51fda Mon Sep 17 00:00:00 2001
From: Emil Petrov <emil.petrov@progress.com>
Date: Wed, 6 Apr 2022 19:10:24 +0300
Subject: [PATCH] fix(input): apply correct styles to focused outline picker
 when hovered

---
 packages/bootstrap/scss/input/_variables.scss | 12 ++++++++++-
 packages/classic/scss/input/_variables.scss   |  9 ++++++++
 packages/default/scss/input/_theme.scss       | 21 +++++++++++++++++++
 packages/default/scss/input/_variables.scss   |  9 ++++++++
 packages/material/scss/input/_variables.scss  |  9 ++++++++
 5 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
index e7259f49723..05df707a262 100644
--- 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
index 4020c3d128e..537cd38b0c1 100644
--- 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
index dd7f1bc0fa2..dabbacdc95d 100644
--- 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
index 7bffa092f18..b55a0f43267 100644
--- 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
index e1ee307b18d..1c2ddf22621 100644
--- 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;