New to Kendo UI for Vue? Start a free 30-day trial
Customizing Toolbar
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-toolbar-border-width | Number | 1px | 1px |
Description
Width of the border around the toolbar. | |||
| $kendo-toolbar-font-family | Null | null | null |
Description
Font family of the toolbar. | |||
| $kendo-toolbar-font-size | Number | $kendo-font-size-md | 1rem |
Description
Font size of the toolbar. | |||
| $kendo-toolbar-line-height | Number | $kendo-line-height-md | 1.5 |
Description
Line height of the toolbar. | |||
| $kendo-toolbar-input-width | Number | 10em | 10em |
Description
The width of the input in the toolbar. | |||
| $kendo-toolbar-item-focus-outline-width | Number | 1px | 1px |
Description
Border width of the focused toolbar item. | |||
| $kendo-toolbar-item-focus-outline-style | String | solid | solid |
Description
Border style of the focused toolbar item. | |||
| $kendo-toolbar-sizes | Map | (
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.25rem), md: (padding-x: 0.5rem, padding-y: 0.5rem, spacing: 0.5rem), lg: (padding-x: 0.625rem, padding-y: 0.625rem, spacing: 0.5rem)) |
Description
Sizes map for the toolbar. | |||
