Customizing Grid
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $grid-bg | $component-bg | map-get($theme, component-bg) | |
|
Description
Background color of the grid component
|
|||
| $grid-text | $component-text | map-get($theme, component-text) | |
|
Description
Text color of the grid component
|
|||
| $grid-border | $component-border | map-get($theme, component-border) | |
|
Description
Border color of the grid component
|
|||
| $grid-header-bg | transparent | transparent | |
|
Description
Background color of grid header
|
|||
| $grid-header-text | if($theme-type == dark, $light-secondary-text, $dark-secondary-text) | if($theme-type == dark, $light-secondary-text, $dark-secondary-text) | |
|
Description
Background color of grid header
|
|||
| $grid-header-border | $grid-border | map-get($theme, component-border) | |
|
Description
Border color of grid header
|
|||
| $grid-header-gradient | null | null | |
|
Description
Background gradient of grid header
|
|||
| $grid-alt-bg | transparent | transparent | |
|
Description
Background color of alternating rows in grid
|
|||
| $grid-alt-text | null | null | |
|
Description
Text color of alternating rows in grid
|
|||
| $grid-alt-border | null | null | |
|
Description
Text color of alternating rows in grid
|
|||
| $grid-hovered-bg | rgba( contrast-wcag( $grid-bg ), .07 ) | rgba( contrast-wcag( $grid-bg ), .07 ) | |
|
Description
Background color of hovered rows in grid
|
|||
| $grid-hovered-text | $grid-text | map-get($theme, component-text) | |
|
Description
Text color of hovered rows in grid
|
|||
| $grid-hovered-border | $grid-border | map-get($theme, component-border) | |
|
Description
Border color of hovered rows in grid
|
|||
| $grid-selected-bg | rgba( contrast-wcag( $grid-bg ), .04 ) | rgba( contrast-wcag( $grid-bg ), .04 ) | |
|
Description
Background color of selected rows in grid
|
|||
| $grid-selected-text | #000000 | #000000 | |
|
Description
Text color of selected rows in grid
|
|||
| $grid-selected-border | $grid-border | map-get($theme, component-border) | |
|
Description
Border color of selected rows in grid
|
|||