@progress/kendo-theme-default 6.8.0-dev.2 → 7.0.0

package/scss/input/_layout.scss

@@ -217,9 +217,7 @@
     .k-input-validation-icon,
     .k-input-loading-icon,
     .k-input-prefix > .k-icon,
-    .k-input-prefix > .k-svg-icon,
-    .k-input-suffix > .k-icon,
-    .k-input-suffix > .k-svg-icon {
+    .k-input-suffix > .k-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -229,6 +227,12 @@
         box-sizing: content-box;
     }
 
+    .k-input-loading-icon {
+        width: 1em;
+        height: 1em;
+        font-size: $kendo-icon-size;
+    }
+
     // Input with SVG icon
     .k-input-icon,
     .k-input-validation-icon,
@@ -342,12 +346,10 @@
                 min-height: auto !important; // stylelint-disable-line declaration-no-important
             }
         }
-        .k-spinner-increase .k-icon,
-        .k-spinner-increase .k-svg-icon {
+        .k-spinner-increase .k-icon {
             bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
-        .k-spinner-decrease .k-icon,
-        .k-spinner-decrease .k-svg-icon {
+        .k-spinner-decrease .k-icon {
             top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
     }
@@ -433,9 +435,7 @@
             .k-input-loading-icon,
             .k-clear-value,
             .k-input-prefix > .k-icon,
-            .k-input-prefix > .k-svg-icon,
-            .k-input-suffix > .k-icon,
-            .k-input-suffix > .k-svg-icon {
+            .k-input-suffix > .k-icon {
                 padding-block: $_padding-y;
                 padding-inline: $_padding-y;
                 box-sizing: content-box;

package/scss/list/_variables.scss

@@ -195,7 +195,7 @@ $kendo-list-header-text: null !default;
 $kendo-list-header-border: inherit !default;
 /// The box shadow of the List header.
 /// @group list
-$kendo-list-header-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
+$kendo-list-header-shadow: k-elevation(2) !default;
 
 
 /// The background color of the List items.

package/scss/listview/_variables.scss

@@ -57,4 +57,4 @@ $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/map/_layout.scss

@@ -87,8 +87,7 @@
             box-shadow: none;
             position: absolute;
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 min-width: 0;
                 min-height: 0;
             }

package/scss/orgchart/_variables.scss

@@ -22,7 +22,7 @@ $kendo-orgchart-node-group-text: $kendo-base-text !default;
 $kendo-orgchart-node-group-border: $kendo-base-border !default;
 
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
-$kendo-orgchart-node-group-focus-shadow: $kendo-card-focus-shadow !default;
+$kendo-orgchart-node-group-focus-shadow: k-elevation(1) !default;
 
 $kendo-orgchart-node-group-title-font-size: $kendo-font-size-lg !default;
 $kendo-orgchart-node-group-title-margin-bottom: k-math-div( $kendo-orgchart-spacer, 3 ) !default;
@@ -37,7 +37,7 @@ $kendo-orgchart-card-padding-y: $kendo-card-padding-y !default;
 $kendo-orgchart-card-padding-x: $kendo-orgchart-card-padding-y !default;
 $kendo-orgchart-card-border-width: $kendo-card-border-width !default;
 $kendo-orgchart-card-shadow: $kendo-card-shadow !default;
-$kendo-orgchart-card-focus-shadow: $kendo-card-focus-shadow !default;
+$kendo-orgchart-card-focus-shadow: k-elevation(1) !default;
 
 $kendo-orgchart-card-title-margin-bottom: 0px !default;
 $kendo-orgchart-card-title-font-size: null !default;

package/scss/panelbar/_layout.scss

@@ -13,6 +13,7 @@
         line-height: $kendo-panelbar-line-height;
         list-style: none;
         display: block;
+        position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 

package/scss/panelbar/_theme.scss

@@ -32,7 +32,6 @@
                 );
 
                 .k-icon,
-                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: $kendo-panelbar-text;
                 }
@@ -82,7 +81,6 @@
                 );
 
                 .k-icon,
-                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: inherit;
                 }

package/scss/pdf-viewer/_theme.scss

