@progress/kendo-theme-default 5.6.1-dev.5 → 5.7.0

package/scss/grid/_theme.scss

@@ -73,33 +73,28 @@
         }
 
         // Hover state
-        tbody>tr:not(.k-detail-row):hover,
-        tbody>tr:not(.k-detail-row).k-state-hover,
-        tbody>tr:not(.k-detail-row).k-hover {
+        tbody > tr:not(.k-detail-row):hover,
+        tbody > tr:not(.k-detail-row).k-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
 
         // Selected state
-        td.k-state-selected,
         td.k-selected,
-        tr.k-state-selected > td,
         tr.k-selected > td {
             color: $grid-selected-text;
             background-color: $grid-selected-bg;
         }
 
         // Focused state
-        td.k-state-focused,
+        td:focus,
         td.k-focus,
-        th.k-state-focused,
-        th.k-focus,
         th:focus,
+        th.k-focus,
         .k-master-row > td:focus,
         .k-grouping-row > td:focus,
         .k-detail-row > td:focus,
         .k-group-footer > td:focus,
-        .k-grid-pager.k-state-focused,
         .k-grid-pager.k-focus {
             box-shadow: $grid-focused-shadow;
         }
@@ -143,20 +138,16 @@
             }
 
             // Selected state
-            .k-state-selected td,
             .k-selected td {
                 @include fill( $bg: $grid-sticky-selected-bg );
             }
 
-            .k-state-selected.k-alt td,
             .k-selected.k-alt td {
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
             // Selected hover
-            .k-state-selected:hover td,
             .k-selected:hover td,
-            .k-state-selected.k-state-hover td,
             .k-selected.k-hover td {
                 @include fill( $bg: $grid-sticky-selected-hovered-bg );
             }
@@ -185,6 +176,8 @@
 
         .k-i-sort-asc-sm,
         .k-i-sort-desc-sm,
+        .k-i-sort-asc-small,
+        .k-i-sort-desc-small,
         .k-sort-order {
             color: $grid-sorting-indicator-text;
         }
@@ -198,12 +191,9 @@
                 background-color: $kendo-button-hover-bg;
             }
             &:focus,
-            &.k-state-focus,
-            &.k-focus,
-            &.k-state-border-down {
+            &.k-focus {
                 box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
             }
-            &.k-state-active,
             &.k-active {
                 color: $selected-text;
                 background-color: $selected-bg;
@@ -259,20 +249,14 @@
         }
 
         // Selected state
-        &.k-state-selected .k-grid-content-sticky,
         &.k-selected .k-grid-content-sticky,
-        &.k-state-selected .k-grid-row-sticky,
         &.k-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-state-selected,
         td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
 
-        &.k-state-selected.k-alt .k-grid-content-sticky,
         &.k-selected.k-alt .k-grid-content-sticky,
-        &.k-state-selected.k-alt .k-grid-row-sticky,
         &.k-selected.k-alt .k-grid-row-sticky,
-        &.k-alt td.k-grid-content-sticky.k-state-selected,
         &.k-alt td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
@@ -281,26 +265,18 @@
         // Hovered state
         &:hover .k-grid-content-sticky,
         &:hover .k-grid-row-sticky,
-        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-row-sticky,
         &.k-hover .k-grid-row-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
 
 
         // Selected hover
-        &.k-state-selected:hover .k-grid-content-sticky,
         &.k-selected:hover .k-grid-content-sticky,
-        &.k-state-selected:hover .k-grid-row-sticky,
         &.k-selected:hover .k-grid-row-sticky,
-        &.k-state-selected.k-state-hover .k-grid-content-sticky,
         &.k-selected.k-hover .k-grid-content-sticky,
-        &.k-state-selected.k-state-hover .k-grid-row-sticky,
         &.k-selected.k-hover .k-grid-row-sticky,
-        &:hover td.k-grid-content-sticky.k-state-selected,
         &:hover td.k-grid-content-sticky.k-selected,
-        &.k-state-hover td.k-grid-content-sticky.k-state-selected,
         &.k-hover td.k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -314,7 +290,6 @@
             background-color: $grid-sticky-bg;
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -328,7 +303,6 @@
             }
 
             &:hover td,
-            &.k-state-hover td,
             &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -340,66 +314,43 @@
         }
 
         // Selected state
-        tr.k-state-selected .k-grid-content-sticky,
         tr.k-selected .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky td,
         .k-selected.k-grid-row-sticky td,
