fix(treeview): allow sizing customization through default treeview va…

…riables
telerik · Apr 22, 2022 · 61b180d · 61b180d
1 parent e4586fb
commit 61b180d
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 51 deletions.
diff --git a/packages/bootstrap/scss/treeview/_variables.scss b/packages/bootstrap/scss/treeview/_variables.scss
@@ -6,9 +6,15 @@ $kendo-treeview-font-family: $font-family !default;
 /// Font size of the treeview component.
 /// @group treeview
 $kendo-treeview-font-size: $font-size-md !default;
+$kendo-treeview-font-size-sm: $font-size-md !default;
+$kendo-treeview-font-size-md: $font-size-md !default;
+$kendo-treeview-font-size-lg: $font-size-md !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: $line-height !default;
+$kendo-treeview-line-height-sm: $line-height !default;
+$kendo-treeview-line-height-md: $line-height !default;
+$kendo-treeview-line-height-lg: $line-height !default;
 
 /// Indentation of child groups in treeview component.
 /// @group treeview
@@ -17,9 +23,15 @@ $kendo-treeview-indent: 16px !default;
 /// Horizontal padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-x: map-get( $spacing, 3 ) !default;
+$kendo-treeview-item-padding-x-sm: map-get( $spacing, 3 ) !default;
+$kendo-treeview-item-padding-x-md: map-get( $spacing, 3 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 3 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -32,22 +44,22 @@ $kendo-treeview-item-border-radius: map-get( $spacing, 1 ) !default;
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 3 ),
-        item-padding-y: map-get( $spacing, 1 ) - map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-sm,
+        line-height: $kendo-treeview-line-height-sm,
+        item-padding-x: $kendo-treeview-item-padding-x-sm,
+        item-padding-y: $kendo-treeview-item-padding-y-sm
     ),
     md: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 3 ),
-        item-padding-y: map-get( $spacing, 1 )
+        font-size: $kendo-treeview-font-size-md,
+        line-height: $kendo-treeview-line-height-md,
+        item-padding-x: $kendo-treeview-item-padding-x-md,
+        item-padding-y: $kendo-treeview-item-padding-y-md
     ),
     lg: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 3 ),
-        item-padding-y: map-get( $spacing, 1 ) + map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-lg,
+        line-height: $kendo-treeview-line-height-lg,
+        item-padding-x: $kendo-treeview-item-padding-x-lg,
+        item-padding-y: $kendo-treeview-item-padding-y-lg
     )
 ) !default;
 

diff --git a/packages/classic/scss/treeview/_variables.scss b/packages/classic/scss/treeview/_variables.scss
@@ -6,20 +6,31 @@ $kendo-treeview-font-family: $font-family !default;
 /// Font size of the treeview component.
 /// @group treeview
 $kendo-treeview-font-size: $font-size-md !default;
+$kendo-treeview-font-size-sm: $font-size-md !default;
+$kendo-treeview-font-size-md: $font-size-md !default;
+$kendo-treeview-font-size-lg: $font-size-md !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: $line-height-md !default;
-
+$kendo-treeview-line-height-sm: $line-height-md !default;
+$kendo-treeview-line-height-md: $line-height-md !default;
+$kendo-treeview-line-height-lg: $line-height-md !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -32,22 +43,22 @@ $kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 1 ) - map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-sm,
+        line-height: $kendo-treeview-line-height-sm,
+        item-padding-x: $kendo-treeview-item-padding-x-sm,
+        item-padding-y: $kendo-treeview-item-padding-y-sm
     ),
     md: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 1 )
+        font-size: $kendo-treeview-font-size-md,
+        line-height: $kendo-treeview-line-height-md,
+        item-padding-x: $kendo-treeview-item-padding-x-md,
+        item-padding-y: $kendo-treeview-item-padding-y-md
     ),
     lg: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 1 ) + map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-lg,
