@progress/kendo-theme-fluent 10.1.0-dev.2 → 10.1.0-dev.4

package/scss/loader/_layout.scss

@@ -170,25 +170,34 @@
 
         &.k-loader-sm {
             .k-loader-canvas {
+                --INTERNAL--kendo-loader-canvas-width: var( --kendo-loader-sm-spinner-3-width, #{$kendo-loader-sm-spinner-3-width} );
+                --INTERNAL--kendo-loader-canvas-height: var( --kendo-loader-sm-spinner-3-height, #{$kendo-loader-sm-spinner-3-height} );
+                --INTERNAL--kendo-loader-canvas-size:  var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} );
                 margin: calc( var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) / 2 );
-                width: calc( var( --kendo-loader-sm-spinner-3-width, #{$kendo-loader-sm-spinner-3-width} ) - var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) );
-                height: calc( var( --kendo-loader-sm-spinner-3-height, #{$kendo-loader-sm-spinner-3-height} ) - var( --kendo-loader-sm-segment-size, #{$kendo-loader-sm-segment-size} ) );
+                width: calc( var( --INTERNAL--kendo-loader-canvas-width ) - var( --INTERNAL--kendo-loader-canvas-size ) );
+                height: calc( var( --INTERNAL--kendo-loader-canvas-height ) - var( --INTERNAL--kendo-loader-canvas-size ) );
             }
         }
 
         &.k-loader-md {
             .k-loader-canvas {
+                --INTERNAL--kendo-loader-canvas-width: var( --kendo-loader-md-spinner-3-width, #{$kendo-loader-md-spinner-3-width} );
+                --INTERNAL--kendo-loader-canvas-height: var( --kendo-loader-md-spinner-3-height, #{$kendo-loader-md-spinner-3-height} );
+                --INTERNAL--kendo-loader-canvas-size:  var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} );
                 margin: calc( var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) / 2 );
-                width: calc( var( --kendo-loader-md-spinner-3-width, #{$kendo-loader-md-spinner-3-width} ) - var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) );
-                height: calc( var( --kendo-loader-md-spinner-3-height, #{$kendo-loader-md-spinner-3-height} ) - var( --kendo-loader-md-segment-size, #{$kendo-loader-md-segment-size} ) );
+                width: calc( var( --INTERNAL--kendo-loader-canvas-width ) - var( --INTERNAL--kendo-loader-canvas-size ) );
+                height: calc( var( --INTERNAL--kendo-loader-canvas-height ) - var( --INTERNAL--kendo-loader-canvas-size ) );
             }
         }
 
         &.k-loader-lg {
             .k-loader-canvas {
+                --INTERNAL--kendo-loader-canvas-width: var( --kendo-loader-lg-spinner-3-width, #{$kendo-loader-lg-spinner-3-width} );
+                --INTERNAL--kendo-loader-canvas-height: var( --kendo-loader-lg-spinner-3-height, #{$kendo-loader-lg-spinner-3-height} );
+                --INTERNAL--kendo-loader-canvas-size:  var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} );
                 margin: calc( var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) / 2 );
-                width: calc( var( --kendo-loader-lg-spinner-3-width, #{$kendo-loader-lg-spinner-3-width} ) - var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) );
-                height: calc( var( --kendo-loader-lg-spinner-3-height, #{$kendo-loader-lg-spinner-3-height} ) - var( --kendo-loader-lg-segment-size, #{$kendo-loader-lg-segment-size} ) );
+                width: calc( var( --INTERNAL--kendo-loader-canvas-width ) - var( --INTERNAL--kendo-loader-canvas-size ) );
+                height: calc( var( --INTERNAL--kendo-loader-canvas-height ) - var( --INTERNAL--kendo-loader-canvas-size ) );
             }
         }
     }

package/scss/panelbar/_layout.scss

@@ -123,12 +123,14 @@
             // Hierarchy items
             @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
+                    --INTERNAL--kendo-panelbar-link-spacing: calc( #{k-spacing(3)} * #{$i} );
+                    --INTERNAL--kendo-panelbar-item-padding: var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} );
                     .k-link {
-                        padding-inline-start: calc( var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} ) + ( #{k-spacing(3)} * #{$i} ));
+                        padding-inline-start: calc( var( --INTERNAL--kendo-panelbar-item-padding ) + var( --INTERNAL--kendo-panelbar-link-spacing ) );
                     }
 
                     .k-panelbar-item-icon:first-child {
-                        inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + ( #{k-spacing(3)} * #{$i} ));
+                        inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + var( --INTERNAL--kendo-panelbar-link-spacing ) );
                     }
                 }
             }

package/scss/panelbar/_variables.scss

@@ -37,7 +37,7 @@ $kendo-panelbar-icon-spacing: k-spacing(2) !default;
 
 /// The horizontal start padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-panelbar-header-padding-x-start: calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The horizontal end padding of the PanelBar header.
 /// @group panelbar
@@ -48,7 +48,7 @@ $kendo-panelbar-header-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-panelbar-item-padding-x-start: calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The horizontal end padding of the PanelBar items.
 /// @group panelbar

package/scss/pivotgrid/_layout.scss

@@ -500,7 +500,7 @@
         table-layout: auto;
 
         .k-grid-footer,
-        .k-grid .k-alt {
+        .k-grid .k-table-alt-row {
             font-weight: bold;
         }
     }

package/scss/scheduler/_index.scss

@@ -8,6 +8,7 @@
 @use "../dropdownlist/_index.scss" as *;
 @use "../dialog/_index.scss" as *;
 @use "../tooltip/_index.scss" as *;
+@use "../time-marker/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -25,6 +26,7 @@
         @include kendo-dropdown-list--styles();
         @include kendo-dialog--styles();
         @include kendo-tooltip--styles();
+        @include kendo-time-marker--styles();
         @include kendo-scheduler--layout();
         @include kendo-scheduler--theme();
         @include kendo-utils--typography--text-overflow();

package/scss/splitter/_layout.scss

@@ -46,6 +46,7 @@
         outline: 0;
         position: absolute;
         user-select: none;
+        touch-action: none;
         display: flex;
         align-items: center;
         justify-content: center;

package/scss/spreadsheet/_layout.scss

@@ -523,12 +523,15 @@
         position: relative;
         z-index: 50;
     }
+
     .k-spreadsheet .k-filter-range {
         border-width: 2px;
         border-style: solid;
         position: absolute;
         box-sizing: border-box;
+        pointer-events: none;
     }
+
     .k-spreadsheet-filter {
         @include border-radius( k-border-radius(md) );
         padding: k-spacing(1);

package/scss/tabstrip/_layout.scss

@@ -89,10 +89,6 @@
             flex-direction: row;
         }
 
-        .k-tab-on-top {
-            z-index: 1;
-        }
-
         .k-link {
             padding-inline: var( --kendo-tabstrip-item-padding-x, #{$kendo-tabstrip-item-padding-x} );
             padding-block: var( --kendo-tabstrip-item-padding-y, #{$kendo-tabstrip-item-padding-y} );

package/scss/timeselector/_layout.scss

@@ -69,13 +69,14 @@
     // Time list highlight
     .k-time-highlight,
     .k-time-list-highlight {
+        --INTERNAL--kendo-time-list-title-height: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} );
         width: 100%;
         height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
         border-width: var( --kendo-time-list-highlight-border-width, $kendo-time-list-highlight-border-width );
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: calc( 50% + var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) / 2);
+        top: calc( 50% + var( --INTERNAL--kendo-time-list-title-height ) / 2);
         left: 0;
         right: 0;
         transform: translateY(-50%);
@@ -109,20 +110,21 @@
         &.k-focus {
             &::before,
             &::after {
+                --INTERNAL--kendo-time-list-title-highlight-height: var( --kendo-time-list-highlight-height, #{$kendo-time-list-highlight-height} );
                 display: block;
                 content: "\200b";
                 position: absolute;
                 width: 100%;
                 left: 0;
                 pointer-events: none;
-                height: calc( 50% - ( var( --kendo-time-list-highlight-height, #{$kendo-time-list-highlight-height} ) / 2) );
+                height: calc( 50% - ( var( --INTERNAL--kendo-time-list-title-highlight-height ) / 2) );
                 box-sizing: border-box;
                 border-width: 0;
                 border-style: solid;
             }
 
             &::before {
-                top: calc( var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) );
+                top: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) ;
             }
 
             &::after {
@@ -195,6 +197,7 @@
 
     // Time separator
     .k-time-separator {
+        --INTERNAL--kendo-time-list-title-height: var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} );
         width: 0;
         height: var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height );
         align-self: center;
@@ -203,7 +206,7 @@
         align-items: center;
         position: relative;
         z-index: 11;
-        top: calc( var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) / 2);
+        top: calc( var( --INTERNAL--kendo-time-list-title-height ) / 2);
     }
 
 

package/scss/toolbar/_layout.scss

@@ -110,12 +110,6 @@
         gap: inherit;
     }
 
-    // Angular specific
-    .k-toolbar-renderer {
-        display: inline-block;
-        border-color: inherit;
-    }
-
     // Toolbar sizes
     @each $size, $size-props in $kendo-toolbar-sizes {
         $_padding-x: map.get( $size-props, padding-x );