New to Kendo UI for Angular? Start a free 30-day trial

Customizing Wizard

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-wizard-border-widthNumber0px0px
Description
The border width of the Wizard.
$kendo-wizard-padding-xStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The horizontal padding of the Wizard.
$kendo-wizard-padding-yStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The vertical padding of the Wizard.
$kendo-wizard-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Wizard.
$kendo-wizard-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Wizard.
$kendo-wizard-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Wizard.
$kendo-wizard-steps-padding-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the Wizard steps.
$kendo-wizard-steps-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the Wizard steps.
$kendo-wizard-content-padding-xStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The horizontal padding of the Wizard content.
$kendo-wizard-content-padding-yStringk-spacing(0)var(--kendo-spacing-0, 0px)
Description
The vertical padding of the Wizard content.
$kendo-wizard-content-textStringvar( --kendo-component-text, initial )var(--kendo-component-text, initial)
Description
The text color of the Wizard content.
$kendo-wizard-content-bgStringvar( --kendo-component-bg, initial )var(--kendo-component-bg, initial)
Description
The background color of the Wizard content.
$kendo-wizard-buttons-margin-xStringk-spacing(7)var(--kendo-spacing-7, 1.75rem)
Description
The horizontal margin of the Wizard's Button container.
$kendo-wizard-buttons-margin-yStringk-spacing(6)var(--kendo-spacing-6, 1.5rem)
Description
The vertical margin of the Wizard Button container.
$kendo-wizard-step-focus-borderStringif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))var(--kendo-color-base-emphasis, #605e5c)
Description
The outline of the focused Wizard step.

In this article

Not finding the help you need?