Sass Variables
The Telerik and Kendo UI ComboBox is a composite UI component that consists of Button, TextBox, and Popup components. To configure and customize the appearance of the ComboBox, modify the Sass variables provided by the Button, TextBox, and Popup components as well as the List Sass variables.
List Variables
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-list-font-family | $kendo-font-family | inherit | Default: $kendo-font-family Computed: inherit |
Description: The font family of the List components. | |||
kendo-list-font-size | null | null | Default: null Computed: null |
Description: The font size of the List component, if no size is set. | |||
kendo-list-line-height | null | null | Default: null Computed: null |
Description: The line height of the List component, if no size is set. | |||
kendo-list-header-padding-x | null | null | Default: null Computed: null |
Description: The horizontal padding of the List header, if no size is set. | |||
kendo-list-header-padding-y | null | null | Default: null Computed: null |
Description: The vertical padding of the List header, if no size is set. | |||
kendo-list-header-border-width | 0 0 1px | 0 0 1px | Default: 0 0 1px Computed: 0 0 1px |
Description: The border width of the List header. | |||
kendo-list-header-font-size | null | null | Default: null Computed: null |
Description: The font size of the List header, if no size is set. | |||
kendo-list-header-line-height | null | null | Default: null Computed: null |
Description: The line height of the List header, if no size is set. | |||
kendo-list-header-font-weight | $kendo-font-weight-bold | 700 | Default: $kendo-font-weight-bold Computed: 700 |
Description: The font weight of the List header. | |||
kendo-list-item-padding-x | null | null | Default: null Computed: null |
Description: The horizontal padding of the List items, when no size is set. | |||
kendo-list-item-padding-y | null | null | Default: null Computed: null |
Description: The vertical padding of the List items, when no size is set. | |||
kendo-list-item-font-size | null | null | Default: null Computed: null |
Description: The font size of the List items, if no size is set. | |||
kendo-list-item-line-height | null | null | Default: null Computed: null |
Description: The line height of the List items, if no size is set. | |||
kendo-list-group-item-padding-x | null | null | Default: null Computed: null |
Description: The horizontal padding of the List group items, when no size is set. | |||
kendo-list-group-item-padding-y | null | null | Default: null Computed: null |
Description: The vertical padding of the List group items, when no size is set. | |||
kendo-list-group-item-border-width | 1px 0 0 | 1px 0 0 | Default: 1px 0 0 Computed: 1px 0 0 |
Description: The border width of the List group items. | |||
kendo-list-group-item-font-size | null | null | Default: null Computed: null |
Description: The font size of the List group items, if no size is set. | |||
kendo-list-group-item-line-height | null | null | Default: null Computed: null |
Description: The line height of the List group items, if no size is set. | |||
kendo-list-group-item-font-weight | $kendo-font-weight-bold | 700 | Default: $kendo-font-weight-bold Computed: 700 |
Description: The font weight of a List group item. | |||
kendo-list-sizes | (
sm: (
font-size: $kendo-list-sm-font-size,
line-height: $kendo-list-sm-line-height,
header-padding-x: $kendo-list-sm-header-padding-x,
header-padding-y: $kendo-list-sm-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-sm-item-padding-x,
item-padding-y: $kendo-list-sm-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-sm-group-item-padding-x,
group-item-padding-y: $kendo-list-sm-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
),
md: (
font-size: $kendo-list-md-font-size,
line-height: $kendo-list-md-line-height,
header-padding-x: $kendo-list-md-header-padding-x,
header-padding-y: $kendo-list-md-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-md-item-padding-x,
item-padding-y: $kendo-list-md-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-md-group-item-padding-x,
group-item-padding-y: $kendo-list-md-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
),
lg: (
font-size: $kendo-list-lg-font-size,
line-height: $kendo-list-lg-line-height,
header-padding-x: $kendo-list-lg-header-padding-x,
header-padding-y: $kendo-list-lg-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-lg-item-padding-x,
item-padding-y: $kendo-list-lg-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-lg-group-item-padding-x,
group-item-padding-y: $kendo-list-lg-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
)
) | (sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null)) | Default: (
sm: (
font-size: $kendo-list-sm-font-size,
line-height: $kendo-list-sm-line-height,
header-padding-x: $kendo-list-sm-header-padding-x,
header-padding-y: $kendo-list-sm-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-sm-item-padding-x,
item-padding-y: $kendo-list-sm-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-sm-group-item-padding-x,
group-item-padding-y: $kendo-list-sm-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
),
md: (
font-size: $kendo-list-md-font-size,
line-height: $kendo-list-md-line-height,
header-padding-x: $kendo-list-md-header-padding-x,
header-padding-y: $kendo-list-md-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-md-item-padding-x,
item-padding-y: $kendo-list-md-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-md-group-item-padding-x,
group-item-padding-y: $kendo-list-md-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
),
lg: (
font-size: $kendo-list-lg-font-size,
line-height: $kendo-list-lg-line-height,
header-padding-x: $kendo-list-lg-header-padding-x,
header-padding-y: $kendo-list-lg-header-padding-y,
header-font-size: null,
header-line-height: null,
item-padding-x: $kendo-list-lg-item-padding-x,
item-padding-y: $kendo-list-lg-item-padding-y,
item-font-size: null,
item-line-height: null,
group-item-padding-x: $kendo-list-lg-group-item-padding-x,
group-item-padding-y: $kendo-list-lg-group-item-padding-y,
group-item-font-size: null,
group-item-line-height: null
)
) Computed: (sm: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 2px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 2px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 2px, group-item-font-size: null, group-item-line-height: null), md: (font-size: 14px, line-height: 1.4285714286, header-padding-x: 8px, header-padding-y: 4px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 4px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 4px, group-item-font-size: null, group-item-line-height: null), lg: (font-size: 16px, line-height: 1.5, header-padding-x: 8px, header-padding-y: 6px, header-font-size: null, header-line-height: null, item-padding-x: 8px, item-padding-y: 8px, item-font-size: null, item-line-height: null, group-item-padding-x: 8px, group-item-padding-y: 6px, group-item-font-size: null, group-item-line-height: null)) |
Description: The map with the sizes of the List. | |||
kendo-list-bg | $kendo-component-bg | #ffffff | Default: $kendo-component-bg Computed: #ffffff |
Description: The background color of the List component. | |||
kendo-list-text | $kendo-component-text | #424242 | Default: $kendo-component-text Computed: #424242 |
Description: The text color of the List component. | |||
kendo-list-border | $kendo-component-border | rgba(0, 0, 0, 0.08) | Default: $kendo-component-border Computed: rgba(0, 0, 0, 0.08) |
Description: The border color of the List component. | |||
kendo-list-header-bg | null | null | Default: null Computed: null |
Description: The background color of the List header. | |||
kendo-list-header-text | null | null | Default: null Computed: null |
Description: The text color of the List header. | |||
kendo-list-header-border | inherit | inherit | Default: inherit Computed: inherit |
Description: The border color of the List header. | |||
kendo-list-header-shadow | k-elevation(2) | var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(2) Computed: var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)) |
Description: The box shadow of the List header. | |||
kendo-list-item-bg | null | null | Default: null Computed: null |
Description: The background color of the List items. | |||
kendo-list-item-text | null | null | Default: null Computed: null |
Description: The text color of the List items. | |||
kendo-list-item-hover-bg | $kendo-hover-bg | #f0f0f0 | Default: $kendo-hover-bg Computed: #f0f0f0 |
Description: The background color of the hovered List items. | |||
kendo-list-item-hover-text | $kendo-hover-text | #424242 | Default: $kendo-hover-text Computed: #424242 |
Description: The text color of the hovered List items. | |||
kendo-list-item-focus-bg | null | null | Default: null Computed: null |
Description: The background color of the focused List items. | |||
kendo-list-item-focus-text | null | null | Default: null Computed: null |
Description: The text color of the focused List items. | |||
kendo-list-item-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, .12) | inset 0 0 0 2px rgba(0, 0, 0, 0.12) | Default: inset 0 0 0 2px rgba(0, 0, 0, .12) Computed: inset 0 0 0 2px rgba(0, 0, 0, 0.12) |
Description: The box shadow of the focused List items. | |||
kendo-list-item-selected-bg | $kendo-selected-bg | #ff6358 | Default: $kendo-selected-bg Computed: #ff6358 |
Description: The background color of the selected List items. | |||
kendo-list-item-selected-text | $kendo-selected-text | white | Default: $kendo-selected-text Computed: white |
Description: The text color of the selected List items. | |||
kendo-list-group-item-bg | null | null | Default: null Computed: null |
Description: The background color of the List group items. | |||
kendo-list-group-item-text | null | null | Default: null Computed: null |
Description: The text color of the List group items. | |||
kendo-list-group-item-border | inherit | inherit | Default: inherit Computed: inherit |
Description: The border color of the List group items. | |||
kendo-list-group-item-shadow | null | null | Default: null Computed: null |
Description: The base shadow of the List group items. | |||
kendo-list-no-data-text | $kendo-subtle-text | #666666 | Default: $kendo-subtle-text Computed: #666666 |
Description: The color of the 'No Data' text. | |||
kendo-list-option-label-text | $kendo-subtle-text | #666666 | Default: $kendo-subtle-text Computed: #666666 |
Description: The color of the 'Option Label' text. |