@progress/kendo-theme-core 12.3.1-dev.9 → 13.0.0-dev.1

package/scss/components/grid/_layout.scss

@@ -3,9 +3,11 @@
 @use "sass:list";
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../typography/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../z-index/index.scss" as *;
+@use "../../elevation/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../icons/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
@@ -316,6 +318,28 @@
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
 
+        .k-grid-sticky-container {
+            position: sticky;
+            inset-block-start: 0;
+            z-index: k-z-index("base", 3);
+            overflow: hidden;
+            border-color: inherit;
+            box-shadow: $kendo-grid-sticky-container-shadow;
+
+            .k-table {
+                table-layout: fixed;
+            }
+        }
+
+        .k-grid-sticky-top-container:has(> .k-grid-group-sticky-header-table) {
+            border-block-end-width: 1px;
+            border-block-end-style: solid;
+        }
+        .k-grid-sticky-bottom-container:has(> .k-grid-group-sticky-footer-table) {
+            border-block-start-width: 1px;
+            border-block-start-style: solid;
+        }
+
         .k-hierarchy-cell,
         .k-drag-cell {
             text-align: center;
@@ -334,6 +358,20 @@
             }
         }
 
+        .k-pin-cell {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: k-spacing(2);
+            padding: k-spacing(1);
+            cursor: pointer;
+
+            > .k-icon-wrapper-host .k-icon,
+            > .k-icon {
+                flex-shrink: 0;
+            }
+        }
+
         .k-hierarchy-cell + .k-grid-content-sticky {
             border-inline-start-width: $kendo-grid-cell-vertical-border-width;
         }
@@ -402,6 +440,11 @@
         .k-table-row.k-highlighted > .k-table-td {
             font-weight: $kendo-grid-highlighted-font-weight;
         }
