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

package/scss/pdf-viewer/_layout.scss

@@ -4,6 +4,7 @@
         border-width: $pdf-viewer-border-width;
         border-style: solid;
         box-sizing: border-box;
+        position: relative;
         outline: 0;
         font-family: $pdf-viewer-font-family;
         font-size: $pdf-viewer-font-size;
@@ -34,11 +35,14 @@
 
 
         // Canvas
-        .k-list-scroller {
+        .k-canvas {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             outline: none;
 
-            .k-enable-text-select {
+            .k-enable-text-select,
+            &.k-enable-text-select {
                 -webkit-user-select: text;
                 -moz-user-select: text;
                 -ms-user-select: text;
@@ -46,16 +50,22 @@
                 cursor: text;
             }
 
-            .k-enable-panning {
+            .k-enable-panning,
+            &.k-enable-panning {
                 cursor: grab;
             }
-            .k-enable-panning span::selection {
+            .k-enable-panning span::selection,
+            &.k-enable-panning span::selection {
                 background-color: transparent;
             }
         }
 
 
-        // Page
+        // Pages
+        .k-pdf-viewer-pages {
+            flex: 1 1 auto;
+        }
+
         .k-page {
             position: relative;
             margin: $pdf-viewer-page-spacing auto;
@@ -81,46 +91,88 @@
                 mark {
                     color: transparent;
                 }
+
+                .k-search-highlight-mark {
+                    color: transparent;
+                }
             }
         }
-    }
 
-    // Search
-    .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-padding;
-
-        .k-search-container {
+        .k-blank-page {
+            margin: 0;
             display: flex;
-            gap: $pdf-viewer-search-dialog-spacing;
-            flex-flow: row nowrap;
-            flex: 0 0 auto;
-            justify-content: flex-start;
+            flex-flow: column nowrap;
+            width: 100%;
+            height: 100%;
             align-items: center;
+            justify-content: center;
+            background-color: inherit !important; // sass-lint:disable-line no-important
+
+            .k-upload,
+            .k-dropzone,
+            .k-dropzone-inner {
+                border: 0;
+                background: none;
+            }
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
+            > .k-icon {
+                font-size: $pdf-viewer-icon-size;
             }
+        }
 
-            .k-textbox {
-                width: 10em;
-                flex: none;
+    }
 
-                .k-button {
-                    border-width: 0;
-                }
-            }
+    // Search
+    .k-pdf-viewer-search-dialog {
+        padding: 0 !important; // sass-lint:disable-line no-important
+    }
+
+    .k-search-panel {
+        padding: $pdf-viewer-search-dialog-padding-y $pdf-viewer-search-dialog-padding-x;
+        display: flex;
+        gap: $pdf-viewer-search-dialog-spacing;
+        flex-flow: row nowrap;
+        flex: 0 0 auto;
+        justify-content: flex-start;
+        align-items: center;
+
+        .k-search-dialog-draghandle {
+            cursor: move;
+            margin-left: 0;
+        }
+
+        .k-textbox {
+            width: 10em;
+            flex: none;
 
-            .k-search-matches {
-                flex: 1 1 auto;
+            .k-button {
+                border-width: 0;
             }
         }
+
+        .k-search-matches {
+            display: inline-flex;
+            gap: $pdf-viewer-search-panel-matches-spacing;
+        }
+    }
+
+    .k-pdf-viewer-canvas > .k-search-panel {
+        width: max-content;
+        margin-top: calc( (#{$kendo-button-calc-size} + #{$pdf-viewer-search-panel-border-width} + ( 2 * #{$pdf-viewer-search-dialog-padding-y} )) * -1 );
+        border-width: $pdf-viewer-search-panel-border-width;
+        border-style: solid;
+        border-radius: $pdf-viewer-search-panel-border-radius;
+        z-index: 10;
+    }
+
+    // Alias
+    .k-search-container {
+        @extend .k-search-panel !optional;
     }
 
 
     // IE
     .k-ie .k-pdf-viewer-search-dialog {
-
         .k-search-container > * + * {
             margin-left: $pdf-viewer-search-dialog-spacing;
         }

package/scss/pdf-viewer/_theme.scss

@@ -40,12 +40,33 @@
             @include box-shadow( $pdf-viewer-page-shadow );
         }
 
+        .k-blank-page > .k-icon {
+            @include fill( $color: $pdf-viewer-icon-text );
+        }
+
 
         // Search
         .k-search-highlight {
             background-color: $pdf-viewer-search-highlight-bg;
         }
 
+        .k-search-highlight-mark {
+            @include fill( $bg: $pdf-viewer-search-highlight-mark-bg );
+        }
+
+    }
+
+    .k-pdf-viewer-canvas > .k-search-panel {
+        @include fill(
+            $pdf-viewer-search-panel-text,
+            $pdf-viewer-search-panel-bg,
+            $pdf-viewer-search-panel-border,
+        );
+        @include box-shadow( $pdf-viewer-search-panel-shadow );
+    }
+
+    .k-search-container {
+        @extend .k-search-panel !optional;
     }
 
 }

package/scss/pdf-viewer/_variables.scss

@@ -24,9 +24,22 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-y: calc( #{$toolbar-padding-x} * 2 ) !default;
 $pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
+$pdf-viewer-search-panel-border-width: 1px !default;
+$pdf-viewer-search-panel-border-radius: 0 !default;
+$pdf-viewer-search-panel-bg: $component-bg !default;
+$pdf-viewer-search-panel-text: $component-text !default;
+$pdf-viewer-search-panel-border: $component-border !default;
+$pdf-viewer-search-panel-shadow: $window-shadow !default;
+$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;
+
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 
 $pdf-viewer-search-highlight-bg: $body-text !default;
+$pdf-viewer-search-highlight-mark-bg: yellow !default;
+
+$pdf-viewer-icon-text: $dropzone-icon-text !default;
+$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;

package/scss/pivotgrid/_theme.scss

@@ -45,15 +45,12 @@
 
 
     // Hover state
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
     .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
     .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover {
+    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
         @include fill (
             $pivotgrid-hover-text,
             $pivotgrid-hover-bg,
@@ -62,9 +59,10 @@
     }
 
     // Focus state
-    .k-pivotgrid-cell.k-state-focus,
-    .k-pivotgrid-cell.k-focus,
     .k-pivotgrid-cell:focus,
+    .k-pivotgrid-cell.k-focus,
+    .k-pivotgrid-empty-cell:focus,
+    .k-pivotgrid-empty-cell.k-focus,
     .k-master-row > .k-pivotgrid-cell:focus,
     .k-grouping-row > .k-pivotgrid-cell:focus,
     .k-detail-row > .k-pivotgrid-cell:focus,
@@ -73,9 +71,7 @@
     }
 
     // Selected state
-    .k-pivotgrid-cell.k-state-selected,
     .k-pivotgrid-cell.k-selected,
-    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
     .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
         @include fill (
             $pivotgrid-selected-text,

package/scss/popover/_layout.scss

@@ -24,6 +24,11 @@
         }
     }
 
+    .k-popover-inner {
+        position: relative;
+        border-radius: inherit;
+    }
+
     // Header
     .k-popover-header {
         @include border-top-radius( $popover-border-radius );
@@ -50,32 +55,32 @@
         margin: 0;
         width: $popover-callout-width;
         height: $popover-callout-height;
-        border-width: $popover-callout-border-width $popover-callout-border-width 0 0;
+        border-width: $popover-callout-border-width;
         border-style: $popover-callout-border-style;
         position: absolute;
 
         &.k-callout-n {
             top: 0;
             left: 50%;
-            transform: translate(-50%, -50%) rotate(-45deg);
+            transform: translate(-50%, -50%) rotate(45deg);
         }
 
         &.k-callout-e {
             top: 50%;
             right: 0;
-            transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
+            transform: translate(50%, -50%) rotate(-45deg);
         }
 
         &.k-callout-s {
             bottom: 0;
             left: 50%;
-            transform: translate(-50%, 50%) rotate(135deg);
+            transform: translate(-50%, 50%) rotate(45deg);
         }
 
         &.k-callout-w {
             top: 50%;
             left: 0;
-            transform: translate(-50%, -50%) rotate(-135deg);
+            transform: translate(-50%, -50%) rotate(45deg);
         }
     }
 

package/scss/popover/_theme.scss

@@ -11,6 +11,11 @@
         );
     }
 
+    .k-popover-inner {
+        background-color: inherit;
+        border-color: inherit;
+    }
+
     // Header
     .k-popover-header {
         @include fill(
@@ -23,14 +28,11 @@
     // Callout
     .k-popover-callout {
         @include fill(
-            $bg: $popover-callout-bg,
-            $border: $popover-callout-border
+            $bg: inherit,
+            $border: inherit
         );
 
-        &.k-callout-n { @include box-shadow( $popover-callout-shadow-n ); }
-        &.k-callout-e { @include box-shadow( $popover-callout-shadow-e ); }
-        &.k-callout-s { @include box-shadow( $popover-callout-shadow-s ); }
-        &.k-callout-w { @include box-shadow( $popover-callout-shadow-w ); }
+        @include box-shadow( inherit )
     }
 
 }

package/scss/popover/_variables.scss

@@ -29,8 +29,3 @@ $popover-callout-border-width: $popover-border-width !default;
 $popover-callout-border-style: $popover-border-style !default;
 $popover-callout-bg: $popover-bg !default;
 $popover-callout-border: $popover-border !default;
-
-$popover-callout-shadow-n: null !default;
-$popover-callout-shadow-e: rgba( black, .03 ) 2px -1px 4px 0px !default;
-$popover-callout-shadow-s: rgba( black, .06 ) 2px -2px 4px 0px !default;
-$popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;

package/scss/progressbar/_layout.scss

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

package/scss/progressbar/_theme.scss

@@ -8,7 +8,6 @@
     .k-progressbar {
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
-        .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,6 @@
         }
 
         .k-radio:focus,
-        .k-radio.k-state-focus,
         .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 

package/scss/radio/_theme.scss

@@ -12,7 +12,6 @@
 
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover,
     .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
@@ -24,7 +23,6 @@
 
     // Focus state
     .k-radio:focus,
-    .k-radio.k-state-focus,
     .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
         @include box-shadow( $kendo-radio-focus-shadow );
@@ -33,13 +31,11 @@
 
     // Invalid state
     .k-radio.k-invalid,
-    .k-radio.k-state-invalid,
     .k-radio.ng-invalid.ng-touched,
     .k-radio.ng-invalid.ng-dirty {
         @include fill( $border: $kendo-radio-invalid-border );
     }
     .k-radio.k-invalid + .k-radio-label,
-    .k-radio.k-state-invalid + .k-radio-label,
     .k-radio.ng-invalid.ng-touched + .k-radio-label,
     .k-radio.ng-invalid.ng-dirty + .k-radio-label {
         @include fill( $color: $kendo-radio-invalid-text );
@@ -56,7 +52,6 @@
         );
     }
     .k-radio:checked: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/_layout.scss

@@ -20,7 +20,7 @@
             box-sizing: border-box;
         }
 
