Sass Variables
The Telerik and Kendo UI MultiColumnComboBox is a composite UI component that consists of ComboBox, Table, and Popup components. To configure and customize the appearance of the MultiColumnComboBox, modify the ComboBox and Table Sass variables, as well as the Sass variables provided by the Popup component.
Table Variables
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-table-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The width of the table border. | |||
kendo-table-cell-vertical-border-width | 1px | 1px | Default: 1px Computed: 1px |
Description: The width of vertical border of table cells. | |||
kendo-table-cell-horizontal-border-width | 0px | 0px | Default: 0px Computed: 0px |
Description: The width of horizontal border of table cells. | |||
kendo-table-font-size | null | null | Default: null Computed: null |
Description: The font size of the table if no size is specified. | |||
kendo-table-line-height | null | null | Default: null Computed: null |
Description: The line-height of the table if no size is specified. | |||
kendo-table-cell-padding-x | null | null | Default: null Computed: null |
Description: The horizontal padding of the cells in the table if no size is specified. | |||
kendo-table-cell-padding-y | null | null | Default: null Computed: null |
Description: The vertical padding of the cells in the table if no size is specified. | |||
kendo-table-sizes | (
sm: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y
),
md: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y
),
lg: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y
)
) | (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-2, 0.5rem)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-2\.5, 0.625rem))) | Default: (
sm: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y
),
md: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y
),
lg: (
font-size: var( --kendo-font-size, inherit ),
line-height: var( --kendo-line-height, normal ),
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y
)
) Computed: (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-3, 0.75rem), cell-padding-y: var(--kendo-spacing-2, 0.5rem)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-padding-x: var(--kendo-spacing-2, 0.5rem), cell-padding-y: var(--kendo-spacing-2\.5, 0.625rem))) |
Description: The sizes of the table. | |||
kendo-table-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: Background color of tables. | |||
kendo-table-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: Text color of tables. | |||
kendo-table-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: Border color of tables. | |||
kendo-table-header-bg | $kendo-component-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-component-header-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: Background color of table headers. | |||
kendo-table-header-text | $kendo-component-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: Text color of table headers. | |||
kendo-table-header-border | $kendo-component-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: Border color of table headers. | |||
kendo-table-header-gradient | $kendo-component-header-gradient | null | Default: $kendo-component-header-gradient Computed: null |
Description: Gradient of table headers. | |||
kendo-table-footer-bg | $kendo-table-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-table-header-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: Background color of table footers. | |||
kendo-table-footer-text | $kendo-table-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-table-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: Text color of table footers. | |||
kendo-table-footer-border | $kendo-table-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-table-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: Border color of table footers. | |||
kendo-table-group-row-bg | $kendo-table-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-table-header-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: Background color of group rows in table. | |||
kendo-table-group-row-text | $kendo-table-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-table-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: Text color of group rows in table. | |||
kendo-table-group-row-border | $kendo-table-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-table-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: Border color of group rows in table. | |||
kendo-table-alt-row-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) Computed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) |
Description: Background color of alternating rows in table. | |||
kendo-table-alt-row-text | null | null | Default: null Computed: null |
Description: Text color of alternating rows in table. | |||
kendo-table-alt-row-border | null | null | Default: null Computed: null |
Description: Border color of alternating rows in table. | |||
kendo-table-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%)) | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-color-darken($kendo-table-bg, 7%)) Computed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) |
Description: Background color of hovered rows in table. | |||
kendo-table-hover-text | null | null | Default: null Computed: null |
Description: Text color of hovered rows in table. | |||
kendo-table-hover-border | null | null | Default: null Computed: null |
Description: Border color of hovered rows in table. | |||
kendo-table-focus-bg | null | null | Default: null Computed: null |
Description: Background color of focused rows in table. | |||
kendo-table-focus-text | null | null | Default: null Computed: null |
Description: Text color of focused rows in table. | |||
kendo-table-focus-border | null | null | Default: null Computed: null |
Description: Border color of focused rows in table. | |||
kendo-table-focus-shadow | $kendo-list-item-focus-shadow | (inset 0 0 0 2px rgba(0, 0, 0, 0.12)) | Default: $kendo-list-item-focus-shadow Computed: (inset 0 0 0 2px rgba(0, 0, 0, 0.12)) |
Description: Box shadow of focused rows in table. | |||
kendo-table-selected-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) | color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-selected-bg, .25)) Computed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) |
Description: Background color of selected rows in table. | |||
kendo-table-selected-text | null | null | Default: null Computed: null |
Description: Text color of selected rows in table. | |||
kendo-table-selected-border | null | null | Default: null Computed: null |
Description: Border color of selected rows in table. |