@progress/kendo-theme-default 5.4.0 → 5.4.2-dev.1

package/scss/progressbar/_layout.scss

@@ -26,7 +26,8 @@
 
 
         // Selection
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -96,7 +97,8 @@
             flex-direction: row;
         }
 
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             width: 0;
             width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: row;
@@ -122,7 +124,8 @@
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-state-selected {
+            > .k-state-selected ,
+            > .k-selected {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
             }
@@ -146,7 +149,8 @@
             writing-mode: vertical-lr;
         }
 
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             height: 0;
             height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: column-reverse;
@@ -175,7 +179,8 @@
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-state-selected {
+            > .k-state-selected ,
+            > .k-selected {
                 flex-direction: column;
                 align-self: flex-start;
             }
@@ -187,6 +192,7 @@
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
         .k-state-selected,
+        .k-selected,
         .k-item {
             display: none;
         }
@@ -197,7 +203,9 @@
     .telerik-blazor.k-progressbar-horizontal {
 
         > .k-state-selected,
-        > .k-state-selected > .k-progress-status-wrap {
+        > .k-selected,
+        > .k-state-selected > .k-progress-status-wrap ,
+        > .k-selected > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
     }
@@ -225,7 +233,8 @@
         display: -ms-inline-grid;
 
         > .k-progress-status-wrap,
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             -ms-grid-column: 1;
             -ms-grid-row: 1;
         }
@@ -234,7 +243,8 @@
         -ms-grid-columns: 1fr;
         -ms-grid-rows: $progressbar-height;
 
-        &.k-progressbar-reverse > .k-state-selected {
+        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-selected {
             -ms-grid-column-align: end;
         }
     }
@@ -242,11 +252,13 @@
         -ms-grid-columns: $progressbar-height;
         -ms-grid-rows: 1fr;
 
-        > .k-state-selected {
+        > .k-state-selected ,
+        > .k-selected {
             -ms-grid-row-align: end;
         }
 
-        &.k-progressbar-reverse > .k-state-selected {
+        &.k-progressbar-reverse > .k-state-selected ,
+        &.k-progressbar-reverse > .k-selected {
             -ms-grid-row-align: start;
         }
     }

package/scss/progressbar/_theme.scss

@@ -8,7 +8,8 @@
     .k-progressbar {
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
-        .k-state-selected {
+        .k-state-selected ,
+        .k-selected {
             @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
         }
 

package/scss/radio/_layout.scss

@@ -169,7 +169,8 @@
         }
 
         .k-radio:focus,
-        .k-radio.k-state-focus {
+        .k-radio.k-state-focus ,
+        .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 
             &::after {

package/scss/radio/_theme.scss

@@ -12,7 +12,8 @@
 
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover {
+    .k-radio.k-state-hover ,
+    .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
             $kendo-radio-hover-bg,
@@ -23,7 +24,8 @@
 
     // Focus state
     .k-radio:focus,
-    .k-radio.k-state-focus {
+    .k-radio.k-state-focus ,
+    .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
         @include box-shadow( $kendo-radio-focus-shadow );
     }
@@ -54,7 +56,8 @@
         );
     }
     .k-radio:checked:focus,
-    .k-radio.k-checked.k-state-focus {
+    .k-radio.k-checked.k-state-focus ,
+    .k-radio.k-checked.k-focus {
         @include fill( $border: $kendo-radio-focus-checked-border );
         @include box-shadow( $kendo-radio-focus-checked-shadow );
     }

package/scss/rating/_theme.scss

@@ -4,14 +4,16 @@
         color: $component-text;
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
 
             .k-rating-item {
                 > .k-icon {
                     text-shadow: $rating-icon-focused-shadow;
                 }
 
-                &.k-state-selected > .k-icon {
+                &.k-state-selected > .k-icon ,
+                &.k-selected > .k-icon {
                     text-shadow: $rating-icon-focused-selected-shadow;
                 }
             }
@@ -21,17 +23,20 @@
     .k-rating-item {
         color: $rating-icon-text;
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             color: $rating-icon-selected-text;
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 color: $rating-icon-focused-text;
             }
         }
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             color: $rating-icon-hover-text;
             cursor: pointer;
         }

package/scss/scheduler/_layout.scss

@@ -441,7 +441,8 @@
             }
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 .k-event-delete {
                     opacity: 1;
                 }
@@ -506,7 +507,8 @@
 
         // Hover
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             .k-event-actions .k-event-delete,
             .k-resize-handle {
                 visibility: visible;
@@ -764,9 +766,11 @@
             visibility: hidden;
         }
         .k-state-hover .k-task > .k-event-delete,
+        .k-hover .k-task > .k-event-delete,
         .k-scheduler-content tr:hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
-        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete {
+        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete ,
+        .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
             visibility: visible;
         }
     }
@@ -839,7 +843,8 @@
                 position: relative;
             }
 
-            td.k-state-selected {
+            td.k-state-selected ,
+            td.k-selected {
                 background-color: inherit;
             }
         }

package/scss/scheduler/_theme.scss

@@ -83,7 +83,9 @@
     }
 
     .k-scheduler-layout td.k-state-selected,
