CSS Variables

View as Markdown
Below you can find the complete list of CSS variables that can be used to style the component.

Accent color#

Brand-specific accent color. This probably needs override to match your app.
--infinite-accent-color

Success color#

--infinite-success-color

Error color#

--infinite-error-color

Color#

The text color inside the component
--infinite-color

Space 0#

--infinite-space-0

Space 1#

--infinite-space-1

Space 2#

--infinite-space-2

Space 3#

--infinite-space-3

Space 4#

--infinite-space-4

Space 5#

--infinite-space-5

Space 6#

--infinite-space-6

Space 7#

--infinite-space-7

Space 8#

--infinite-space-8

Space 9#

--infinite-space-9

Space 10#

--infinite-space-10

Font size 0#

--infinite-font-size-0

Font size 1#

--infinite-font-size-1

Font size 2#

--infinite-font-size-2

Font size 3#

--infinite-font-size-3

Font size 4#

--infinite-font-size-4

Font size 5#

--infinite-font-size-5

Font size 6#

--infinite-font-size-6

Font size 7#

--infinite-font-size-7

Font family#

--infinite-font-family

Min height#

--infinite-min-height

Border radius#

--infinite-border-radius

Focus outline#

--infinite-focus-outline

Background#

The background color for the whole component.
Overriden in the dark theme.
--infinite-background

Icon size#

--infinite-icon-size

Grouping toolbar color#

--infinite-grouping-toolbar-color

Grouping toolbar background#

--infinite-grouping-toolbar-background

Grouping toolbar reject background#

--infinite-grouping-toolbar-reject-background

Grouping toolbar active background#

--infinite-grouping-toolbar-active-background

Grouping toolbar active background alpha#

--infinite-grouping-toolbar-active-background-alpha

Grouping toolbar padding#

--infinite-grouping-toolbar-padding

Grouping toolbar border#

--infinite-grouping-toolbar-border

Grouping toolbar reject border#

--infinite-grouping-toolbar-reject-border

Grouping toolbar gap#

--infinite-grouping-toolbar-gap

Grouping toolbar item border#

--infinite-grouping-toolbar-item-border

Grouping toolbar item border radius#

--infinite-grouping-toolbar-item-border-radius

Grouping toolbar item active border#

--infinite-grouping-toolbar-item-active-border

Grouping toolbar item background#

--infinite-grouping-toolbar-item-background

Grouping toolbar item active background#

--infinite-grouping-toolbar-item-active-background

Grouping toolbar item active background alpha#

--infinite-grouping-toolbar-item-active-background-alpha

Load mask padding#

The padding used for the content inside the LoadMask.
--infinite-load-mask-padding

Load mask color#

--infinite-load-mask-color

Load mask text background#

--infinite-load-mask-text-background

Load mask overlay background#

--infinite-load-mask-overlay-background

Load mask overlay opacity#

--infinite-load-mask-overlay-opacity

Load mask border radius#

--infinite-load-mask-border-radius

Header background#

Background color for the header. Defaults to --infinie-header-cell-background.
Overriden in the dark theme.
--infinite-header-background

Header color#

The text color inside the header.
Overriden in the dark theme.
--infinite-header-color

Column header height#

The height of the column header.
--infinite-column-header-height

Header cell background#

Background for header cells.
Overriden in the dark theme.
--infinite-header-cell-background

Header cell hover background#

--infinite-header-cell-hover-background

Header cell border#

--infinite-header-cell-border

Header cell padding#

--infinite-header-cell-padding

Header cell padding x#

--infinite-header-cell-padding-x

Header cell padding y#

--infinite-header-cell-padding-y

Header cell icon size#

--infinite-header-cell-icon-size

Header cell menu icon line width#

--infinite-header-cell-menu-icon-line-width

Header cell sort icon margin#

--infinite-header-cell-sort-icon-margin

Header cell border right#

--infinite-header-cell-border-right

Resize handle active area width#

The width of the area you can hover over in order to grab the column resize handle. Defaults to 20px.
The purpose of this active area is to make it easier to grab the resize handle.
--infinite-resize-handle-active-area-width

Resize handle width#

The width of the colored column resize handle that is displayed on hover and on drag. Defaults to 2px
--infinite-resize-handle-width

Resize handle hover background#

The color of the column resize handle - the resize handle is the visible indicator that you see when hovering over the right-edge of a resizable column. Also visible on drag while doing a column resize.
--infinite-resize-handle-hover-background