-        .k-grid-row-sticky td.k-state-selected,
         .k-grid-row-sticky td.k-selected,
-        .k-state-selected.k-grid-content-sticky,
         .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
 
-        tr.k-state-selected.k-alt .k-grid-content-sticky,
         tr.k-selected.k-alt .k-grid-content-sticky,
-        .k-state-selected.k-alt.k-grid-row-sticky td,
         .k-selected.k-alt.k-grid-row-sticky td,
-        .k-alt .k-state-selected.k-grid-content-sticky,
         .k-alt .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
 
         // Hover state
         tr:hover .k-grid-content-sticky,
-        tr.k-state-hover .k-grid-content-sticky,
         tr.k-hover .k-grid-content-sticky,
         .k-grid-row-sticky:hover td,
-        .k-grid-row-sticky.k-state-hover td,
         .k-grid-row-sticky.k-hover td,
         .k-grid-row-sticky.k-alt:hover td,
-        .k-grid-row-sticky.k-alt.k-state-hover td,
         .k-grid-row-sticky.k-alt.k-hover td,
         .k-alt:hover .k-grid-content-sticky,
-        .k-alt.k-state-hover .k-grid-content-sticky,
         .k-alt.k-hover .k-grid-content-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
 
         // Selected + Hover
-        tr.k-state-selected:hover .k-grid-content-sticky,
         tr.k-selected:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-state-hover .k-grid-content-sticky,
         tr.k-selected.k-hover .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky:hover td,
         .k-selected.k-grid-row-sticky:hover td,
-        .k-state-selected.k-grid-row-sticky.k-state-hover td,
         .k-selected.k-grid-row-sticky.k-hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky:hover td,
         .k-selected.k-alt.k-grid-row-sticky:hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky.k-state-hover td,
         .k-selected.k-alt.k-grid-row-sticky.k-hover td,
-        tr.k-state-selected.k-alt:hover .k-grid-content-sticky,
         tr.k-selected.k-alt:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-alt.k-state-hover .k-grid-content-sticky,
         tr.k-selected.k-alt.k-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td.k-state-selected,
         .k-grid-row-sticky:hover td.k-selected,
-        .k-grid-row-sticky.k-state-hover td.k-state-selected,
         .k-grid-row-sticky.k-hover td.k-selected,
-        tr:hover .k-grid-content-sticky.k-state-selected,
         tr:hover .k-grid-content-sticky.k-selected,
-        tr.k-state-hover .k-grid-content-sticky.k-state-selected,
         tr.k-hover .k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -411,7 +362,6 @@
         }
 
         &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-hovered-bg );
         }
@@ -425,13 +375,11 @@
         );
     }
     .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus,
     .k-columnmenu-item.k-focus {
         @include box-shadow( $kendo-list-item-focus-shadow );
     }
 
     .k-columnmenu-item {
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -457,7 +405,6 @@
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -465,7 +412,6 @@
                     );
                 }
 
-                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -474,7 +420,6 @@
                 }
 
                 &:focus,
-                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }

package/scss/input/_layout.scss

@@ -69,8 +69,7 @@
             @include disabled( $disabled-styling );
 
             [disabled] &,
-            .k-disabled &,
-            .k-state-disabled & {
+            .k-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }
@@ -91,8 +90,7 @@
             @include disabled( $disabled-styling );
 
             [disabled] &,
-            .k-disabled &,
-            .k-state-disabled & {
+            .k-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }

package/scss/listview/_theme.scss

@@ -13,7 +13,6 @@
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused,
         > .k-focus {
             @include fill(
                 $listview-item-focus-text,
@@ -23,7 +22,6 @@
             @include box-shadow( $listview-item-focus-shadow );
         }
 
-        > .k-state-selected,
         > .k-selected {
             @include fill(
                 $listview-item-selected-text,

package/scss/loader/_theme.scss

@@ -16,8 +16,11 @@
     }
 
     .k-loader-container-inner {
-        .k-text-secondary {
-            color: $loader-secondary-bg !important; // sass-lint:disable-line no-important
+        // sass-lint:disable-block no-important
+        // sass-lint:disable-block class-name-format
+        .k-text-secondary,
+        .\!k-text-secondary {
+            color: $loader-secondary-bg !important;
         }
     }
 

package/scss/notification/_layout.scss

@@ -51,7 +51,8 @@
             flex: none;
         }
 
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             margin-right: 0;
             margin-left: $notification-icon-spacing;
             flex: none;
@@ -74,7 +75,8 @@
                 margin-left: $notification-icon-spacing;
             }
 
-            > .k-i-close {
+            > .k-i-close,
+            > .k-i-x {
                 margin-left: 0;
                 margin-right: $notification-icon-spacing;
             }

package/scss/notification/_theme.scss

@@ -9,7 +9,8 @@
         );
     }
     .k-notification-wrap {
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             color: inherit;
         }
     }