+        line-height: $kendo-treeview-line-height-lg,
+        item-padding-x: $kendo-treeview-item-padding-x-lg,
+        item-padding-y: $kendo-treeview-item-padding-y-lg
     )
 ) !default;
 

diff --git a/packages/default/scss/treeview/_variables.scss b/packages/default/scss/treeview/_variables.scss
@@ -6,20 +6,31 @@ $kendo-treeview-font-family: $font-family !default;
 /// Font size of the treeview component.
 /// @group treeview
 $kendo-treeview-font-size: $font-size-md !default;
+$kendo-treeview-font-size-sm: $font-size-md !default;
+$kendo-treeview-font-size-md: $font-size-md !default;
+$kendo-treeview-font-size-lg: $font-size-md !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: $line-height-md !default;
-
+$kendo-treeview-line-height-sm: $line-height-md !default;
+$kendo-treeview-line-height-md: $line-height-md !default;
+$kendo-treeview-line-height-lg: $line-height-md !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 2 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -32,22 +43,22 @@ $kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 1 ) - map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-sm,
+        line-height: $kendo-treeview-line-height-sm,
+        item-padding-x: $kendo-treeview-item-padding-x-sm,
+        item-padding-y: $kendo-treeview-item-padding-y-sm
     ),
     md: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 1 )
+        font-size: $kendo-treeview-font-size-md,
+        line-height: $kendo-treeview-line-height-md,
+        item-padding-x: $kendo-treeview-item-padding-x-md,
+        item-padding-y: $kendo-treeview-item-padding-y-md
     ),
     lg: (
-        font-size: $font-size-md,
-        line-height: $line-height-md,
-        item-padding-x: map-get( $spacing, 2 ),
-        item-padding-y: map-get( $spacing, 1 ) + map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-lg,
+        line-height: $kendo-treeview-line-height-lg,
+        item-padding-x: $kendo-treeview-item-padding-x-lg,
+        item-padding-y: $kendo-treeview-item-padding-y-lg
     )
 ) !default;
 

diff --git a/packages/material/scss/treeview/_variables.scss b/packages/material/scss/treeview/_variables.scss
@@ -6,20 +6,31 @@ $kendo-treeview-font-family: $font-family !default;
 /// Font size of the treeview component.
 /// @group treeview
 $kendo-treeview-font-size: $font-size-lg !default;
+$kendo-treeview-font-size-sm: $font-size-lg !default;
+$kendo-treeview-font-size-md: $font-size-lg !default;
+$kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: 1.25 !default;
-
+$kendo-treeview-line-height-sm: 1.25 !default;
+$kendo-treeview-line-height-md: 1.25 !default;
+$kendo-treeview-line-height-lg: 1.25 !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
 
 /// Horizontal padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 4 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -32,22 +43,22 @@ $kendo-treeview-item-border-radius: null !default;
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
-        font-size: $font-size-lg,
-        line-height: 1.25,
-        item-padding-x: map-get( $spacing, 4 ),
-        item-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-sm,
+        line-height: $kendo-treeview-line-height-sm,
+        item-padding-x: $kendo-treeview-item-padding-x-sm,
+        item-padding-y: $kendo-treeview-item-padding-y-sm
     ),
     md: (
-        font-size: $font-size-lg,
-        line-height: 1.25,
-        item-padding-x: map-get( $spacing, 4 ),
-        item-padding-y: map-get( $spacing, 2 )
+        font-size: $kendo-treeview-font-size-md,
+        line-height: $kendo-treeview-line-height-md,
+        item-padding-x: $kendo-treeview-item-padding-x-md,
+        item-padding-y: $kendo-treeview-item-padding-y-md
     ),
     lg: (
-        font-size: $font-size-lg,
-        line-height: 1.25,
-        item-padding-x: map-get( $spacing, 4 ),
-        item-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-lg,
+        line-height: $kendo-treeview-line-height-lg,
+        item-padding-x: $kendo-treeview-item-padding-x-lg,
+        item-padding-y: $kendo-treeview-item-padding-y-lg
     )
 ) !default;