-        &.k-state-readonly {
+        &.k-readonly {
             pointer-events: none;
         }
     }

package/scss/rating/_theme.scss

@@ -4,7 +4,6 @@
         color: $component-text;
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
 
             .k-rating-item {
@@ -12,7 +11,6 @@
                     text-shadow: $rating-icon-focused-shadow;
                 }
 
-                &.k-state-selected > .k-icon,
                 &.k-selected > .k-icon {
                     text-shadow: $rating-icon-focused-selected-shadow;
                 }
@@ -23,23 +21,19 @@
     .k-rating-item {
         color: $rating-icon-text;
 
-        &.k-state-selected,
         &.k-selected {
             color: $rating-icon-selected-text;
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 color: $rating-icon-focused-text;
             }
         }
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $rating-icon-hover-text;
             cursor: pointer;
         }
     }
 }
-

package/scss/scheduler/_layout.scss

@@ -441,7 +441,6 @@
             }
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -507,7 +506,6 @@
 
         // Hover
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             .k-event-actions .k-event-delete,
             .k-resize-handle {
@@ -765,11 +763,9 @@
             opacity: .5;
             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-hover .k-event-delete {
             visibility: visible;
         }
@@ -843,7 +839,6 @@
                 position: relative;
             }
 
-            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }
@@ -1052,6 +1047,8 @@
 
         .k-scheduler,
         &.k-scheduler {
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
             .k-current-time-arrow-right {

package/scss/scheduler/_theme.scss

@@ -82,9 +82,7 @@
         );
     }
 
-    .k-scheduler-layout td.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);
     }
@@ -107,7 +105,7 @@
         );
         @include box-shadow( $scheduler-event-shadow );
 
-        &.k-state-hover,
+        &:hover,
         &.k-hover {
             @include fill(
                 $scheduler-event-hover-text,
@@ -118,7 +116,6 @@
             @include box-shadow( $scheduler-event-hover-shadow );
         }
 
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $scheduler-event-selected-text,
@@ -185,10 +182,8 @@
 
         // 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-hover {
             @include fill(
                 $hovered-text,
@@ -200,9 +195,7 @@
 
         .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-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,
@@ -212,13 +205,10 @@
         }
 
         // 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-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;
         }
@@ -236,7 +226,6 @@
             @include fill( $bg: $scheduler-yearview-indicator-bg );
         }
 
-        .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,6 @@
         -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
 
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -60,7 +59,6 @@
         }
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -80,14 +78,12 @@
         }
 
         &:focus,
-        &.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-hover {
         box-shadow: $scrollview-pagebutton-shadow;
     }