package/scss/orgchart/_theme.scss

@@ -18,8 +18,7 @@
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
     }
@@ -33,9 +32,6 @@
         );
     }
     .k-orgchart-node-group-container:focus,
-    .k-orgchart-node-group-container.k-focus,
-    .k-orgchart-node-group-container.k-state-focus,
-    .k-orgchart-node-group-container.k-state-focused,
     .k-orgchart-node-group-container.k-focus {
         @include box-shadow( $orgchart-node-group-focus-shadow );
         @include fill ( $border: $orgchart-node-group-focus-border );

package/scss/pager/_layout.scss

@@ -34,7 +34,6 @@
 
             // Focused state
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -43,6 +42,10 @@
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
+            .k-i-caret-alt-to-left,
+            .k-i-caret-alt-to-right,
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-end-left,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
@@ -84,7 +87,6 @@
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -134,7 +136,6 @@
         }
 
         // Selected state
-        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;

package/scss/pager/_theme.scss

@@ -9,9 +9,6 @@
         );
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
@@ -27,7 +24,6 @@
         );
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -36,7 +32,6 @@
             );
         }
 
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -46,7 +41,6 @@
         }
 
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             background-color: $pager-item-focus-bg;
             @include box-shadow( $pager-item-focus-shadow );
@@ -70,7 +64,6 @@
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -80,13 +73,11 @@
             }
 
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 background-color: $pager-number-focus-bg;
                 @include box-shadow( $pager-number-focus-shadow );
             }
 
-            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $pager-number-selected-text,
@@ -119,7 +110,6 @@
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -129,7 +119,7 @@
                 }
             }
 
-            &.k-state-expanded {
+            &.k-expanded {
                 @include fill(
                     $popup-text,
                     $popup-bg,
@@ -140,7 +130,6 @@
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -148,7 +137,6 @@
                         );
                     }
 
-                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,

package/scss/panelbar/_layout.scss

@@ -95,6 +95,10 @@
             }
         }
 
