@progress/kendo-theme-core 11.1.0-dev.5 → 11.1.0-dev.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "11.1.0-dev.5",
+  "version": "11.1.0-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,5 +45,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "df7b83831d15c445082b4167f8ad24267d13a64a"
+  "gitHead": "2bfdc0d1f3d785894ad99f35f140cc6219c06fa2"
 }

package/scss/components/grid/_layout.scss

@@ -264,7 +264,7 @@
         }
 
 
-        // Grouping, hierarcy
+        // Grouping, hierarchy
         .k-group-col,
         .k-hierarchy-col {
             padding: 0;
@@ -473,7 +473,7 @@
             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} - #{math.div( $kendo-grid-group-drop-hint-line-size, 2 )} );
+            inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{$kendo-grid-group-drop-hint-line-size} / 2 );
         }
     }
 
@@ -690,7 +690,9 @@
         display: flex;
         justify-content: flex-end;
         gap: $kendo-grid-selection-aggregates-spacing;
+        flex-wrap: wrap;
     }
+
     .k-selection-aggregates-item-value {
         font-weight: $kendo-grid-selection-aggregates-font-weight;
     }
@@ -1071,6 +1073,110 @@
 
     }
 
+    // Grid stack layout
+    .k-grid-stack {
+        .k-table-td,
+        .k-grid-edit-row .k-table-td {
+            padding-inline: $kendo-grid-stack-cell-padding-x;
+            padding-block: $kendo-grid-stack-cell-padding-y;
+        }
+
+        // Grouping, hierarchy
+        .k-group-col,
+        .k-hierarchy-col {
+            width: $kendo-grid-stack-hierarchy-col-width;
+        }
+
+        .k-grouping-row {
+            p {
+                gap: k-spacing(1);
+            }
+
+            .k-icon {
+                padding: k-spacing(1);
+                margin: 0;
+            }
+        }
+
+        // Grouping aggregates
+        .k-grid-grouping-aggregates {
+            display: flex;
+            justify-content: flex-start;
+            flex-direction: column;
+            gap: 0;
+            padding-inline-start: k-spacing(1);
+        }
+
+        .k-grouping-aggregates-item-text {
+            font-weight: normal;
+        }
+
+        .k-grouping-aggregates-item-value {
+            font-weight: $kendo-grid-selection-aggregates-font-weight;
+        }
+    }
+
+    .k-grid-stack-row {
+        display: grid;
+        gap: $kendo-grid-stack-column-gap;
+    }
+
+    .k-grid-edit-row .k-grid-stack-row {
+        gap: $kendo-grid-stack-editable-column-gap;
+    }
+
+    .k-grid-stack-header {
+        font-size: $kendo-grid-stack-header-font-size;
+        font-weight: $kendo-grid-stack-header-font-weight;
+    }
+
+     // Command cell
+    .k-grid-stack-cell.k-command-cell {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+        grid-column: 1 / -1;
+    }
+
+    .k-grid-stack-expandable .k-table-td {
+        position: relative;
+        padding-inline: $kendo-grid-stack-cell-padding-x;
+        padding-block: $kendo-grid-stack-cell-padding-y;
+
+        &::before {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 100%;
+            height: $kendo-grid-stack-expandable-shadow-height;
+            box-shadow: $kendo-grid-stack-expandable-shadow;
+            top: calc( -1 * #{$kendo-grid-stack-expandable-shadow-height} );
+            left: 0;
+        }
+    }
+
+    .k-drag-cell .k-grid-stack-content {
+        display: flex;
+        align-items: center;
+        gap: k-spacing(2);
+        padding-block: k-spacing(2.5);
+        user-select: none;
+        touch-action: none;
+    }
+
+    // Expandable data row
+    .k-grid-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+
+        .k-icon {
+            pointer-events: auto;
+            cursor: pointer;
+        }
+    }
+
 
     // PDF export
     .k-loading-pdf-mask {

package/scss/components/grid/_theme.scss

@@ -451,6 +451,11 @@
         color: $kendo-grid-sorting-indicator-text;
     }
 
+    // Grid stack layout
+    .k-grid-stack-header {
+        @include fill( $color: $kendo-grid-stack-header-color );
+    }
+
 }
 
 

package/scss/components/grid/_variables.scss

@@ -186,3 +186,14 @@ $kendo-grid-group-footer-second-cell-border: null !default;
 $kendo-grid-row-resizer-hover-bg: null !default;
 $kendo-grid-row-resizer-active-bg: null !default;
 $kendo-grid-row-resizer-height: null !default;
+
+$kendo-grid-stack-cell-padding-x: null !default;
+$kendo-grid-stack-cell-padding-y: null !default;
+$kendo-grid-stack-column-gap: null !default;
+$kendo-grid-stack-editable-column-gap: null !default;
+$kendo-grid-stack-hierarchy-col-width: null !default;
+$kendo-grid-stack-header-font-size: null !default;
+$kendo-grid-stack-header-font-weight: null !default;
+$kendo-grid-stack-expandable-shadow-height: null !default;
+$kendo-grid-stack-header-color: null !default;
+$kendo-grid-stack-expandable-shadow: null !default;