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, 0.5rem) * 2.5) | Default: calc( #{k-spacing(2)} * 2.5 )Computed: calc(var(--kendo-spacing-2, 0.5rem) * 2.5) |
| Description: The horizontal padding of the Wizard. | |||
kendo-wizard-padding-y | $kendo-wizard-padding-x | calc(var(--kendo-spacing-2, 0.5rem) * 2.5) | Default: $kendo-wizard-padding-xComputed: calc(var(--kendo-spacing-2, 0.5rem) * 2.5) |
| Description: The vertical padding of the Wizard. | |||
kendo-wizard-content-padding-x | calc( #{k-spacing(2)} * 4 ) | calc(var(--kendo-spacing-2, 0.5rem) * 4) | Default: calc( #{k-spacing(2)} * 4 )Computed: calc(var(--kendo-spacing-2, 0.5rem) * 4) |
| Description: The horizontal padding of the Wizard content. | |||
kendo-wizard-content-padding-y | calc( #{k-spacing(1)} * 8 ) | calc(var(--kendo-spacing-1, 0.25rem) * 8) | Default: calc( #{k-spacing(1)} * 8 )Computed: calc(var(--kendo-spacing-1, 0.25rem) * 8) |
| Description: The vertical padding of the Wizard content. | |||
kendo-wizard-buttons-margin-x | k-spacing(2.5) | var(--kendo-spacing-2\.5, 0.625rem) | Default: k-spacing(2.5)Computed: var(--kendo-spacing-2\.5, 0.625rem) |
| 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, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Wizard. | |||
kendo-wizard-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the Wizard. | |||
kendo-wizard-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Wizard. | |||
kendo-wizard-step-focus-border | #656565 | #656565 | Default: #656565Computed: #656565 |
| Description: The outline of the focused Wizard step. | |||
