Customizing Time-selector
Variables
The following table lists the available variables for customization.
Name | Type | Default value | Computed value |
---|---|---|---|
$kendo-time-selector-border-width | 1px | ||
Description
Width of the border around the time-selector. | |||
$kendo-time-selector-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the time-selector. | |||
$kendo-time-selector-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the time-selector. | |||
$kendo-time-selector-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the time-selector. | |||
$kendo-time-selector-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the time-selector. | |||
$kendo-time-selector-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the time-selector. | |||
$kendo-time-selector-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the time-selector. | |||
$kendo-time-selector-header-padding-x | k-spacing(3) | ||
Description
Horizontal padding of the time-selector header. | |||
$kendo-time-selector-header-padding-y | k-spacing(3) | ||
Description
Vertical padding color of the time-selector header. | |||
$kendo-time-selector-header-border-width | 0px | ||
Description
Width of the border around the time-selector header. | |||
$kendo-time-list-separator-display | none | ||
Description
Visibility of the time-selector separator. | |||
$kendo-time-list-width | 4em | ||
Description
Minimum width of the time-selector columns. | |||
$kendo-time-list-height | 240px | ||
Description
Height of the time-selector columns. | |||
$kendo-time-list-title-spacing | k-spacing(3) | ||
Description
Spacing beneath the time selector titles. | |||
$kendo-time-list-title-font-size | var( --kendo-font-size-xs, inherit ) | ||
Description
Font size of the time-selector titles. | |||
$kendo-time-list-title-line-height | var( --kendo-line-height-lg, inherit ) | ||
Description
Line height of the time-selector titles. | |||
$kendo-time-list-title-height | calc( #{$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-text | var( --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-x | k-spacing(2) | ||
Description
Horizontal padding of the time-selector list items. | |||
$kendo-time-list-item-padding-y | k-spacing(1) | ||
Description
Vertical padding of the time-selector list items. | |||
$kendo-time-list-highlight-border-width | 1px 0px | ||
Description
Width of the border of the selected item in the time-selector. | |||
$kendo-time-list-highlight-height | calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + calc( #{$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-bg | rgba(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. |