Customizing Time-selector

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-time-selector-border-width1px
Description
Width of the border around the time-selector.
$kendo-time-selector-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the time-selector.
$kendo-time-selector-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the time-selector.
$kendo-time-selector-line-heightvar( --kendo-line-height, normal )
Description
Line height of the time-selector.
$kendo-time-selector-bgvar( --kendo-component-bg, initial )
Description
Background color of the time-selector.
$kendo-time-selector-textvar( --kendo-component-text, initial )
Description
Text color of the time-selector.
$kendo-time-selector-bordervar( --kendo-component-border, initial )
Description
Border color of the time-selector.
$kendo-time-selector-header-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the time-selector header.
$kendo-time-selector-header-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding color of the time-selector header.
$kendo-time-selector-header-border-width0px
Description
Width of the border around the time-selector header.
$kendo-time-list-separator-displaynone
Description
Visibility of the time-selector separator.
$kendo-time-list-width4em
Description
Minimum width of the time-selector columns.
$kendo-time-list-height240px
Description
Height of the time-selector columns.
$kendo-time-list-title-spacingmap.get( $kendo-spacing, 3 )
Description
Spacing beneath the time selector titles.
$kendo-time-list-title-font-sizevar( --kendo-font-size-xs, inherit )
Description
Font size of the time-selector titles.
$kendo-time-list-title-line-heightvar( --kendo-line-height-lg, inherit )
Description
Line height of the time-selector titles.
$kendo-time-list-title-heightcalc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} )
Description
Height of the time-selector titles.
$kendo-time-list-title-textvar( --kendo-subtle-text, inherit )
Description
Text color of the time-selector titles.
$kendo-time-list-title-focus-text$kendo-time-selector-text
Description
Text color of the focused time-selector titles.
$kendo-time-list-item-padding-xmap.get( $kendo-spacing, 2 )
Description
Horizontal padding of the time-selector list items.
$kendo-time-list-item-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the time-selector list items.
$kendo-time-list-highlight-border-width1px 0px
Description
Width of the border of the selected item in the time-selector.
$kendo-time-list-highlight-heightcalc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} )
Description
Height of the selected item in the time-selector.
$kendo-time-list-highlight-bg$kendo-time-selector-bg
Description
Background color of the selected item in the time-selector.
$kendo-time-list-highlight-border$kendo-time-selector-border
Description
Border color of the selected item in the time-selector.
$kendo-time-list-focus-bgrgba(0, 0, 0, .04)
Description
Background color of the focused time-selector column.
$kendo-time-selector-sm-font-size$kendo-list-sm-font-size
Description
Font sizes of the time-selector.
$kendo-time-selector-sm-line-height$kendo-list-sm-line-height
Description
Line heights used along with $kendo-font-size.
$kendo-time-selector-sm-list-item-padding-x$kendo-list-sm-item-padding-x
Description
Horizontal padding of the time-selector items.
$kendo-time-selector-sm-list-item-padding-y$kendo-list-sm-item-padding-y
Description
Vertical padding of the time-selector items.
$kendo-time-selector-sizes( sm: ( font-size: $kendo-time-selector-sm-font-size, line-height: $kendo-time-selector-sm-line-height, list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x, list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y ), md: ( font-size: $kendo-time-selector-md-font-size, line-height: $kendo-time-selector-md-line-height, list-item-padding-x: $kendo-time-selector-md-list-item-padding-x, list-item-padding-y: $kendo-time-selector-md-list-item-padding-y ), lg: ( font-size: $kendo-time-selector-lg-font-size, line-height: $kendo-time-selector-lg-line-height, list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x, list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y ) )
Description
Sizes map for the time-selector.

In this article

Not finding the help you need?