feat(grid): add row-resizer styles

telerik · Mar 27, 2023 · c7de0cd · c7de0cd
1 parent ffaab9f
commit c7de0cd
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/grid/_theme.scss b/packages/bootstrap/scss/grid/_theme.scss
@@ -450,4 +450,13 @@
         background-color: $kendo-grid-bg;
         border-color: $kendo-grid-border;
     }
+
+    //Row resize indicator
+    .k-row-resizer {
+        @include fill ( $bg: $kendo-grid-row-resizer-bg );
+
+        &.k-active {
+            @include fill ( $bg: $kendo-grid-row-resizer-active-bg );
+        }
+    }
 }
diff --git a/packages/bootstrap/scss/grid/_variables.scss b/packages/bootstrap/scss/grid/_variables.scss
@@ -268,3 +268,10 @@ $kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
 $kendo-grid-grouping-row-border-top: 1px !default;
 $kendo-grid-group-footer-border-y: 1px !default;
 $kendo-grid-group-footer-second-cell-border: 1px !default;
+
+/// Background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default;
+/// Active background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
diff --git a/packages/classic/scss/grid/_variables.scss b/packages/classic/scss/grid/_variables.scss
@@ -274,3 +274,10 @@ $kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
 $kendo-grid-grouping-row-border-top: 1px !default;
 $kendo-grid-group-footer-border-y: 1px !default;
 $kendo-grid-group-footer-second-cell-border: 1px !default;
+
+/// Background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default;
+/// Active background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
@@ -496,6 +496,15 @@
         cursor: col-resize;
     }
 
+    .k-row-resizer {
+        width: 100%;
+        height: 2px;
+        display: block;
+        position: absolute;
+        bottom: 0;
+        cursor: row-resize;
+    }
+
     .k-grid-footer {
         border-top-width: 1px;
 

diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss
@@ -476,4 +476,13 @@
         border-color: $kendo-grid-border;
     }
 
+    // Row resizing
+    .k-row-resizer {
+        @include fill( $bg: $kendo-grid-row-resizer-bg );
+
+        &.k-active {
+            @include fill( $bg: $kendo-grid-row-resizer-active-bg );
+        }
+    }
+
 }
diff --git a/packages/default/scss/grid/_variables.scss b/packages/default/scss/grid/_variables.scss
@@ -268,3 +268,10 @@ $kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
 $kendo-grid-grouping-row-border-top: 1px !default;
 $kendo-grid-group-footer-border-y: 1px !default;
 $kendo-grid-group-footer-second-cell-border: 1px !default;
+
+/// Background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default;
+/// Active background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
diff --git a/packages/fluent/scss/grid/_layout.scss b/packages/fluent/scss/grid/_layout.scss
@@ -475,6 +475,15 @@
         cursor: col-resize;
     }
 
+    .k-row-resizer {
+        width: 100%;
+        height: 2px;
+        display: block;
+        position: absolute;
+        inset-block-end: 0;
+        cursor: row-resize;
+    }
+
     .k-grid-footer {
         border-block-start-width: var( --kendo-grid-border-width, #{$kendo-grid-border-width} );
 

diff --git a/packages/fluent/scss/grid/_theme.scss b/packages/fluent/scss/grid/_theme.scss
@@ -526,4 +526,16 @@
         border-color: $kendo-grid-border;
     }
 
+    .k-row-resizer {
+        @include fill (
+            $bg: var( --kendo-grid-row-resizer-bg, #{$kendo-grid-row-resizer-bg} ),
+         );
+
+        &.k-active {
+            @include fill (
+                $bg: var( --kendo-grid-row-resizer-active-bg, #{$kendo-grid-row-resizer-active-bg} ),
+             );
+        }
+    }
+
 }
diff --git a/packages/fluent/scss/grid/_variables.scss b/packages/fluent/scss/grid/_variables.scss
@@ -531,3 +531,10 @@ $kendo-grid-hierarchy-col-width: calc( var( --kendo-icon-size, 1rem ) * 2 ) !def
 /// Spacing of the grid filterable icon.
 /// @group grid
 $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} ) !default;
+
+/// Background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-bg: get-theme-color-var( neutral-90 ) !default;
+/// Active background color of the grid row indicator
+/// @group grid
+$kendo-grid-row-resizer-active-bg: get-theme-color-var( primary-100 ) !default;
diff --git a/packages/material/scss/grid/_variables.scss b/packages/material/scss/grid/_variables.scss
@@ -269,3 +269,10 @@ $kendo-grid-hierarchy-col-width: 32px !default;
 $kendo-grid-grouping-row-border-top: 0px !default;
 $kendo-grid-group-footer-border-y: 1px !default;
 $kendo-grid-group-footer-second-cell-border: 0px !default;
+
+/// Background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-bg: rgba( k-contrast-color( $kendo-grid-bg ), .24 ) !default;
+/// Active background color of the grid row resize indicator
+/// @group grid
+$kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;