New to Kendo UI for Angular? Start a free 30-day trial
Customizing Stepper
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-stepper-border-width | 0px | ||
Description
Width of the border around the stepper. | |||
| $kendo-stepper-font-size | var( --kendo-font-size, inherit ) | ||
| $kendo-stepper-font-family | var( --kendo-font-family, inherit ) | ||
| $kendo-stepper-line-height | var( --kendo-line-height, normal ) | ||
| $kendo-stepper-bg | transparent | ||
Description
Background color of the stepper. | |||
| $kendo-stepper-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the stepper. | |||
| $kendo-stepper-border | transparent | ||
Description
Border color of the stepper. | |||
| $kendo-stepper-label-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal margin the stepper label. | |||
| $kendo-stepper-label-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding the stepper label. | |||
| $kendo-stepper-label-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
Vertical padding the stepper label. | |||
| $kendo-stepper-inline-content-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
Horizontal padding the stepper content. | |||
| $kendo-stepper-inline-content-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding the stepper content. | |||
| $kendo-stepper-indicator-width | map.get( $kendo-spacing, 7.5 ) | ||
Description
Width of the stepper indicator. | |||
| $kendo-stepper-indicator-height | $kendo-stepper-indicator-width | ||
Description
Height of the stepper indicator. | |||
| $kendo-stepper-indicator-border-width | 1px | ||
Description
Border width of the stepper indicator. | |||
| $kendo-stepper-indicator-border-radius | 50% | ||
Description
Border radius of the stepper indicator. | |||
| $kendo-stepper-indicator-focus-border-width | $kendo-stepper-indicator-border-width | ||
Description
The focus border width of the stepper indicator. | |||
| $kendo-stepper-indicator-focus-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The focus size of the stepper indicator. | |||
| $kendo-stepper-indicator-focus-offset | 3px | ||
Description
The focus offset of the stepper indicator. | |||
| $kendo-stepper-indicator-focus-calc-offset | calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) | ||
Description
The focus calculated offset of the stepper indicator. | |||
| $kendo-stepper-indicator-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the stepper indicator. | |||
| $kendo-stepper-indicator-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the stepper indicator. | |||
| $kendo-stepper-indicator-border | k-get-theme-color-var( neutral-110 ) | ||
Description
Border color of the stepper indicator. | |||
| $kendo-stepper-indicator-hover-bg | var( --kendo-hover-bg, initial ) | ||
Description
The hover background color of the stepper indicator. | |||
| $kendo-stepper-indicator-hover-text | var( --kendo-hover-text, initial ) | ||
Description
The hover text color of the stepper indicator. | |||
| $kendo-stepper-indicator-hover-border | $kendo-stepper-indicator-border | ||
Description
The hover border color of the stepper indicator. | |||
| $kendo-stepper-indicator-disabled-bg | var( --kendo-disabled-bg, initial ) | ||
Description
The disabled background color of the stepper indicator. | |||
| $kendo-stepper-indicator-disabled-text | var( --kendo-disabled-text, initial) | ||
Description
The disabled text color of the stepper indicator. | |||
| $kendo-stepper-indicator-disabled-border | var( --kendo-disabled-border, initial ) | ||
Description
The disabled border color of the stepper indicator. | |||
| $kendo-stepper-indicator-done-bg | k-get-theme-color-var( primary-100 ) | ||
Description
Background color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-text | $kendo-color-white | ||
Description
Text color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-border | $kendo-stepper-indicator-done-bg | ||
Description
Border color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-hover-bg | k-get-theme-color-var( primary-110 ) | ||
Description
The hover background color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-hover-text | $kendo-stepper-indicator-done-text | ||
Description
The hover text color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-hover-border | $kendo-stepper-indicator-done-hover-bg | ||
Description
The hover border color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-disabled-bg | k-get-theme-color-var( primary-30 ) | ||
Description
The disabled background color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The disabled text color of the stepper done indicator. | |||
| $kendo-stepper-indicator-done-disabled-border | var( --kendo-disabled-border, initial ) | ||
Description
The disabled border color of the stepper done indicator. | |||
| $kendo-stepper-indicator-current-bg | k-get-theme-color-var( primary-120 ) | ||
Description
The background color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-text | $kendo-stepper-indicator-done-text | ||
Description
The text color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-border | $kendo-stepper-indicator-current-bg | ||
Description
The border color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-hover-bg | $kendo-stepper-indicator-done-hover-bg | ||
Description
The Hover background color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-hover-text | $kendo-stepper-indicator-done-hover-text | ||
Description
The Hover text color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-hover-border | $kendo-stepper-indicator-done-hover-border | ||
Description
The Hover border color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-disabled-bg | $kendo-stepper-indicator-done-disabled-bg | ||
Description
The Disabled background color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-disabled-text | $kendo-stepper-indicator-done-disabled-text | ||
Description
The Disabled text color of the stepper current indicator. | |||
| $kendo-stepper-indicator-current-disabled-border | $kendo-stepper-indicator-done-disabled-border | ||
Description
The Disabled border color of the stepper current indicator. | |||
| $kendo-stepper-label-text | inherit | ||
Description
The text color of the stepper label. | |||
| $kendo-stepper-label-success-text | k-get-theme-color-var( success-190 ) | ||
Description
The success text color of the stepper label. | |||
| $kendo-stepper-label-error-text | k-get-theme-color-var( error-190 ) | ||
Description
The error text color of the stepper label. | |||
| $kendo-stepper-label-hover-text | $kendo-stepper-text | ||
Description
The hover text color of the stepper label. | |||
| $kendo-stepper-label-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The disabled text color of the stepper label. | |||
| $kendo-stepper-current-label-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The disabled text color of the stepper label. | |||
| $kendo-stepper-optional-label-text | k-get-theme-color-var( neutral-130 ) | ||
Description
The text color of the stepper optional label. | |||
| $kendo-stepper-optional-label-font-size | inherit | ||
Description
The font size of the stepper optional label. | |||
| $kendo-stepper-optional-label-font-style | italic | ||
Description
The font style of the stepper optional label. | |||
| $kendo-stepper-progressbar-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The size of the stepper progress bar. | |||
| $kendo-stepper-content-transition-property | none | ||
Description
The property name of the stepper transition. | |||
| $kendo-stepper-content-transition-duration | 300ms | ||
Description
The duration of the stepper transition. | |||
| $kendo-stepper-content-transition-timing-function | cubic-bezier(.4, 0, .2, 1) 0ms | ||
Description
The timing funtion of the stepper transition. | |||