Resize handle constrained hover background#

The color of the column resize handle when it has reached a min/max constraint.
--infinite-resize-handle-constrained-hover-background

Filter operator padding x#

--infinite-filter-operator-padding-x

Filter editor padding x#

--infinite-filter-editor-padding-x

Filter editor margin x#

--infinite-filter-editor-margin-x

Filter operator padding y#

--infinite-filter-operator-padding-y

Filter editor padding y#

--infinite-filter-editor-padding-y

Filter editor margin y#

--infinite-filter-editor-margin-y

Filter editor background#

--infinite-filter-editor-background

Filter editor border#

--infinite-filter-editor-border

Filter editor focus border color#

--infinite-filter-editor-focus-border-color

Filter editor border radius#

--infinite-filter-editor-border-radius

Filter editor color#

--infinite-filter-editor-color

Active cell indicator inset#

--infinite-active-cell-indicator-inset

Flashing duration#

--infinite-flashing-duration

Flashing animation name#

--infinite-flashing-animation-name

Flashing overlay z index#

--infinite-flashing-overlay-z-index

Flashing background#

--infinite-flashing-background

Flashing up background#

--infinite-flashing-up-background

Flashing down background#

--infinite-flashing-down-background

Cell padding#

--infinite-cell-padding

Cell border width#

--infinite-cell-border-width

Cell border color#

--infinite-cell-border-color

Cell border#

Specifies the border for cells.
Overriden in the dark theme - eg: 1px solid #2a323d
--infinite-cell-border

Cell border left#

--infinite-cell-border-left

Cell border right#

--infinite-cell-border-right

Cell border top#

--infinite-cell-border-top

Cell border invisible#

--infinite-cell-border-invisible

Cell border radius#

--infinite-cell-border-radius

Column reorder effect duration#

--infinite-column-reorder-effect-duration

Pinned cell border#

--infinite-pinned-cell-border

Horizontal layout column reorder disabled page opacity#

--infinite-horizontal-layout-column-reorder-disabled-page-opacity

Cell color#

Text color inside rows. Defaults to currentColor
Overriden in dark theme.
--infinite-cell-color

Selected cell background#

The background for selected cells, when cell selection is enabled.
If not specified, it will default to var(--infinite-active-cell-background).
--infinite-selected-cell-background

Selected cell background default#

--infinite-selected-cell-background-default

Selected cell background alpha#

The opacity of the background color for the selected cell.
If not specified, it will default to the value for var(--infinite-active-cell-background-alpha)
--infinite-selected-cell-background-alpha

Selected cell background alpha table unfocused#

The opacity of the background color for the selected cell, when the table is unfocused. If not specified, it will default to var(--infinite-active-cell-background-alpha--table-unfocused).
--infinite-selected-cell-background-alpha--table-unfocused

Selected cell border color#

The color for border of the selected cell (when cell selection is enabled). Defaults to var(--infinite-active-cell-border-color).
--infinite-selected-cell-border-color

Selected cell border width#

The width of the border for the selected cell. Defaults to var(--infinite-active-cell-border-width).
--infinite-selected-cell-border-width

Selected cell border style#

The style of the border for the selected cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'. Defaults to var(--infinite-active-cell-border-style).
--infinite-selected-cell-border-style

Selected cell border#

Specifies the border for the selected cell. Defaults to var(--infinite-selected-cell-border-width) var(--infinite-selected-cell-border-style) var(--infinite-selected-cell-border-color).
--infinite-selected-cell-border

Active cell background alpha#

The opacity of the background color for the active cell (when cell keyboard navigation is enabled). Eg: 0.25
If activeBackground is not explicitly defined (this is the default), the background color of the active cell is the same as the border color (activeBorderColor), but with this modified opacity.
If activeBorderColor is also not defined, the accent color will be used.
This is applied when the component has focus.
--infinite-active-cell-background-alpha

Active cell background alpha table unfocused#

Same as the above, but applied when the component does not have focus.
--infinite-active-cell-background-alpha--table-unfocused

Active cell background#

The background color of the active cell.
If not specified, it will default to activeBorderColor with the opacity of activeBackgroundAlpha. If activeBorderColor is not specified, it will default to the accent color, with the same opacity as mentioned.
However, specify this to explicitly override the default.
--infinite-active-cell-background

Active cell background default#

--infinite-active-cell-background-default

Active cell border color#

