Sass Variables
The Telerik and Kendo UI Wizard is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Sass variables provided by the Button and Stepper components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-wizard-padding-x | calc( #{k-spacing(2)} * 2.5 ) | calc(var(--kendo-spacing-2) * 2.5) | Default: calc( #{k-spacing(2)} * 2.5 )Computed: calc(var(--kendo-spacing-2) * 2.5) |
| Description: The horizontal padding of the Wizard. | |||
kendo-wizard-padding-y | $kendo-wizard-padding-x | calc(var(--kendo-spacing-2) * 2.5) | Default: $kendo-wizard-padding-xComputed: calc(var(--kendo-spacing-2) * 2.5) |
| Description: The vertical padding of the Wizard. | |||
kendo-wizard-content-padding-x | calc( #{k-spacing(2)} * 4 ) | calc(var(--kendo-spacing-2) * 4) | Default: calc( #{k-spacing(2)} * 4 )Computed: calc(var(--kendo-spacing-2) * 4) |
| Description: The horizontal padding of the Wizard content. | |||
kendo-wizard-content-padding-y | calc( #{k-spacing(1)} * 8 ) | calc(var(--kendo-spacing-1) * 8) | Default: calc( #{k-spacing(1)} * 8 )Computed: calc(var(--kendo-spacing-1) * 8) |
| Description: The vertical padding of the Wizard content. | |||
kendo-wizard-buttons-margin-x | k-spacing(2.5) | var(--kendo-spacing-2\.5) | Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5) |
| Description: The horizontal margin of the Wizard's Button container. | |||
kendo-wizard-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The border width of the Wizard. | |||
kendo-wizard-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the Wizard. | |||
kendo-wizard-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the Wizard. | |||
kendo-wizard-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the Wizard. | |||
kendo-wizard-step-focus-border | k-color(subtle) | var(--kendo-color-subtle) | Default: k-color(subtle)Computed: var(--kendo-color-subtle) |
| Description: The outline of the focused Wizard step. | |||
