Customizing Split-button
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-split-button-sm-arrow-padding-y | String | $kendo-button-sm-padding-y | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the small arrow Button. | |||
| $kendo-split-button-md-arrow-padding-y | String | $kendo-button-md-padding-y | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the medium arrow Button. | |||
| $kendo-split-button-lg-arrow-padding-y | String | $kendo-button-lg-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the large arrow Button. | |||
| $kendo-split-button-sm-arrow-padding-x | String | $kendo-split-button-sm-arrow-padding-y | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the small arrow Button. | |||
| $kendo-split-button-md-arrow-padding-x | String | $kendo-split-button-md-arrow-padding-y | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The horizontal padding of the medium arrow Button. | |||
| $kendo-split-button-lg-arrow-padding-x | String | $kendo-split-button-lg-arrow-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the large arrow Button. | |||
| $kendo-split-button-arrow-delimiter-size | Calculation | calc( #{$kendo-button-inner-calc-size} / 2 ) | calc(calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2) / 2) |
Description
The height of the SplitButton arrow delimiter. | |||
| $kendo-split-button-arrow-delimiter-line-size | Number | 1px | 1px |
Description
The width of the SplitButton arrow delimiter. | |||
| $kendo-split-button-arrow-delimiter-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 28%, transparent) |
Description
The background color of the SplitButton arrow delimiter. | |||
| $kendo-split-button-sizes | Map | (
sm: $kendo-split-button-sm-arrow-padding-y,
md: $kendo-split-button-md-arrow-padding-y,
lg: $kendo-split-button-lg-arrow-padding-y
) | (sm: var(--kendo-spacing-1, 0.25rem), md: var(--kendo-spacing-1\.5, 0.375rem), lg: var(--kendo-spacing-2, 0.5rem)) |
Description
The sizes map for the SplitButton. | |||