The color for border of the active cell (when cell keyboard navigation is enabled).
--infinite-active-cell-border-color

Active cell border width#

The width of the border for the active cell.
--infinite-active-cell-border-width

Active cell border style#

The style of the border for the active cell (eg: 'solid', 'dashed', 'dotted') - defaults to 'dashed'.
--infinite-active-cell-border-style

Active cell border#

Specifies the border for the active cell. Defaults to var(--infinite-active-cell-border-width) var(--infinite-active-cell-border-style) var(--infinite-active-cell-border-color).
--infinite-active-cell-border

Selection checkbox margin inline#

--infinite-selection-checkbox-margin-inline

Expand collapse icon color#

--infinite-expand-collapse-icon-color

Menu background#

--infinite-menu-background

Menu color#

--infinite-menu-color

Menu separator color#

--infinite-menu-separator-color

Menu padding#

--infinite-menu-padding

Menu cell padding vertical#

--infinite-menu-cell-padding-vertical

Menu cell padding horizontal#

--infinite-menu-cell-padding-horizontal

Menu cell margin vertical#

--infinite-menu-cell-margin-vertical

Menu item disabled background#

--infinite-menu-item-disabled-background

Menu item active background#

--infinite-menu-item-active-background

Menu item active opacity#

--infinite-menu-item-active-opacity

Menu item pressed opacity#

--infinite-menu-item-pressed-opacity

Menu item pressed background#

--infinite-menu-item-pressed-background

Menu item disabled opacity#

--infinite-menu-item-disabled-opacity

Menu border radius#

--infinite-menu-border-radius

Menu shadow color#

--infinite-menu-shadow-color

Rowdetail background#

--infinite-rowdetail-background

Rowdetail padding#

--infinite-rowdetail-padding

Rowdetail grid height#

--infinite-rowdetail-grid-height

Row background#

Background color for rows. Defaults to --infinite-background.
Overriden in dark theme.
--infinite-row-background

Row odd background#

Background color for odd rows. Even rows will use --infinite-row-background.
Overriden in dark theme.
--infinite-row-odd-background

Row disabled background#

--infinite-row-disabled-background

Row odd disabled background#

Background color for disabled rows. For setting the background of disabled even rows, use --infinite-row-disabled-background.
--infinite-row-odd-disabled-background

Row selected background#

--infinite-row-selected-background

Row disabled opacity#

Opacity for disabled rows. Defaults to 0.5
--infinite-row-disabled-opacity

Active row background#

The background color of the active row. Defaults to the value of var(--infinite-active-cell-background).
However, specify this to explicitly override the default.
--infinite-active-row-background

Active row border color#

The border color for the active row. Defaults to the value of var(--infinite-active-cell-border-color).
--infinite-active-row-border-color

Active row border width#

The width of the border for the active row. Defaults to the value of var(--infinite-active-cell-border-width).
--infinite-active-row-border-width

Active row border style#

The style of the border for the active row (eg: 'solid', 'dashed', 'dotted') - defaults to the value of var(--infinite-active-cell-border-style), which is dashed by default.
--infinite-active-row-border-style

Active row border#

Specifies the border for the active row. Defaults to var(--infinite-active-row-border-width) var(--infinite-active-row-border-style) var(--infinite-active-row-border-color).
--infinite-active-row-border

Active row background alpha#

The opacity of the background color for the active row (when row keyboard navigation is enabled). When you explicitly specify --infinite-active-row-background, this variable will not be used. Instead, this variable is used when the active row background uses the color of the active cell (border).
This is applied when the component has focus.
Defaults to the value of var(--infinite-active-cell-background-alpha).
--infinite-active-row-background-alpha

Active row background alpha table unfocused#

Same as the above, but applied when the component does not have focus.
When you explicitly specify --infinite-active-row-background, this variable will not be used. Instead, this variable is used when the active row background uses the color of the active cell (border).
Defaults to the value of var(--infinite-active-cell-background-alpha--table-unfocused).
--infinite-active-row-background-alpha--table-unfocused

Row hover background#

Background color for rows, on hover.
Overriden in the dark theme.
--infinite-row-hover-background

Row selected hover background#

--infinite-row-selected-hover-background

Row selected disabled background#

--infinite-row-selected-disabled-background

Group row background#

--infinite-group-row-background

Group row column nesting#

--infinite-group-row-column-nesting

Row pointer events while scrolling#

--infinite-row-pointer-events-while-scrolling