New to Kendo UI for Angular? Start a free 30-day trial
Customizing Wizard
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-wizard-border-width | 0px | ||
Description
Border width of the wizard. | |||
| $kendo-wizard-padding-x | map.get( $kendo-spacing, 6 ) | ||
Description
Horizontal padding of the wizard. | |||
| $kendo-wizard-padding-y | map.get( $kendo-spacing, 6 ) | ||
Description
Vertical padding of the wizard. | |||
| $kendo-wizard-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the wizard. | |||
| $kendo-wizard-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the wizard. | |||
| $kendo-wizard-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the wizard. | |||
| $kendo-wizard-steps-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the wizard steps. | |||
| $kendo-wizard-steps-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the wizard steps. | |||
| $kendo-wizard-content-padding-x | 0px | ||
Description
Horizontal padding of the wizard content. | |||
| $kendo-wizard-content-padding-y | 0px | ||
Description
Vertical padding of the wizard content. | |||
| $kendo-wizard-content-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the wizard content. | |||
| $kendo-wizard-content-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the wizard content. | |||
| $kendo-wizard-buttons-margin-x | map.get( $kendo-spacing, 7 ) | ||
Description
Horizontal margin of the wizard buttons container. | |||
| $kendo-wizard-buttons-margin-y | map.get( $kendo-spacing, 6 ) | ||
Description
Vertical margin of the wizard buttons container. | |||
| $kendo-wizard-step-focus-border | k-get-theme-color-var( neutral-130 ) | ||
Description
Outline of the focused wizard step. | |||
