From 45547b2087b9d8e84370571fcf3652d2bdb14b75 Mon Sep 17 00:00:00 2001 From: Teya Veselinova Date: Tue, 10 Dec 2024 11:39:23 +0200 Subject: [PATCH] chore: update docs --- .../bootstrap/docs/customization-toolbar.md | 81 ++++++++++++++++++- packages/bootstrap/docs/customization.md | 81 ++++++++++++++++++- .../classic/docs/customization-toolbar.md | 81 ++++++++++++++++++- packages/classic/docs/customization.md | 81 ++++++++++++++++++- .../default/docs/customization-toolbar.md | 81 ++++++++++++++++++- packages/default/docs/customization.md | 81 ++++++++++++++++++- packages/fluent/docs/customization-toolbar.md | 71 +++++++++++++++- packages/fluent/docs/customization.md | 71 +++++++++++++++- .../material/docs/customization-toolbar.md | 81 ++++++++++++++++++- packages/material/docs/customization.md | 81 ++++++++++++++++++- 10 files changed, 750 insertions(+), 40 deletions(-) diff --git a/packages/bootstrap/docs/customization-toolbar.md b/packages/bootstrap/docs/customization-toolbar.md index 31e555cc718..b79e729287b 100644 --- a/packages/bootstrap/docs/customization-toolbar.md +++ b/packages/bootstrap/docs/customization-toolbar.md @@ -147,6 +147,46 @@ The following table lists the available variables for customization.
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -247,6 +287,16 @@ The following table lists the available variables for customization.
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #f8f9fa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -297,6 +347,16 @@ The following table lists the available variables for customization.
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -347,6 +407,16 @@ The following table lists the available variables for customization.
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -384,20 +454,23 @@ The following table lists the available variables for customization. sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md index 3b56d1c1a66..ec97380af24 100644 --- a/packages/bootstrap/docs/customization.md +++ b/packages/bootstrap/docs/customization.md @@ -27831,6 +27831,46 @@ The following table lists the available variables for customizing the Bootstrap
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(1.4285714286 * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -27931,6 +27971,16 @@ The following table lists the available variables for customizing the Bootstrap
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #f8f9fa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -27981,6 +28031,16 @@ The following table lists the available variables for customizing the Bootstrap
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -28031,6 +28091,16 @@ The following table lists the available variables for customizing the Bootstrap
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -28068,20 +28138,23 @@ The following table lists the available variables for customizing the Bootstrap sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/classic/docs/customization-toolbar.md b/packages/classic/docs/customization-toolbar.md index 9955e0c8302..1a278679f64 100644 --- a/packages/classic/docs/customization-toolbar.md +++ b/packages/classic/docs/customization-toolbar.md @@ -147,6 +147,46 @@ The following table lists the available variables for customization.
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -247,6 +287,16 @@ The following table lists the available variables for customization.
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #f0f0f0), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -297,6 +347,16 @@ The following table lists the available variables for customization.
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -347,6 +407,16 @@ The following table lists the available variables for customization.
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -384,20 +454,23 @@ The following table lists the available variables for customization. sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md index a5f85c1fbc4..8cf744bcdf4 100644 --- a/packages/classic/docs/customization.md +++ b/packages/classic/docs/customization.md @@ -28212,6 +28212,46 @@ The following table lists the available variables for customizing the Classic th
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -28312,6 +28352,16 @@ The following table lists the available variables for customizing the Classic th
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #f0f0f0), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -28362,6 +28412,16 @@ The following table lists the available variables for customizing the Classic th
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -28412,6 +28472,16 @@ The following table lists the available variables for customizing the Classic th
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -28449,20 +28519,23 @@ The following table lists the available variables for customizing the Classic th sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/default/docs/customization-toolbar.md b/packages/default/docs/customization-toolbar.md index a354cccda0b..a759b63c755 100644 --- a/packages/default/docs/customization-toolbar.md +++ b/packages/default/docs/customization-toolbar.md @@ -147,6 +147,46 @@ The following table lists the available variables for customization.
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -247,6 +287,16 @@ The following table lists the available variables for customization.
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #fafafa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -297,6 +347,16 @@ The following table lists the available variables for customization.
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -347,6 +407,16 @@ The following table lists the available variables for customization.
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -424,20 +494,23 @@ The following table lists the available variables for customization. sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md index 3eeb95e8da9..87db60ad6c2 100644 --- a/packages/default/docs/customization.md +++ b/packages/default/docs/customization.md @@ -27651,6 +27651,46 @@ The following table lists the available variables for customizing the Default th
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-0\.5, 0.125rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height-lg, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -27751,6 +27791,16 @@ The following table lists the available variables for customizing the Default th
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #fafafa), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -27801,6 +27851,16 @@ The following table lists the available variables for customizing the Default th
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -27851,6 +27911,16 @@ The following table lists the available variables for customizing the Default th
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -27928,20 +27998,23 @@ The following table lists the available variables for customizing the Default th sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/fluent/docs/customization-toolbar.md b/packages/fluent/docs/customization-toolbar.md index 193947fe57d..7813b59bb47 100644 --- a/packages/fluent/docs/customization-toolbar.md +++ b/packages/fluent/docs/customization-toolbar.md @@ -117,6 +117,36 @@ The following table lists the available variables for customization.
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -187,6 +217,16 @@ The following table lists the available variables for customization.
Description
The color of the border around the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #faf9f8), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text Null @@ -217,6 +257,16 @@ The following table lists the available variables for customization.
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -247,6 +297,16 @@ The following table lists the available variables for customization.
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -304,20 +364,23 @@ The following table lists the available variables for customization. sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md index a456128ca5c..5ce7a5fc3ec 100644 --- a/packages/fluent/docs/customization.md +++ b/packages/fluent/docs/customization.md @@ -32382,6 +32382,36 @@ The following table lists the available variables for customizing the Fluent the
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-2, 0.5rem) * 2 + 1px * 2) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -32452,6 +32482,16 @@ The following table lists the available variables for customizing the Fluent the
Description
The color of the border around the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface, #faf9f8), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text Null @@ -32482,6 +32522,16 @@ The following table lists the available variables for customizing the Fluent the
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -32512,6 +32562,16 @@ The following table lists the available variables for customizing the Fluent the
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -32569,20 +32629,23 @@ The following table lists the available variables for customizing the Fluent the sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/material/docs/customization-toolbar.md b/packages/material/docs/customization-toolbar.md index 46b24f84975..a97111e413b 100644 --- a/packages/material/docs/customization-toolbar.md +++ b/packages/material/docs/customization-toolbar.md @@ -147,6 +147,46 @@ The following table lists the available variables for customization.
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(1.4285714286em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(1.4285714286em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(1.4285714286em + var(--kendo-spacing-2\.5, 0.625rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -247,6 +287,16 @@ The following table lists the available variables for customization.
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface-alt, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -297,6 +347,16 @@ The following table lists the available variables for customization.
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -347,6 +407,16 @@ The following table lists the available variables for customization.
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -424,20 +494,23 @@ The following table lists the available variables for customization. sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md index f35ac0fee39..09fe8589905 100644 --- a/packages/material/docs/customization.md +++ b/packages/material/docs/customization.md @@ -27642,6 +27642,46 @@ The following table lists the available variables for customizing the Material t
Description
The spacing between the tools of the large Toolbar.
+ + $kendo-toolbar-separator-height + Null + null + null + + +
Description
The height of the Toolbar button separator.
+ + + + $kendo-toolbar-sm-separator-height + Calculation + $kendo-button-sm-calc-size + calc(1.4285714286em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 2px) + + +
Description
The height of the small Toolbar button separator.
+ + + + $kendo-toolbar-md-separator-height + Calculation + $kendo-button-md-calc-size + calc(1.4285714286em + var(--kendo-spacing-2, 0.5rem) * 2 + 2px) + + +
Description
The height of the medium Toolbar button separator.
+ + + + $kendo-toolbar-lg-separator-height + Calculation + $kendo-button-lg-calc-size + calc(1.4285714286em + var(--kendo-spacing-2\.5, 0.625rem) * 2 + 2px) + + +
Description
The height of the large Toolbar button separator.
+ + $kendo-toolbar-border-width Number @@ -27742,6 +27782,16 @@ The following table lists the available variables for customizing the Material t
Description
The box shadow of the Toolbar.
+ + $kendo-toolbar-scroll-overlay + List + $kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-surface-alt, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the Toolbar.
+ + $kendo-toolbar-outline-text String @@ -27792,6 +27842,16 @@ The following table lists the available variables for customizing the Material t
Description
The width of the border around the outline Toolbar.
+ + $kendo-toolbar-outline-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the outline Toolbar.
+ + $kendo-toolbar-flat-text Null @@ -27842,6 +27902,16 @@ The following table lists the available variables for customizing the Material t
Description
Border width of the flat Toolbar.
+ + $kendo-toolbar-flat-scroll-overlay + List + if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) + (var(--kendo-color-app-surface, #ffffff), color-mix(in srgb, var(--kendo-color-app-surface, #ffffff) 0%, transparent)) + + +
Description
The left and right scroll overlay of the flat Toolbar.
+ + $kendo-toolbar-separator-border String @@ -27919,20 +27989,23 @@ The following table lists the available variables for customizing the Material t sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, - spacing: $kendo-toolbar-sm-spacing + spacing: $kendo-toolbar-sm-spacing, + separator-height: $kendo-toolbar-sm-separator-height ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, - spacing: $kendo-toolbar-md-spacing + spacing: $kendo-toolbar-md-spacing, + separator-height: $kendo-toolbar-md-separator-height ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, - spacing: $kendo-toolbar-lg-spacing + spacing: $kendo-toolbar-lg-spacing, + separator-height: $kendo-toolbar-lg-separator-height ) ) - +
Description
The sizes map for the Toolbar.