diff --git a/packages/bootstrap/scss/grid/_theme.scss b/packages/bootstrap/scss/grid/_theme.scss index 60e006d68c9..c31dfeb80ce 100644 --- 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 index a271c3b374e..8ad8e2a29b2 100644 --- 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 index 44116a96e2a..e7df6c44520 100644 --- 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 index eafafd778e3..6bea0499091 100644 --- 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 index ae57b16d894..8c7ce9f836a 100644 --- 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 index 37a73f32d65..87d92b6e10f 100644 --- 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 index ee2319e42b9..db2cecf4e05 100644 --- 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 index 1fe729bd81a..1e239ba1145 100644 --- 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 index 3962f5e268a..59d515f61e1 100644 --- 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 index d62e676a761..0f96e908a8e 100644 --- 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;