@@ -40,8 +40,7 @@
             @include box-shadow( $kendo-pdf-viewer-page-shadow );
         }
 
-        .k-blank-page > .k-icon,
-        .k-blank-page > .k-svg-icon {
+        .k-blank-page > .k-icon {
             @include fill( $color: $kendo-pdf-viewer-icon-text );
         }
 

package/scss/pdf-viewer/_variables.scss

@@ -23,7 +23,7 @@ $kendo-pdf-viewer-page-spacing: 30px !default;
 $kendo-pdf-viewer-page-bg: white !default;
 $kendo-pdf-viewer-page-text: $kendo-component-text !default;
 $kendo-pdf-viewer-page-border: $kendo-component-border !default;
-$kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;
+$kendo-pdf-viewer-page-shadow: k-elevation(3) !default;
 
 $kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
 $kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;

package/scss/pivotgrid/_layout.scss

@@ -144,8 +144,7 @@
         }
     }
 
-    .k-pivotgrid-cell .k-icon,
-    .k-pivotgrid-cell .k-svg-icon {
+    .k-pivotgrid-cell .k-icon {
         cursor: pointer;
         padding-inline-end: $kendo-pivotgrid-icon-spacing;
     }
@@ -197,8 +196,7 @@
             span {
                 writing-mode: vertical-rl;
             }
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 vertical-align: baseline;
             }
         }
@@ -355,8 +353,7 @@
         flex-direction: row;
         align-items: center;
 
-        .k-icon,
-        .k-svg-icon {
+        .k-icon {
             margin-right: k-map-get( $kendo-spacing, 2 );
         }
         .k-dropdown-list {

package/scss/pivotgrid/_variables.scss

@@ -69,10 +69,11 @@ $kendo-pivotgrid-configurator-header-bg: null !default;
 $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-configurator-header-border: null !default;
 
-$kendo-pivotgrid-configurator-end-shadow: -3px 0px 6px rgba(0, 0, 0, .16) !default;
-$kendo-pivotgrid-configurator-start-shadow: 3px 0px 6px rgba(0, 0, 0, .16) !default;
-$kendo-pivotgrid-configurator-top-shadow: 0px -3px 6px rgba(0, 0, 0, .16) !default;
-$kendo-pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba(0, 0, 0, .16) !default;
+$kendo-pivotgrid-configurator-shadow: k-elevation(3) !default;
+$kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default; // -3px 0px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow !default; // 3px 0px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow  !default; // 0px -3px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default; // 0px 3px 6px rgba(0, 0, 0, .16)
 
 $kendo-pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;

package/scss/popup/_variables.scss

@@ -36,4 +36,4 @@ $kendo-popup-text: $kendo-component-text !default;
 $kendo-popup-border: $kendo-component-border !default;
 /// Box shadow of the popup.
 /// @group popup
-$kendo-popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
+$kendo-popup-shadow: k-elevation(4) !default;

package/scss/rating/_theme.scss

@@ -8,16 +8,10 @@
 
             .k-rating-item {
                 > .k-icon {
-                    text-shadow: $kendo-rating-icon-focus-shadow;
-                }
-                > .k-svg-icon {
                     filter: drop-shadow( $kendo-rating-icon-focus-shadow );
                 }
 
                 &.k-selected > .k-icon {
-                    text-shadow: $kendo-rating-icon-focus-selected-shadow;
-                }
-                &.k-selected > .k-svg-icon {
                     filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow );
                 }
             }

package/scss/rating/_variables.scss

@@ -20,5 +20,5 @@ $kendo-rating-icon-selected-text: $kendo-selected-bg !default;
 $kendo-rating-icon-hover-text: $kendo-selected-bg !default;
 $kendo-rating-icon-focus-text: $kendo-selected-bg !default;
 
-$kendo-rating-icon-focus-shadow: 0 2px 4px rgba( $kendo-color-black, .1 ) !default;
-$kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1) !default;
+$kendo-rating-icon-focus-shadow: k-elevation(1) !default;
+$kendo-rating-icon-focus-selected-shadow: k-elevation(1) !default;

