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 | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the List components. | |||
kendo-list-font-size | null | null | Default: nullComputed: null |
| Description: The font size of the List component, if no size is set. | |||
kendo-list-line-height | null | null | Default: nullComputed: null |
| Description: The line height of the List component, if no size is set. | |||
kendo-list-header-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the List header, if no size is set. | |||
kendo-list-header-padding-y | null | null | Default: nullComputed: 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 1pxComputed: 0 0 1px |
| Description: The border width of the List header. | |||
kendo-list-header-font-size | null | null | Default: nullComputed: null |
| Description: The font size of the List header, if no size is set. | |||
kendo-list-header-line-height | null | null | Default: nullComputed: null |
| Description: The line height of the List header, if no size is set. | |||
kendo-list-header-font-weight | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) | Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal) |
| Description: The font weight of the List header. | |||
kendo-list-item-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the List items, when no size is set. | |||
kendo-list-item-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the List items, when no size is set. | |||
kendo-list-item-font-size | null | null | Default: nullComputed: null |
| Description: The font size of the List items, if no size is set. | |||
kendo-list-item-line-height | null | null | Default: nullComputed: null |
| Description: The line height of the List items, if no size is set. | |||
kendo-list-group-item-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the List group items, when no size is set. | |||
kendo-list-group-item-padding-y | null | null | Default: nullComputed: 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 0Computed: 1px 0 0 |
| Description: The border width of the List group items. | |||
kendo-list-group-item-font-size | null | null | Default: nullComputed: null |
| Description: The font size of the List group items, if no size is set. | |||
kendo-list-group-item-line-height | null | null | Default: nullComputed: null |
| Description: The line height of the List group items, if no size is set. | |||
kendo-list-group-item-font-weight | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) | Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal) |
| 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: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-0\.5, 0.125rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1, 0.25rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), 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: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-0\.5, 0.125rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-0\.5, 0.125rem), group-item-font-size: null, group-item-line-height: null), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1, 0.25rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-1, 0.25rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1, 0.25rem), group-item-font-size: null, group-item-line-height: null), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-1\.5, 0.375rem), header-font-size: null, header-line-height: null, item-padding-x: var(--kendo-spacing-2, 0.5rem), item-padding-y: var(--kendo-spacing-2, 0.5rem), item-font-size: null, item-line-height: null, group-item-padding-x: var(--kendo-spacing-2, 0.5rem), group-item-padding-y: var(--kendo-spacing-1\.5, 0.375rem), 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 | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the List component. | |||
kendo-list-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the List component. | |||
kendo-list-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the List component. | |||
kendo-list-header-bg | null | null | Default: nullComputed: null |
| Description: The background color of the List header. | |||
kendo-list-header-text | null | null | Default: nullComputed: null |
| Description: The text color of the List header. | |||
kendo-list-header-border | inherit | inherit | Default: inheritComputed: 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: nullComputed: null |
| Description: The background color of the List items. | |||
kendo-list-item-text | null | null | Default: nullComputed: null |
| Description: The text color of the List items. | |||
kendo-list-item-hover-bg | $kendo-hover-bg | var(--kendo-color-base-hover, #ebebeb) | Default: $kendo-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb) |
| Description: The background color of the hovered List items. | |||
kendo-list-item-hover-text | $kendo-hover-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-hover-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the hovered List items. | |||
kendo-list-item-focus-bg | null | null | Default: nullComputed: null |
| Description: The background color of the focused List items. | |||
kendo-list-item-focus-text | null | null | Default: nullComputed: 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 | var(--kendo-color-primary, #ff6358) | Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the selected List items. | |||
kendo-list-item-selected-text | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the selected List items. | |||
kendo-list-group-item-bg | null | null | Default: nullComputed: null |
| Description: The background color of the List group items. | |||
kendo-list-group-item-text | null | null | Default: nullComputed: null |
| Description: The text color of the List group items. | |||
kendo-list-group-item-border | inherit | inherit | Default: inheritComputed: inherit |
| Description: The border color of the List group items. | |||
kendo-list-group-item-shadow | null | null | Default: nullComputed: null |
| Description: The base shadow of the List group items. | |||
kendo-list-no-data-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The color of the 'No Data' text. | |||
kendo-list-option-label-text | $kendo-subtle-text | var(--kendo-color-subtle, #666666) | Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666) |
| Description: The color of the 'Option Label' text. | |||
