fix(focus): grid, treelist, and calendar focus styles

telerik · Sep 6, 2018 · 01eb3f6 · 01eb3f6
1 parent 4aae04d
commit 01eb3f6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss
@@ -3,6 +3,7 @@ $calendar-weekend-bg: darken($widget-bg, 2.35) !default;
 $calendar-week-number-bg: darken( $widget-bg, 5 ) !default;
 $calendar-week-number-text: $node-text !default;
 $calendar-week-day-text: $header-text !default;
+$node-hovered-selected-bg: blend-multiply( $list-item-selected-bg, $list-item-hovered-bg ) !default;
 $calendar-range-selection: lighten($accent, 23%) !default;
 
 // Styling of today date
@@ -168,7 +169,7 @@ $calendar-selected-focus-shadow: $calendar-focus-shadow !default;
                     }
 
                     &.k-state-hover .k-link {
-                        background-color: blend-multiply( $list-item-selected-bg, $list-item-hovered-bg );
+                        background-color: $node-hovered-selected-bg;
                     }
                 }
             }

diff --git a/packages/material/scss/calendar/_theme.scss b/packages/material/scss/calendar/_theme.scss
@@ -12,4 +12,11 @@ $calendar-range-selection: lighten($accent, 43%) !default;
     .k-calendar-weekdays {
         text-transform: uppercase;
     }
+
+    .k-calendar {
+
+        .k-state-focused .k-link {
+            @include appearance( hovered-node );
+        }
+    }
 }
diff --git a/packages/material/scss/grid/_theme.scss b/packages/material/scss/grid/_theme.scss
@@ -3,7 +3,8 @@ $grid-chrome-text: rgba(0, 0, 0, .54) !default;
 $grid-sorted-bg: rgba(0, 0, 0, .04) !default;
 $grid-text: rgba(0, 0, 0, .87) !default;
 $grid-sorting-indicator-text: $grid-chrome-text !default;
-$grid-selected-bg: rgba(0, 0, 0, .07) !default;
+$grid-selected-bg: rgba(0, 0, 0, .04) !default;
+$grid-hovered-bg: rgba(0, 0, 0, .07) !default;
 $grid-grouping-row-bg: transparent !default;
 $grid-selected-text: #000 !default;
 $grid-selected-cell-text: $grid-selected-text !default;
@@ -31,6 +32,13 @@ $grid-filter-cell-padding-y: $grid-cell-padding-y !default;
             background-color: $grid-edit-cell-bg;
             box-shadow: $grid-edit-cell-shadow;
         }
+
+        // Hover, Focused state
+        tbody tr:hover,
+        td.k-state-focused,
+        th.k-state-focused {
+            background-color: $grid-hovered-bg;
+        }
     }
 
     .k-grid-header {