New to Kendo UI for Angular? Start a free 30-day trial
Customizing Grid
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-grid-border-width | Number | 1px | 1px |
Description
The border width of the Grid. | |||
| $kendo-grid-border-style | String | solid | solid |
Description
The border style of the Grid. | |||
| $kendo-grid-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Grid. | |||
| $kendo-grid-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Grid. | |||
| $kendo-grid-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Grid. | |||
| $kendo-grid-padding-x | String | $kendo-table-cell-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Grid. | |||
| $kendo-grid-padding-y | String | $kendo-table-cell-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Grid. | |||
| $kendo-grid-header-padding-x | String | $kendo-grid-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Grid header. | |||
| $kendo-grid-header-padding-y | String | $kendo-grid-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Grid header. | |||
| $kendo-grid-grouping-header-padding-x | String | $kendo-toolbar-md-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Grid grouping header. | |||
| $kendo-grid-grouping-header-padding-y | String | $kendo-toolbar-md-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Grid grouping header. | |||
| $kendo-grid-cell-padding-x | String | $kendo-grid-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Grid cell. | |||
| $kendo-grid-cell-padding-y | String | $kendo-grid-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Grid cell. | |||
| $kendo-grid-filter-cell-padding-x | String | $kendo-grid-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Grid filter cell. | |||
| $kendo-grid-filter-cell-padding-y | String | $kendo-grid-filter-cell-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Grid filter cell. | |||
| $kendo-grid-edit-cell-padding-x | String | $kendo-grid-cell-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Grid edit cell. | |||
| $kendo-grid-edit-cell-padding-y | Calculation | calc( #{k-spacing(2.5)} / 2 ) | calc(var(--kendo-spacing-2\.5, 0.625rem) / 2) |
Description
The vertical padding of the Grid filter cell. | |||
| $kendo-grid-group-drop-hint-size | Number | 6px | 6px |
Description
The size of the Grid group drop clue. | |||
| $kendo-grid-group-drop-hint-line-size | Number | 1px | 1px |
Description
The line size of the Grid group drop clue. | |||
| $kendo-grid-group-drop-hint-dot-size | Number | $kendo-grid-group-drop-hint-size | 6px |
Description
The dot size of the Grid group drop clue. | |||
| $kendo-grid-group-drop-hint-height | Calculation | calc( #{$kendo-chip-calc-size} + #{$kendo-grid-group-drop-hint-size} ) | calc(calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2) + 6px) |
Description
The height of the Grid group drop clue. | |||
| $kendo-grid-group-drop-hint-top | Number | 2px | 2px |
Description
The top offset of the Grid group drop clue. | |||
| $kendo-grid-bg | String | $kendo-table-bg | var(--kendo-component-bg, initial) |
Description
The background color of the Grid. | |||
| $kendo-grid-text | String | $kendo-table-text | var(--kendo-component-text, initial) |
Description
The text color of the Grid. | |||
| $kendo-grid-border | String | $kendo-table-border | var(--kendo-component-border, initial) |
Description
The border color of the Grid. | |||
| $kendo-grid-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c) |
Description
The focus shadow of the Grid. | |||
| $kendo-grid-alt-bg | String | $kendo-table-alt-row-bg | initial |
Description
The background color of alternating rows in Grid. | |||
| $kendo-grid-alt-text | String | $kendo-table-alt-row-text | var(--kendo-component-text, initial) |
Description
The text color of alternating rows in Grid. | |||
| $kendo-grid-alt-border | String | $kendo-table-alt-row-border | var(--kendo-component-border, initial) |
Description
The border color of alternating rows in Grid. | |||
| $kendo-grid-hover-bg | String | $kendo-table-hover-bg | var(--kendo-hover-bg, inherit) |
Description
The background color of hover rows in Grid. | |||
| $kendo-grid-hover-text | String | $kendo-table-hover-text | var(--kendo-hover-text, inherit) |
Description
The text color of hover rows in Grid. | |||
| $kendo-grid-hover-border | String | $kendo-table-hover-border | var(--kendo-component-border, initial) |
Description
The border color of hover rows in Grid. | |||
| $kendo-grid-selected-bg | String | $kendo-table-selected-bg | color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent) |
Description
The background color of selected rows in Grid. | |||
| $kendo-grid-selected-text | String | $kendo-table-selected-text | var(--kendo-component-text, initial) |
Description
The text color of selected rows in Grid. | |||
| $kendo-grid-selected-border | String | $kendo-table-selected-border | var(--kendo-component-border, initial) |
Description
The border color of selected rows in Grid. | |||
| $kendo-grid-selected-hover-bg | String | $kendo-table-selected-hover-bg | color-mix(in srgb, var(--kendo-color-primary, #0078d4) 26%, transparent) |
Description
The background color of hovered selected rows in Grid. | |||
| $kendo-grid-selected-hover-text | String | $kendo-table-selected-hover-text | var(--kendo-component-text, initial) |
Description
The text color of hovered selected rows in Grid. | |||
| $kendo-grid-selected-hover-border | String | $kendo-table-selected-hover-border | var(--kendo-component-border, initial) |
Description
The border color of hovered selected rows in Grid. | |||
| $kendo-grid-header-border-width-y | Number | $kendo-grid-border-width | 1px |
Description
The vertical border width of the Grid header. | |||
| $kendo-grid-header-border-width-x | Number | 0 | 0 |
Description
The horizontal border width of the Grid header. | |||
| $kendo-grid-header-font-size | String | inherit | inherit |
Description
The font size of the Grid header. | |||
| $kendo-grid-header-font-weight | String | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) |
Description
The font weight of the Grid header. | |||
| $kendo-grid-header-menu-spacing | String | var( --kendo-icon-spacing, .5rem ) | var(--kendo-icon-spacing, 0.5rem) |
Description
The menu spacing of the Grid header. | |||
| $kendo-grid-header-first-border-width | Number | $kendo-grid-border-width | 1px |
Description
The border width of the first cell in the Grid header. | |||
| $kendo-grid-header-bg | String | $kendo-table-header-bg | var(--kendo-component-bg, initial) |
Description
The background color of Grid header. | |||
| $kendo-grid-header-text | String | $kendo-table-header-text | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of Grid header. | |||
| $kendo-grid-header-border | String | $kendo-table-header-border | var(--kendo-component-border, initial) |
Description
The border color of Grid header. | |||
| $kendo-grid-header-icon-text | String | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | var(--kendo-color-subtle, #605e5c) |
Description
The background color of Grid header icons. | |||
| $kendo-grid-footer-bg | String | $kendo-table-footer-bg | var(--kendo-component-bg, initial) |
| $kendo-grid-footer-text | String | $kendo-table-footer-text | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of Grid footer. | |||
| $kendo-grid-footer-border | String | $kendo-table-footer-border | var(--kendo-component-border, initial) |
Description
The border color of Grid footer. | |||
| $kendo-grid-selection-aggregates-bg | String | $kendo-toolbar-bg | var(--kendo-color-surface, #faf9f8) |
Description
The background color of the Grid selection aggregates container. | |||
| $kendo-grid-selection-aggregates-text | String | $kendo-grid-text | var(--kendo-component-text, initial) |
Description
The text color of the Grid selection aggregates container. | |||
| $kendo-grid-selection-aggregates-border | String | $kendo-grid-border | var(--kendo-component-border, initial) |
Description
The border color of the Grid selection aggregates container. | |||
| $kendo-grid-selection-aggregates-border-width | Number | $kendo-grid-border-width | 1px |
Description
The border width of the Grid selection aggregates container. | |||
| $kendo-grid-selection-aggregates-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing between the Grid selection aggregates items. | |||
| $kendo-grid-selection-aggregates-line-height | String | $kendo-grid-line-height | var(--kendo-line-height, normal) |
Description
Line height of the Grid selection aggregates container. | |||
| $kendo-grid-selection-aggregates-font-weight | Number | $kendo-font-weight-bold | 700 |
Description
The font weight of the Grid selection aggregates container. | |||
| $kendo-grid-grouping-header-bg | String | $kendo-toolbar-bg | var(--kendo-color-surface, #faf9f8) |
Description
The background color of the Grid grouping header. | |||
| $kendo-grid-grouping-header-text | String | $kendo-toolbar-text | var(--kendo-component-text, inherit) |
Description
The text color of the Grid grouping header. | |||
| $kendo-grid-grouping-header-border | String | $kendo-toolbar-border | var(--kendo-component-border, initial) |
Description
The border color of the Grid grouping header. | |||
| $kendo-grid-grouping-row-border-width-y | Number | $kendo-grid-border-width | 1px |
Description
The vertical border width of the Grid grouping row. | |||
| $kendo-grid-grouping-row-bg | String | $kendo-table-group-row-bg | var(--kendo-component-bg, initial) |
Description
The background color of the Grid grouping row. | |||
| $kendo-grid-grouping-row-text | String | $kendo-table-group-row-text | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the Grid grouping row. | |||
| $kendo-grid-grouping-row-border | String | $kendo-table-group-row-border | var(--kendo-component-border, initial) |
Description
The border color of the Grid grouping row. | |||
| $kendo-grid-filter-cell-padding-x | String | $kendo-grid-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Grid filter cell. | |||
| $kendo-grid-filter-cell-padding-y | String | $kendo-grid-filter-cell-padding-x | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Grid filter cell. | |||
| $kendo-grid-toolbar-padding-x | String | $kendo-toolbar-md-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Grid Toolbar. | |||
| $kendo-grid-toolbar-padding-y | String | $kendo-toolbar-md-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Grid Toolbar. | |||
| $kendo-grid-toolbar-spacing | String | $kendo-toolbar-md-spacing | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the Grid Toolbar. | |||
| $kendo-grid-toolbar-border-width | Number | $kendo-grid-border-width | 1px |
Description
The border width of the Grid Toolbar. | |||
| $kendo-grid-cell-border-width-y | Number | $kendo-grid-border-width | 1px |
Description
The vertical border width of the Grid cell. | |||
| $kendo-grid-cell-border-width-x | Number | 0px | 0px |
Description
The horizontal border width of the Grid cell. | |||
| $kendo-grid-sort-index-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the Grid sort index. | |||
| $kendo-grid-sort-index-height | String | var( --kendo-icon-size, 1rem ) | var(--kendo-icon-size, 1rem) |
Description
The default height of the Grid sort index. | |||
| $kendo-grid-sort-index-spacing-y | Calculation | calc( var( --kendo-icon-spacing, .5rem ) / 4 ) | calc(var(--kendo-icon-spacing, 0.5rem) / 4) |
Description
The horizontal offset of the Grid sort index. | |||
| $kendo-grid-sort-index-spacing-x | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical offset of the Grid sort index. | |||
| $kendo-grid-sort-icon-spacing | String | var( --kendo-icon-lg-spacing, .5rem ) | var(--kendo-icon-lg-spacing, 0.5rem) |
Description
The spacing of the Grid sort icon. | |||
| $kendo-grid-sort-indicator-text | String | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | var(--kendo-color-subtle, #605e5c) |
Description
The text color of the Grid sort indicator. | |||
| $kendo-grid-sort-indicator-order-text | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The text color of the Grid sort order indicator. | |||
| $kendo-grid-sorted-bg | String | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | var(--kendo-color-surface, #faf9f8) |
Description
The background color of the sorted Grid cells. | |||
| $kendo-grid-command-cell-padding-y | Calculation | calc( #{$kendo-table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em} ) / 2 ) | calc(var(--kendo-spacing-3, 0.75rem) - (calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) - calc(1.4285714286 * 1em)) / 2) |
Description
The horizontal padding of the Grid command cells. | |||
| $kendo-grid-command-cell-button-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Grid command cells. | |||
| $kendo-grid-group-indicator-padding-x | String | $kendo-button-md-padding-x | var(--kendo-spacing-5, 1.25rem) |
Description
The horizontal padding of the Grid group indicator. | |||
| $kendo-grid-group-indicator-padding-y | String | $kendo-button-md-padding-y | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the Grid group indicator. | |||
| $kendo-grid-group-indicator-border-width | Number | $kendo-button-border-width | 1px |
Description
The border width of the Grid group indicator. | |||
| $kendo-grid-group-indicator-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) |
Description
The border radius of the Grid group indicator. | |||
| $kendo-grid-group-indicator-gap | String | $kendo-table-cell-padding-y | var(--kendo-spacing-3, 0.75rem) |
Description
Spacing of the grid group indicator. | |||
| $kendo-grid-group-indicator-text | String | var( --kendo-component-text, initial ) | var(--kendo-component-text, initial) |
Description
The text color of the Grid group indicator. | |||
| $kendo-grid-group-indicator-bg | String | var( --kendo-component-bg, initial ) | var(--kendo-component-bg, initial) |
Description
The background color of the Grid group indicator. | |||
| $kendo-grid-group-indicator-border | String | if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) | var(--kendo-color-border, #8a8886) |
Description
The border color of the Grid group indicator. | |||
| $kendo-grid-group-indicator-icon-text | String | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | var(--kendo-color-subtle, #605e5c) |
Description
The text color of the Grid group indicator icon. | |||
| $kendo-grid-group-footer-border-width-y | Number | 0px | 0px |
Description
The horizontal border width of the Grid group footer. | |||
| $kendo-grid-group-footer-border-width-x | Number | 0px | 0px |
Description
The vertical border width of the Grid group footer. | |||
| $kendo-grid-group-drop-hint-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The text color of the Grid group drop clue. | |||
| $kendo-grid-sticky-cell-border-width | Number | $kendo-grid-border-width | 1px |
Description
The border width of the Grid sticky cell. | |||
| $kendo-grid-sticky-bg | String | var( --kendo-component-bg, initial ) | var(--kendo-component-bg, initial) |
Description
The background color of the Grid sticky cell. | |||
| $kendo-grid-sticky-text | String | $kendo-grid-text | var(--kendo-component-text, initial) |
Description
The text color of the Grid sticky cell. | |||
| $kendo-grid-sticky-border | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 )) | color-mix(in srgb, var(--kendo-color-border, #8a8886) 80%, transparent) |
Description
The border color of the Grid sticky cell. | |||
| $kendo-grid-sticky-alt-bg | String | $kendo-grid-sticky-bg | var(--kendo-component-bg, initial) |
Description
The alt background color of the Grid sticky cell. | |||
| $kendo-grid-sticky-hover-bg | String | $kendo-grid-hover-bg | var(--kendo-hover-bg, inherit) |
Description
The background color of the Grid sticky cell. | |||
| $kendo-grid-sticky-header-bg | String | $kendo-grid-header-bg | var(--kendo-component-bg, initial) |
Description
The background color of the Grid sticky header. | |||
| $kendo-grid-sticky-header-text | String | $kendo-grid-header-text | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the Grid sticky header. | |||
| $kendo-grid-sticky-header-border | String | $kendo-grid-sticky-border | color-mix(in srgb, var(--kendo-color-border, #8a8886) 80%, transparent) |
Description
The border color of the Grid sticky header. | |||
| $kendo-grid-sticky-footer-bg | String | $kendo-grid-header-bg | var(--kendo-component-bg, initial) |
Description
The background color of the Grid sticky footer. | |||
| $kendo-grid-sticky-footer-hover-bg | String | $kendo-grid-hover-bg | var(--kendo-hover-bg, inherit) |
Description
The background color of the Grid sticky footer. | |||
| $kendo-grid-sticky-selected-bg | String | $kendo-grid-selected-bg | color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent) |
Description
The background color of the selected Grid sticky cells. | |||
| $kendo-grid-sticky-selected-alt-bg | String | $kendo-grid-sticky-selected-bg | color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent) |
Description
The background color of the selected alt Grid sticky cells. | |||
| $kendo-grid-sticky-selected-hover-bg | String | if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg) | color-mix(in srgb, var(--kendo-color-primary, #0078d4) 13%, transparent) |
Description
The background color of the hovered selected Grid sticky cells. | |||
| $kendo-filter-menu-container-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the Grid filter menu container. | |||
| $kendo-filter-menu-container-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the Grid filter menu container. | |||
| $kendo-grid-column-menu-width | Number | 230px | 230px |
Description
The default width of the Grid column menu. | |||
| $kendo-grid-column-menu-max-width | Number | 320px | 320px |
Description
The max width of the Grid column menu. | |||
| $kendo-grid-column-menu-spacing | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the Grid column menu. | |||
| $kendo-grid-column-menu-shadow | String | var( --kendo-box-shadow-depth-4, none ) | var(--kendo-box-shadow-depth-4, none) |
Description
The focus shadow of the Grid column menu. | |||
| $kendo-grid-column-menu-bg | String | var( --kendo-component-bg, inherit ) | var(--kendo-component-bg, inherit) |
Description
The background color of the Grid column menu. | |||
| $kendo-grid-column-menu-text | String | var( --kendo-component-text, inherit ) | var(--kendo-component-text, inherit) |
Description
The text color of the Grid column menu. | |||
| $kendo-grid-column-menu-border | String | var( --kendo-component-border, inherit ) | var(--kendo-component-border, inherit) |
Description
The border color of the Grid column menu. | |||
| $kendo-grid-column-menu-multicheck-font-size | String | $kendo-list-md-font-size | var(--kendo-font-size, inherit) |
Description
The font size of the Grid column menu checkbox container. | |||
| $kendo-grid-column-menu-multicheck-line-height | String | $kendo-list-md-line-height | var(--kendo-line-height, normal) |
Description
The line height of the Grid column menu checkbox container. | |||
| $kendo-grid-column-menu-items-wrap-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Grid column menu items wrap. | |||
| $kendo-grid-column-menu-items-wrap-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Grid column menu items wrap. | |||
| $kendo-grid-column-menu-item-padding-y | String | $kendo-list-md-item-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-padding-x | String | $kendo-list-md-item-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-gap | String | $kendo-list-md-item-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The spacing of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-icon-spacing | String | var( --kendo-icon-spacing, .5rem ) | var(--kendo-icon-spacing, 0.5rem) |
Description
The icon spacing of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-bg | String | $kendo-list-item-bg | var(--kendo-color-app-surface, #ffffff) |
Description
The background color of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-text | String | $kendo-list-item-text | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-hover-bg | String | $kendo-list-item-hover-bg | var(--kendo-color-base-hover, #f3f2f1) |
Description
The background color of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-hover-text | String | $kendo-list-item-hover-text | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the hovered Grid column menu item. | |||
| $kendo-grid-column-menu-item-selected-bg | String | $kendo-list-item-selected-bg | var(--kendo-color-base-active, #edebe9) |
Description
The background color of the selected Grid column menu item. | |||
| $kendo-grid-column-menu-item-selected-text | String | $kendo-list-item-selected-text | var(--kendo-color-on-app-surface, #323130) |
Description
The text color of the selected Grid column menu item. | |||
| $kendo-grid-column-menu-item-focus-shadow | List | $kendo-list-item-focus-shadow | inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c) |
Description
The focus shadow of the Grid column menu item. | |||
| $kendo-grid-column-menu-item-icon-text | String | $kendo-list-item-icon-text | var(--kendo-color-primary, #0078d4) |
Description
The text color of the Grid column menu item icon. | |||
| $kendo-grid-column-menu-group-header-padding-y | String | $kendo-grid-column-menu-item-padding-y | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-padding-x | String | $kendo-grid-column-menu-item-padding-x | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-border-width | Number | 1px | 1px |
Description
The border width of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-border-style | String | solid | solid |
Description
The border style of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-font-weight | String | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) |
Description
The font weight of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The mine height of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-text-transform | String | uppercase | uppercase |
Description
The text transform of the Grid column menu group header. | |||
| $kendo-grid-column-menu-group-header-bg | String | var( --kendo-component-bg, inherit ) | var(--kendo-component-bg, inherit) |
Description
The background color of the Grid column menu group. | |||
| $kendo-grid-column-menu-group-header-text | String | var( --kendo-component-text, inherit ) | var(--kendo-component-text, inherit) |
Description
The text color of the Grid column menu group. | |||
| $kendo-grid-column-menu-group-header-border | String | var( --kendo-component-border, inherit) | var(--kendo-component-border, inherit) |
Description
The border color of the Grid column menu group. | |||
| $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the tabstrip content in the Grid tabbed column menu. | |||
| $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The vertical padding of the tabstrip content in the Grid tabbed column menu. | |||
| $kendo-grid-column-menu-tabbed-bg | String | var( --kendo-base-bg, inherit ) | var(--kendo-base-bg, inherit) |
Description
The background color of the Grid tabbed column menu. | |||
| $kendo-grid-drag-cell-width | Calculation | calc( var( --kendo-icon-size, 1rem ) * 2.25 ) | calc(var(--kendo-icon-size, 1rem) * 2.25) |
Description
The default width of the Grid drag cell. | |||
| $kendo-grid-hierarchy-col-width | Calculation | calc( var( --kendo-icon-size, 1rem ) * 2 ) | calc(var(--kendo-icon-size, 1rem) * 2) |
Description
The default width of the Grid hierarchy cell. | |||
| $kendo-grid-filterable-icon-spacing | Calculation | calc( #{$kendo-button-calc-size} + #{$kendo-grid-header-menu-spacing} ) | calc(calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1\.5, 0.375rem) * 2 + 1px * 2) + var(--kendo-icon-spacing, 0.5rem)) |
Description
The spacing of the Grid filterable icon. | |||
| $kendo-grid-row-resizer-hover-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent) |
Description
The background color of the Grid row resize indicator. | |||
| $kendo-grid-row-resizer-active-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The background color of the active Grid row resize indicator. | |||
| $kendo-grid-row-resizer-height | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The height of the Grid row resize indicator. | |||
