@progress/kendo-theme-core 13.1.0-dev.0 → 13.1.0-dev.2

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": "13.1.0-dev.0",
+  "version": "13.1.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "d4be7843be84237f98eb67ced612583a473e88e0"
+  "gitHead": "feda774a2c88006abd77d1e709272d33792a49b3"
 }

package/scss/components/calendar/_layout.scss

@@ -356,9 +356,9 @@
                 display: block;
                 position: absolute;
                 inset-block-end: 0;
-                content: "\200b";
+                content: "";
                 height: 0;
-                line-height: 0;
+                line-height: 1lh;
                 z-index: k-z-index("base", 1);
                 width: 150%;
                 inset-inline-start: -25%;
@@ -395,7 +395,7 @@
         &::after {
             display: block;
             position: absolute;
-            content: "\200b";
+            content: "";
             height: 0;
             line-height: 0;
             z-index: k-z-index("base", 1);

package/scss/components/checkbox/_layout.scss

@@ -125,8 +125,9 @@
         position: relative;
 
         &::before {
-            content: "\200b";
-            width: 0px;
+            content: "";
+            width: 0;
+            height: 1lh;
             overflow: hidden;
             flex: none;
             display: inline-block;

package/scss/components/dropdowntree/_layout.scss

@@ -27,8 +27,9 @@
         }
 
         .k-input-inner::before {
-            content: "\200b";
-            width: 0px;
+            content: "";
+            width: 0;
+            height: 1lh;
             overflow: hidden;
             flex: none;
             display: inline-block;

package/scss/components/gantt/_layout.scss

@@ -416,7 +416,7 @@
             position: relative;
             vertical-align: middle;
         }
-        td::after { content: "\200b"; }
+        td::after { content: ""; }
     }
 
     .k-task-wrap {

package/scss/components/grid/_layout.scss

@@ -70,7 +70,8 @@
         .k-grid-header,
         .k-grid-content,
         .k-grid-content-locked,
-        .k-grid-footer {
+        .k-grid-footer,
+        .k-grid-sticky-container {
             .k-table {
                 table-layout: fixed;
             }
@@ -318,28 +319,6 @@
             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;
@@ -746,6 +725,62 @@
     }
 
 
+    // Pinned rows container
+    .k-grid-pinned-container {
+        box-shadow: $kendo-grid-pinned-container-shadow;
+        z-index: k-z-index("base", 4);
+        position: relative;
+        overflow: hidden;
+        clip-path: inset(0 0 -50px 0);
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+
+        &.k-pos-bottom {
+            clip-path: inset(-50px 0 0 0);
+        }
+    }
+
+    .k-grid-pinned-wrap {
+        width: 100%;
+        position: relative;
+        overflow: auto;
+        scrollbar-gutter: stable;
+
+        .k-table {
+            table-layout: fixed;
+        }
+    }
+
+    // Sticky grouping container
+    .k-grid-sticky-container {
+        margin-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
+        border-width: 0;
+        border-block-end-width: 1px;
+        border-style: solid;
+        box-shadow: $kendo-grid-sticky-container-shadow;
+        z-index: k-z-index("base", 3);
+        position: absolute;
+        inset-inline: 0;
+        inset-block-start: 0;
+        overflow: hidden;
+        clip-path: inset(0 0 -50px 0);
+
+        &.k-pos-bottom {
+            border-block-end-width: 0;
+            border-block-start-width: 1px;
+            inset-block-start: auto;
+            inset-block-end: 0;
+            clip-path: inset(-50px 0 0 0);
+        }
+
+        .k-grid-group-sticky-footer-table {
+            margin-block: -1px;
+        }
+    }
+
+
     // Pager
     .k-grid-pager {
         border-width: 1px 0 0;
@@ -938,6 +973,10 @@
             border-width: 0;
         }
 
+        .k-grid-pinned-wrap{
+            scrollbar-gutter: auto;
+        }
+
         .k-grid-header,
         .k-grid-footer {
             padding: 0;
@@ -1129,7 +1168,9 @@
     // Grid stack layout
     .k-grid-stack {
 
-        .k-grid-content .k-table {
+        .k-grid-content .k-table,
+        .k-grid-sticky-container .k-table,
+        .k-grid-pinned-wrap .k-table {
             table-layout: auto;
         }
 
@@ -1316,6 +1357,8 @@
 
         // Remove empty space reserved above .k-table-the scrollbar
         .k-grid-header,
+        .k-grid-pinned-container,
+        .k-grid-sticky-container,
         .k-grid[data-role="grid"] .k-grid-footer {
             padding: 0 !important;
         }

package/scss/components/grid/_theme.scss

@@ -67,12 +67,18 @@
         );
     }
 
-    .k-grid-sticky-container {
-        background-color: inherit;
+    .k-grid-pinned-container {
+        background-color: $kendo-grid-header-bg;
+    }
+    .k-grid-pinned-wrap {
+        > .k-table {
+            background-color: $kendo-grid-bg;
+            box-shadow: $kendo-grid-cell-vertical-border-width 0 0 0 $kendo-grid-border;
+        }
     }
 
-    .k-grid-sticky-top-container:has(> .k-grid-group-sticky-header-table),
-    .k-grid-sticky-bottom-container:has(> .k-grid-group-sticky-footer-table) {
+    .k-grid-sticky-container {
+        background-color: $kendo-grid-sticky-bg;
         border-color: $kendo-grid-sticky-border;
     }
 

package/scss/components/grid/_variables.scss

@@ -174,6 +174,8 @@ $kendo-grid-sticky-footer-bg: null !default;
 
 $kendo-grid-sticky-container-shadow: null !default;
 
+$kendo-grid-pinned-container-shadow: null !default;
+
 $kendo-grid-column-menu-width: null !default;
 $kendo-grid-column-menu-max-width: null !default;
 

package/scss/components/icons/_layout.scss

@@ -21,8 +21,9 @@
         position: relative;
 
         &::before {
-            content: "\200b";
+            content: "";
             width: 0;
+            height: 1lh;
             overflow: hidden;
             flex: none;
             display: inline-block;

package/scss/components/input/_layout.scss

@@ -295,17 +295,17 @@
         flex: 1;
         overflow: hidden;
         text-overflow: ellipsis;
-    }
-    .k-input-value-text::before {
-        content: "\200b";
-        width: 0px;
-        overflow: hidden;
-        flex: none;
-        display: inline-block;
-        vertical-align: top;
-    }
-
 
+        &::before {
+            content: "";
+            width: 0;
+            height: 1lh;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
     // Input multiple values
     .k-input-values {
         min-width: 0px;

package/scss/components/list/_layout.scss

@@ -217,8 +217,9 @@
     .k-list-header-text,
     .k-list-optionlabel {
         &::before {
-            content: "\200b";
-            width: 0px;
+            content: "";
+            width: 0;
+            height: 1lh;
             overflow: hidden;
         }
     }

package/scss/components/radio/_layout.scss

@@ -113,8 +113,9 @@
         position: relative;
 
         &::before {
-            content: "\200b";
-            width: 0px;
+            content: "";
+            width: 0;
+            height: 1lh;
             overflow: hidden;
             flex: none;
             display: inline-block;

package/scss/components/skeleton/_layout.scss

@@ -12,7 +12,8 @@
         transform: $kendo-skeleton-text-transform;
 
         &:empty::before {
-            content: "\200b";
+            content: "";
+            display: inline-block;
         }
     }
 

package/scss/components/table/_layout.scss

@@ -141,12 +141,12 @@
             position: sticky;
 
             &::before {
-                content: "\200b";
-                padding-block: $kendo-table-md-cell-padding-y;
-                padding-inline: 0;
+                content: "";
+                height: 1lh;
                 width: 0;
                 display: block;
                 overflow: hidden;
+                box-sizing: content-box;
             }
 
             .k-table-th {

package/scss/components/timeselector/_layout.scss

@@ -151,7 +151,7 @@
             &::before,
             &::after {
                 display: block;
-                content: "\200b";
+                content: "";
                 position: absolute;
                 width: 100%;
                 inset-inline-start: 0;
@@ -188,7 +188,7 @@
         &::after {
             display: block;
             position: absolute;
-            content: "\200b";
+            content: "";
             height: 0;
             line-height: 0;
             z-index: k-z-index("base", 1);

package/scss/components/window/_layout.scss

@@ -72,7 +72,8 @@
         flex: 1;
 
         &:empty::before {
-            content: "\200b";
+            content: "";
+            display: inline-block;
         }
     }