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

package/scss/grid/_layout.scss

@@ -66,6 +66,7 @@
         }
 
         .k-table-th,
+        td,
         .k-table-td {
             border-width: 0;
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
@@ -104,6 +105,7 @@
             white-space: nowrap;
         }
 
+        td,
         .k-table-td {
             border-block-end-width: $kendo-grid-cell-horizontal-border-width;
             white-space: unset;
@@ -260,12 +262,17 @@
             align-items: center;
             align-content: center;
         }
+
+        .k-grouping-row td,
         .k-grouping-row .k-table-td {
             overflow: visible;
         }
+
+        .k-grouping-row + .k-table-row td,
         .k-grouping-row + .k-table-row .k-table-td {
             border-top-width: $kendo-grid-grouping-row-border-top;
         }
+
         .k-grouping-row .k-group-cell,
         .k-grouping-row + .k-table-row .k-group-cell {
             border-top-width: 0;
@@ -278,11 +285,13 @@
             text-decoration: none;
         }
 
+        .k-table .k-group-footer td,
         .k-table .k-group-footer .k-table-td {
             border-style: solid;
             border-width: $kendo-grid-group-footer-border-y 0;
         }
 
+        .k-group-footer .k-group-cell + td,
         .k-group-footer .k-group-cell + .k-table-td {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
@@ -298,7 +307,7 @@
                 height: 100%;
                 // That causes an issue with grid material. Commenting it for now
                 // -- joneff
-                // line-height: $line-height;
+                // line-height: $kendo-line-height-md;
                 display: inline-block;
                 outline: 0;
             }
