@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/grid/_layout.scss

@@ -1,50 +1,18 @@
 @include exports("grid/layout") {
 
-    // TODO: see why we need this variable
-    // $filter-rows-span-size: calc( #{$line-height-em} + #{$kendo-input-padding-y-md * 2} + #{$kendo-input-border-width * 2}) !default;
-    $filter-rows-span-size: null !default;
-
-    $grid-group-dropclue-size: 6px;
-    $grid-group-dropclue-line-size: $grid-group-dropclue-size / 3;
-    $grid-group-dropclue-height: $kendo-button-calc-size !default;
-    $grid-group-dropclue-top: 3px !default;
-
-    $grid-row-inner-height: calc( #{$line-height-em} + #{$table-cell-padding-y * 2} );
-    // $grid-row-half-inner-height: calc( #{$line-height-em / 2} + #{$table-cell-padding-y} );
-
-    // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
-    $grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$line-height-em}) / 2 ) !default;
-
-    $grid-hierarchy-col-width: ($icon-size * 2) !default;
-
-    $grid-group-indicator-border-radius: $kendo-border-radius-md !default;
-    $grid-group-indicator-gap: $table-cell-padding-y !default;
-    $grid-group-indicator-button-opacity: $kendo-input-clear-value-opacity !default;
-    $grid-group-indicator-button-hover-opacity: $kendo-input-clear-value-hover-opacity !default;
-
-    $grid-grouping-row-border-top: 1px !default;
-    $grid-group-footer-border-y: 1px !default;
-    $grid-group-footer-second-cell-border: 1px !default;
-    $grid-header-first-border: 1px !default;
-    $grid-header-menu-icon-spacing: $icon-spacing !default;
-    $grid-sorted-icon-spacing: calc( #{$padding-x} - 1px ) !default;
-
-    // helper variables
-    $grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$grid-header-menu-icon-spacing} );
-
     .k-grid {
-        border-width: $grid-border-width;
+        border-width: $kendo-grid-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $grid-font-family;
-        font-size: $grid-font-size;
-        line-height: $grid-line-height;
+        font-family: $kendo-grid-font-family;
+        font-size: $kendo-grid-font-size;
+        line-height: $kendo-grid-line-height;
         display: flex;
         flex-direction: column;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         &.k-grid-display-block {
             display: block;
@@ -65,7 +33,7 @@
             overflow: hidden;
         }
 
-        table {
+        .k-table {
             margin: 0;
             width: 100%;
             max-width: none;
@@ -73,31 +41,46 @@
             border-color: inherit;
             border-collapse: separate;
             border-spacing: 0;
+            box-sizing: content-box;
             empty-cells: show;
             outline: 0;
         }
-        thead,
-        tbody,
-        tfoot {
-            text-align: left;
+
+        .k-grid-header,
+        .k-grid-content,
+        .k-grid-footer {
+            .k-table {
+                table-layout: fixed;
+            }
+        }
+
+        .k-table-thead,
+        .k-table-tbody,
+        .k-table-tfoot {
+            text-align: start;
             border-color: inherit;
         }
-        tr {
+
+        .k-table-row {
             border-color: inherit;
         }
-        th,
-        td {
-            padding: $grid-cell-padding-y $grid-cell-padding-x;
+
+        .k-table-th,
+        .k-table-td {
+            border-width: 0;
+            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
             border-style: solid;
             border-color: inherit;
             outline: 0;
             font-weight: inherit;
             text-align: inherit;
+            position: static;
             overflow: hidden;
             text-overflow: ellipsis;
+            box-sizing: content-box;
 
             &:first-child {
-                border-left-width: 0;
+                border-inline-start-width: 0;
             }
 
             &:focus {
@@ -105,16 +88,25 @@
             }
 
             .k-placeholder-line {
-                width: $grid-cell-placeholder-line-width;
+                width: $kendo-grid-cell-placeholder-line-width;
+            }
+
+            > .k-radio,
+            > .k-radio-wrap,
+            > .k-checkbox,
+            > .k-checkbox-wrap {
+                vertical-align: top;
             }
         }
-        th {
-            padding: $grid-header-padding-y $grid-header-padding-x;
-            border-width: 0 0 1px $grid-cell-vertical-border-width;
+
+        .k-table-th {
+            border-block-end-width: 1px;
             white-space: nowrap;
         }
-        td {
-            border-width: 0 0 $grid-cell-horizontal-border-width $grid-cell-vertical-border-width;
+
+        .k-table-td {
+            border-block-end-width: $kendo-grid-cell-horizontal-border-width;
+            white-space: unset;
             vertical-align: middle;
         }
 
@@ -122,20 +114,144 @@
             color: inherit;
             text-decoration: none;
         }
+
         a:hover {
             text-decoration: none;
         }
 
-        table,
         .k-grid-header-wrap {
             box-sizing: content-box;
         }
 
+        .k-grid-header {
+            border-bottom-width: 1px;
+            font-size: $kendo-grid-header-font-size;
+
+            .k-table {
+                margin-bottom: -1px;
+            }
+
+            &.k-grid-draggable-header {
+                user-select: none;
+                touch-action: none;
+            }
+
+            .k-table-th {
+                position: relative;
+                vertical-align: bottom;
+                cursor: default;
+
+                &:first-child {
+                    border-inline-start-width: 0;
+                }
+
+                &.k-first {
+                    border-inline-start-width: $kendo-grid-header-first-border;
+                }
+            }
+
+            .k-table-th > .k-link {
+                line-height: inherit;
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                outline: 0;
+            }
+
+            .k-table-th > .k-link:focus {
+                text-decoration: none;
+            }
+
+            .k-grid-filter,
+            .k-header-column-menu,
+            .k-grid-header-menu {
+                box-sizing: border-box;
+                outline: 0;
+                display: flex;
+                align-items: center;
+                align-content: center;
+                justify-content: center;
+                position: absolute;
+                inset-inline-end: $kendo-grid-header-menu-icon-spacing;
+                z-index: 1;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+
+            .k-cell-inner > .k-link {
+                > .k-sort-icon {
+                    vertical-align: text-top;
+                    margin-inline-start: $kendo-grid-sorted-icon-spacing;
+                }
+            }
+
+            .k-cell-inner > .k-link > .k-sort-icon .k-icon {
+                display: flex;
+            }
+
+            .k-sort-order {
+                display: inline-block;
+                vertical-align: top;
+                height: $icon-size;
+                font-size: $kendo-grid-sorting-index-font-size;
+                margin-top: $kendo-grid-sorting-index-spacing-y;
+                margin-inline-start: $kendo-grid-sorting-index-spacing-x;
+            }
+        }
+
+        .k-grid-header .k-filterable {
+            > .k-cell-inner {
+                .k-link {
+                    padding-inline-end: 0;
+                }
+            }
+        }
+
+        .k-cell-inner {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            justify-content: inherit;
+            overflow: hidden;
+
+            > .k-link {
+                width: auto;
+                display: flex;
+                flex-flow: row nowrap;
+                align-items: center;
+                justify-content: inherit;
+                flex: 1;
+                overflow: hidden;
+
+                > .k-sort-icon {
+                    margin-inline-start: 0;
+                    display: inline-block;
+                    flex-shrink: 0;
+                }
+
+            }
+
+            .k-sort-order {
+                flex-shrink: 0;
+                line-height: normal;
+            }
+
+            .k-grid-filter,
+            .k-header-column-menu,
+            .k-grid-header-menu {
+                position: static;
+                margin-inline-end: $kendo-grid-header-menu-icon-spacing;
+            }
+        }
+
+
         // Grouping, hierarcy
         .k-group-col,
         .k-hierarchy-col {
             padding: 0;
-            width: $grid-hierarchy-col-width;
+            width: $kendo-grid-hierarchy-col-width;
         }
 
         .k-grouping-row p {
@@ -144,40 +260,40 @@
             align-items: center;
             align-content: center;
         }
-        .k-grouping-row td {
+        .k-grouping-row .k-table-td {
             overflow: visible;
         }
-        .k-grouping-row + tr td {
-            border-top-width: $grid-grouping-row-border-top;
+        .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 + tr .k-group-cell {
+        .k-grouping-row + .k-table-row .k-group-cell {
             border-top-width: 0;
             text-overflow: clip;
         }
 
         .k-grouping-row .k-icon {
-            margin-left: calc( #{$icon-size / 2} - #{$table-cell-padding-x} );
-            margin-right: ($icon-size / 2);
+            margin-inline-start: calc( #{k-math-div( $icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
+            margin-inline-end: k-math-div( $icon-size, 2 );
             text-decoration: none;
         }
 
-        .k-group-footer td {
+        .k-table .k-group-footer .k-table-td {
             border-style: solid;
-            border-width: $grid-group-footer-border-y 0;
+            border-width: $kendo-grid-group-footer-border-y 0;
         }
-        .k-group-footer .k-group-cell + td {
-            border-left-width: $grid-group-footer-second-cell-border;
+
+        .k-group-footer .k-group-cell + .k-table-td {
+            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
 
         .k-hierarchy-cell,
         .k-drag-cell {
             text-align: center;
-            padding: 0;
             overflow: visible;
 
             > .k-icon {
-                padding: $table-cell-padding-y 0;
+                padding: $kendo-grid-cell-padding-y 0;
                 width: 100%;
                 height: 100%;
                 // That causes an issue with grid material. Commenting it for now
@@ -189,172 +305,14 @@
         }
 
         .k-hierarchy-cell + .k-grid-content-sticky {
-            border-left-width: $grid-cell-vertical-border-width;
+            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
         .k-detail-cell {}
         .k-master-row {}
 
         .k-detail-row {
             .k-detail-cell {
-                border-left-width: 0;
-            }
-        }
-
-        &[dir = "rtl"],
-        .k-rtl & {
-            thead,
-            tbody,
-            tfoot {
-                text-align: right;
-            }
-
-            th {
-                white-space: nowrap;
-            }
-
-            .k-grid-header-wrap,
-            .k-grid-footer-wrap {
-                border-width: 0 0 0 $grid-cell-vertical-border-width;
-            }
-
-            .k-group-indicator {
-                .k-button-flat {
-                    margin-left: -( $icon-spacing / 2 );
-                    margin-right: ( 2 * $icon-spacing );
-                }
-
-                .k-link .k-icon {
-                    margin-left: $icon-spacing;
-                    margin-right: -( $icon-spacing / 2);
-                }
-            }
-            .k-group-indicator {
-                margin-right: 0;
-                margin-left: ( $grid-group-indicator-gap / 2 );
-            }
-
-            .k-group-indicator + .k-group-indicator {
-                margin-right: ( $grid-group-indicator-gap / 2 );
-            }
-
-            .k-grid-content-locked,
-            .k-grid-footer-locked,
-            .k-grid-header-locked {
-                border-left-width: $grid-cell-vertical-border-width;
-                border-right-width: 0;
-            }
-
-            .k-grid-header-sticky,
-            .k-grid-content-sticky,
-            .k-grid-footer-sticky {
-                border-left-width: $grid-cell-vertical-border-width;
-            }
-
-            .k-grid-header-sticky:not([style*="display: none"]) + td,
-            .k-grid-header-sticky:not([style*="display: none"]) + th,
-            .k-grid-content-sticky:not([style*="display: none"]) + td,
-            .k-grid-content-sticky:not([style*="display: none"]) + th {
-                border-left-width: $grid-cell-vertical-border-width;
-                border-right-width: 0;
-            }
-
-            .k-grid-header-sticky.k-header:first-child {
-                border-left-width: $grid-cell-vertical-border-width;
-            }
-
-            .k-grid-row-sticky {
-                border-bottom-width: $grid-border-width;
-                border-top-width: $grid-border-width;
-            }
-
-            th {
-                border-width: 0 $grid-cell-vertical-border-width 1px 0;
-
-                &:first-child {
-                    border-right-width: 0;
-                }
-            }
-
-            td {
-                border-width: 0 $grid-cell-vertical-border-width 0 0;
-
-                &:first-child {
-                    border-right-width: 0;
-                }
-            }
-
-            td.k-hierarchy-cell {
-                border-right-width: 0;
-            }
-
-            .k-hierarchy-cell + td {
-                border-right-width: 0;
-            }
-
-            .k-grid-header {
-                .k-header {
-                    z-index: 1;
-
-                    &.k-first {
-                        border-left-width: 0;
-                        border-right-width: $grid-cell-vertical-border-width;
-                    }
-                }
-
-                .k-with-icon,
-                .k-filterable {
-                    padding-left: $grid-filterable-icon-spacing;
-                    padding-right: $grid-cell-padding-x;
-                }
-
-                .k-grid-filter,
-                .k-header-column-menu,
-                .k-grid-header-menu {
-                    right: auto;
-                    left: $grid-header-menu-icon-spacing;
-                }
-            }
-
-            .k-grid-header-sticky.k-header.k-first {
-                border-left-width: $grid-cell-vertical-border-width;
-            }
-
-            .k-grid-header-sticky.k-header.k-grid-no-left-border.k-first {
-                border-left-width: $grid-cell-vertical-border-width;
-                border-right-width: 0;
-            }
-
-            .k-dirty {
-                border-color: currentColor currentColor transparent transparent;
-                left: auto;
-                right: 0;
-            }
-
-            .k-grid-header-wrap,
-            .k-grid-footer-wrap {
-                margin-left: -1px;
-                margin-right: 0;
-            }
-
-            .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable {
-                margin-left: 0;
-            }
-
-            .k-group-footer td {
-                border-width: $grid-group-footer-border-y 0;
-            }
-            .k-group-footer .k-group-cell + td {
-                border-right-width: $grid-group-footer-second-cell-border;
-            }
-
-            .k-grouping-row .k-icon {
-                margin-left: #{$icon-size / 2};
-                margin-right: calc( #{$icon-size / 2} - #{$table-cell-padding-x} );
-            }
-
-            .k-column-resizer {
-                left: 0;
-                right: auto;
+                border-inline-start-width: 0;
             }
         }
 
@@ -372,9 +330,11 @@
 
         .k-dirty {
             border-width: 5px;
-            border-color: currentColor transparent transparent currentColor;
-            left: 0;
-            right: auto;
+            border-color: transparent;
+            border-block-start-color: currentColor;
+            border-inline-start-color: currentColor;
+            inset-inline-start: 0;
+            inset-inline-end: auto;
         }
 
         .k-grid-content-locked + .k-grid-content {
@@ -398,7 +358,7 @@
         // Drag column
         .k-drag-col {
             padding: 0;
-            width: $grid-drag-cell-width;
+            width: $kendo-grid-drag-cell-width;
         }
 
         .k-drag-cell {
@@ -408,111 +368,51 @@
 
     // Toolbar
     .k-grid-toolbar {
-        border-width: 0 0 $grid-toolbar-border-width;
+        border-width: 0 0 $kendo-grid-toolbar-border-width;
         flex-shrink: 0;
     }
     .k-grid-toolbar-bottom {
-        border-width: $grid-toolbar-border-width 0 0;
+        border-width: $kendo-grid-toolbar-border-width 0 0;
     }
 
 
     // Grouping header
     .k-grouping-header {
-        padding: $grid-grouping-header-padding-y $grid-grouping-header-padding-x;
         border-width: 0 0 1px;
         border-style: solid;
         border-color: inherit;
         white-space: normal;
-        flex-shrink: 0;
-        display: block;
+        display: flex;
+        align-items: center;
         position: relative;
+        flex-wrap: wrap;
 
         &::before {
             content: "";
-            height: $kendo-button-calc-size;
+            height: $kendo-chip-calc-size;
             display: inline-block;
             vertical-align: middle;
         }
-    }
-
-    .k-grouping-header-flex {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        gap: $grid-grouping-header-padding-y;
 
-        &::before {
-            margin-left: -$grid-grouping-header-padding-y;
+        .k-chip-list {
+            flex-grow: 0;
+            display: contents;
         }
 
-        .k-group-indicator {
-            margin: 0;
-        }
-    }
-
-    // override for angular
-    .k-grid .k-indicator-container {
-        margin: -$grid-grouping-header-padding-y 0;
-        padding: $grid-grouping-header-padding-y 0;
-    }
-    .k-grid .k-indicator-container:last-child {
-        flex-grow: 1;
-    }
-
-    .k-group-indicator {
-        @include border-radius( $grid-group-indicator-border-radius );
-        margin: 0;
-        padding: $kendo-button-padding-y $kendo-button-padding-x;
-        border-width: 1px;
-        border-style: solid;
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        align-content: center;
-        vertical-align: top;
-        box-sizing: border-box;
-
-        .k-link,
-        .k-button-flat {
-            padding: 0;
-            border-width: 0;
+        > .k-grouping-drop-container {
+            flex-grow: 1;
+            padding-block: $kendo-grid-grouping-header-padding-y;
+            margin-block: -$kendo-grid-grouping-header-padding-y;
             display: inline-flex;
+            align-self: stretch;
             align-items: center;
         }
-
-        .k-link .k-icon {
-            margin-left: -( $icon-spacing / 2);
-            margin-right: $icon-spacing;
-        }
-
-        .k-button-flat {
-            margin-left: ( 2 * $icon-spacing );
-            margin-right: -( $icon-spacing / 2 );
-            padding: 0;
-            width: auto;
-            height: auto;
-            opacity: $grid-group-indicator-button-opacity;
-
-            &::before,
-            &::after {
-                display: none;
-            }
-
-            &:hover {
-                opacity: $grid-group-indicator-button-hover-opacity;
-            }
-        }
-    }
-
-    .k-group-indicator + .k-group-indicator {
-        margin-left: ( $grid-group-indicator-gap / 2 );
     }
 
     .k-grouping-dropclue {
-        width: ($grid-group-dropclue-size * 2);
-        height: $grid-group-dropclue-height;
+        width: ($kendo-grid-group-dropclue-size * 2);
         position: absolute;
-        top: $grid-group-dropclue-top;
+        top: $kendo-grid-group-dropclue-top;
         box-sizing: content-box;
 
         &::before,
@@ -523,7 +423,7 @@
         }
 
         &::before {
-            border-width: $grid-group-dropclue-size;
+            border-width: $kendo-grid-group-dropclue-size;
             border-style: solid;
             border-left-color: transparent;
             border-right-color: transparent;
@@ -532,10 +432,10 @@
         }
 
         &::after {
-            width: $grid-group-dropclue-line-size;
-            height: calc(100% - #{$grid-group-dropclue-size});
-            top: $grid-group-dropclue-size;
-            left: calc( #{$grid-group-dropclue-size} - #{$grid-group-dropclue-line-size / 2} );
+            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 )} );
         }
     }
 
@@ -543,9 +443,10 @@
     // Grid header / footer
     .k-grid-header-wrap,
     .k-grid-footer-wrap {
-        margin-right: -1px;
+        margin-inline-end: - $kendo-grid-cell-vertical-border-width;
         width: 100%;
-        border-width: 0 $grid-cell-vertical-border-width 0 0;
+        border-width: 0;
+        border-inline-end-width: $kendo-grid-cell-vertical-border-width;
         border-style: solid;
         border-color: inherit;
         position: relative;
@@ -553,11 +454,7 @@
     }
 
     .k-grid-header-locked + .k-grid-header-wrap.k-auto-scrollable {
-        margin-right: 0;
-
-        .k-ie & {
-            display: inline-block;
-        }
+        margin-inline-end: 0;
     }
 
     .k-grid-header,
@@ -568,10 +465,6 @@
         border-style: solid;
         border-color: inherit;
         flex: 0 0 auto;
-
-        table {
-            table-layout: fixed;
-        }
     }
 
     div.k-grid-header,
@@ -581,126 +474,27 @@
         align-items: stretch;
     }
 
-    .k-grid-header {
-        border-bottom-width: 1px;
-        font-size: $grid-header-font-size;
-
-        table {
-            margin-bottom: -1px;
-        }
-
-        &.k-grid-draggable-header {
-            user-select: none;
-            touch-action: none;
-        }
-
-        .k-header {
-            position: relative;
-            vertical-align: bottom;
-            cursor: default;
-
-            &:first-child {
-                border-left-width: 0;
-            }
-
-            &.k-first {
-                border-left-width: $grid-header-first-border;
-            }
-        }
-
-        .k-header > .k-link {
-            margin: (-$grid-header-padding-y) (-$grid-header-padding-x);
-            padding: $grid-header-padding-y $grid-header-padding-x;
-            line-height: inherit;
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            outline: 0;
-
-            .k-ie & {
-                margin: 0;
-                padding: 0;
-            }
-
-        }
-
-        .k-with-icon,
-        .k-filterable {
-            padding-right: $grid-filterable-icon-spacing;
-
-            .k-ie & {
-                padding-right: calc( #{ $kendo-button-calc-size } + #{ $grid-header-menu-icon-spacing });
-            }
-        }
-
-        .k-header > .k-link:focus {
-            text-decoration: none;
-        }
-
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu {
-            padding: $kendo-button-padding-y;
-            width: $kendo-button-calc-size;
-            height: $kendo-button-calc-size;
-            box-sizing: border-box;
-            outline: 0;
-            line-height: $form-line-height;
-            display: flex;
-            align-items: center;
-            align-content: center;
-            justify-content: center;
-            position: absolute;
-            right: $grid-header-menu-icon-spacing;
-            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $kendo-button-inner-calc-size / 2 } );
-            z-index: 1;
-
-            &:hover {
-                cursor: pointer;
-            }
-        }
-
-        .k-cell-inner > .k-link > .k-icon {
-            &.k-i-sort-desc-sm,
-            &.k-i-sort-asc-sm,
-            &.k-i-sort-asc-small,
-            &.k-i-sort-desc-small {
-                vertical-align: text-top;
-                margin-inline-start: $grid-sorted-icon-spacing;
-            }
-        }
-
-        .k-sort-order {
-            display: inline-block;
-            vertical-align: top;
-            height: $icon-size;
-            font-size: $grid-sorting-index-font-size;
-            margin-top: $grid-sorting-index-spacing-y;
-            margin-inline-start: $grid-sorting-index-spacing-x;
-        }
-    }
-
     .k-column-resizer {
         width: .5em;
         height: 1000%;
         display: block;
         position: absolute;
         top: 0;
-        right: 0;
+        inset-inline-end: 0;
         cursor: col-resize;
     }
 
     .k-grid-footer {
         border-top-width: 1px;
 
-        td {
+        .k-table-td {
             height: $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 {
         font-weight: bold;
     }
 
@@ -718,17 +512,18 @@
 
     // Filter row
     .k-filter-row {
-        line-height: $form-line-height;
+        line-height: $kendo-form-line-height;
 
-        td,
-        th {
-            border-width: 0 0 1px $grid-cell-vertical-border-width;
+        .k-table-td,
+        .k-table-th {
+            border-width: 0;
+            border-block-end-width: 1px;
+            border-inline-start-width: $kendo-grid-cell-vertical-border-width;
             white-space: nowrap;
-            padding: $grid-filter-cell-padding-y $grid-filter-cell-padding-x;
         }
 
-        td:first-child {
-            border-left-width: 0;
+        .k-table-td:first-child {
+            border-inline-start-width: 0;
         }
 
         .k-multiselect {
@@ -748,7 +543,6 @@
             display: flex;
             flex-flow: row nowrap;
             align-items: center;
-            gap: ( $grid-cell-padding-y / 2 );
             flex: 1 1 auto;
 
             > .k-button {
@@ -774,13 +568,11 @@
         border-color: inherit;
         outline: 0;
 
-        table {
-            table-layout: fixed;
-        }
-        tr:last-child > td {
+        .k-table-row:last-child > .k-table-td {
             border-bottom-width: 0;
         }
     }
+
     .k-grid-content {
         width: 100%;
         min-height: 0;
@@ -798,29 +590,15 @@
         position: relative;
     }
 
-
-    // Checkboxes
-    .k-grid th,
-    .k-grid td {
-        > .k-radio,
-        > .k-radio-wrap,
-        > .k-checkbox,
-        > .k-checkbox-wrap {
-            vertical-align: top;
-        }
-    }
-
-
     // Edit row
     .k-grid .k-edit-cell,
     .k-grid .k-command-cell,
-    .k-grid .k-grid-edit-row td {
-        padding: $grid-edit-cell-padding-y $grid-edit-cell-padding-x;
+    .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"]),
         > select,
@@ -841,9 +619,8 @@
         vertical-align: middle;
     }
     .k-grid .k-command-cell > .k-button + .k-button {
-        margin-left: $grid-command-cell-button-spacing;
         margin-inline-end: unset;
-        margin-inline-start: $grid-command-cell-button-spacing;
+        margin-inline-start: $kendo-grid-command-cell-button-spacing;
     }
 
 
@@ -869,26 +646,27 @@
 
     .k-pager-input {
         .k-numerictextbox {
-            margin: 0 $font-size / 2;
+            margin-block: 0;
+            margin-inline: k-math-div( $font-size, 2 );
             width: 3em;
         }
     }
 
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
-            float: left;
+            float: inline-start;
             width: 100%;
         }
 
         .k-grid-table {
             position: relative;
-            float: left;
+            float: inline-start;
             z-index: 1;
         }
 
         > .k-height-container {
             position: relative;
-            float: left;
+            float: inline-start;
         }
 
         &::after {
@@ -907,19 +685,11 @@
         height: 1px;
     }
 
-    .k-grid-virtual[dir="rtl"],
-    .k-grid-virtual.k-rtl {
-        .k-grid-content .k-grid-table {
-            float: right;
-        }
-    }
-
-    .k-grid-add-row td {
+    .k-grid-add-row .k-table-td {
         border-bottom-style: solid;
         border-bottom-width: 1px;
     }
 
-
     // Locked columns
     .k-grid-lockedcolumns {
         white-space: nowrap;
@@ -939,12 +709,17 @@
         overflow: hidden;
         position: relative;
         border-style: solid;
-        border-width: 0 1px 0 0;
+        border-width: 0;
+        border-inline-end-width: $kendo-grid-cell-vertical-border-width;
         box-sizing: content-box;
 
         & + .k-grid-content.k-auto-scrollable {
             display: inline-block;
         }
+
+        .k-table {
+            border-width: 0;
+        }
     }
 
     .k-grid-content,
@@ -959,16 +734,16 @@
         }
     }
 
-    .k-grid-header-locked > table,
-    .k-grid-header-wrap > table {
+    .k-grid-header-locked > .k-grid-header-table,
+    .k-grid-header-wrap > .k-grid-header-table {
         margin-bottom: -1px;
     }
 
-    .k-grid-header .k-header.k-grid-header-sticky,
+    .k-grid-header .k-table-th.k-grid-header-sticky,
     .k-grid-header .k-filter-row .k-grid-header-sticky,
-    .k-grid-content-sticky,
-    .k-grid-row-sticky,
-    .k-grid-footer-sticky {
+    .k-grid .k-grid-content-sticky,
+    .k-grid .k-grid-row-sticky,
+    .k-grid .k-grid-footer-sticky {
         position: sticky;
         z-index: 2;
 
@@ -979,34 +754,34 @@
     }
 
     kendo-grid {
-        tr.k-grid-row-sticky {
+        .k-table-row.k-grid-row-sticky {
             border: 0;
             position: static;
             z-index: auto;
         }
 
-        .k-grid-row-sticky td {
-            border-bottom-width: $grid-border-width;
-            border-top-width: $grid-border-width;
+        .k-grid-row-sticky .k-table-td {
+            border-bottom-width: $kendo-grid-border-width;
+            border-top-width: $kendo-grid-border-width;
 
             position: sticky;
             top: inherit;
             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;
         }
 
         // Locked and sticky
-        .k-grid-header-locked th.k-grid-header-sticky:last-child,
-        .k-grid-content-locked tr .k-grid-content-sticky:last-child {
-            border-right: 0;
+        .k-grid-header-locked .k-table-th.k-grid-header-sticky:last-child,
+        .k-grid-content-locked .k-table-row .k-grid-content-sticky:last-child {
+            border-inline-end: 0;
         }
 
         .k-grid-header .k-grid-column-menu,
@@ -1019,24 +794,24 @@
         z-index: 3;
     }
 
-    .k-grid .k-grid-header-sticky,
-    .k-grid .k-grid-content-sticky,
-    .k-grid .k-grid-footer-sticky {
-        border-right-width: $grid-cell-vertical-border-width;
+    .k-grid .k-table .k-grid-header-sticky,
+    .k-grid .k-table .k-grid-content-sticky,
+    .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"]) + th {
-            border-left-width: 0;
+        &:not([style*="display: none"]) + .k-table-td,
+        &:not([style*="display: none"]) + .k-table-th {
+            border-inline-start-width: 0;
         }
     }
 
     .k-grid .k-grid-row-sticky {
-        border-bottom-width: $grid-border-width;
-        border-top-width: $grid-border-width;
+        border-bottom-width: $kendo-grid-border-width;
+        border-top-width: $kendo-grid-border-width;
     }
 
-    .k-grid-header-sticky.k-header.k-grid-no-left-border.k-first {
-        border-left-width: 0;
+    .k-grid-header-sticky.k-table-th.k-grid-no-left-border.k-first {
+        border-inline-start-width: 0;
     }
 
     .k-grid.k-grid-no-scrollbar {
@@ -1077,74 +852,120 @@
         line-height: 4em;
     }
 
-    .k-header > .k-cell-inner {
-        margin: (-1 * $grid-header-padding-y) (-1 * $grid-header-padding-x);
+    .k-column-title {
+        min-width: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex-shrink: 1;
+        overflow: hidden;
     }
 
-    .k-filterable {
-        > .k-cell-inner {
-            margin-inline-end: calc(-1 * #{$grid-filterable-icon-spacing});
 
-            .k-link {
-                padding-inline-end: 0;
+    // Grid Sizes
+    @each $size, $size-props in $kendo-grid-sizes {
+        $_header-padding-x: k-map-get( $size-props, header-padding-x );
+        $_header-padding-y: k-map-get( $size-props, header-padding-y );
+        $_grouping-header-padding-x: k-map-get( $size-props, grouping-header-padding-x );
+        $_grouping-header-padding-y: k-map-get( $size-props, grouping-header-padding-y );
+        $_cell-padding-x: k-map-get( $size-props, cell-padding-x );
+        $_cell-padding-y: k-map-get( $size-props, cell-padding-y );
+        $_filter-cell-padding-x: k-map-get( $size-props, filter-cell-padding-x );
+        $_filter-cell-padding-y: k-map-get( $size-props, filter-cell-padding-y );
+        $_edit-cell-padding-x: k-map-get( $size-props, edit-cell-padding-x );
+        $_edit-cell-padding-y: k-map-get( $size-props, edit-cell-padding-y );
+        $_button-padding-y: k-map-get( $size-props, button-padding-y );
+        $_button-calc-size: k-map-get( $size-props, button-calc-size );
+        $_button-line-height: k-map-get( $size-props, button-line-height );
+        $_group-dropclue-height: k-map-get( $size-props, group-dropclue-height );
+
+        .k-grid-#{$size} {
+
+            .k-table-th {
+                padding: $_header-padding-y $_header-padding-x;
             }
-        }
-    }
 
-    .k-cell-inner {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: inherit;
-        overflow: hidden;
+            .k-table-td {
+                padding: $_cell-padding-y $_cell-padding-x;
+            }
 
-        > .k-link {
-            padding: $grid-header-padding-y $grid-header-padding-x;
-            width: auto;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            justify-content: inherit;
-            flex: 1;
-            overflow: hidden;
+            .k-grouping-header {
+                padding: $_grouping-header-padding-y $_grouping-header-padding-x;
+                gap: $_grouping-header-padding-y;
 
-            > .k-icon.k-i-sort-desc-sm,
-            > .k-icon.k-i-sort-asc-sm {
-                margin-left: 0;
-                display: inline-block;
-                flex-shrink: 0;
+                &::before {
+                    margin-inline-start: -$_grouping-header-padding-y;
+                }
             }
 
-        }
+            .k-grid-header {
+                .k-table-th > .k-link {
+                    margin: (-$_header-padding-y) (-$_header-padding-x);
+                    padding: $_header-padding-y $_header-padding-x;
+                }
 
-        .k-sort-order {
-            flex-shrink: 0;
-            line-height: normal;
-        }
+                .k-grid-filter,
+                .k-header-column-menu,
+                .k-grid-header-menu {
+                    padding: $_button-padding-y;
+                    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 )} );
+                }
+            }
 
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu {
-            position: static;
-            margin-inline-end: $grid-header-menu-icon-spacing;
-        }
+            .k-table-th {
+                > .k-cell-inner {
+                    margin: (-$_header-padding-y) (-$_header-padding-x);
 
-        .k-grid-filter,
-        .k-header-column-menu,
-        .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
-            text-align: center;
-            display: inline-block;
-            flex-shrink: 0;
+                    > .k-link {
+                        padding: $_header-padding-y $_header-padding-x;
+                    }
+                }
+            }
+
+            .k-grouping-row .k-icon {
+                margin-inline-start: calc( #{k-math-div( $icon-size, 2 )} - #{$_cell-padding-x} );
+            }
+
+            .k-grouping-dropclue {
+                height: $_group-dropclue-height;
+            }
+
+            .k-hierarchy-cell,
+            .k-drag-cell {
+                padding: 0;
+
+                > .k-icon {
+                    padding: $_cell-padding-y 0;
+                }
+            }
+
+
+            // Edit row
+            .k-edit-cell,
+            .k-command-cell,
+            .k-grid-edit-row .k-table-td {
+                padding: $_edit-cell-padding-y $_edit-cell-padding-x;
+            }
+
+
+            // Filter row
+            .k-filter-row {
+                .k-table-td,
+                .k-table-th {
+                    padding: $_filter-cell-padding-y $_filter-cell-padding-x;
+                }
+            }
+
+            .k-filtercell {
+                > span,
+                .k-filtercell-wrapper {
+                    gap: k-math-div( $_cell-padding-y, 2 );
+                }
+            }
         }
-    }
 
-    .k-column-title {
-        min-width: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        flex-shrink: 1;
-        overflow: hidden;
     }
 }
 
@@ -1193,7 +1014,7 @@
     // Remove Grid scrollbar during built-in export
     .k-pdf-export-shadow {
         .k-grid {
-            float: left;
+            float: inline-start;
             width: auto !important; // sass-lint:disable-line no-important
         }
 
@@ -1213,7 +1034,7 @@
             }
         }
 
-        // Remove empty space reserved above the scrollbar
+        // Remove empty space reserved above .k-table-the scrollbar
         .k-grid-header,
         .k-grid[data-role="grid"] .k-grid-footer {
             padding: 0 !important; // sass-lint:disable-line no-important
@@ -1225,18 +1046,18 @@
 
     // Filter menu
     .k-filter-menu-popup {
-        width: $grid-column-menu-width;
+        width: $kendo-grid-column-menu-width;
     }
     .k-filter-menu {
         box-sizing: border-box;
     }
     .k-filter-menu-container {
-        padding: map-get( $spacing, 2 );
+        padding: k-map-get( $kendo-spacing, 2 );
         box-sizing: border-box;
         display: flex;
         flex-flow: column nowrap;
         align-items: stretch;
-        gap: map-get( $spacing, 2 );
+        gap: k-map-get( $kendo-spacing, 2 );
 
         .k-filter-and {
             width: min-content;
@@ -1257,20 +1078,7 @@
             display: flex;
             flex-flow: column nowrap;
             align-items: stretch;
-            gap: map-get( $spacing, 2 );
-        }
-    }
-    .k-ie .k-filter-menu-container {
-        > * { margin-top: map-get( $spacing, 2 ); }
-        > :first-child { margin-top: 0; }
-
-        // Angular specific
-        .k-filter-and,
-        kendo-grid-filter-menu-input-wrapper > * {
-            margin-top: map-get( $spacing, 2 );
-        }
-        kendo-grid-filter-menu-input-wrapper > :first-child {
-            margin-top: 0;
+            gap: k-map-get( $kendo-spacing, 2 );
         }
     }
 
@@ -1278,7 +1086,7 @@
     .k-grid-filter-popup.k-popup {
 
         .k-filter-menu-container {
-            width: $grid-column-menu-width;
+            width: $kendo-grid-column-menu-width;
         }
     }
 
@@ -1294,7 +1102,7 @@
 
         .k-item,
         .k-check-all-wrap {
-            padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;
+            padding: $kendo-grid-column-menu-list-item-padding-y $kendo-grid-column-menu-list-item-padding-x;
             display: flex;
             flex-flow: row nowrap;
         }
@@ -1313,8 +1121,8 @@
         width: auto !important;
         table-layout: auto !important;
 
-        th.k-header,
-        td {
+        .k-table-th,
+        .k-table-td {
             white-space: nowrap !important;
         }
 
@@ -1330,11 +1138,11 @@
     // Column menu
     .k-column-menu-popup,
     .k-grid-columnmenu-popup {
-        width: $grid-column-menu-width;
+        width: $kendo-grid-column-menu-width;
         box-sizing: border-box;
 
         &.k-popup {
-            padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
+            padding: $kendo-grid-column-menu-popup-padding-y $kendo-grid-column-menu-popup-padding-x;
         }
         .k-popup > & {
             max-width: 100%;
@@ -1374,7 +1182,7 @@
 
     .k-column-chooser-title,
     .k-column-list-item {
-        padding: $grid-column-menu-list-item-padding-y $grid-column-menu-list-item-padding-x;
+        padding: $kendo-grid-column-menu-list-item-padding-y $kendo-grid-column-menu-list-item-padding-x;
     }
 
     .k-column-list-item {
@@ -1392,16 +1200,16 @@
     }
 
     .k-columns-items-wrap {
-        padding: $grid-column-menu-items-wrap-padding-y $grid-column-menu-items-wrap-padding-x;
+        padding: $kendo-grid-column-menu-items-wrap-padding-y $kendo-grid-column-menu-items-wrap-padding-x;
     }
 
     .k-columnmenu-item {
-        padding: $grid-column-menu-item-padding-y $grid-column-menu-item-padding-x;
+        padding: $kendo-grid-column-menu-item-padding-y $kendo-grid-column-menu-item-padding-x;
         outline: 0;
         cursor: pointer;
 
         > .k-icon {
-            margin-right: $icon-spacing;
+            margin-inline-end: $icon-spacing;
         }
     }
 
@@ -1415,7 +1223,7 @@
     }
 
     .k-column-menu-group-header {
-        padding: $grid-column-menu-group-header-padding-y $grid-column-menu-group-header-padding-x;
+        padding: $kendo-grid-column-menu-group-header-padding-y $kendo-grid-column-menu-group-header-padding-x;
         display: flex;
         flex: 0 0 auto;
         position: relative;
@@ -1423,42 +1231,13 @@
     }
 
     .k-column-menu-group-header-text {
-        border-bottom-width: $grid-column-menu-group-header-border-bottom-width;
+        border-bottom-width: $kendo-grid-column-menu-group-header-border-bottom-width;
         border-bottom-style: solid;
-        font-size: $grid-column-menu-group-header-font-size;
-        line-height: $grid-column-menu-group-header-line-height;
+        font-size: $kendo-grid-column-menu-group-header-font-size;
+        line-height: $kendo-grid-column-menu-group-header-line-height;
         font-weight: bold;
-        text-transform: $grid-column-menu-group-header-text-transform;
+        text-transform: $kendo-grid-column-menu-group-header-text-transform;
         flex: 1 1 auto;
     }
 
-    [dir="rtl"],
-    .k-rtl {
-        .k-columnmenu-item > .k-icon {
-            margin-left: $icon-spacing;
-            margin-right: 0;
-        }
-    }
-}
-
-@include exports("grid/layout/IE") {
-    // TODO: Remove once we drop IE support
-
-    .k-ie {
-        .k-grid-header,
-        .k-grid-footer {
-            padding-right: $default-scrollbar-width;
-            padding-left: 0;
-            display: block;
-        }
-
-        [dir = "rtl"],
-        .k-rtl {
-            .k-grid-header,
-            .k-grid-footer {
-                padding-right: 0;
-                padding-left: $default-scrollbar-width;
-            }
-        }
-    }
 }