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

package/scss/gantt/_layout.scss

@@ -223,7 +223,7 @@
             }
             .k-gantt-pdf,
             .k-gantt-create {
-                padding: $kendo-button-padding-y-md;
+                padding: $kendo-button-md-padding-y;
                 width: $kendo-button-calc-size;
                 height: $kendo-button-calc-size;
 
@@ -614,7 +614,7 @@
             display: block;
         }
         .k-task-pct {
-            font-size: var( --kendo-icon-size-lg, 2rem );
+            font-size: var( --kendo-icon-size-xxl, 2rem );
         }
         ul {
             line-height: normal;

package/scss/grid/_layout.scss

@@ -66,6 +66,7 @@
         }
 
         .k-table-th,
+        td,
         .k-table-td {
             border-width: 0;
             padding-inline: var( --INTERNAL--kendo-grid-cell-padding-x, 0 );
@@ -108,6 +109,7 @@
             white-space: nowrap;
         }
 
+        td,
         .k-table-td {
             border-block-end-width: var( --kendo-grid-cell-border-width-y, #{$kendo-grid-cell-border-width-y} );
             border-inline-start-width: var( --kendo-grid-cell-border-width-x, #{$kendo-grid-cell-border-width-x} );
@@ -140,11 +142,13 @@
             align-content: center;
         }
 
+        .k-grouping-row td,
         .k-grouping-row .k-table-td {
             border-block-end-width: 0;
             overflow: visible;
         }
 
+        .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
             border-top-width: var( --kendo-grid-grouping-row-border-width-y, #{$kendo-grid-grouping-row-border-width-y} );
         }
@@ -162,11 +166,14 @@
             text-decoration: none;
         }
 
+        .k-group-footer td,
         .k-group-footer .k-table-td {
             border-style: solid;
             border-inline-width: var( --kendo-grid-group-footer-border-width-x, #{$kendo-grid-group-footer-border-width-x} );
             border-block-start-width: var( --kendo-grid-group-footer-border-width-y, #{$kendo-grid-group-footer-border-width-y} );
         }
+
+        .k-group-footer .k-group-cell + td,
         .k-group-footer .k-group-cell + .k-table-td {
             border-inline-start-width: var( --kendo-grid-group-footer-border-width-x, #{$kendo-grid-group-footer-border-width-x} );
         }
@@ -293,10 +300,10 @@
     }
 
     .k-grouping-dropclue {
-        width: calc( var( --kendo-grid-group-dropclue-size, #{$kendo-grid-group-dropclue-size} ) * 2 );
-        height: var( --INTERNAL--kendo-grid-group-dropclue-height, 1rem );
+        width: calc( var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} ) * 2 );
+        height: var( --INTERNAL--kendo-grid-group-drop-hint-height, 1rem );
         position: absolute;
-        top: var( --kendo-grid-group-dropclue-top, #{$kendo-grid-group-dropclue-top} );
+        top: var( --kendo-grid-group-drop-hint-top, #{$kendo-grid-group-drop-hint-top} );
         box-sizing: content-box;
 
         &::before,
@@ -307,18 +314,18 @@
         }
 
         &::before {
-            width: var( --kendo-grid-group-dropclue-dot-size, #{$kendo-grid-group-dropclue-dot-size} );
-            height: var( --kendo-grid-group-dropclue-dot-size, #{$kendo-grid-group-dropclue-dot-size} );
+            width: var( --kendo-grid-group-drop-hint-dot-size, #{$kendo-grid-group-drop-hint-dot-size} );
+            height: var( --kendo-grid-group-drop-hint-dot-size, #{$kendo-grid-group-drop-hint-dot-size} );
             border-radius: 50%;
             top: 0;
-            left: calc( var( --kendo-grid-group-dropclue-dot-size, #{$kendo-grid-group-dropclue-dot-size} )  / 2 );
+            left: calc( var( --kendo-grid-group-drop-hint-dot-size, #{$kendo-grid-group-drop-hint-dot-size} )  / 2 );
         }
 
         &::after {
-            width: var( --kendo-grid-group-dropclue-line-size, #{$kendo-grid-group-dropclue-line-size} );
-            height: calc( 100% - var( --kendo-grid-group-dropclue-size, #{$kendo-grid-group-dropclue-size} ) );
-            top: var( --kendo-grid-group-dropclue-size, #{$kendo-grid-group-dropclue-size} );
-            left: calc( var( --kendo-grid-group-dropclue-size, #{$kendo-grid-group-dropclue-size} ) - ( var( --kendo-grid-group-dropclue-line-size, #{$kendo-grid-group-dropclue-line-size} ) / 2 ) );
+            width: var( --kendo-grid-group-drop-hint-line-size, #{$kendo-grid-group-drop-hint-line-size} );
+            height: calc( 100% - var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} ) );
+            top: var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} );
+            left: calc( var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} ) - ( var( --kendo-grid-group-drop-hint-line-size, #{$kendo-grid-group-drop-hint-line-size} ) / 2 ) );
         }
     }
 
@@ -352,7 +359,7 @@
     .k-grid-header,
     .k-grid-footer {
         padding-inline-start: 0;
-        padding-inline-end: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
+        padding-inline-end: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
         border-width: 0;
         border-style: solid;
         border-color: inherit;
@@ -466,14 +473,18 @@
     .k-grid-footer {
         border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
 
+        td,
         .k-table-td {
             height: var( --kendo-line-height-em, normal );
             border-block-end-width: 0;
         }
     }
 
+    .k-grid-footer td,
     .k-grid-footer .k-table-td,
     .k-grid-header .k-table-th,
+    .k-group-footer td,
+    .k-grouping-row td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td {
         font-weight: var( --kendo-grid-header-font-weight, #{$kendo-grid-header-font-weight} );
@@ -497,6 +508,7 @@
     .k-filter-row {
         line-height: $kendo-form-line-height;
 
+        td,
         .k-table-td,
         .k-table-th {
             padding-inline: var( --INTERNAL--kendo-grid-filter-cell-padding-x, 0 );
@@ -505,6 +517,7 @@
             white-space: nowrap;
         }
 
+        td:first-child,
         .k-table-td:first-child {
             border-left-width: 0;
         }
@@ -552,6 +565,7 @@
         border-color: inherit;
         outline: 0;
 
+        .k-table-row:last-child > td,
         .k-table-row:last-child > .k-table-td {
             border-bottom-width: 0;
         }
@@ -579,14 +593,17 @@
         border-inline-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
     }
 
+    .k-master-row.k-expanded td,
     .k-master-row.k-expanded .k-table-td {
         border-block-end-width: 0;
     }
 
+    .k-master-row:has(.k-hierarchy-cell[aria-expanded="true"]) td,
     .k-master-row:has(.k-hierarchy-cell[aria-expanded="true"]) .k-table-td {
         border-block-end-width: 0;
     }
 
+    .k-master-row:last-child td,
     .k-master-row:last-child .k-table-td {
         border-block-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
     }
@@ -596,6 +613,7 @@
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
+    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
         padding-inline: var( --INTERNAL--kendo-grid-edit-cell-padding-x, 0 );
         padding-block: var( --INTERNAL--kendo-grid-edit-cell-padding-y, 0 );
@@ -603,6 +621,7 @@
     }
 
     .k-grid .k-edit-cell,
+    .k-grid .k-grid-edit-row td,
     .k-grid .k-grid-edit-row .k-table-td {
 
         > input:not([type="checkbox"]):not([type="radio"]),
@@ -659,19 +678,19 @@
 
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
-            float: inline-start;
+            float: left;
             width: 100%;
         }
 
         .k-grid-table {
             position: relative;
-            float: inline-start;
+            float: left;
             z-index: 1;
         }
 
         > .k-height-container {
             position: relative;
-            float: inline-start;
+            float: left;
         }
 
         &::after {
@@ -690,6 +709,7 @@
         height: 1px;
     }
 
+    .k-grid-add-row td,
     .k-grid-add-row .k-table-td {
         border-bottom-style: solid;
         border-bottom-width: 1px;
@@ -720,6 +740,7 @@
         border-inline-end-width: 1px;
         box-sizing: content-box;
 
+        td,
         .k-table-td,
         .k-table-th {
             border-inline-start-width: 1px;
@@ -777,6 +798,7 @@
             z-index: auto;
         }
 
+        .k-grid-row-sticky td,
         .k-grid-row-sticky .k-table-td {
             border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
             border-block-end-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
@@ -785,10 +807,13 @@
             bottom: inherit;
         }
 
+        .k-grid-row-sticky td,
         .k-grid-row-sticky .k-table-td {
             z-index: 2;
         }
 
+        .k-grid-row-sticky td.k-grid-content-sticky,
+        .k-grid-row-sticky.k-alt td.k-grid-content-sticky,
         .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
         .k-grid-row-sticky.k-alt .k-table-td.k-grid-content-sticky {
             z-index: 3;
@@ -815,6 +840,7 @@
     .k-grid .k-grid-footer-sticky {
         border-inline-end-width: var( --kendo-grid-sticky-cell-border-width, #{$kendo-grid-sticky-cell-border-width} );
 
+        &:not([style*="display: none"]) + td,
         &:not([style*="display: none"]) + .k-table-td,
         &:not([style*="display: none"]) + .k-table-th {
             border-inline-start-width: 0;
@@ -969,7 +995,7 @@
             --INTERNAL--kendo-button-padding-y: var( --kendo-button-padding-y-#{$size}, #{$_button-padding-y} );
             --INTERNAL--kendo-button-calc-size: var( --kendo-button-calc-size-#{$size}, #{$_button-calc-size} );
             --INTERNAL--kendo-button-line-height: var( --kendo-button-line-height-#{$size}, #{$_button-line-height} );
-            --INTERNAL--kendo-grid-group-dropclue-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
+            --INTERNAL--kendo-grid-group-drop-hint-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
         }
     }
 
@@ -1017,7 +1043,7 @@
     // Remove Grid scrollbar during built-in export
     .k-pdf-export-shadow {
         .k-grid {
-            float: inline-start;
+            float: left;
             width: auto !important; // sass-lint:disable-line no-important
         }
 
@@ -1125,6 +1151,7 @@
         table-layout: auto !important;
 
         .k-table-th,
+        td,
         .k-table-td {
             white-space: nowrap !important;
         }

package/scss/grid/_theme.scss

@@ -10,12 +10,14 @@
     .k-grid-header,
     .k-grid-header-wrap,
     .k-grouping-header,
+    .k-grid td,
     .k-grid .k-table-td,
     .k-grid-footer,
     .k-grid-footer-wrap,
     .k-grid-content-locked,
     .k-grid-footer-locked,
     .k-grid-header-locked,
+    .k-filter-row > td,
     .k-filter-row > .k-table-td,
     .k-filter-row > .k-table-th {
         @include fill(
@@ -48,6 +50,8 @@
         @include fill( $bg: var( --kendo-grid-bg, #{$kendo-grid-bg} ) );
     }
 
+    .k-group-footer td,
+    .k-grouping-row td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td,
     .k-table-tbody .k-group-cell {
@@ -62,7 +66,7 @@
         &::before,
         &::after {
             @include fill(
-                $bg: var( --kendo-grid-group-dropclue-bg, #{$kendo-grid-group-dropclue-bg} )
+                $bg: var( --kendo-grid-group-drop-hint-bg, #{$kendo-grid-group-drop-hint-bg} )
             );
         }
     }
@@ -85,6 +89,8 @@
         }
 
         // Selected state
+        td.k-selected,
+        .k-table-row.k-selected > td,
         .k-table-td.k-selected,
         .k-table-row.k-selected > .k-table-td {
             @include fill(
@@ -95,9 +101,13 @@
         }
 
         // Selected hover state
+        .k-table-tbody > .k-table-row:not(.k-detail-row):hover td.k-selected,
+        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > td,
         .k-table-tbody > .k-table-row:not(.k-detail-row):hover .k-table-td.k-selected,
         .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > .k-table-td,
         .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected,
+        .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover td.k-selected,
+        .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > td,
         .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover .k-table-td.k-selected,
         .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > .k-table-td {
             @include fill(
@@ -107,10 +117,16 @@
         }
 
         // Focused state
+        td:focus,
+        td.k-focus,
         .k-table-td:focus,
         .k-table-td.k-focus,
         .k-table-th:focus,
         .k-table-th.k-focus,
+        .k-master-row > td:focus,
+        .k-grouping-row > td:focus,
+        .k-detail-row > td:focus,
+        .k-group-footer > td:focus,
         .k-master-row > .k-table-td:focus,
         .k-grouping-row > .k-table-td:focus,
         .k-detail-row > .k-table-td:focus,
@@ -147,29 +163,36 @@
         .k-grid-header-locked,
         .k-grid-content-locked,
         .k-grid-header-locked .k-table-th,
+        .k-grid-content-locked td,
         .k-grid-content-locked .k-table-td {
             border-inline-color: var( --kendo-grid-sticky-header-border, #{$kendo-grid-sticky-header-border} );
         }
 
         .k-grid-content-locked {
+            .k-group-footer td,
             .k-group-footer .k-table-td {
                 @include fill( $border: var( --kendo-grid-header-border, #{$kendo-grid-header-border} ) );
             }
 
+            .k-grouping-row + .k-table-row td,
             .k-grouping-row + .k-table-row .k-table-td {
                 border-top-color: var( --kendo-grid-header-border, #{$kendo-grid-header-border} );
             }
 
             // Selected state
+            .k-selected td,
             .k-selected .k-table-td {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
             }
 
+            .k-selected.k-table-alt-row td,
             .k-selected.k-table-alt-row .k-table-td {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
             }
 
             // Selected hover
+            .k-selected:hover td,
+            .k-selected.k-hover td,
             .k-selected:hover .k-table-td,
             .k-selected.k-hover .k-table-td {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
@@ -225,6 +248,7 @@
         }
 
         .k-table-th.k-grid-header-sticky,
+        td.k-grid-header-sticky,
         .k-table-td.k-grid-header-sticky,
         .k-grid-header-sticky.k-sorted {
             @include fill(
@@ -272,12 +296,14 @@
         // Selected state
         &.k-selected .k-grid-content-sticky,
         &.k-selected .k-grid-row-sticky,
+        td.k-grid-content-sticky.k-selected,
         .k-table-td.k-grid-content-sticky.k-selected {
             @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
         }
 
         &.k-selected.k-table-alt-row .k-grid-content-sticky,
         &.k-selected.k-table-alt-row .k-grid-row-sticky,
+        &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
             @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
         }
@@ -297,6 +323,8 @@
         &.k-selected:hover .k-grid-row-sticky,
         &.k-selected.k-hover .k-grid-content-sticky,
         &.k-selected.k-hover .k-grid-row-sticky,
+        &:hover td.k-grid-content-sticky.k-selected,
+        &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
             @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
@@ -316,11 +344,14 @@
         }
 
         .k-grid-row-sticky {
+            td,
             .k-table-td {
                 border-block-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
                 background-color: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} );
             }
 
+            &:hover td,
+            &.k-hover td,
             &:hover .k-table-td,
             &.k-hover .k-table-td {
                 background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
@@ -328,12 +359,15 @@
         }
 
         .k-table-alt-row .k-grid-content-sticky,
+        .k-grid-row-sticky.k-table-alt-row td,
         .k-grid-row-sticky.k-table-alt-row .k-table-td {
             @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
         }
 
         // Selected state
         .k-table-row.k-selected .k-grid-content-sticky,
+        .k-selected.k-grid-row-sticky td,
+        .k-grid-row-sticky td.k-selected,
         .k-selected.k-grid-row-sticky .k-table-td,
         .k-grid-row-sticky .k-table-td.k-selected,
         .k-selected.k-grid-content-sticky {
@@ -341,6 +375,7 @@
         }
 
         .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
+        .k-selected.k-table-alt-row.k-grid-row-sticky td,
         .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
         .k-table-alt-row .k-selected.k-grid-content-sticky {
             @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
@@ -349,6 +384,10 @@
         // Hover state
         .k-table-row:hover .k-grid-content-sticky,
         .k-table-row.k-hover .k-grid-content-sticky,
+        .k-grid-row-sticky:hover td,
+        .k-grid-row-sticky.k-hover td,
+        .k-grid-row-sticky.k-table-alt-row:hover td,
+        .k-grid-row-sticky.k-table-alt-row.k-hover td,
         .k-grid-row-sticky:hover .k-table-td,
         .k-grid-row-sticky.k-hover .k-table-td,
         .k-grid-row-sticky.k-table-alt-row:hover .k-table-td,
@@ -361,12 +400,18 @@
         // Selected + Hover
         .k-table-row.k-selected:hover .k-grid-content-sticky,
         .k-table-row.k-selected.k-hover .k-grid-content-sticky,
+        .k-selected.k-grid-row-sticky:hover td,
+        .k-selected.k-grid-row-sticky.k-hover td,
+        .k-selected.k-table-alt-row.k-grid-row-sticky:hover td,
+        .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover td,
         .k-selected.k-grid-row-sticky:hover .k-table-td,
         .k-selected.k-grid-row-sticky.k-hover .k-table-td,
         .k-selected.k-table-alt-row.k-grid-row-sticky:hover .k-table-td,
         .k-selected.k-table-alt-row.k-grid-row-sticky.k-hover .k-table-td,
         .k-table-row.k-selected.k-table-alt-row:hover .k-grid-content-sticky,
         .k-table-row.k-selected.k-table-alt-row.k-hover .k-grid-content-sticky,
+        .k-grid-row-sticky:hover td.k-selected,
+        .k-grid-row-sticky.k-hover td.k-selected,
         .k-grid-row-sticky:hover .k-table-td.k-selected,
         .k-grid-row-sticky.k-hover .k-table-td.k-selected,
         .k-table-row:hover .k-grid-content-sticky.k-selected,