@@ -410,9 +419,9 @@
     }
 
     .k-grouping-dropclue {
-        width: ($kendo-grid-group-dropclue-size * 2);
+        width: ($kendo-grid-group-drop-hint-size * 2);
         position: absolute;
-        top: $kendo-grid-group-dropclue-top;
+        top: $kendo-grid-group-drop-hint-top;
         box-sizing: content-box;
 
         &::before,
@@ -423,7 +432,7 @@
         }
 
         &::before {
-            border-width: $kendo-grid-group-dropclue-size;
+            border-width: $kendo-grid-group-drop-hint-size;
             border-style: solid;
             border-left-color: transparent;
             border-right-color: transparent;
@@ -432,10 +441,10 @@
         }
 
         &::after {
-            width: $kendo-grid-group-dropclue-line-size;
-            height: calc(100% - #{$kendo-grid-group-dropclue-size});
-            top: $kendo-grid-group-dropclue-size;
-            inset-inline-start: calc( #{$kendo-grid-group-dropclue-size} - #{k-math-div( $kendo-grid-group-dropclue-line-size, 2 )} );
+            width: $kendo-grid-group-drop-hint-line-size;
+            height: calc(100% - #{$kendo-grid-group-drop-hint-size});
+            top: $kendo-grid-group-drop-hint-size;
+            inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{k-math-div( $kendo-grid-group-drop-hint-line-size, 2 )} );
         }
     }
 
@@ -443,7 +452,7 @@
     // Grid header / footer
     .k-grid-header-wrap,
     .k-grid-footer-wrap {
-        margin-inline-end: - $kendo-grid-cell-vertical-border-width;
+        margin-inline-end: -#{$kendo-grid-cell-vertical-border-width};
         width: 100%;
         border-width: 0;
         border-inline-end-width: $kendo-grid-cell-vertical-border-width;
@@ -460,7 +469,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;
@@ -487,11 +496,15 @@
     .k-grid-footer {
         border-top-width: 1px;
 
+        td,
         .k-table-td {
-            height: $line-height-em;
+            height: $kendo-line-height-em;
         }
     }
 
+    .k-grid-footer td,
+    .k-group-footer td,
+    .k-grouping-row td,
     .k-grid-footer .k-table-td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td {
@@ -514,6 +527,7 @@
     .k-filter-row {
         line-height: $kendo-form-line-height;
 
+        td,
         .k-table-td,
         .k-table-th {
             border-width: 0;
@@ -522,6 +536,7 @@
             white-space: nowrap;
         }
 
+        td:first-child,
         .k-table-td:first-child {
             border-inline-start-width: 0;
         }
@@ -568,6 +583,7 @@
         border-color: inherit;
         outline: 0;
 
+        .k-table-row:last-child > td,
         .k-table-row:last-child > .k-table-td {
             border-bottom-width: 0;
         }
@@ -593,11 +609,13 @@
     // 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 {
         text-overflow: clip;
     }
 
     .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"]),
@@ -647,26 +665,26 @@
     .k-pager-input {
         .k-numerictextbox {
             margin-block: 0;
-            margin-inline: k-math-div( $font-size, 2 );
+            margin-inline: k-math-div( $kendo-font-size-md, 2 );
             width: 3em;
         }
     }
 
     .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 {
@@ -685,6 +703,7 @@
         height: 1px;
     }
 
+    .k-grid-add-row td,
     .k-grid-add-row .k-table-td {
         border-bottom-style: solid;
         border-bottom-width: 1px;
@@ -760,6 +779,7 @@
             z-index: auto;
         }
 
+        .k-grid-row-sticky td,
         .k-grid-row-sticky .k-table-td {
             border-bottom-width: $kendo-grid-border-width;
             border-top-width: $kendo-grid-border-width;
@@ -767,12 +787,11 @@
             position: sticky;
             top: inherit;
             bottom: inherit;
-        }
-
-        .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;
@@ -799,6 +818,7 @@
     .k-grid .k-table .k-grid-footer-sticky {
         border-inline-end-width: $kendo-grid-cell-vertical-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;
@@ -884,6 +904,7 @@
                 padding: $_header-padding-y $_header-padding-x;
             }
 
+            td,
             .k-table-td {
                 padding: $_cell-padding-y $_cell-padding-x;
             }
@@ -910,7 +931,7 @@
                     width: $_button-calc-size;
                     height: $_button-calc-size;
                     line-height: $_button-line-height;
-                    bottom: calc( #{$_header-padding-y} + #{k-math-div( $line-height-em, 2)} - #{k-math-div( $kendo-button-inner-calc-size, 2 )} );
+                    bottom: calc( #{$_header-padding-y} + #{k-math-div( $kendo-line-height-em, 2)} - #{k-math-div( $kendo-button-inner-calc-size, 2 )} );
                 }
             }
 
@@ -945,6 +966,7 @@
             // Edit row
             .k-edit-cell,
             .k-command-cell,
+            .k-grid-edit-row td,
             .k-grid-edit-row .k-table-td {
                 padding: $_edit-cell-padding-y $_edit-cell-padding-x;
             }
@@ -952,6 +974,7 @@
 
             // Filter row
             .k-filter-row {
+                td,
                 .k-table-td,
                 .k-table-th {
                     padding: $_filter-cell-padding-y $_filter-cell-padding-x;
@@ -1014,7 +1037,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
         }
 
@@ -1122,6 +1145,7 @@
         table-layout: auto !important;
 
         .k-table-th,
+        td,
         .k-table-td {
             white-space: nowrap !important;
         }
@@ -1215,7 +1239,7 @@
 
     .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper {
         border-top: 1px solid;
-        border-top-color: $popup-border;
+        border-top-color: $kendo-popup-border;
     }
 
     .k-columnmenu-item-content {

package/scss/grid/_theme.scss

@@ -4,6 +4,7 @@
     .k-grid-header-wrap,
     .k-grouping-header,
     .k-grid .k-table-th,
+    .k-grid td,
     .k-grid .k-table-td,
     .k-grid-footer,
     .k-grid-footer-wrap,
@@ -11,6 +12,7 @@
     .k-grid-footer-locked,
     .k-grid-header-locked,
     .k-filter-row > .k-table-th,
+    .k-filter-row > td,
     .k-filter-row > .k-table-td {
         @include fill( $border: $kendo-grid-header-border );
     }
@@ -44,6 +46,8 @@
         @include fill($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 {
@@ -79,6 +83,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 {
             color: $kendo-grid-selected-text;
@@ -87,7 +93,12 @@
 
         // Focused state
         .k-table-th,
+        td,
         .k-table-td,
+        .k-master-row > td,
+        .k-grouping-row > td,
+        .k-detail-row > td,
+        .k-group-footer > td,
         .k-master-row > .k-table-td,
         .k-grouping-row > .k-table-td,
         .k-detail-row > .k-table-td,
@@ -123,30 +134,37 @@
         .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-color: $kendo-grid-sticky-header-border;
         }
 
         .k-grid-content-locked {
+            .k-group-footer td,
             .k-group-footer .k-table-td,
             .k-group-cell {
                 @include fill( $border: $kendo-grid-header-border );
             }
 
+            .k-grouping-row + .k-table-row td,
             .k-grouping-row + .k-table-row .k-table-td {
                 border-top-color: $kendo-grid-header-border;
             }
 
             // Selected state
+            .k-selected td,
             .k-selected .k-table-td {
                 @include fill( $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: $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: $kendo-grid-sticky-selected-hover-bg );
@@ -190,6 +208,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(
@@ -240,12 +259,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: $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: $kendo-grid-sticky-selected-alt-bg );
         }
@@ -265,6 +286,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 {
             background-color: $kendo-grid-sticky-selected-hover-bg;
@@ -285,12 +308,15 @@
         }
 
         .k-grid-row-sticky {
+            td,
             .k-table-td {
                 border-top-color: $kendo-grid-sticky-border;
                 border-bottom-color: $kendo-grid-sticky-border;
                 background-color: $kendo-grid-sticky-bg;
             }
 
+            &:hover td,
+            &.k-hover td,
             &:hover .k-table-td,
             &.k-hover .k-table-td {
                 background-color: $kendo-grid-sticky-hover-bg;
@@ -298,12 +324,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: $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 {
@@ -311,6 +340,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: $kendo-grid-sticky-selected-alt-bg );
@@ -319,6 +349,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,
@@ -331,12 +365,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,
@@ -382,9 +422,9 @@
         .k-menu:not(.k-context-menu) {
 
             @include fill(
-                $popup-text,
-                $popup-bg,
-                $popup-border
+                $kendo-popup-text,
+                $kendo-popup-bg,
+                $kendo-popup-border
             );
 
             .k-item {
@@ -425,7 +465,7 @@
     }
 
     .k-check-all-wrap {
-        @include fill( $border: $popup-border );
+        @include fill( $border: $kendo-popup-border );
     }
 
     .k-grid-norecords-template {