Customizing Toolbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-toolbar-padding-xNullnullnull
Description
The horizontal padding of the Toolbar.
$kendo-toolbar-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The horizontal padding of the small Toolbar.
$kendo-toolbar-md-padding-xNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The horizontal padding of the medium Toolbar.
$kendo-toolbar-lg-padding-xNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The horizontal padding of the large Toolbar.
$kendo-toolbar-padding-yNullnullnull
Description
The vertical padding of the Toolbar.
$kendo-toolbar-sm-padding-yNumberk-map-get( $kendo-spacing, 1 )0.25rem
Description
The vertical padding of the small Toolbar.
$kendo-toolbar-md-padding-yNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The vertical padding of the medium Toolbar.
$kendo-toolbar-lg-padding-yNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The vertical padding of the large Toolbar.
$kendo-toolbar-spacingNullnullnull
Description
The spacing between the Toolbar tools.
$kendo-toolbar-sm-spacingNumberk-map-get( $kendo-spacing, 1.5 )0.375rem
Description
The spacing between the tools of the small Toolbar.
$kendo-toolbar-md-spacingNumberk-map-get( $kendo-spacing, 2 )0.5rem
Description
The spacing between the tools of the medium Toolbar.
$kendo-toolbar-lg-spacingNumberk-map-get( $kendo-spacing, 2.5 )0.625rem
Description
The spacing between the tools of the large Toolbar.
$kendo-toolbar-border-widthNumber1px1px
Description
The width of the border around the Toolbar.
$kendo-toolbar-border-radiusNullnullnull
Description
The border radius of the Toolbar.
$kendo-toolbar-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Toolbar.
$kendo-toolbar-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Toolbar.
$kendo-toolbar-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Toolbar.
$kendo-toolbar-bgColor$kendo-component-header-bg#f8f9fa
Description
The background color of the Toolbar.
$kendo-toolbar-textColor$kendo-component-header-text#212529
Description
The text color of the Toolbar.
$kendo-toolbar-borderColor$kendo-component-header-border#dee2e6
Description
The color of the border around the Toolbar.
$kendo-toolbar-gradientNullnullnull
Description
The gradient of the Toolbar.
$kendo-toolbar-shadowNullnullnull
Description
The box shadow of the Toolbar.
$kendo-toolbar-separator-borderStringinheritinherit
Description
The color of the separator border of the Toolbar.
$kendo-toolbar-input-widthNumber10em10em
Description
The width of the input in the Toolbar.
$kendo-toolbar-item-shadowList0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 ))0 0 0 0.25rem rgba(13, 110, 253, 0.25)
Description
The box shadow of the focused Toolbar item.
$kendo-toolbar-flat-border-widthNumber1px1px
Description
Border width of the flat Toolbar.
$kendo-toolbar-sizesMap( sm: ( padding-x: $kendo-toolbar-sm-padding-x, padding-y: $kendo-toolbar-sm-padding-y, spacing: $kendo-toolbar-sm-spacing ), md: ( padding-x: $kendo-toolbar-md-padding-x, padding-y: $kendo-toolbar-md-padding-y, spacing: $kendo-toolbar-md-spacing ), lg: ( padding-x: $kendo-toolbar-lg-padding-x, padding-y: $kendo-toolbar-lg-padding-y, spacing: $kendo-toolbar-lg-spacing ) )(sm: (padding-x: 0.25rem, padding-y: 0.25rem, spacing: 0.375rem), md: (padding-x: 0.5rem, padding-y: 0.5rem, spacing: 0.5rem), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: 0.625rem))
Description
The sizes map for the Toolbar.

In this article

Not finding the help you need?