+        // Panelbar item
+        .k-panelbar-item {
+            outline-style: none;
+        }
 
         // Panelbar content
         .k-panelbar-content {

package/scss/panelbar/_theme.scss

@@ -12,7 +12,6 @@
         > .k-item,
         > .k-panelbar-header {
 
-            &.k-state-expanded.k-level-0 > .k-link,
             &.k-expanded.k-level-0 > .k-link  {
                 @include fill(
                     $panelbar-header-expanded-text,
@@ -39,7 +38,6 @@
 
             // Hover
             > .k-link:hover,
-            > .k-link.k-state-hover,
             > .k-link.k-hover {
                 @include fill(
                     $panelbar-header-hovered-text,
@@ -51,9 +49,6 @@
 
             // Focus
             > .k-link:focus,
-            > .k-link.k-state-focus,
-            > .k-link.k-focus,
-            > .k-link.k-state-focused,
             > .k-link.k-focus {
                 @include fill(
                     $panelbar-header-focused-text,
@@ -66,7 +61,6 @@
 
             // Focus & Hover
             > .k-link:focus:hover,
-            > .k-link.k-state-focus.k-state-hover,
             > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-header-hovered-focused-text,
@@ -77,7 +71,6 @@
             }
 
             // Selected
-            > .k-link.k-state-selected,
             > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
@@ -93,9 +86,7 @@
             }
 
             // Selected Hover
-            > .k-link.k-state-selected:hover,
             > .k-link.k-selected:hover,
-            > .k-link.k-state-selected.k-state-hover,
             > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-header-selected-hovered-text,
@@ -106,12 +97,8 @@
             }
 
             // Selected Focus
-            > .k-link.k-state-selected:focus,
             > .k-link.k-selected:focus,
-            > .k-link.k-state-selected.k-state-focus,
-            > .k-link.k-selected.k-focus,
-            > .k-link.k-state-selected.k-state-focused,
-            > .k-link.k-selected.k-focused {
+            > .k-link.k-selected.k-focus {
                 @include fill(
                     $panelbar-header-selected-focused-text,
                     $panelbar-header-selected-focused-bg,
@@ -121,12 +108,8 @@
             }
 
             // Selected Focus & Hover
-            > .k-link.k-state-selected:hover:focus,
             > .k-link.k-selected:hover:focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focus,
-            > .k-link.k-selected.k-hover.k-state-focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focused,
-            > .k-link.k-selected.k-hover.k-state-focused {
+            > .k-link.k-selected.k-hover.k-focus {
                 @include fill(
                     $panelbar-header-selected-hovered-focused-text,
                     $panelbar-header-selected-hovered-focused-bg,
@@ -143,10 +126,8 @@
 
             // Hover
             > .k-item > .k-link:hover,
-            > .k-item > .k-link.k-state-hover,
             > .k-item > .k-link.k-hover,
             > .k-panelbar-item > .k-link:hover,
-            > .k-panelbar-item > .k-link.k-state-hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
                     $panelbar-item-hovered-text,
@@ -158,14 +139,8 @@
 
             // Focus
             > .k-item > .k-link:focus,
-            > .k-item > .k-link.k-state-focus,
-            > .k-item > .k-link.k-focus,
-            > .k-item > .k-link.k-state-focused,
             > .k-item > .k-link.k-focus,
             > .k-panelbar-item > .k-link:focus,
-            > .k-panelbar-item > .k-link.k-state-focus,
-            > .k-panelbar-item > .k-link.k-focus,
-            > .k-panelbar-item > .k-link.k-state-focused,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
                     $panelbar-item-focused-text,
@@ -178,10 +153,8 @@
 
             // Focus & Hover
             > .k-item > .k-link:focus:hover,
-            > .k-item > .k-link.k-state-focus.k-state-hover,
             > .k-item > .k-link.k-focus.k-hover,
             > .k-panelbar-item > .k-link:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-hovered-focused-text,
@@ -192,9 +165,7 @@
             }
 
             // Selected
-            > .k-item > .k-link.k-state-selected,
             > .k-item > .k-link.k-selected,
-            > .k-panelbar-item > .k-link.k-state-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
                     $panelbar-item-selected-text,
@@ -205,13 +176,9 @@
             }
 
             // Selected Hover
-            > .k-item > .k-link.k-state-selected:hover,
             > .k-item > .k-link.k-selected:hover,
-            > .k-item > .k-link.k-state-selected.k-state-hover,
             > .k-item > .k-link.k-selected.k-hover,
-            > .k-panelbar-item > .k-link.k-state-selected:hover,
             > .k-panelbar-item > .k-link.k-selected:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-text,
@@ -222,18 +189,10 @@
             }
 
             // Selected Focus
-            > .k-item > .k-link.k-state-selected:focus,
             > .k-item > .k-link.k-selected:focus,
-            > .k-item > .k-link.k-state-selected.k-state-focus,
             > .k-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused,
-            > .k-item > .k-link.k-selected.k-focused,
-            > .k-panelbar-item > .k-link.k-state-selected:focus,
             > .k-panelbar-item > .k-link.k-selected:focus,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
-            > .k-panelbar-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused,
-            > .k-item > .k-link.k-selected.k-focused {
+            > .k-panelbar-item > .k-link.k-selected.k-focus {
                 @include fill(
                     $panelbar-item-selected-focused-text,
                     $panelbar-item-selected-focused-bg,
@@ -243,18 +202,10 @@
             }
 
             // Selected Focus & Hover
-            > .k-item > .k-link.k-state-selected:focus:hover,
             > .k-item > .k-link.k-selected:focus:hover,
-            > .k-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focused.k-state-hover,
-            > .k-panelbar-item > .k-link.k-state-selected:focus:hover,
+            > .k-item > .k-link.k-selected.k-focus.k-hover,
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
-            > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focused.k-state-hover {
+            > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-focused-text,
                     $panelbar-item-selected-hovered-focused-bg,

package/scss/pdf-viewer/_index.scss

@@ -3,11 +3,14 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../button/_variables.scss";
 @import "../combobox/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../dialog/_index.scss";
 @import "../pager/_index.scss";
 @import "../icons/_index.scss";
+@import "../dropzone/_index.scss";
+@import "../window/_index.scss";
 
 
 // Component