-    .k-scheduler-layout .k-scheduler-cell.k-state-selected {
+    .k-scheduler-layout td.k-selected,
+    .k-scheduler-layout .k-scheduler-cell.k-state-selected ,
+    .k-scheduler-layout .k-scheduler-cell.k-selected {
         background-color: rgba($selected-bg, .25);
     }
 
@@ -105,7 +107,8 @@
         );
         @include box-shadow( $scheduler-event-shadow );
 
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             @include fill(
                 $scheduler-event-hover-text,
                 $scheduler-event-hover-bg,
@@ -115,7 +118,8 @@
             @include box-shadow( $scheduler-event-hover-shadow );
         }
 
-        &.k-state-selected {
+        &.k-state-selected ,
+        &.k-selected {
             @include fill(
                 $scheduler-event-selected-text,
                 $scheduler-event-selected-bg,
@@ -182,8 +186,10 @@
         // Hover
         .k-scheduler-content tr:hover,
         .k-scheduler-content tr.k-state-hover,
+        .k-scheduler-content tr.k-hover,
         .k-scheduler-content .k-scheduler-row:hover,
-        .k-scheduler-content .k-scheduler-row.k-state-hover {
+        .k-scheduler-content .k-scheduler-row.k-state-hover ,
+        .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
                 $hovered-text,
                 $hovered-bg,
@@ -195,7 +201,9 @@
         .k-scheduler-content tr:hover .k-scheduler-datecolumn,
         .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn {
+        .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn ,
+        .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
             @include fill(
                 $scheduler-text,
                 $scheduler-bg,
@@ -204,11 +212,14 @@
         }
 
         // Selected
-        .k-scheduler-content tr.k-state-selected {
+        .k-scheduler-content tr.k-state-selected ,
+        .k-scheduler-content tr.k-selected {
             background-color: rgba($selected-bg, .25);
         }
         .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn {
+        .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
+        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn ,
+        .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
             background-color: $scheduler-bg;
         }
     }
@@ -225,7 +236,8 @@
             @include fill( $bg: $scheduler-yearview-indicator-bg );
         }
 
-        .k-state-selected .k-day-indicator {
+        .k-state-selected .k-day-indicator ,
+        .k-selected .k-day-indicator {
             @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
         }
     }

package/scss/scrollview/_theme.scss

@@ -49,7 +49,8 @@
         -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
 
         &:focus,
-        &.k-state-focus {
+        &.k-state-focus ,
+        &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
 
@@ -59,7 +60,8 @@
         }
 
         &:hover,
-        &.k-state-hover {
+        &.k-state-hover ,
+        &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
 
@@ -78,13 +80,15 @@
         }
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             box-shadow: $scrollview-pagebutton-shadow;
         }
     }
 
     .k-scrollview-nav > .k-link:hover,
-    .k-scrollview-nav > .k-link.k-state-hover {
+    .k-scrollview-nav > .k-link.k-state-hover ,
+    .k-scrollview-nav > .k-link.k-hover {
         box-shadow: $scrollview-pagebutton-shadow;
     }
 

package/scss/slider/_layout.scss

@@ -44,7 +44,8 @@
         }
 
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             .k-tick,
             .k-slider-track,
             .k-draghandle {

package/scss/slider/_theme.scss

@@ -47,18 +47,21 @@
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             .k-draghandle {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-disabled {
+        &.k-state-disabled ,
+        &.k-disabled {
             opacity: $slider-disabled-opacity;
         }
     }

package/scss/splitter/_theme.scss

@@ -15,6 +15,7 @@
     }
     .k-splitbar:hover,
     .k-splitbar.k-state-hover,
+    .k-splitbar.k-hover,
     .k-splitbar-horizontal-hover,
     .k-splitbar-vertical-hover {
         color: $splitbar-hover-text;
@@ -22,7 +23,9 @@
     }
     .k-splitbar:focus,
     .k-splitbar.k-state-focus,
-    .k-splitbar.k-state-focused {
+    .k-splitbar.k-focus,
+    .k-splitbar.k-state-focused ,
+    .k-splitbar.k-focus {
         color: $splitbar-selected-text;
         background: $splitbar-selected-bg;
     }

package/scss/spreadsheet/_layout.scss

@@ -257,7 +257,8 @@
         overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
-        .k-state-disabled {
+        .k-state-disabled ,
+        .k-disabled {
             pointer-events: auto;
         }
     }
@@ -818,7 +819,8 @@
             background-position: 50% 50%;
 
             &:hover div,
-            &.k-state-hovered div {
+            &.k-state-hovered div ,
+            &.k-hover div {
                 margin: 0;
                 align-self: center;
                 opacity: 1;
@@ -883,7 +885,8 @@
         .k-spreadsheet-insert-image-dialog {
             .k-spreadsheet-has-image {
                 &:hover,
-                &.k-state-hovered {
+                &.k-state-hovered ,
+                &.k-hover {
                     border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }
             }

package/scss/spreadsheet/_theme.scss

@@ -142,7 +142,8 @@
             );
         }
 
-        &.k-state-active {
+        &.k-state-active ,
+        &.k-active {
             @include fill(
                 $kendo-button-active-text,
                 $kendo-button-active-bg,
@@ -159,7 +160,8 @@
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
 
-            .k-item.k-state-hover {
+            .k-item.k-state-hover ,
+            .k-item.k-hover {
                 @include fill(
                     $kendo-list-item-hover-text,
                     $kendo-list-item-hover-bg
@@ -189,7 +191,8 @@
         .k-button {}
 
         .k-button:hover,
-        .k-button.k-state-hover {
+        .k-button.k-state-hover ,
+        .k-button.k-hover {
             @include fill(
                 $kendo-list-item-hover-text,
                 $kendo-list-item-hover-bg
@@ -197,7 +200,9 @@
         }
         .k-button:active,
         .k-button.k-state-active,
-        .k-button.k-state-selected {
+        .k-button.k-active,
+        .k-button.k-state-selected ,
+        .k-button.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
                 $kendo-list-item-selected-bg
@@ -218,12 +223,14 @@
 
         .k-spreadsheet-has-image {
             &:hover,
-            &.k-state-hovered {
+            &.k-state-hovered ,
+            &.k-hover {
                 box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
             }
 
             &:hover div,
-            &.k-state-hovered div {
+            &.k-state-hovered div ,
+            &.k-hover div {
                 color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
             }
         }

package/scss/stepper/_layout.scss

@@ -136,7 +136,8 @@
             opacity: $stepper-optional-label-opacity;
         }
         .k-step-disabled .k-step-label-optional,
-        &.k-state-disabled .k-step-label-optional {
+        &.k-state-disabled .k-step-label-optional ,
+        &.k-disabled .k-step-label-optional {
             color: inherit;
         }
 

package/scss/stepper/_theme.scss

@@ -182,7 +182,8 @@
                 $bg: $stepper-progressbar-bg
             );
 
-            .k-state-selected {
+            .k-state-selected ,
+            .k-selected {
                 @include fill(
                     $color: $stepper-progressbar-fill-text,
                     $bg: $stepper-progressbar-fill-bg

package/scss/tabstrip/_layout.scss

@@ -97,12 +97,14 @@
         position: relative;
         z-index: 1;
 
-        &.k-state-active {
+        &.k-state-active ,
+        &.k-active {
             display: block;
         }
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-width: 1px;
             outline-style: dotted;
             outline-offset: -1px;
@@ -190,7 +192,8 @@
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-bottom-color: transparent;
             }
         }
@@ -219,7 +222,8 @@
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-top-color: transparent;
             }
         }
@@ -252,7 +256,8 @@
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-right-color: transparent;
             }
         }
@@ -287,7 +292,8 @@
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active {
+            .k-item.k-state-active ,
+            .k-item.k-active {
                 border-left-color: transparent;
             }
         }
@@ -332,7 +338,8 @@
                     border-left-width: $tabstrip-indicator-size;
                 }
             }
-            .k-item.k-state-active::after {
+            .k-item.k-state-active::after ,
+            .k-item.k-active::after {
                 display: block;
             }
 

package/scss/tabstrip/_theme.scss

@@ -27,7 +27,8 @@
             );
 
             &:hover,
-            &.k-state-hover {
+            &.k-state-hover ,
+            &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
                     $tabstrip-item-hovered-bg,
@@ -38,7 +39,9 @@
 
             &:active,
             &.k-state-active,
-            &.k-state-selected {
+            &.k-active,
+            &.k-state-selected ,
+            &.k-selected {
                 @include fill(
                     $tabstrip-item-selected-text,
                     $tabstrip-item-selected-bg,
@@ -48,7 +51,8 @@
             }
 
             &:focus,
-            &.k-state-focused {
+            &.k-state-focused ,
+            &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
 
@@ -70,7 +74,8 @@
         );
 
         &:focus,
-        &.k-state-focused {
+        &.k-state-focused ,
+        &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
     }
@@ -80,7 +85,8 @@
     @if ($tabstrip-indicator-size) {
 
         .k-tabstrip-items-wrapper {
-            .k-item.k-state-active::after {
+            .k-item.k-state-active::after ,
+            .k-item.k-active::after {
                 border-color: $tabstrip-indicator-color;
             }
         }

package/scss/taskboard/_theme.scss

@@ -28,7 +28,8 @@
         );
     }
     .k-taskboard-column:focus,
-    .k-taskboard-column.k-state-focus {
+    .k-taskboard-column.k-state-focus ,
+    .k-taskboard-column.k-focus {
         @include fill(
             $taskboard-column-focus-text,
             $taskboard-column-focus-bg,

package/scss/tilelayout/_theme.scss

@@ -9,7 +9,8 @@
     .k-tilelayout-item:focus,
     .k-tilelayout-item.k-focus,
     .k-tilelayout-item.k-state-focus,
-    .k-tilelayout-item.k-state-focused {
+    .k-tilelayout-item.k-state-focused ,
+    .k-tilelayout-item.k-focus {
         @include box-shadow($tilelayout-card-focus-shadow);
     }
 

package/scss/timeline/_theme.scss

@@ -41,7 +41,8 @@
             color: $body-text;
         }
 
-        .k-timeline-arrow.k-state-disabled {
+        .k-timeline-arrow.k-state-disabled ,
+        .k-timeline-arrow.k-disabled {
             opacity: 1; // The arrow button in disabled mode should have a solid background
             color: $timeline-track-arrow-disabled-text;
             background-color: $timeline-track-arrow-disabled-bg;
@@ -61,7 +62,8 @@
         background-color: $timeline-flag-bg;
     }
 
-    .k-timeline-track-item.k-state-focus .k-timeline-circle {
+    .k-timeline-track-item.k-state-focus .k-timeline-circle ,
+    .k-timeline-track-item.k-focus .k-timeline-circle {
         @include box-shadow( $timeline-track-item-focus-shadow );
     }
 }