New to Kendo UI for Vue? 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
The 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
The background color of the Stepper. | |||
$kendo-stepper-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Stepper. | |||
$kendo-stepper-border | transparent | ||
Description
The border color of the Stepper. | |||
$kendo-stepper-label-margin-x | map.get( $kendo-spacing, 2 ) | ||
Description
The horizontal margin the Stepper label. | |||
$kendo-stepper-label-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
The horizontal padding the Stepper label. | |||
$kendo-stepper-label-padding-y | map.get( $kendo-spacing, 1.5 ) | ||
Description
The vertical padding the Stepper label. | |||
$kendo-stepper-inline-content-padding-x | map.get( $kendo-spacing, 5 ) | ||
Description
The horizontal padding of the Stepper content. | |||
$kendo-stepper-inline-content-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
The vertical padding of the Stepper content. | |||
$kendo-stepper-indicator-width | map.get( $kendo-spacing, 7.5 ) | ||
Description
The width of the Stepper indicator. | |||
$kendo-stepper-indicator-height | $kendo-stepper-indicator-width | ||
Description
The height of the Stepper indicator. | |||
$kendo-stepper-indicator-border-width | 1px | ||
Description
The border width of the Stepper indicator. | |||
$kendo-stepper-indicator-border-radius | 50% | ||
Description
The border radius of the Stepper indicator. | |||
$kendo-stepper-indicator-focus-border-width | $kendo-stepper-indicator-border-width | ||
Description
The border width of the focused Stepper indicator. | |||
$kendo-stepper-indicator-focus-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The size of the focused Stepper indicator. | |||
$kendo-stepper-indicator-focus-offset | 3px | ||
Description
The offset of the Stepper's focused indicator. | |||
$kendo-stepper-indicator-focus-calc-offset | calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) | ||
Description
The calculated offset of the Stepper's focused indicator. | |||
$kendo-stepper-indicator-bg | var( --kendo-component-bg, initial ) | ||
Description
The background color of the Stepper indicator. | |||
$kendo-stepper-indicator-text | var( --kendo-component-text, initial ) | ||
Description
The text color of the Stepper indicator. | |||
$kendo-stepper-indicator-border | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | ||
Description
The border color of the Stepper indicator. | |||
$kendo-stepper-indicator-hover-bg | var( --kendo-hover-bg, initial ) | ||
Description
The background color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-hover-text | var( --kendo-hover-text, initial ) | ||
Description
The text color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-hover-border | $kendo-stepper-indicator-border | ||
Description
The border color of the hovered Stepper indicator. | |||
$kendo-stepper-indicator-disabled-bg | var( --kendo-disabled-bg, initial ) | ||
Description
The background color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-disabled-text | var( --kendo-disabled-text, initial) | ||
Description
The text color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-disabled-border | var( --kendo-disabled-border, initial ) | ||
Description
The border color of the disabled Stepper indicator. | |||
$kendo-stepper-indicator-done-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
The background color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-text | if($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white) | ||
Description
The text color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-border | $kendo-stepper-indicator-done-bg | ||
Description
The border color of the Stepper's done indicator. | |||
$kendo-stepper-indicator-done-hover-bg | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) | ||
Description
The background color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-hover-text | $kendo-stepper-indicator-done-text | ||
Description
The text color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-hover-border | $kendo-stepper-indicator-done-hover-bg | ||
Description
The border color of the Stepper's hovered done indicator. | |||
$kendo-stepper-indicator-done-disabled-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 )) | ||
Description
The background color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-done-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-done-disabled-border | var( --kendo-disabled-border, initial ) | ||
Description
The border color of the Stepper's disabled done indicator. | |||
$kendo-stepper-indicator-current-bg | if($kendo-enable-color-system, k-color( primary-active ), 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 background color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-hover-text | $kendo-stepper-indicator-done-hover-text | ||
Description
The text color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-hover-border | $kendo-stepper-indicator-done-hover-border | ||
Description
The border color of the Stepper's hovered current indicator. | |||
$kendo-stepper-indicator-current-disabled-bg | $kendo-stepper-indicator-done-disabled-bg | ||
Description
The background color of the Stepper's disabled current indicator. | |||
$kendo-stepper-indicator-current-disabled-text | $kendo-stepper-indicator-done-disabled-text | ||
Description
The text color of the Stepper's disabled current indicator. | |||
$kendo-stepper-indicator-current-disabled-border | $kendo-stepper-indicator-done-disabled-border | ||
Description
The border color of the Stepper's disabled current indicator. | |||
$kendo-stepper-label-text | inherit | ||
Description
The text color of the Stepper label. | |||
$kendo-stepper-label-success-text | if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) | ||
Description
The success text color of the Stepper label. | |||
$kendo-stepper-label-error-text | if($kendo-enable-color-system, k-color( error-on-surface ), 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 text color of the hovered Stepper label. | |||
$kendo-stepper-label-disabled-text | var( --kendo-disabled-text, initial ) | ||
Description
The text color of the disabled Stepper label. | |||
$kendo-stepper-current-label-font-weight | var( --kendo-font-weight-bold, bold ) | ||
Description
The font weight of the disabled Stepper label. | |||
$kendo-stepper-optional-label-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
The text color of the optional Stepper label. | |||
$kendo-stepper-optional-label-font-size | inherit | ||
Description
The font size of the optional Stepper label. | |||
$kendo-stepper-optional-label-font-style | italic | ||
Description
The font style of the optional Stepper label. | |||
$kendo-stepper-progressbar-size | map.get( $kendo-spacing, 0.5 ) | ||
Description
The size of the Stepper ProgressBar. | |||
$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 function of the Stepper transition. |