feat(splitter): adjust collapse icon target size

telerik · Jun 16, 2023 · dc37803 · dc37803
1 parent 9156c4b
commit dc37803
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/splitter/_variables.scss b/packages/bootstrap/scss/splitter/_variables.scss
@@ -12,6 +12,8 @@ $kendo-splitter-splitbar-size: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 $kendo-splitter-drag-icon-margin: 7px !default;
+$kendo-splitter-collapse-icon-padding-x: null !default;
+$kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
 
 $kendo-splitbar-bg: $kendo-base-bg !default;
 $kendo-splitbar-text: $kendo-base-text !default;

diff --git a/packages/classic/scss/splitter/_variables.scss b/packages/classic/scss/splitter/_variables.scss
@@ -12,6 +12,8 @@ $kendo-splitter-splitbar-size: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 $kendo-splitter-drag-icon-margin: 7px !default;
+$kendo-splitter-collapse-icon-padding-x: null !default;
+$kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
 
 $kendo-splitbar-bg: $kendo-base-bg !default;
 $kendo-splitbar-text: $kendo-base-text !default;

diff --git a/packages/default/scss/splitter/_layout.scss b/packages/default/scss/splitter/_layout.scss
@@ -56,6 +56,7 @@
         .k-collapse-prev,
         .k-collapse-next {
             cursor: pointer;
+            padding: $kendo-splitter-collapse-icon-padding-y $kendo-splitter-collapse-icon-padding-x;
         }
 
     }

diff --git a/packages/default/scss/splitter/_variables.scss b/packages/default/scss/splitter/_variables.scss
@@ -12,6 +12,8 @@ $kendo-splitter-splitbar-size: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 $kendo-splitter-drag-icon-margin: 7px !default;
+$kendo-splitter-collapse-icon-padding-x: null !default;
+$kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
 
 $kendo-splitbar-bg: $kendo-base-bg !default;
 $kendo-splitbar-text: $kendo-base-text !default;

diff --git a/packages/fluent/scss/splitter/_layout.scss b/packages/fluent/scss/splitter/_layout.scss
@@ -59,6 +59,7 @@
         .k-collapse-prev,
         .k-collapse-next {
             cursor: pointer;
+            padding: var( --kendo-splitter-collapse-icon-padding-y, #{$kendo-splitter-collapse-icon-padding-y} ) var( --kendo-splitter-collapse-icon-padding-x, #{$kendo-splitter-collapse-icon-padding-x} );
         }
 
     }

diff --git a/packages/fluent/scss/splitter/_variables.scss b/packages/fluent/scss/splitter/_variables.scss
@@ -37,6 +37,13 @@ $kendo-splitter-drag-handle-thickness: map.get( $kendo-spacing, 0.5 ) !default;
 /// @group splitter
 $kendo-splitter-drag-icon-margin: map.get( $kendo-spacing, 2 ) !default;
 
+/// Horizontal padding of the collapse icon in the splitter.
+/// @group splitter
+$kendo-splitter-collapse-icon-padding-x: null !default;
+/// Vertical padding of the collapse icon in the splitter.
+/// @group splitter
+$kendo-splitter-collapse-icon-padding-y: map.get( $kendo-spacing, .5 ) !default;
+
 /// Background color of the splitter splitbar.
 /// @group splitter
 $kendo-splitbar-bg: get-theme-color-var( neutral-10 ) !default;

diff --git a/packages/material/scss/splitter/_variables.scss b/packages/material/scss/splitter/_variables.scss
@@ -12,6 +12,8 @@ $kendo-splitter-splitbar-size: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-splitter-drag-handle-length: 20px !default;
 $kendo-splitter-drag-handle-thickness: 2px !default;
 $kendo-splitter-drag-icon-margin: 7px !default;
+$kendo-splitter-collapse-icon-padding-x: null !default;
+$kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
 
 $kendo-splitbar-bg: k-try-shade( $kendo-splitter-bg, 1 ) !default;
 $kendo-splitbar-text: $kendo-subtle-text !default;