feat: add interaction states for calendar

telerik · Mar 22, 2021 · 3ec6113 · 3ec6113
1 parent 215e800
commit 3ec6113
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
@@ -347,7 +347,8 @@
 
         // Focused state
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused,
+        &.k-state-focus {
             &::before {
                 opacity: $flat-button-focused-opacity;
             }

diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
@@ -295,7 +295,8 @@
         }
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused,
+        &.k-state-focus {
 
             &::after {
                 box-shadow: inset 0 0 0 2px currentColor;

diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss
@@ -54,7 +54,9 @@
             color: $calendar-today-nav-text;
 
             &:hover,
-            &:focus {
+            &.k-state-hover,
+            &:focus,
+            &.k-state-focus {
                 color: $calendar-today-nav-hovered-text;
             }
         }
@@ -114,7 +116,9 @@
         // Interactive states
         .k-state-hover .k-link,
         td:hover .k-link,
-        .k-calendar-td:hover .k-link {
+        td.k-state-hover .k-link,
+        .k-calendar-td:hover .k-link,
+        .k-calendar-td.k-state-hover .k-link {
             @include fill(
                 $calendar-cell-hovered-text,
                 $calendar-cell-hovered-bg,
@@ -136,10 +140,12 @@
                 try-shade( $calendar-cell-selected-border )
             );
         }
-        .k-state-focused .k-link {
+        .k-state-focused .k-link,
+        .k-state-focus .k-link  {
             box-shadow: $calendar-cell-focused-shadow;
         }
-        .k-state-selected.k-state-focused .k-link {
+        .k-state-selected.k-state-focused .k-link,
+        .k-state-selected.k-state-focus .k-link {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
 
@@ -152,7 +158,8 @@
             );
             box-shadow: inset -1px 0 $calendar-navigation-border;
 
-            li:hover {
+            li:hover,
+            li.k-state-hover {
                 color: $calendar-today-nav-hovered-text;
             }
         }