feat(grid): add sticky rows styling

telerik · Oct 13, 2020 · f02e23c · f02e23c
1 parent aac06af
commit f02e23c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 10 deletions.
diff --git a/packages/bootstrap/scss/grid/_theme.scss b/packages/bootstrap/scss/grid/_theme.scss
@@ -178,32 +178,45 @@
             border-top-color: $grid-border;
         }
 
+        .k-grid-row-sticky {
+            border-top-color: $grid-sticky-border;
+            border-bottom-color: $grid-sticky-border;
+            background-color: $grid-sticky-bg;
+        }
+
         &.k-alt {
-            .k-grid-content-sticky {
+            .k-grid-content-sticky,
+            .k-grid-row-sticky {
                 @include fill( $bg: $grid-sticky-alt-bg );
             }
         }
 
         // Selected state
-        &.k-state-selected .k-grid-content-sticky {
+        &.k-state-selected .k-grid-content-sticky,
+        &.k-state-selected .k-grid-row-sticky {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
 
-        &.k-state-selected.k-alt .k-grid-content-sticky {
+        &.k-state-selected.k-alt .k-grid-content-sticky,
+        &.k-state-selected.k-alt .k-grid-row-sticky {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
 
 
         // Hovered state
         &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky {
+        &:hover .k-grid-row-sticky,
+        &.k-state-hover .k-grid-content-sticky,
+        &.k-state-hover .k-grid-row-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
 
 
         // Selected hover
         &.k-state-selected:hover .k-grid-content-sticky,
-        &.k-state-selected.k-state-hover .k-grid-content-sticky {
+        &.k-state-selected:hover .k-grid-row-sticky,
+        &.k-state-selected.k-state-hover .k-grid-content-sticky,
+        &.k-state-selected.k-state-hover .k-grid-row-sticky {
             background-color: $grid-sticky-selected-hovered-bg;
         }
     }

diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
@@ -263,6 +263,11 @@
                 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;
 
@@ -1057,6 +1062,7 @@
     .k-grid-header .k-header.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 {
         position: sticky;
         z-index: 2;
@@ -1067,6 +1073,10 @@
         }
     }
 
+    .k-grid-content-sticky.k-grid-row-sticky {
+        z-index: 3;
+    }
+
     .k-grid .k-grid-header-sticky,
     .k-grid .k-grid-content-sticky,
     .k-grid .k-grid-footer-sticky {
@@ -1078,6 +1088,11 @@
         }
     }
 
+    .k-grid .k-grid-row-sticky {
+        border-bottom-width: $grid-border-width;
+        border-top-width: $grid-border-width;
+    }
+
     .k-grid-header-sticky.k-header.k-grid-no-left-border.k-first {
         border-left-width: 0;
     }

diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss
@@ -225,32 +225,45 @@
             background-color: $grid-sticky-bg;
         }
 
+        .k-grid-row-sticky {
+            border-top-color: $grid-sticky-border;
+            border-bottom-color: $grid-sticky-border;
+            background-color: $grid-sticky-bg;
+        }
+
         &.k-alt {
-            .k-grid-content-sticky {
+            .k-grid-content-sticky,
+            .k-grid-row-sticky {
                 @include fill( $bg: $grid-sticky-alt-bg );
             }
         }
 
         // Selected state
-        &.k-state-selected .k-grid-content-sticky {
+        &.k-state-selected .k-grid-content-sticky,
+        &.k-state-selected .k-grid-row-sticky {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
 
-        &.k-state-selected.k-alt .k-grid-content-sticky {
+        &.k-state-selected.k-alt .k-grid-content-sticky,
+        &.k-state-selected.k-alt .k-grid-row-sticky {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
 
 
         // Hovered state
         &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky {
+        &:hover .k-grid-row-sticky,
+        &.k-state-hover .k-grid-content-sticky,
+        &.k-state-hover .k-grid-row-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
 
 
         // Selected hover
         &.k-state-selected:hover .k-grid-content-sticky,
-        &.k-state-selected.k-state-hover .k-grid-content-sticky {
+        &.k-state-selected:hover .k-grid-row-sticky,
+        &.k-state-selected.k-state-hover .k-grid-content-sticky,
+        &.k-state-selected.k-state-hover .k-grid-row-sticky {
             background-color: $grid-sticky-selected-hovered-bg;
         }
     }

diff --git a/packages/material/scss/grid/_theme.scss b/packages/material/scss/grid/_theme.scss
@@ -111,6 +111,10 @@
                 border-color: $grid-sticky-border;
                 border-bottom-color: $grid-header-border;
             }
+            .k-grid-row-sticky {
+                border-top-color: $grid-sticky-border;
+                border-bottom-color: $grid-sticky-border;
+            }
         }
     }