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: 1pxComputed: 1px |
| Description: The width of the table border. | |||
kendo-table-cell-vertical-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of vertical border of table cells. | |||
kendo-table-cell-horizontal-border-width | 0px | 0px | Default: 0pxComputed: 0px |
| Description: The width of horizontal border of table cells. | |||
kendo-table-font-size | null | null | Default: nullComputed: null |
| Description: The font size of the table if no size is specified. | |||
kendo-table-line-height | null | null | Default: nullComputed: null |
| Description: The line-height of the table if no size is specified. | |||
kendo-table-cell-padding-x | null | null | Default: nullComputed: null |
| Description: The horizontal padding of the cells in the table if no size is specified. | |||
kendo-table-cell-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the cells in the table if no size is specified. | |||
kendo-table-sizes | (
sm: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y
),
md: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y
),
lg: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y
)
) | (sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px)) | Default: (
sm: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-sm-cell-padding-x,
cell-padding-y: $kendo-table-sm-cell-padding-y
),
md: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-md-cell-padding-x,
cell-padding-y: $kendo-table-md-cell-padding-y
),
lg: (
font-size: $kendo-font-size-md,
line-height: $kendo-line-height-md,
cell-padding-x: $kendo-table-lg-cell-padding-x,
cell-padding-y: $kendo-table-lg-cell-padding-y
)
)Computed: (sm: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 4px), md: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 12px, cell-padding-y: 8px), lg: (font-size: 14px, line-height: 1.4285714286, cell-padding-x: 8px, cell-padding-y: 10px)) |
| Description: The sizes of the table. | |||
kendo-table-bg | $kendo-component-bg | #ffffff | Default: $kendo-component-bgComputed: #ffffff |
| Description: Background color of tables. | |||
kendo-table-text | $kendo-component-text | #424242 | Default: $kendo-component-textComputed: #424242 |
| Description: Text color of tables. | |||
kendo-table-border | $kendo-component-border | rgba(0, 0, 0, 0.08) | Default: $kendo-component-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of tables. | |||
kendo-table-header-bg | $kendo-component-header-bg | #fafafa | Default: $kendo-component-header-bgComputed: #fafafa |
| Description: Background color of table headers. | |||
kendo-table-header-text | $kendo-component-header-text | #424242 | Default: $kendo-component-header-textComputed: #424242 |
| Description: Text color of table headers. | |||
kendo-table-header-border | $kendo-component-header-border | rgba(0, 0, 0, 0.08) | Default: $kendo-component-header-borderComputed: 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-gradientComputed: null |
| Description: Gradient of table headers. | |||
kendo-table-footer-bg | $kendo-table-header-bg | #fafafa | Default: $kendo-table-header-bgComputed: #fafafa |
| Description: Background color of table footers. | |||
kendo-table-footer-text | $kendo-table-header-text | #424242 | Default: $kendo-table-header-textComputed: #424242 |
| Description: Text color of table footers. | |||
kendo-table-footer-border | $kendo-table-header-border | rgba(0, 0, 0, 0.08) | Default: $kendo-table-header-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of table footers. | |||
kendo-table-group-row-bg | $kendo-table-header-bg | #fafafa | Default: $kendo-table-header-bgComputed: #fafafa |
| Description: Background color of group rows in table. | |||
kendo-table-group-row-text | $kendo-table-header-text | #424242 | Default: $kendo-table-header-textComputed: #424242 |
| Description: Text color of group rows in table. | |||
kendo-table-group-row-border | $kendo-table-header-border | rgba(0, 0, 0, 0.08) | Default: $kendo-table-header-borderComputed: rgba(0, 0, 0, 0.08) |
| Description: Border color of group rows in table. | |||
kendo-table-alt-row-bg | if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 )) | rgba(0, 0, 0, 0.04) | Default: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-legacy( $kendo-table-bg ), .04 ))Computed: rgba(0, 0, 0, 0.04) |
| Description: Background color of alternating rows in table. | |||
kendo-table-alt-row-text | null | null | Default: nullComputed: null |
| Description: Text color of alternating rows in table. | |||
kendo-table-alt-row-border | null | null | Default: nullComputed: null |
| Description: Border color of alternating rows in table. | |||
kendo-table-hover-bg | if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%)) | #ededed | Default: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-color-darken($kendo-table-bg, 7%))Computed: #ededed |
| Description: Background color of hovered rows in table. | |||
kendo-table-hover-text | null | null | Default: nullComputed: null |
| Description: Text color of hovered rows in table. | |||
kendo-table-hover-border | null | null | Default: nullComputed: null |
| Description: Border color of hovered rows in table. | |||
kendo-table-focus-bg | null | null | Default: nullComputed: null |
| Description: Background color of focused rows in table. | |||
kendo-table-focus-text | null | null | Default: nullComputed: null |
| Description: Text color of focused rows in table. | |||
kendo-table-focus-border | null | null | Default: nullComputed: 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-shadowComputed: 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, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) | rgba(255, 99, 88, 0.25) | Default: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25))Computed: rgba(255, 99, 88, 0.25) |
| Description: Background color of selected rows in table. | |||
kendo-table-selected-text | null | null | Default: nullComputed: null |
| Description: Text color of selected rows in table. | |||
kendo-table-selected-border | null | null | Default: nullComputed: null |
| Description: Border color of selected rows in table. | |||
