Sass Variables
The Telerik and Kendo UI Grid is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar Sass variables, as well as the Sass variables provided by the Button, Pager, and Textbox components.
Variable | Default Value | Computed Value | Value |
---|---|---|---|
kendo-grid-padding-x | $kendo-table-md-cell-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-table-md-cell-padding-x Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The horizontal padding of the Grid. | |||
kendo-grid-padding-y | $kendo-table-md-cell-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-table-md-cell-padding-y Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The vertical padding of the Grid. | |||
kendo-grid-header-padding-x | $kendo-grid-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-grid-padding-x Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The horizontal padding of the Grid header. | |||
kendo-grid-header-padding-y | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-y Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The vertical padding of the Grid header. | |||
kendo-grid-grouping-header-padding-x | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-y Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The horizontal padding of the Grid grouping header. | |||
kendo-grid-grouping-header-padding-y | $kendo-grid-grouping-header-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-grouping-header-padding-x Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The vertical padding of the Grid grouping header. | |||
kendo-grid-cell-padding-x | $kendo-grid-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-grid-padding-x Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The horizontal padding of the Grid cell. | |||
kendo-grid-cell-padding-y | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-y Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The vertical padding of the Grid cell. | |||
kendo-grid-filter-cell-padding-x | $kendo-grid-padding-y | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-padding-y Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The horizontal padding of the Grid filter cell. | |||
kendo-grid-filter-cell-padding-y | $kendo-grid-filter-cell-padding-x | var(--kendo-spacing-2, 0.5rem) | Default: $kendo-grid-filter-cell-padding-x Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The vertical padding of the Grid filter cell. | |||
kendo-grid-edit-cell-padding-x | $kendo-grid-cell-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-grid-cell-padding-x Computed: var(--kendo-spacing-3, 0.75rem) |
Description: The horizontal padding of the Grid edit cell. | |||
kendo-grid-edit-cell-padding-y | calc( #{k-spacing(1.5)} / 2 ) | calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) | Default: calc( #{k-spacing(1.5)} / 2 ) Computed: calc(var(--kendo-spacing-1\.5, 0.375rem) / 2) |
Description: The vertical padding of the Grid filter cell. | |||
kendo-grid-bg | $kendo-table-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-table-bg Computed: var(--kendo-color-surface-alt, #ffffff) |
Description: The background color of the Grid. | |||
kendo-grid-text | $kendo-table-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-table-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Grid. | |||
kendo-grid-border | $kendo-table-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-table-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the Grid. | |||
kendo-grid-header-bg | $kendo-table-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-table-header-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: The background color of Grid header. | |||
kendo-grid-header-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: The text color of Grid header. | |||
kendo-grid-header-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: The border color of Grid header. | |||
kendo-grid-header-gradient | $kendo-table-header-gradient | null | Default: $kendo-table-header-gradient Computed: null |
Description: The background gradient of Grid header. | |||
kendo-grid-footer-bg | $kendo-grid-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-grid-header-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: The background color of Grid footer. | |||
kendo-grid-footer-text | $kendo-grid-header-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-grid-header-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of Grid footer. | |||
kendo-grid-footer-border | $kendo-grid-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-grid-header-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of Grid footer. | |||
kendo-grid-alt-bg | $kendo-table-alt-row-bg | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) | Default: $kendo-table-alt-row-bg Computed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 5%, transparent) |
Description: The background color of the Grid alternating rows. | |||
kendo-grid-alt-text | $kendo-table-alt-row-text | null | Default: $kendo-table-alt-row-text Computed: null |
Description: The text color of the Grid alternating rows. | |||
kendo-grid-alt-border | $kendo-table-alt-row-border | null | Default: $kendo-table-alt-row-border Computed: null |
Description: The border color of the Grid alternating rows. | |||
kendo-grid-hover-bg | $kendo-table-hover-bg | color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) | Default: $kendo-table-hover-bg Computed: color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 11%, transparent) |
Description: The background color of hovered Grid rows. | |||
kendo-grid-hover-text | $kendo-table-hover-text | null | Default: $kendo-table-hover-text Computed: null |
Description: The text color of hovered Grid rows. | |||
kendo-grid-hover-border | $kendo-table-hover-border | null | Default: $kendo-table-hover-border Computed: null |
Description: The border color of hovered Grid rows. | |||
kendo-grid-selected-bg | $kendo-table-selected-bg | color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) | Default: $kendo-table-selected-bg Computed: color-mix(in srgb, var(--kendo-color-primary, #ff6358) 25%, transparent) |
Description: The background color of selected Grid rows. | |||
kendo-grid-selected-text | $kendo-table-selected-text | null | Default: $kendo-table-selected-text Computed: null |
Description: The text color of selected Grid rows. | |||
kendo-grid-selected-border | $kendo-table-selected-border | null | Default: $kendo-table-selected-border Computed: null |
Description: The border color of selected Grid rows. | |||
kendo-grid-selection-aggregates-bg | $kendo-grid-header-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-grid-header-bg Computed: var(--kendo-color-surface, #fafafa) |
Description: The background color of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-text | $kendo-grid-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-grid-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-border | $kendo-grid-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-grid-border Computed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description: The border color of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-border-width | $kendo-grid-border-width | 1px | Default: $kendo-grid-border-width Computed: 1px |
Description: The border width of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-spacing | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The spacing between the selection aggregates items. | |||
kendo-grid-selection-aggregates-line-height | $kendo-grid-line-height | var(--kendo-line-height, normal) | Default: $kendo-grid-line-height Computed: var(--kendo-line-height, normal) |
Description: The line height of the Grid selection aggregates container. | |||
kendo-grid-selection-aggregates-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 Grid selection aggregates container. | |||
kendo-grid-row-resizer-hover-bg | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) | color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent) | Default: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) Computed: color-mix(in srgb, var(--kendo-color-on-base, #3d3d3d) 20%, transparent) |
Description: The background color of the Grid row resize indicator. | |||
kendo-grid-row-resizer-active-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primary Computed: var(--kendo-color-primary, #ff6358) |
Description: The background color of the active Grid row resize indicator. | |||
kendo-grid-row-resizer-height | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5) Computed: var(--kendo-spacing-0\.5, 0.125rem) |
Description: The height of the Grid row resize indicator. |