package/scss/scheduler/_layout.scss

@@ -11,6 +11,7 @@
         line-height: $kendo-scheduler-line-height;
         display: flex;
         flex-direction: column;
+        position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -527,8 +528,7 @@
         position: absolute;
         justify-content: center;
 
-        > .k-icon,
-        > .k-svg-icon {
+        > .k-icon {
             position: absolute;
             top: 50%;
             left: 50%;
@@ -536,20 +536,6 @@
         }
     }
 
-    // Current time
-    .k-current-time {
-        position: absolute;
-
-        &.k-current-time-arrow-left,
-        &.k-current-time-arrow-right,
-        &.k-current-time-arrow-down {
-            width: 0;
-            height: 0;
-            background: transparent;
-            border: 4px solid transparent;
-        }
-    }
-
     // Draging hint
     .k-event-drag-hint {
         opacity: .5;

package/scss/scheduler/_theme.scss

@@ -9,23 +9,6 @@
         );
     }
 
-    // Current time
-    .k-current-time {
-        background: $kendo-scheduler-current-time-color;
-
-        &.k-current-time-arrow-left {
-            border-right-color: $kendo-scheduler-current-time-color;
-        }
-
-        &.k-current-time-arrow-right {
-            border-left-color: $kendo-scheduler-current-time-color;
-        }
-
-        &.k-current-time-arrow-down {
-            border-top-color: $kendo-scheduler-current-time-color;
-        }
-    }
-
     // Header and footer
     .k-scheduler-toolbar {
         @include fill(

package/scss/scheduler/_variables.scss

@@ -48,8 +48,6 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default;
 $kendo-scheduler-datecolumn-width: 12em !default;
 $kendo-scheduler-timecolumn-width: 11em !default;
 
-$kendo-scheduler-current-time-color: #ff0000 !default;
-
 $kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
 $kendo-scheduler-nonwork-text: null !default;
 
@@ -77,7 +75,7 @@ $kendo-scheduler-tooltip-border-width: 0 !default;
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
 $kendo-scheduler-tooltip-border: null !default;
-$kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2) !default;
+$kendo-scheduler-tooltip-shadow: k-elevation(2) !default;
 
 $kendo-scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-scheduler-tooltip-month-font-size: $kendo-font-size-sm !default;

package/scss/scrollview/_layout.scss

@@ -137,8 +137,7 @@
         user-select: none;
         cursor: pointer;
 
-        .k-icon,
-        .k-svg-icon {
+        .k-icon {
             display: table-cell;
             overflow: visible;
             margin: 0;

package/scss/spreadsheet/_layout.scss

@@ -63,8 +63,7 @@
         gap: $kendo-spreadsheet-formula-bar-gap;
 
         // move to legacy selector
-        > .k-icon,
-        > .k-svg-icon {
+        > .k-icon {
             padding-block: 0;
             padding-inline: $kendo-padding-md-y;
             box-sizing: content-box;
@@ -551,8 +550,7 @@
             .k-link {
                 padding-left: calc( #{$kendo-icon-size} + #{2 * $kendo-padding-md-y} );
             }
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
                 margin-right: $kendo-padding-md-y;
             }
@@ -593,7 +591,6 @@
             cursor: pointer;
 
             > .k-icon,
-            > .k-svg-icon,
             > .k-expander-indicator {
                 margin-right: $kendo-padding-md-y;
             }

package/scss/stepper/_layout.scss

@@ -120,8 +120,7 @@
             text-overflow: ellipsis;
             overflow: hidden;
         }
-        .k-step-label .k-icon,
-        .k-step-label .k-svg-icon  {
+        .k-step-label .k-icon  {
             margin-left: $kendo-icon-spacing;
         }
 
@@ -251,8 +250,7 @@
     .k-stepper[dir="rtl"] {
         direction: rtl;
 
-        .k-step-label .k-icon,
-        .k-step-label .k-svg-icon {
+        .k-step-label .k-icon {
             margin-left: 0;
             margin-right: $kendo-icon-spacing;
         }

package/scss/stepper/_theme.scss

@@ -157,8 +157,7 @@
         .k-step-label {
             @include fill( $color: $kendo-stepper-label-text );
         }
-        .k-step-success .k-step-label .k-icon,
-        .k-step-success .k-step-label .k-svg-icon {
+        .k-step-success .k-step-label .k-icon {
             @include fill( $color: $kendo-stepper-label-success-text );
         }
 

package/scss/tabstrip/_layout.scss

@@ -9,6 +9,7 @@
         border-style: solid;
         display: flex;
         flex-direction: column;
+        position: relative;
     }
 
 

package/scss/tabstrip/_variables.scss

@@ -80,7 +80,7 @@ $kendo-tabstrip-item-selected-gradient: null !default;
 
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$kendo-tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
+$kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;
 
 $kendo-tabstrip-item-disabled-bg: null !default;
 $kendo-tabstrip-item-disabled-text: null !default;

package/scss/tilelayout/_layout.scss

@@ -6,6 +6,7 @@
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        position: relative;
         padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

package/scss/timeline/_variables.scss

@@ -27,7 +27,7 @@ $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 *
 $kendo-timeline-track-bg: $kendo-button-bg !default;
 $kendo-timeline-track-border-color: $kendo-button-border !default;
 
-$kendo-timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($kendo-color-primary, .4) !default;
+$kendo-timeline-track-item-focus-shadow: k-elevation(2) !default;
 
 $kendo-timeline-track-event-offset: 36px !default;
 

package/scss/tooltip/_layout.scss

@@ -51,8 +51,7 @@
         margin-inline-start: $kendo-icon-spacing;
         flex-shrink: 0;
 
-        .k-icon,
-        .k-svg-icon {
+        .k-icon {
             color: inherit;
             vertical-align: top;
         }

package/scss/tooltip/_theme.scss

@@ -2,7 +2,7 @@
 
     .k-tooltip-wrapper {
         .k-tooltip {
-            box-shadow: $kendo-popup-shadow;
+            box-shadow: $kendo-tooltip-shadow;
         }
     }
 

package/scss/tooltip/_variables.scss

@@ -18,6 +18,8 @@ $kendo-tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
 $kendo-tooltip-text: k-contrast-legacy( $kendo-tooltip-bg ) !default;
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
 
+$kendo-tooltip-shadow: k-elevation(2) !default;
+
 $kendo-tooltip-primary-bg: $kendo-color-primary !default;
 $kendo-tooltip-primary-text: k-contrast-legacy( $kendo-tooltip-primary-bg ) !default;
 $kendo-tooltip-primary-border: $kendo-tooltip-primary-bg !default;

package/scss/treeview/_layout.scss

@@ -80,8 +80,7 @@
         align-items: center;
         cursor: pointer;
     }
-    .k-treeview-toggle .k-icon,
-    .k-treeview-toggle .k-svg-icon {
+    .k-treeview-toggle .k-icon {
         padding: $kendo-icon-padding;
         box-sizing: content-box;
     }
@@ -114,7 +113,6 @@
         position: relative;
 
         .k-icon,
-        .k-svg-icon,
         .k-image,
         .k-sprite {
             margin-right: $kendo-icon-spacing;
@@ -161,7 +159,6 @@
         .k-treeview-leaf,
         .k-in {
             .k-icon,
-            .k-svg-icon,
             .k-image,
             .k-sprite {
                 margin-right: 0;

package/scss/upload/_layout.scss

@@ -52,8 +52,7 @@
                 align-items: center;
                 position: relative;
 
-                > .k-icon,
-                > .k-svg-icon {
+                > .k-icon {
                     margin-inline-end: $kendo-upload-icon-spacing;
                 }
             }

package/scss/window/_variables.scss

@@ -76,10 +76,10 @@ $kendo-window-text: $kendo-component-text !default;
 $kendo-window-border: $kendo-component-border !default;
 /// The box shadow of the Window.
 /// @group window
-$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
+$kendo-window-shadow: k-elevation(8) !default;
 /// The box shadow of the focused Window.
 /// @group window
-$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-window-focus-shadow: k-elevation(9) !default;
 
 /// The background color of the Window titlebar.
 /// @group window