Customizing Wizard

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-wizard-padding-xCalculationcalc( #{$kendo-padding-md-x} * 1.25 )calc(var(--kendo-spacing-4, 1rem) * 1.25)
Description
The horizontal padding of the Wizard.
$kendo-wizard-padding-yCalculation$kendo-wizard-padding-xcalc(var(--kendo-spacing-4, 1rem) * 1.25)
Description
The vertical padding of the Wizard.
$kendo-wizard-content-padding-xCalculationcalc( #{$kendo-padding-md-x} * 2 )calc(var(--kendo-spacing-4, 1rem) * 2)
Description
The horizontal padding of the Wizard content.
$kendo-wizard-content-padding-yCalculationcalc( #{$kendo-padding-md-y} * 8 )calc(var(--kendo-spacing-1, 0.25rem) * 8)
Description
The vertical padding of the Wizard content.
$kendo-wizard-buttons-margin-xStringk-spacing(2.5)var(--kendo-spacing-2\.5, 0.625rem)
Description
The horizontal margin of the Wizard's Button container.
$kendo-wizard-border-widthNumber0px0px
Description
The border width 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-step-focus-borderColor#656565#656565
Description
The outline of the focused Wizard step.

In this article

Not finding the help you need?