+
+        // Indicates that the row is a source of a pinned element
+        .k-table-row.k-pinned-source {
+            font-weight: $kendo-grid-pinned-source-font-weight;
+        }
     }
 
     .k-grid-resizable {
@@ -954,124 +997,130 @@
         $_selection-aggregates-padding-x: map.get( $size-props, selection-aggregates-padding-x );
         $_selection-aggregates-padding-y: map.get( $size-props, selection-aggregates-padding-y );
 
-        .k-grid .k-grid-#{$size},
-        .k-grid-#{$size} {
-
-            .k-table-th {
-                padding-block: $_header-padding-y;
-                padding-inline: $_header-padding-x;
-            }
-
-            td,
-            .k-table-td {
-                padding-block: $_cell-padding-y;
-                padding-inline: $_cell-padding-x;
-            }
-
-            .k-grouping-header {
-                padding-block: $_grouping-header-padding-y;
-                padding-inline: $_grouping-header-padding-x;
-                gap: $_grouping-header-padding-y;
+        .k-grid,
+        .k-grid .k-grid {
 
-                &::before {
-                    margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 );
-                }
-            }
+            #{k-when-default($kendo-grid-default-size, $size)}
+            &.k-grid-#{$size}{
 
-            .k-grid-header {
-                .k-table-th > .k-link {
-                    margin-block: calc( #{$_header-padding-y} * -1 );
-                    margin-inline: calc( #{$_header-padding-x} * -1 );
+                .k-table-th {
                     padding-block: $_header-padding-y;
                     padding-inline: $_header-padding-x;
                 }
 
-                .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;
-                    inset-block-end: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
+                td,
+                .k-table-td {
+                    padding-block: $_cell-padding-y;
+                    padding-inline: $_cell-padding-x;
                 }
-            }
 
-            .k-table-th {
-                > .k-cell-inner {
-                    margin-block: calc( #{$_header-padding-y} * -1 );
-                    margin-inline: calc( #{$_header-padding-x} * -1 );
+                .k-grouping-header {
+                    padding-block: $_grouping-header-padding-y;
+                    padding-inline: $_grouping-header-padding-x;
+                    gap: $_grouping-header-padding-y;
+
+                    &::before {
+                        margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 );
+                    }
+                }
 
-                    > .k-link {
+                .k-grid-header {
+                    .k-table-th > .k-link {
+                        margin-block: calc( #{$_header-padding-y} * -1 );
+                        margin-inline: calc( #{$_header-padding-x} * -1 );
                         padding-block: $_header-padding-y;
                         padding-inline: $_header-padding-x;
                     }
-                }
-            }
 
-            .k-grouping-row .k-icon {
-                margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$_cell-padding-x} );
-            }
+                    .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;
+                        inset-block-end: calc( #{$_header-padding-y} + #{list.slash( $kendo-line-height-em, 2)} - #{list.slash( $kendo-button-inner-calc-size, 2 )} );
+                    }
+                }
 
-            .k-grouping-dropclue {
-                height: $_group-dropclue-height;
-            }
+                .k-table-th {
+                    > .k-cell-inner {
+                        margin-block: calc( #{$_header-padding-y} * -1 );
+                        margin-inline: calc( #{$_header-padding-x} * -1 );
+
+                        > .k-link {
+                            padding-block: $_header-padding-y;
+                            padding-inline: $_header-padding-x;
+                        }
+                    }
+                }
 
-            .k-hierarchy-cell,
-            .k-drag-cell {
-                padding: 0;
+                .k-grouping-row .k-icon {
+                    margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$_cell-padding-x} );
+                }
 
-                > .k-icon {
-                    padding-block: $_cell-padding-y;
-                    padding-inline: 0;
+                .k-grouping-dropclue {
+                    height: $_group-dropclue-height;
                 }
-            }
 
+                .k-table {
+                    .k-hierarchy-cell,
+                    .k-drag-cell {
 
-            // Edit row
-            .k-edit-cell,
-            .k-command-cell,
-            .k-grid-edit-row td,
-            .k-grid-edit-row .k-table-td {
-                padding-block: $_edit-cell-padding-y;
-                padding-inline: $_edit-cell-padding-x;
-            }
+                        padding: 0;
 
+                        > .k-icon {
+                            padding-block: $_cell-padding-y;
+                            padding-inline: 0;
+                        }
+                    }
 
-            // Filter row
-            .k-filter-row {
-                td,
-                .k-table-td,
-                .k-table-th {
-                    padding-block: $_filter-cell-padding-y;
-                    padding-inline: $_filter-cell-padding-x;
+                    // Edit row
+                    .k-edit-cell,
+                    .k-command-cell,
+                    .k-grid-edit-row td,
+                    .k-grid-edit-row .k-table-td {
+                        padding-block: $_edit-cell-padding-y;
+                        padding-inline: $_edit-cell-padding-x;
+                    }
                 }
-            }
 
-            .k-filtercell {
-                > span,
-                .k-filtercell-wrapper {
-                    gap: calc( #{$_cell-padding-y} / 2 );
+
+                // Filter row
+                .k-filter-row {
+                    td,
+                    .k-table-td,
+                    .k-table-th {
+                        padding-block: $_filter-cell-padding-y;
+                        padding-inline: $_filter-cell-padding-x;
+                    }
                 }
-            }
 
+                .k-filtercell {
+                    > span,
+                    .k-filtercell-wrapper {
+                        gap: calc( #{$_cell-padding-y} / 2 );
+                    }
+                }
 
-            // Selection Aggregates
-            .k-selection-aggregates {
-                padding-block: $_selection-aggregates-padding-x;
-                padding-inline: $_selection-aggregates-padding-y;
-            }
 
-            // Resizing wrapper
-            .k-resizer-wrap {
-                display: block;
-                width: 100%;
-                padding-block-start: calc( #{$_edit-cell-padding-y} - #{$kendo-grid-row-resizer-height} );
-                padding-block-end: $_edit-cell-padding-y;
-                position: absolute;
-                background: none;
-                cursor: row-resize;
-                z-index: k-z-index("base", 2);
+                // Selection Aggregates
+                .k-selection-aggregates {
+                    padding-block: $_selection-aggregates-padding-x;
+                    padding-inline: $_selection-aggregates-padding-y;
+                }
+
+                // Resizing wrapper
+                .k-resizer-wrap {
+                    display: block;
+                    width: 100%;
+                    padding-block-start: calc( #{$_edit-cell-padding-y} - #{$kendo-grid-row-resizer-height} );
+                    padding-block-end: $_edit-cell-padding-y;
+                    position: absolute;
+                    background: none;
+                    cursor: row-resize;
+                    z-index: k-z-index("base", 2);
+                }
             }
         }
 
@@ -1084,8 +1133,8 @@
             table-layout: auto;
         }
 
-        .k-table-td,
-        .k-grid-edit-row .k-table-td {
+        .k-table .k-table-td,
+        .k-table .k-grid-edit-row .k-table-td {
             padding-inline: $kendo-grid-stack-cell-padding-x;
             padding-block: $kendo-grid-stack-cell-padding-y;
         }
@@ -1115,6 +1164,18 @@
             gap: 0;
             padding-inline-start: k-spacing(1);
         }
+
+        // Command cell
+        .k-grid-stack-cell.k-command-cell {
+            padding: 0;
+            grid-column: 1 / -1;
+
+            .k-grid-stack-content {
+                display: flex;
+                flex-wrap: wrap;
+                gap: $kendo-grid-command-cell-button-spacing;
+            }
+        }
     }
 
     .k-grid-stack-row {
@@ -1142,18 +1203,6 @@
         }
     }
 
-     // Command cell
-    .k-grid-stack-cell.k-command-cell {
-        padding: 0;
-        grid-column: 1 / -1;
-
-        .k-grid-stack-content {
-            display: flex;
-            flex-wrap: wrap;
-            gap: $kendo-grid-command-cell-button-spacing;
-        }
-    }
-
     // Dirty cell
     .k-grid-stack-cell .k-dirty {
         inset-inline-start: auto;
@@ -1482,6 +1531,7 @@
         cursor: pointer;
 
         > .k-icon,
+        > .k-icon-wrapper-host,
         > .k-expander-indicator {
             margin-inline-end: $kendo-icon-spacing;
         }

package/scss/components/grid/_theme.scss

@@ -67,6 +67,15 @@
         );
     }
 
+    .k-grid-sticky-container {
+        background-color: inherit;
+    }
+
+    .k-grid-sticky-top-container:has(> .k-grid-group-sticky-header-table),
+    .k-grid-sticky-bottom-container:has(> .k-grid-group-sticky-footer-table) {
+        border-color: $kendo-grid-sticky-border;
+    }
+
     .k-grouping-dropclue {
         &::before {
             border-color: $kendo-grid-header-text transparent transparent;

package/scss/components/grid/_variables.scss

@@ -1,4 +1,8 @@
-// Grid
+// Grid`
+@use "../button/_variables.scss" as *;
+
+$kendo-grid-default-size: null !default;
+
 $kendo-grid-border-width: null !default;
 $kendo-grid-font-family: null !default;
 $kendo-grid-font-size: null !default;
@@ -59,9 +63,44 @@ $kendo-grid-md-group-dropclue-height: null !default;
 $kendo-grid-md-selection-aggregates-padding-x: null !default;
 $kendo-grid-md-selection-aggregates-padding-y: null !default;
 
-
-// Kendo Grid sizes
-$kendo-grid-sizes: null !default;
+/// The sizes map of the Grid.
+/// @group grid
+$kendo-grid-sizes: (
+    sm: (
+        header-padding-x: $kendo-grid-sm-header-padding-x,
+        header-padding-y: $kendo-grid-sm-header-padding-y,
+        grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x,
+        grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y,
+        cell-padding-x: $kendo-grid-sm-cell-padding-x,
+        cell-padding-y: $kendo-grid-sm-cell-padding-y,
+        filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x,
+        filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y,
+        edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x,
+        edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
+        button-padding-y: $kendo-button-sm-padding-y,
+        button-calc-size: $kendo-button-sm-calc-size,
+        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
+    ),
+    md: (
+        header-padding-x: $kendo-grid-md-header-padding-x,
+        header-padding-y: $kendo-grid-md-header-padding-y,
+        grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x,
+        grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y,
+        cell-padding-x: $kendo-grid-md-cell-padding-x,
+        cell-padding-y: $kendo-grid-md-cell-padding-y,
+        filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x,
+        filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y,
+        edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x,
+        edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
+        button-padding-y: $kendo-button-md-padding-y,
+        button-calc-size: $kendo-button-md-calc-size,
+        group-dropclue-height: $kendo-grid-md-group-dropclue-height,
+        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
+        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
+    ),
+) !default;
 
 $kendo-grid-header-font-size: null !default;
 $kendo-grid-header-first-border: null !default;
@@ -133,6 +172,8 @@ $kendo-grid-sticky-header-border: null !default;
 
 $kendo-grid-sticky-footer-bg: null !default;
 
+$kendo-grid-sticky-container-shadow: null !default;
+
 $kendo-grid-column-menu-width: null !default;
 $kendo-grid-column-menu-max-width: null !default;
 
@@ -188,3 +229,5 @@ $kendo-grid-stack-expandable-shadow-height: null !default;
 $kendo-grid-stack-header-color: null !default;
 $kendo-grid-stack-focus-outline: null !default;
 $kendo-grid-stack-expandable-shadow: null !default;
+
+$kendo-grid-pinned-source-font-weight: null !default;

package/scss/components/icons/_layout.scss

@@ -1,7 +1,8 @@
 @use "./_variables.scss" as *;
 
 @use "@progress/kendo-svg-icons/scss/index.scss" as * with (
-    $ki-icon-size: $kendo-icon-size
+    $ki-icon-size: $kendo-icon-size,
+    $ki-icon-default-size: $kendo-icon-default-size
 );
 
 @mixin kendo-icon--layout-base() {

package/scss/components/icons/_variables.scss

@@ -1,3 +1,4 @@
+$kendo-icon-default-size: null !default;
 $kendo-icon-size: null !default;
 $kendo-icon-size-xs: null !default;
 $kendo-icon-size-sm: null !default;