Docs Version 1

CSS Variables

All CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-body-background transparent Styles the background of grid body
--zg-body-border 0 Styles the border of grid body
--zg-body-border-bottom var(--zg-body-border, 0) Styles the bottom border of grid body
--zg-body-border-left var(--zg-body-border, 0) Styles the left border of grid body
--zg-body-border-right var(--zg-body-border, 0) Styles the right border of grid body
--zg-body-border-top var(--zg-body-border, 0) Styles the top border of grid body. Note: If `--zg-row-border-top` set, it will override `--zg-body-border-top`.
--zg-body-card-background linear-gradient(45deg, #f9fafb 20%, #fff) Styles the background of grid body in 'card' layout-mode
--zg-body-card-border 0 Styles the border of grid body in 'card' layout-mode
--zg-body-card-border-bottom var(--zg-body-card-border, 0) Styles the bottom border of grid body in 'card' layout-mode
--zg-body-card-border-left var(--zg-body-card-border, 0) Styles the left border of grid body in 'card' layout-mode
--zg-body-card-border-right var(--zg-body-card-border, 0) Styles the right border of grid body in 'card' layout-mode
--zg-body-card-border-top var(--zg-body-card-border, 0) Styles the top border of grid body in 'card' layout-mode. Note: If `--zg-row-border-top` set in 'card' layout-mode it will override `--zg-body-border-top`.
--zg-body-card-display grid Sets display of grid body in 'card' layout-mode
--zg-body-color inherit Sets the font color of contents inside grid body
--zg-body-font-family inherit Sets the font family of contents inside grid body
--zg-body-font-size inherit Sets the font size of contents inside grid body
--zg-body-font-style inherit Sets the font style of contents inside grid body
--zg-body-font-weight inherit Sets the font weight of contents inside grid body
--zg-body-line-height inherit Sets the line-height of contents inside of grid body
--zg-button-background Browser's default value Styles the background of button
--zg-button-background_active var(--theme-background-color) Styles of background of button on active state
--zg-button-background_custom Browser's default value Styles the background of custom button
--zg-button-background_custom_active Browser's default value Styles the background of custom button on active state
--zg-button-background_custom_focus Browser's default value Styles the background of custom button on focus
--zg-button-background_custom_hover Browser's default value Styles the background of custom button on hover
--zg-button-background_focus Browser's default value Styles the background of button on focus
--zg-button-background_hover Browser's default value Styles the background of button on hover
--zg-button-border Browser's default value Styles the border of a button
--zg-button-border-bottom Browser's default value Styles the bottom border of a button
--zg-button-border-bottom_active Browser's default value Styles the bottom border of a button on active state
--zg-button-border-bottom_focus Browser's default value Styles the bottom border of a button on focus
--zg-button-border-bottom_hover Browser's default value Styles the bottom border of a button on hover
--zg-button-border-left Browser's default value Styles the left border of a button
--zg-button-border-left_active Browser's default value Styles the left border of a button on active state
--zg-button-border-left_focus Browser's default value Styles the left border of a button on focus
--zg-button-border-left_hover Browser's default value Styles the left border of a button on hover
--zg-button-border-right Browser's default value Styles the right border of a button
--zg-button-border-right_active Browser's default value Styles the right border of a button on active state
--zg-button-border-right_focus Browser's default value Styles the right border of a button on focus
--zg-button-border-right_hover Browser's default value Styles the right border of a button on hover
--zg-button-border-top Browser's default value Styles the top border of a button
--zg-button-border-top_active Browser's default value Styles the top border of a button on active state
--zg-button-border-top_focus Browser's default value Styles the top border of a button on focus
--zg-button-border-top_hover Browser's default value Styles the top border of a button on hover
--zg-button-border_active Browser's default value Styles the border of a button on active state
--zg-button-border_custom Browser's default value Styles the border of custom button
--zg-button-border_custom_active Browser's default value Styles the border of custom button on active state
--zg-button-border_custom_focus Browser's default value Styles the border of custom button on focus
--zg-button-border_custom_hover Browser's default value Styles the border of custom button on hover
--zg-button-border_focus Browser's default value Styles the border of a button on focus state
--zg-button-border_hover Browser's default value Styles the border of a button on hover state
--zg-button-box-shadow Browser's default value Styles the box-shadow of the button
--zg-button-box-shadow_active Browser's default value Styles the box-shadow of the button on activation
--zg-button-box-shadow_custom Browser's default value Applies a box shadow behind custom button
--zg-button-box-shadow_custom_active Browser's default value Applies a box shadow behind custom button on active state
--zg-button-box-shadow_custom_focus Browser's default value Applies a box shadow behind custom button on focus
--zg-button-box-shadow_custom_hover Browser's default value Applies a box shadow behing custom button on hover
--zg-button-box-shadow_focus Browser's default value Styles the box-shadow of the button on focus
--zg-button-box-shadow_hover Browser's default value Styles the box-shadow of the button on hover
--zg-button-color Browser's default value Sets the font color of button
--zg-button-color_active Browser's default value Styles the color of the button on active state
--zg-button-color_custom_active Browser's default value Sets the font color of custom button on active state
--zg-button-color_custom_focus Browser's default value Sets the font color of custom button on focus
--zg-button-color_custom_hover Browser's default value Sets the font color of custom button on hover
--zg-button-color_focus Browser's default value Styles the color of the button on focus
--zg-button-color_hover Browser's default value Styles the color of the button on hover
--zg-button-font-family inherit Sets the font family of button
--zg-button-font-size 90% Sets the font size of button
--zg-button-font-style inherit Sets the font style of button
--zg-button-font-weight inherit Sets the font weight of button
--zg-button-icon-background_custom_hover #fff Styles the background of icon in custom button on hover
--zg-button-icon-background_hover #fff Styles the background of the icon in a button on hover state
--zg-button-line-height inherit Sets the line height of button
--zg-button-margin 0 Sets the margin of button
--zg-button-opacity_disabled 0.2 Styles the opacity of disabled button or button on hover
--zg-button-padding 3px Sets the padding of button
--zg-button-transition_speed var(--theme-transition_speed) Sets the transition speed of button
--zg-caption-align-items center Sets the vertical alignment of items (title and toolbar) in caption
--zg-caption-background Browser's default value Styles the background of caption
--zg-caption-border 0 Styles the border of caption
--zg-caption-border-bottom var(--zg-caption-border, 0) Styles the bottom border of caption
--zg-caption-border-left var(--zg-caption-border, 0) Styles the left border of caption
--zg-caption-border-radius 0 Applies a border-radius to the caption
--zg-caption-border-right var(--zg-caption-border, 0) Styles the right border of caption
--zg-caption-border-top var(--zg-caption-border, 0) Styles the top border of caption
--zg-caption-box-shadow none Applies a box shadow behind caption
--zg-caption-button-background var(--zg-button-background) Styles the background of button in caption
--zg-caption-button-background_active var(--zg-caption-button-background, var(--zg-button-background)) Styles the background of button in caption when the button is in an `active` state
--zg-caption-button-background_focus var(--zg-caption-button-background, var(--zg-button-background)) Styles the background of button in caption when the button is in a `focus` state
--zg-caption-button-background_hover var(--zg-caption-button-background, var(--zg-button-background)) Styles the background of button in caption when the button is in a `hover` state
--zg-caption-color Browser's default value Sets the font color of caption
--zg-caption-flex-direction row Sets the flex direction of items (title and toolbar) in caption
--zg-caption-font-family Browser's default value Sets the font family of caption
--zg-caption-font-size 1.25rem Sets the font size of caption
--zg-caption-font-style Browser's default value Sets the font style of caption
--zg-caption-font-weight Browser's default value Sets the font weight of caption
--zg-caption-height Browser's default value Sets the height of caption
--zg-caption-margin 0 Sets the margin of caption
--zg-caption-opacity Browser's default value Sets the opacity of caption
--zg-caption-padding 0 var(--theme-padding_x) Sets the padding of caption
--zg-caption-title-align-self center Sets vertical alignment of items in caption title
--zg-caption-title-flex 0 1 auto Sets how items are flexed in caption title
--zg-caption-title-font-family inherit Sets the font-family of caption title
--zg-caption-title-font-size inherit Sets the font size of caption title
--zg-caption-title-font-style inherit Sets the font style of caption title
--zg-caption-title-font-weight inherit Sets the font weight of caption title
--zg-caption-title-margin 0 Sets the margin of caption title
--zg-caption-title-order Browser's default value Sets the order of caption title with respect to caption toolbar
--zg-caption-title-padding 0 Sets the padding of caption title
--zg-caption-title-text-align inherit Sets the text alignment of caption title
--zg-caption-title-transform none Sets the transform of caption title
--zg-caption-title-width 100% Sets the width of caption title
--zg-caption-toolbar-align-self Browser's default value Sets vertical alignment of items in caption toolbar
--zg-caption-toolbar-bottom Browser's default value Sets the position from bottom of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-justify-content flex-start Sets the horizontal alignment of contents in caption toolbar
--zg-caption-toolbar-left auto Sets the left of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-margin 0 Sets the margin of caption toolbar
--zg-caption-toolbar-position Browser's default value Sets the position of caption toolbar
--zg-caption-toolbar-right auto Sets the right of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-top auto Sets the top of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-transform none Sets the transform of caption toolbar
--zg-caption-toolbar-width auto Sets the width of caption toolbar
--zg-caption-transition Browser's default value Sets the transition of caption
--zg-cell-background var(--zg-cell-background) Styles the background of cells
--zg-cell-background_hover Browser's default value Styles the background of cells on hover
--zg-cell-background_hover_layout_row var(--zg-cell-background_hover) Styles the background of cells in 'row' layout-mode on hover
--zg-cell-background_layout_card Browser's default value Styles the background of cards in 'card' layout-mode
--zg-cell-background_layout_row var(--zg-cell-background) Styles the background of cells in 'row' layout-mode
--zg-cell-background_layout_row_sorted var(--zg-cell-background_sorted) Styles the background of cells in sorted column in 'row' layout-mode
--zg-cell-background_sorted Browser's default value Styles the background of cells in sorted column
--zg-cell-border 0 Styles the border of cells
--zg-cell-border-bottom var(--zg-cell-border, 0) Styles the bottom border of cells
--zg-cell-border-bottom_layout_card var(--zg-card-border, 0) Styles the bottom border of cards in 'card' layout-mode
--zg-cell-border-bottom_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-bottom, var(--zg-cell-border, 0))) Styles the bottom border of cells in 'row' layout-mode
--zg-cell-border-left var(--zg-cell-border, 0) Styles the left border of cells
--zg-cell-border-left_layout_card var(--zg-card-border, 0) Styles the left border of cards in 'card' layout-mode
--zg-cell-border-left_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-left, var(--zg-cell-border, 0))) Styles the left border of cells in 'row' layout-mode
--zg-cell-border-right var(--zg-cell-border, 0) Styles the right border of cells
--zg-cell-border-right_layout_card var(--zg-card-border, 0) Styles the right border of cards in 'card' layout-mode
--zg-cell-border-right_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-right, var(--zg-cell-border, 0))) Styles the right border of cells in 'row' layout-mode
--zg-cell-border-top var(--zg-cell-border, 0) Styles the top border of cells
--zg-cell-border-top_layout_card var(--zg-card-border, 0) Styles the top border of cards in 'card' layout-mode
--zg-cell-border-top_layout_row var(--zg-cell-border_layout_row, var(--zg-cell-border-top, var(--zg-cell-border, 0))) Styles the top border of cells in 'row' layout-mode
--zg-cell-border_layout_card 0 Styles the border of cards in 'card' layout-mode
--zg-cell-border_layout_row var(--zg-cell-border-bottom, var(--zg-cell-border, 0)) Styles the border of cells in 'row' layout-mode
--zg-cell-color inherit Styles font color of text in cells
--zg-cell-color_hover var(--zg-cell-color) Styles font color of cells on hover
--zg-cell-color_hover_layout_row var(--zg-cell-color_hover, var(--zg-cell-color)) Styles font color of cells in 'row' layout-mode on hover
--zg-cell-color_layout_card inherit Sets the font color of cards in 'card' layout-mode
--zg-cell-color_layout_row var(--zg-cell-color, inherit) Styles font color of text in cells in 'row' layout-mode
--zg-cell-color_layout_row_sorted var(--zg-cell-color_sorted, var(--zg-cell-color)) Sets the font color of cells in sorted column in 'row' layout-mode
--zg-cell-color_sorted var(--zg-cell-color) Sets the font color of cells in sorted column
--zg-cell-content-border-bottom_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the bottom border of card items in 'card' layout-mode
--zg-cell-content-border-left_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the left border of card items in 'card' layout-mode
--zg-cell-content-border-right_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the right border of card items in 'card' layout-mode
--zg-cell-content-border-top_layout_card var(--zg-cell-content-border_layout_card, 0) Styles the top border of card items in 'card' layout-mode
--zg-cell-content-border_layout_card 0 Styles the border of card items in 'card' layout-mode
--zg-cell-content-font-size_layout_card inherit Sets the font size of cards in 'card' layout-mode
--zg-cell-content-padding_layout_card 3px 0 Sets the padding of cards in 'card' layout-mode
--zg-cell-dirty-edit-border-color red; Sets the color of the dirty cell marker
--zg-cell-dirty-edit-border-width 7px Sets the border width of the dirty cell marker
--zg-cell-font-family inherit Sets the font family in cells
--zg-cell-font-family_layout_card inherit Sets the font family of cards in 'card' layout-mode
--zg-cell-font-family_layout_row var(--zg-cell-font-family, inherit) Sets the font family in cells in 'row' layout-mode
--zg-cell-font-size inherit Sets the font size in cells
--zg-cell-font-size_layout_card inherit Sets the font size of cards in 'card' layout-mode
--zg-cell-font-size_layout_row var(--zg-cell-font-size, inherit) Sets the font size in cells in 'row' layout-mode
--zg-cell-font-style inherit Sets the font style in cells
--zg-cell-font-style_layout_card inherit Sets the font family of cards in 'card' layout-mode
--zg-cell-font-style_layout_row var(--zg-cell-font-style, inherit) Sets the font style in cells in 'row' layout-mode
--zg-cell-font-weight inherit Sets the font weight in cells
--zg-cell-font-weight_layout_card inherit Sets the font weight of cards in 'card' layout-mode
--zg-cell-font-weight_layout_row var(--zg-cell-font-weight, inherit) Sets the font weight in cells in 'row' layout-mode
--zg-cell-height auto Sets height of cells
--zg-cell-height_layout_card auto Sets the height of cards in 'card' layout-mode
--zg-cell-height_layout_row var(--zg-cell-height, auto) Sets height of cells in 'row' layout-mode
--zg-cell-label-color_layout_card var(--theme-color-primary) Sets font color of label in cards in 'card' layout-mode
--zg-cell-label-display_layout_card flex Sets the display of label in cards in 'card' layout-mode
--zg-cell-label-font-size_layout_card 85% Sets font size of label in cards in 'card' layout-mode
--zg-cell-label-font-weight_layout_card Browser's default value Sets font weight of label in cards in 'card' layout-mode
--zg-cell-label-margin_layout_card 0 0 2px Sets the margin of label in cards in 'card' layout-mode
--zg-cell-label-overflow_layout_card Browser's default value Sets the overflow of label in cards in 'card' layout-mode
--zg-cell-label-transform_layout_card Browser's default value Sets transform of label in cards in 'card' layout-mode
--zg-cell-line-height inherit Sets line height of cells
--zg-cell-line-height_layout_card inherit Sets the line height of cards in 'card' layout-mode
--zg-cell-line-height_layout_row var(--zg-cell-line-height, inherit) Sets line height of cells in 'row' layout-mode
--zg-cell-padding var(--theme-padding_y) var(--theme-padding_x) Sets padding of cells
--zg-cell-padding_layout_card var(--theme-padding_y) var(--theme-padding_x) Sets the padding of cards in 'card' layout-mode
--zg-cell-padding_layout_row var(--zg-cell-padding, var(--theme-padding_y) var(--theme-padding_x)) Sets padding of cells in 'row' layout-mode
--zg-cell-transition Browser's default value Sets the transition of cells
--zg-cell-transition_layout_card Browser's default value Sets the transition of cards in 'card' layout-mode
--zg-cell-transition_layout_row var(--zg-cell-transition) Sets the transition of cells in 'row' layout-mode
--zg-cell-vertical-align middle Sets vertical alignment of items in cells
--zg-cell-vertical-align_layout_row var(--zg-cell-vertical-align, middle) Sets vertical alignment of items in cells in 'row' layout-mode
--zg-cell-word-break_layout_card break-all Sets the word break of items in cards in 'card' layout-mode
--zg-column-resize-background none Sets the background of the resize handle
--zg-column-resize-height 40% Sets the height of the resize handle
--zg-column-resize-top 30% Sets the top position of the resize handle
--zg-column-resize-width 4px Sets the width of the resize handle
--zg-control-bar-background Browser's default value Styles the background of control-bar
--zg-control-bar-border 1px solid var(--theme-border-color) Styles the border of control-bar
--zg-control-bar-border-bottom var(--zg-control-bar-border, 1px solid var(--theme-border-color)) Styles the bottom border of control-bar
--zg-control-bar-border-left var(--zg-control-bar-border, 0) Styles the left border of control-bar
--zg-control-bar-border-right var(--zg-control-bar-border, 0) Styles the right border of control-bar
--zg-control-bar-border-top var(--zg-control-bar-border, 0) Styles the top border of control-bar
--zg-control-bar-layout-content "" Sets the before 'content' of inner layout container
--zg-control-bar-layout-justify-content flex-end Sets the horizontal alignment of contents in inner layout container
--zg-control-bar-margin 0 Sets the margin of control-bar
--zg-control-bar-min-height 30px Sets the min-height of control bar
--zg-control-bar-padding 2px var(--theme-padding_x) 2px calc(var(--theme-padding_x) - 6px) Sets the padding of control-bar
--zg-control-bar-visibility visible Sets the visibility of component
--zg-dialog-background #fff Styles the background of dialog header
--zg-dialog-body-background var(--zg-dialog-background) Styles the background of dialog body
--zg-dialog-body-border 0 Styles the border of dialog body
--zg-dialog-body-border-bottom var(--zg-dialog-body-border, 0) Styles the bottom border of dialog body
--zg-dialog-body-border-left var(--zg-dialog-body-border, 0) Styles the left border of dialog body
--zg-dialog-body-border-right var(--zg-dialog-body-border, 0) Styles the right border of dialog body
--zg-dialog-body-border-top var(--zg-dialog-body-border, 0) Styles the top border of dialog body
--zg-dialog-body-margin 10px 0 Sets the margin of dialog body
--zg-dialog-body-padding 0 Sets the padding of dialog body
--zg-dialog-footer-background var(--zg-dialog-background) Styles the background of dialog footer
--zg-dialog-footer-border 0 Styles the border of dialog footer
--zg-dialog-footer-border-bottom var(--zg-dialog-footer-border, 0) Styles the bottom border of dialog footer
--zg-dialog-footer-border-left var(--zg-dialog-footer-border, 0) Styles the left border of dialog footer
--zg-dialog-footer-border-right var(--zg-dialog-footer-border, 0) Styles the right border of dialog footer
--zg-dialog-footer-border-top var(--zg-dialog-footer-border, 1px solid var(--theme-border-color)) Styles the top border of dialog footer
--zg-dialog-footer-justify-content flex-end Sets the horizontal alignment of contents in dialog footer
--zg-dialog-footer-margin 1.25rem 0 0 Sets the margin of dialog footer
--zg-dialog-footer-padding .875rem 0 0 Sets the padding of dialog footer
--zg-dialog-header-background var(--zg-dialog-background) Styles the background of dialog header
--zg-dialog-header-border 0 Styles the border of dialog header
--zg-dialog-header-border-bottom var(--zg-dialog-header-border, 0) Styles the bottom border of dialog header
--zg-dialog-header-border-left var(--zg-dialog-header-border, 0) Styles the left border of dialog header
--zg-dialog-header-border-right var(--zg-dialog-header-border, 0) Styles the right border of dialog header
--zg-dialog-header-border-top var(--zg-dialog-header-border, 0) Styles the top border of dialog header
--zg-dialog-header-color Browser's default value Sets the font folor of dialog header
--zg-dialog-header-margin 0 Sets the margin of dialog header
--zg-dialog-header-padding 0 Sets the padding of dialog header
--zg-editor-row-input-background #f5f5f5 Styles the background of editor row
--zg-editor-row-input-background_focus var(--theme-color-lighter) Styles the background of editor row input on focus
--zg-editor-row-input-border 1px solid rgba(82, 168, 236, 0.8) Styles the border of editor row
--zg-editor-row-input-border-bottom var(--zg-editor-row-input-border, 1px solid rgba(82, 168, 236, 0.8)) Styles the bottom border of editor row
--zg-editor-row-input-border-left var(--zg-editor-row-input-border, 0) Styles the left border of editor row
--zg-editor-row-input-border-right var(--zg-editor-row-input-border, 0) Styles the right border of editor row
--zg-editor-row-input-border-top var(--zg-editor-row-input-border, 0) Styles the top border of editor row
--zg-editor-row-input-box-shadow_focus inset 0 0 5px #ccc Applies a box shadow behind editor row input on focus
--zg-editor-row-input-color var(--zg-editor-row-input-color, #fff) Sets the font color of editor row
--zg-editor-row-input-padding 12px 15px Sets the padding of editor row
--zg-filter-background Browser's default value Styles the background of filter
--zg-filter-background_sorted Browser's default value Styles the background color of filter when the column in sorted
--zg-filter-border 0 Styles the border of filter
--zg-filter-border-bottom var(--zg-filter-border, 0) Styles the bottom border of filter
--zg-filter-border-left var(--zg-filter-border, 0) Styles the left border of filter
--zg-filter-border-right var(--zg-filter-border, 0) Styles the right border of filter
--zg-filter-border-top var(--zg-filter-border, 1px solid var(--theme-border-color)) Styles the top border of filter
--zg-filter-color var(--theme-color_alt) Sets the font color of text inputted in filter
--zg-filter-height Browser's default value Sets the height of filter
--zg-filter-input-background Browser's default value Styles the background of input field in filter
--zg-filter-input-background_sorted Browser's default value Styles the background of input field in filter when sorted
--zg-filter-input-border 0 Styles the border of input field in filter
--zg-filter-input-border-bottom var(--zg-filter-input-border) Styles the bottom border of input field in filter
--zg-filter-input-border-bottom_sorted var(--zg-filter-input-border) Styles the bottom border of input field in filter when sorted
--zg-filter-input-border-left var(--zg-filter-input-border) Styles the left border of input field in filter
--zg-filter-input-border-left_sorted var(--zg-filter-input-border) Styles the left border of input field in filter when sorted
--zg-filter-input-border-radius Browser's default value Applies a border radius to filter input
--zg-filter-input-border-radius_sorted Browser's default value Applies border radius to filter input when sorted
--zg-filter-input-border-right var(--zg-filter-input-border) Styles the right border of input field in filter
--zg-filter-input-border-right_sorted var(--zg-filter-input-border) Styles the right border of input field in filter when sorted
--zg-filter-input-border-top var(--zg-filter-input-border) Styles the top border of input field in filter
--zg-filter-input-border-top_sorted var(--zg-filter-input-border) Styles the top border of input field in filter when sorted
--zg-filter-input-border_sorted 0 Styles the border of input field in filter when sorted
--zg-filter-input-color Browser's default value Styles the font color of text in input field of filter
--zg-filter-input-color_sorted Browser's default value Styles the font color of text in input field of filter when sorted
--zg-filter-input-font-size Browser's default value Sets the font size of filter input
--zg-filter-input-height 20px Sets the height of input field in filter. May need to set --zg-filter-height if input field is height is larger than height of filter.
--zg-filter-input-margin 0 var(--theme-padding_x) Sets the margin of filter input
--zg-filter-input-padding 0 0 0 5px Sets the padding of input field in filter. . May need to set --zg-filter-height if input field is height is larger than height of filter.
--zg-filter-menu-background Browser's defaul value Styles background of filter menu dropdown
--zg-filter-menu-body-background var(--zg-filter-menu-background) Styles the background of filter-menu body
--zg-filter-menu-body-border 0 Styles the border of filter-menu body
--zg-filter-menu-body-border-bottom var(--zg-filter-menu-body-border, 0) Styles the bottom border of filter-menu body
--zg-filter-menu-body-border-left var(--zg-filter-menu-body-border, 0) Styles the left border of filter-menu body
--zg-filter-menu-body-border-right var(--zg-filter-menu-body-border, 0) Styles the right border of filter-menu body
--zg-filter-menu-body-border-top var(--zg-filter-menu-body-border, 0) Styles the top border of filter-menu body
--zg-filter-menu-body-margin 10px 0 Sets the margin of filter-menu body
--zg-filter-menu-body-padding 0 Sets the padding of filter-menu body
--zg-filter-menu-border 1px solid var(--theme-border-color) Styles the border of filter menu dropdown
--zg-filter-menu-border-bottom var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the bottom border of filter menu dropdown
--zg-filter-menu-border-left var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the left border of filter menu dropdown
--zg-filter-menu-border-right var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the right border of filter menu dropdown
--zg-filter-menu-border-top var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) Styles the top border of filter menu dropdown
--zg-filter-menu-box-shadow 0 3px 3px #ccc Applies a box shadow to filter menu dropdown
--zg-filter-menu-color var(--theme-body-color) Applies a baseline color to the menu
--zg-filter-menu-font-size 0.8rem Sets the font size of filter menu dropdown
--zg-filter-menu-footer-background var(--zg-filter-menu-background) Styles the background of filter-menu footer
--zg-filter-menu-footer-border 0 Styles the border of filter-menu footer
--zg-filter-menu-footer-border-bottom var(--zg-filter-menu-footer-border, 0) Styles the bottom border of filter-menu footer
--zg-filter-menu-footer-border-left var(--zg-filter-menu-footer-border, 0) Styles the left border of filter-menu footer
--zg-filter-menu-footer-border-right var(--zg-filter-menu-footer-border, 0) Styles the right border of filter-menu footer
--zg-filter-menu-footer-border-top var(--zg-filter-menu-footer-border, 1px solid var(--theme-border-color)) Styles the top border of filter-menu footer
--zg-filter-menu-footer-justify-content flex-end Sets the horizontal alignment of contents in filter-menu footer
--zg-filter-menu-footer-margin 0 Sets the margin of filter-menu footer
--zg-filter-menu-footer-padding .875rem 0 0 Sets the padding of filter-menu footer
--zg-filter-menu-header-background var(--zg-filter-menu-background) Styles the background of filter-menu header
--zg-filter-menu-header-border 0 Styles the border of filter-menu header
--zg-filter-menu-header-border-bottom var(--zg-filter-menu-header-border, 0) Styles the bottom border of filter-menu header
--zg-filter-menu-header-border-left var(--zg-filter-menu-header-border, 0) Styles the left border of filter-menu header
--zg-filter-menu-header-border-right var(--zg-filter-menu-header-border, 0) Styles the right border of filter-menu header
--zg-filter-menu-header-border-top var(--zg-filter-menu-header-border, 0) Styles the top border of filter-menu header
--zg-filter-menu-header-color Browser's default value Sets the font color of filter-menu header
--zg-filter-menu-header-font-size 16px Sets the font size of filter-menu header
--zg-filter-menu-header-font-weight bold Sets the font weight of filter-menu header
--zg-filter-menu-header-margin 0 Sets the margin of filter-menu header
--zg-filter-menu-header-padding 0 Sets the padding of filter-menu header
--zg-filter-menu-input-color Browser's default value Styles the font color of text in the input in the filter menu
--zg-filter-menu-input-font-size Browser's default value Sets the font size of the input in the filter menu
--zg-filter-menu-input-height Browser's default value Sets the height of the input in the dropdown filter menu
--zg-filter-menu-input-margin 5px Sets the margin of the input in the dropdown filter menu
--zg-filter-menu-input-width 100% Sets the width of the input in the dropdown filter menu
--zg-filter-menu-list-background var(--theme-color-light) Sets the background of filter-menu list body
--zg-filter-menu-padding 0 Sets the padding of the filter menu dropdown
--zg-filter-menu-select-color Browser's default value Styles the font color of text in the select dropdown filter menu
--zg-filter-menu-select-font-size Browser's default value Sets the font size of the select dropdown filter menu
--zg-filter-menu-select-height Browser's default value Sets the height of the select dropdown filter menu
--zg-filter-menu-select-margin 5px Sets the margin of the select dropdown filter menu
--zg-filter-menu-select-width 100% Sets the width of the select dropdown filter menu
--zg-filter-padding A cell's left and right padding Sets the padding of the filter
--zg-filter-select-color Browser's default value Styles the font color of text in the select dropdown filter
--zg-filter-select-font-size Browser's default value Sets the font size of the select dropdown filter
--zg-filter-select-height Browser's default value Sets the height of the select dropdown filter
--zg-filter-select-margin Browser's default value Sets the margin of the select dropdown filter
--zg-focus-border 2px solid var(--theme-color-primary) Styles the border of cells on focus
--zg-focus-border-bottom var(--zg-focus-border, 2px solid var(--theme-color-primary)) Sets the bottom border of cells on focus
--zg-focus-border-left var(--zg-focus-border, 2px solid var(--theme-color-primary)) Sets the left border of cells on focus
--zg-focus-border-right var(--zg-focus-border, 2px solid var(--theme-color-primary)) Sets the right border of cells on focus
--zg-focus-border-top var(--zg-focus-border, 2px solid var(--theme-color-primary)) Sets the top border of cells on focus
--zg-focus-bottom-transform none Sets the transform of bottom border of cells on focus
--zg-focus-left-transform none Sets the transform of left border of cells on focus
--zg-focus-right-transform none Sets the transform of right border of cells on focus
--zg-focus-top-transform none Sets the transform of top border of cells on focus
--zg-foot-background Browser's default value Styles the background of grid foot
--zg-foot-border 0 Styles the border of grid foot
--zg-foot-border-bottom var(--zg-foot-border, 0) Styles the bottom border of grid foot
--zg-foot-border-left var(--zg-foot-border, 0) Styles the left border of grid foot
--zg-foot-border-right var(--zg-foot-border, 0) Styles the right border of grid foot
--zg-foot-border-top var(--zg-foot-border, 0) Styles the top border of grid foot
--zg-foot-height auto Sets the height of grid foot
--zg-foot-padding 0 Sets the padding of grid foot
--zg-footer-background 0 Styles the background of footer
--zg-footer-border-bottom var(--zg-footer-border, 0) Styles the bottom border of footer
--zg-footer-border-left var(--zg-footer-border, 0) Styles the left border of footer
--zg-footer-border-right var(--zg-footer-border, 0) Styles the right border of footer
--zg-footer-border-top var(--zg-footer-border, 0) Styles the top border of footer
--zg-head-background Browser's default value Styles the background of grid head rows
--zg-head-border 1px solid var(--theme-border-color) Styles the border of grid head rows
--zg-head-border-bottom var(--zg-head-border, 1px solid var(--theme-border-color)) Styles the bottom border of grid head rows
--zg-head-border-left var(--zg-head-border, 0) Styles the left border of grid head rows
--zg-head-border-radius var(--zg-head-border-radius) Styles the border-radius of grid head rows
--zg-head-border-right var(--zg-head-border, 0) Styles the right border of grid head rows
--zg-head-border-top var(--zg-head-border) Styles the top border of grid head rows
--zg-head-cell-background transparent Styles the background of head cells
--zg-head-cell-background_hover var(--zg-head-cell-background Styles the background of head cells on hover
--zg-head-cell-background_sorted inherit Styles the background of sorted head cells
--zg-head-cell-background_sorted_hover var(--zg-head-cell-background_sorted, inherit) Styles the background of sorted head cells on hover
--zg-head-cell-border 0 Styles the border of head cells
--zg-head-cell-border-bottom var(--zg-head-cell-border, 0) Styles the bottom border of head cells
--zg-head-cell-border-bottom_sorted var(--zg-head-cell-border_sorted, 0) Styles the bottom border of sorted head cells
--zg-head-cell-border-bottom_sorted_hover var(--zg-head-cell-border-bottom_sorted, var(--zg-head-cell-border_sorted, 0)) Styles the bottom border of sorted head cells on hover
--zg-head-cell-border-left var(--zg-head-cell-border, 0) Styles the left border of head cells
--zg-head-cell-border-left_sorted var(--zg-head-cell-border_sorted, 0) Styles the left border of sorted head cells
--zg-head-cell-border-left_sorted_hover var(--zg-head-cell-border-left_sorted, var(--zg-head-cell-border_sorted, 0)) Styles the left border of sorted head cells on hover
--zg-head-cell-border-right var(--zg-head-cell-border, 0) Styles the right border of head cells
--zg-head-cell-border-right_sorted var(--zg-head-cell-border_sorted, 0) Styles the right border of sorted head cells
--zg-head-cell-border-top var(--zg-head-cell-border, 0) Styles the top border of head cells
--zg-head-cell-border-top_sorted var(--zg-head-cell-border_sorted, 0) Styles the top border of sorted head cells
--zg-head-cell-border-top_sorted var(--zg-head-cell-border_sorted, 0) Styles the top border of sorted head cells
--zg-head-cell-border_sorted 0 Styles the border of sorted head cells
--zg-head-cell-color Browser's default value Sets the font color of head cells
--zg-head-cell-color_hover var(--zg-head-cell-color) Sets the font color of head cells on hover
--zg-head-cell-color_sorted var(--zg-head-cell-color) Sets the font color of sorted head cells
--zg-head-cell-color_sorted_hover var(--zg-head-cell-color_sorted, var(--zg-head-cell-color)) Sets the font color of sorted head cells on hover
--zg-head-cell-font-family Browser's default value Sets the font family of head cells
--zg-head-cell-font-size Browser's default value Sets the font size of head cells
--zg-head-cell-font-weight Browser's default value Sets the font weight of head cells
--zg-head-cell-icon-color_sorted var(--theme-color) Sets the fill color of icon in sorted head cells
--zg-head-cell-icon-margin Browser's default value Sets the margin of child icons in head cells
--zg-head-cell-inner-padding Browser's default value Sets the padding of head cells inner content
--zg-head-cell-justify-content Browser's default value Sets the horizontal alignment of contents in head cells
--zg-head-cell-padding Browser's default value Sets the padding of head cells
--zg-head-cell-parent-background var(--zg-head-cell-background) Styles the background of parent head cells
--zg-head-cell-parent-background_hover var(--zg-head-cell-background_hover) Styles the background of parent head cells on hover
--zg-head-cell-parent-border var(--zg-head-cell-border-bottom, var(--zg-head-cell-border, 1px solid var(--theme-border-color))) Styles the border of parent head cells
--zg-head-cell-parent-border-bottom var(--zg-head-cell-parent-border, var(--zg-head-cell-border-bottom, var(--zg-head-cell-border, 1px solid var(--theme-border-color)))) Styles the bottom border of parent head cells
--zg-head-cell-parent-border-left var(--zg-head-cell-parent-border, var(--zg-head-cell-border-left, var(--zg-head-cell-border))) Styles the left border of parent head cells
--zg-head-cell-parent-border-right var(--zg-head-cell-parent-border, var(--zg-head-cell-border-right, var(--zg-head-cell-border))) Styles the right border of parent head cells
--zg-head-cell-parent-border-top var(--zg-head-cell-parent-border, var(--zg-head-cell-border-top, var(--zg-head-cell-border))) Styles the top border of parent head cells
--zg-head-cell-parent-color var(--zg-head-cell-color) Sets the font color of parent head cells
--zg-head-cell-parent-color_hover var(--zg-head-cell-color_hover, var(--zg-head-cell-color)) Sets the font color of parent head cells on hover
--zg-head-cell-parent-font-size var(--zg-head-cell-font-size) Sets the font-size of parent head cells
--zg-head-cell-parent-font-weight var(--zg-h -cell-font-weight) Sets the font weight of parent head cells
--zg-head-cell-parent-padding var(--zg-head-cell-padding) Sets the padding of parent head cells
--zg-head-cell-transition Browser's default value Sets the transition of head cells
--zg-head-visibility Browser's default value Sets the visibility of grid head rows
--zg-header-background Browser's default value Styles the background of header
--zg-header-border 0 Styles the border of header
--zg-header-border-bottom var(--zg-header-border, 0) Styles the bottom border of header
--zg-header-border-left var(--zg-header-border, 0) Styles the left border of header
--zg-header-border-radius 0 Applies border radius to header
--zg-header-border-right var(--zg-header-border, 0) Styles the right border of header
--zg-header-border-top var(--zg-header-border, 0) Styles the top border of header
--zg-icon-color var(--theme-color-primary) Sets the fill color of icon
--zg-icon-height Browser's default value Sets the height of icon. Also set width using --zg-icon-width to scale icon.
--zg-icon-init-fill Browser's default value Sets fill color of icon when element has [init] attribute. This indicates that column is sortable. The [init] is removed when column is sorted.
--zg-icon-width Browser's default value Sets the width of icon. Also set height using --zg-icon-height to scale icon.
--zg-input-background #fff Styles the background of input field
--zg-input-border 1px solid var(--theme-border-color) Styles the border of input field
--zg-input-border-bottom var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the bottom border of input field
--zg-input-border-bottom_focus var(--zg-input-border_focus, 1px solid rgba(82, 168, 236, 0.8)) Styles the bottom border of input field on focus
--zg-input-border-left var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the left border of input field
--zg-input-border-left_focus var(--zg-input-border_focus, ))) Styles the left border of input field on focus
--zg-input-border-radius Browser's default value Applies a border radius to the input
--zg-input-border-right var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the right border of input field
--zg-input-border-right_focus var(--zg-input-border_focus, ))) Styles the right border of input field in modal on focus
--zg-input-border-top var(--zg-input-border, 1px solid var(--theme-border-color)) Styles the top border of input field
--zg-input-border-top_focus var(--zg-input-border_focus, ))) Styles the top border of input field in modal on focus
--zg-input-border_focus 1px solid rgba(82, 168, 236, 0.8) Styles the border of input field on focus
--zg-input-box-shadow none Applies a box shadow behind input field
--zg-input-color var(--zing-grid-color, var(--theme-color)) Sets the font color of input field
--zg-input-color_focus var(--zg-input-color) Sets the font color of input field in modal on focus
--zg-input-font-family inherit Sets the font family of input field
--zg-input-font-size inherit Sets the font size of input field
--zg-input-font-size_focus inherit Sets the font size of input field on focus
--zg-input-font-style inherit Sets the font style of input field
--zg-input-font-weight inherit Sets the font weight of input field
--zg-input-height 28px Sets the height of input field
--zg-input-line-height inherit Sets the line height of input field
--zg-input-margin 0 Sets the margin of input field
--zg-input-padding 0 6px Sets the padding of input field
--zg-input-text-align center Sets the text alignment of input field
--zg-input-transform Browser's default value Sets the transform of input field
--zg-input-transform_focus Browser's default value Sets the transform of input field in modal on focus
--zg-input-width 28px Sets the width of input field
--zg-load-mask-color #fff Sets the font color of the loading text
--zg-menu-background Browser's defaul value Styles background of menu dropdown
--zg-menu-border 1px solid var(--theme-border-color) Styles the border of menu dropdown
--zg-menu-border-bottom var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the bottom border of menu dropdown
--zg-menu-border-left var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the left border of menu dropdown
--zg-menu-border-right var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the right border of menu dropdown
--zg-menu-border-top var(--zg-menu-border, 1px solid var(--theme-border-color)) Styles the top border of menu dropdown
--zg-menu-box-shadow 0 3px 3px #ccc Applies a box shadow to menu dropdown
--zg-menu-font-size 0.8rem Sets the font size of menu dropdown
--zg-menu-item-background var(--zg-menu-background) Styles the background of menu item
--zg-menu-item-background_hover var(--zg-menu-item-background, var(--zg-menu-background)) Styles the background of menu item on hover
--zg-menu-item-border var(--zg-menu-item-border, 0) Styles the border of menu item
--zg-menu-item-border-bottom var(--zg-menu-border-bottom, var(--zg-menu-item-border)) Styles the bottom border of menu item
--zg-menu-item-border-bottom_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-bottom, var(--zg-menu-item-border))) Styles the bottom border of menu item on hover
--zg-menu-item-border-left var(--zg-menu-border-left, var(--zg-menu-item-border)) Styles the left border of menu item
--zg-menu-item-border-left_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-left, var(--zg-menu-item-border))) Styles the left border of menu item on hover
--zg-menu-item-border-right var(--zg-menu-border-right, var(--zg-menu-item-border)) Styles the border-right of menu item
--zg-menu-item-border-right_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-right, var(--zg-menu-item-border))) Styles the right border of menu item on hover
--zg-menu-item-border-top var(--zg-menu-border-top, var(--zg-menu-item-border)) Styles the border-top of menu item
--zg-menu-item-border-top_hover var(--zg-menu-item-border_hover, var(--zg-menu-item-border-top, var(--zg-menu-item-border))) Styles the top border of menu item on hover
--zg-menu-item-border_hover var(--zg-menu-item-border) Styles the border of menu item on hover
--zg-menu-item-color var(--zg-menu-color) Styles the color of menu item
--zg-menu-item-color_hover var(--zg-menu-item-color, var(--zg-menu-color)) Styles the color of menu item on hover
--zg-menu-item-justify-content flex-start Sets the horizontal alignment of contents in menu item
--zg-menu-item-justify-content_hover var(--zg-menu-item-justify-content, flex-start) Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-padding 2px 9px Sets the padding of menu item
--zg-menu-item-padding_hover var(--zg-menu-item-padding, 2px 9px) Sets the padding of menu item on hover
--zg-menu-padding 0 Sets the padding of the menu dropdown
--zg-no-data-background var(--theme-color-light) Styles the background of empty message when in ``
--zg-no-data-border 1px solid var(--theme-border-color) Styles the border of empty message when in ``
--zg-no-data-border-bottom var(--zg-no-data-border, 0) Styles the bottom border of empty message when in ``
--zg-no-data-border-left var(--zg-no-data-border, 0) Styles the left border of empty message when in ``
--zg-no-data-border-radius 0 Styles the border radius of empty message
--zg-no-data-border-right var(--zg-no-data-border, 0) Styles the right border of empty message when in ``
--zg-no-data-border-top var(--zg-no-data-border, 1px solid var(--theme-border-color) Styles the top border of empty message when in ``
--zg-no-data-color var(--theme-font-size) Sets the font color content inside of empty message when in ``
--zg-no-data-font-size inherit Sets the font size of empty message
--zg-no-data-font-style inherit Sets the font style of empty message
--zg-no-data-font-weight inherit Sets the font weight of empty message
--zg-no-data-line-height inherit Sets the line height of empty message
--zg-no-data-min-height auto Sets the min-height of empty message
--zg-no-data-padding var(--zg-cell-height, var(--theme-padding_x, auto))) var(--theme-padding_x) Sets the padding of empty message
--zg-no-data-text-align left Sets text alignment of content inside of empty message
--zg-option-list-background #fff Styles the background of option list
--zg-option-list-border 1px solid var(--theme-border-color) Styles the border of option list
--zg-option-list-border-bottom var(--zg-option-list-border, 1px solid var(--theme-border-color)) Styles the bottom border of option list
--zg-option-list-border-left var(--zg-option-list-border, 1px solid var(--theme-border-color)) Styles the left border of option list
--zg-option-list-border-right var(--zg-option-list-border, 1px solid var(--theme-border-color)) Styles the right border of option list
--zg-option-list-border-top var(--zg-option-list-border, 1px solid var(--theme-border-color)) Styles the bottom top of option list
--zg-option-list-color Browser's default value Styles the color of option list item
--zg-option-list-item-background_hover var(--theme-color-secondary) Sets the background of option list item on hover
--zg-option-list-item-background_hover var(--theme-color-secondary) Sets the background of option list item on hover
--zg-option-list-item-border 0 Styles the border of option list item
--zg-option-list-item-border-bottom var(--zg-option-list-item-border, 0) Styles the bottom border of option list item
--zg-option-list-item-border-left var(--zg-option-list-item-border, 0) Styles the left border of option list item
--zg-option-list-item-border-right var(--zg-option-list-item-border, 0) Styles the right border of option list item
--zg-option-list-item-border-top var(--zg-option-list-item-border, 0) Styles the top border of option list item
--zg-option-list-item-height 32px Sets the height of option list item
--zg-option-list-item-line-height 32px Sets the line height of option list item
--zg-option-list-item-padding 0 15px Sets the padding of option list item
--zg-pager-background Browser's default value Styles the background of pager
--zg-pager-background_button var(--theme-color-primary) Styles the background of pager buttons in 'button-pagination` mode
--zg-pager-background_button_active var(--theme-color-primary) Styles the background of active pager buttons in 'button-pagination` mode
--zg-pager-background_cursor var(--theme-color-primary) Styles the background of pager next/previous buttons in 'cursor-pagination` mode
--zg-pager-border 0 Styles the border of pager
--zg-pager-border-bottom var(--zg-pager-border, 0) Styles the bottom border of pager
--zg-pager-border-bottom_button var(--zg-pager-border_button) Styles the bottom border of pager buttons in 'button-pagination' mode
--zg-pager-border-bottom_button_active var(--zg-pager-border-bottom_button_active, var(--zg-pager-border-bottom_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); Styles the bottom border of active pager buttons in 'button-pagination' mode
--zg-pager-border-bottom_cursor 0 Styles the bottom border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-left var(--zg-pager-border, 0) Styles the left border of pager
--zg-pager-border-left_button var(--zg-pager-border_button) Styles the left border of pager buttons in 'button-pagination' mode
--zg-pager-border-left_button_active var(--zg-pager-border-left_button_active, var(--zg-pager-border-left_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); Styles the left border of active pager buttons in 'button-pagination' mode
--zg-pager-border-left_cursor 0 Styles the left border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-radius_button 50% Applies border radius to the pager buttons in 'button-pagination' mode
--zg-pager-border-radius_button_active 50% Applies border radius to the pager next/previous buttons in 'button-pagination' mode
--zg-pager-border-radius_cursor 50% Applies border radius to the pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-right var(--zg-pager-border, 0) Styles the right border of pager
--zg-pager-border-right_button var(--zg-pager-border_button) Styles the right border of pager buttons in 'button-pagination' mode
--zg-pager-border-right_button_active var(--zg-pager-border-right_button_active, var(--zg-pager-border-right_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); Styles the right border of active pager buttons in 'button-pagination' mode
--zg-pager-border-right_cursor 0 Styles the right border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-top var(--zg-pager-border) Styles the top border of pager
--zg-pager-border-top_button var(--zg-pager-border_button) Styles the top border of pager buttons in 'button-pagination' mode
--zg-pager-border-top_button_active var(--zg-pager-border-top_button_active, var(--zg-pager-border-top_button, var(--zg-pager-border_button_active, var(--zg-pager-border_button)))); Styles the top border of active pager buttons in 'button-pagination' mode
--zg-pager-border-top_cursor 0 Styles the top border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border_button 1px solid var(--theme-border-color) Styles the bottom border of pager buttons in 'button-pagination' mode
--zg-pager-border_button_active 1px solid var(--theme-border-color) Styles the bottom border of active pager buttons in 'button-pagination' mode
--zg-pager-box-shadow 0 Applies a box shadow behind the pager
--zg-pager-child-margin 0 5px Sets the margin of pager items
--zg-pager-color var(--zing-grid-color), var(--theme-color) Sets the color of pager text
--zg-pager-color_button 26px Sets the color of pager buttons in 'button-text' mode
--zg-pager-color_button_active 26px Sets the color of pager buttons in 'button-pagination' mode
--zg-pager-font-size Browser's default value Sets the font size of pager text
--zg-pager-height 1px Sets the minimum height of pager
--zg-pager-height_button 26px Sets the height of pager buttons in 'button-pagination' mode
--zg-pager-height_button_active 26px Sets the height of active pager buttons in 'button-pagination' mode
--zg-pager-height_cursor 21px Sets the height of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-margin 0 Sets the margin of pager
--zg-pager-padding 0 var(--theme-padding_x) Sets the padding of pager
--zg-pager-text-margin 0 2px Sets the margin of pager text
--zg-pager-width_button 26px Sets the width of pager buttons in 'button-pagination' mode
--zg-pager-width_button_active 26px Sets the width of active pager buttons in 'button-pagination' mode
--zg-pager-width_cursor 21px Sets the width of pager next/previous buttons in 'cursor-pagination' mode
--zg-row-body-background Browser's default value Styles the background of body rows
--zg-row-body-background_even var(--zg-row-body-background) Styles the background of 'even' body rows
--zg-row-body-background_even_hover var(--zg-row-body-background_hover) Styles the background of 'even' body rows on hover
--zg-row-body-background_hover Browser's default value Styles the background of body rows on hover
--zg-row-body-background_odd var(--zg-row-body-background) Styles the background of 'odd' body rows
--zg-row-body-background_odd_hover var(--zg-row-body-background_hover) Styles the background of 'odd' body rows on hover
--zg-row-body-border var(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, 0))) Styles the border of body rows
--zg-row-body-border-bottom var(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, 0))) Styles the bottom border of body rows
--zg-row-body-border-left var(--zg-row-body-border, var(--zg-row-border-left, var(--zg-row-border, 0))) Styles the left border of body rows
--zg-row-body-border-right var(--zg-row-body-border, var(--zg-row-border-right, var(--zg-row-border), 0)) Styles the right border of body rows
--zg-row-body-border-top var(--zg-row-body-border, var(--zg-row-border-top, var(--zg-row-border, 1px solid var(--theme-border-color)))) Styles the top border of body rows
--zg-row-body-color var(--zg-row-color) Sets the font color of body rows
--zg-row-body-color_even var(--zg-row-body-color, var(--zg-row-color)) Sets the font color of 'even' body rows
--zg-row-body-color_even_hover var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) Styles the font color of 'even' body rows on hover
--zg-row-body-color_hover var(--zg-row-color_hover, var(--zg-row-color)) Styles the font color of body rows
--zg-row-body-color_odd var(--zg-row-body-color, var(--zg-row-color)) Styles the font color of 'odd' body rows
--zg-row-body-color_odd_hover var(--zg-row-body-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) Sets the font color of 'odd' body rows on hover
--zg-row-body-height var(--zg-row-height) Sets the height of body rows
--zg-row-body-height_even var(--zg-row-body-height, var(--zg-row-height)) Sets the height of 'even' body rows
--zg-row-body-height_odd var(--zg-row-body-height, var(--zg-row-height)) Sets the height of 'odd' body rows
--zg-row-border 0 Styles the border of row
--zg-row-border-bottom var(--zg-row-border, var(--zg-row-border, 0)) Styles the bottom border of row
--zg-row-card-background_even var(--zg-row-card-background, var(--zg-row-body-background_even, var(--zg-row-body-background, #fff))) Styles the background of 'even' cards in 'card' layout-mode
--zg-row-card-background_odd var(--zg-row-card-background, var(--zg-row-body-background_odd, var(--zg-row-body-background, #fff))) Styles the background of cards in 'card' layout-mode
--zg-row-card-border 1px solid var(--theme-border-color) Styles the border of cards in 'card' layout-mode
--zg-row-card-border-bottom_even var(--zg-row-card-border_even, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the bottom border of 'even' cards in 'card' layout-mode
--zg-row-card-border-bottom_odd var(--zg-row-card-border_odd, var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the bottom border of 'odd' cards in 'card' layout-mode
--zg-row-card-border-left_even var(--zg-row-card-border_even, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the left border of 'even' cards in 'card' layout-mode
--zg-row-card-border-left_odd var(--zg-row-card-border_odd, var(--zg-row-card-border-left, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the left border of 'odd' cards in 'card' layout-mode
--zg-row-card-border-right_even var(--zg-row-card-border_even, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the right border of 'even' cards in 'card' layout-mode
--zg-row-card-border-right_odd var(--zg-row-card-border_odd, var(--zg-row-card-border-right, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the right border of 'odd' cards in 'card' layout-mode
--zg-row-card-border-top_even var(--zg-row-card-border_even, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the top border of 'even' cards in 'card' layout-mode
--zg-row-card-border-top_odd var(--zg-row-card-border_odd, var(--zg-row-card-border-top, var(--zg-row-card-border, 1px solid var(--theme-border-color)))) Styles the top border of 'odd' cards in 'card' layout-mode
--zg-row-card-border_even var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color))) Styles the border of 'even' cards in 'card' layout-mode
--zg-row-card-border_odd var(--zg-row-card-border-bottom, var(--zg-row-card-border, 1px solid var(--theme-border-color))) Styles the border of 'odd' cards in 'card' layout-mode
--zg-row-card-box-shadow none Applies a box shadow behind cards in 'card' layout-mode
--zg-row-card-box-shadow_odd var(--zg-row-card-box-shadow, none) Applies a box shadow behind 'odd' cards in 'card' layout-mode
--zg-row-card-display grid Sets the display of cards in 'card' layout-mode
--zg-row-card-flex-basis 100% Sets the flex-basis of cards in 'card' layout-mode
--zg-row-card-grid-gap 10px Sets the gap between cards in 'card' layout-mode
--zg-row-card-padding 10px 0 5px Sets the padding of cards in 'card' layout-mode when '[internal-card-header]' not added to '<zing-grid>'
--zg-row-color Browser's default value Sets the font color of all rows
--zg-row-color_hover var(--zg-row-color) Sets the font color of all rows on hover
--zg-row-dirty-delete-background-color gray; Sets the background color of the dirty row on row delete
--zg-row-dirty-delete-color Sets the color of the dirty row on row delete
--zg-row-dirty-insert-background-color green; Sets the background color of the dirty row on row insert
--zg-row-dirty-insert-color Sets the color of the dirty row on row insert
--zg-row-head-background var(--zg-head-background) Styles the background of grid head rows
--zg-row-head-background_even var(--zg-row-head-background, var(--zg-head-background)) Styles the background of 'even' grid head rows
--zg-row-head-background_even_hover var(--zg-row-head-background_hover, var(--zg-head-background_hover)) Styles the background of 'even' grid head rows on hover
--zg-row-head-background_hover Browser's default value Styles the background of grid head rows on hover
--zg-row-head-background_odd var(--zg-row-head-background, var(--zg-head-background)) Styles the background of 'odd' grid head rows
--zg-row-head-background_odd_hover var(--zg-row-head-background_hover, var(--zg-head-background_hover)) Styles the background of 'odd' grid head rows on hover
--zg-row-head-border var(--zg-row-border-bottom, var(--zg-row-border, var(--zg-row-border, 0))) Styles the border of grid head rows
--zg-row-head-border-bottom var(--zg-row-head-border, var(--zg-row-border-bottom, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the bottom border of grid head rows
--zg-row-head-border-left var(--zg-row-head-border, var(--zg-row-border-left, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the left border of grid head rows
--zg-row-head-border-right var(--zg-row-head-border, var(--zg-row-border-right, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the right border of grid head rows
--zg-row-head-border-top var(--zg-row-head-border, var(--zg-row-border-top, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the top border of grid head rows
--zg-row-head-color var(--zg-row-color) Styles the font color of grid head rows
--zg-row-head-color_even var(--zg-row-head-color, var(--zg-row-color)) Styles the font color of 'even' grid head rows
--zg-row-head-color_even_hover var(--zg-row-head-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) Styles the font color of 'even' grid head rows on hover
--zg-row-head-color_hover var(--zg-row-color_hover) Styles the font color of grid head rows on hover
--zg-row-head-color_odd var(--zg-row-head-color, var(--zg-row-color)) Sets the font color of 'odd' grid head rows
--zg-row-head-color_odd_hover var(--zg-row-head-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) Styles the font color of 'odd' grid head rows on hover
--zg-row-head-height_even var(--zg-row-head-height, var(--zg-row-height)) Sets the height of 'even' grid head rows
--zg-row-head-height_odd var(--zg-row-head-height, var(--zg-row-height)) Sets the height of 'odd' grid head rows
--zg-row-height Browser's default value Sets the height of all rows
--zg-search-background Browser's default value Styles the background of search input field
--zg-search-border 0 Styles the border of search input field
--zg-search-border-bottom var(--zg-search-border, 0) Styles the bottom border of search input field
--zg-search-border-left var(--zg-search-border, 0) Styles the left border of search input field
--zg-search-border-radius 0 Applies border radius to search input field
--zg-search-border-right var(--zg-search-border, 0) Styles the right border of search input field
--zg-search-border-top var(--zg-search-border, 0) Styles the top border of search input field
--zg-search-color var(--theme-color_alt) Sets the font color of search input field
--zg-search-font-size vd Sets the font size of search input field
--zg-search-font-weight var(--theme-font-weight) Sets the font weight of search input field
--zg-search-height 32px Sets the height of search input field
--zg-search-padding 0 10px 0 15px Sets the padding of search input field
--zg-select-arrow-border 0 Styles the border of the select arrow button
--zg-select-arrow-border-bottom var(--zg-select-arrow-border, 0) Styles the bottom border of the select arrow button
--zg-select-arrow-border-left var(--zg-select-arrow-border, 1px solid var(--theme-border-color)) Styles the left border of the select arrow button
--zg-select-arrow-border-right var(--zg-select-arrow-border, 0) Styles the right border of the select arrow button
--zg-select-arrow-border-top var(--zg-select-arrow-border, 0) Styles the top border of the select arrow button
--zg-select-arrow-color #000 Sets the color select arrow icon
--zg-select-background Browser's default value Styles the background of the entire select parent wrapper
--zg-select-border 1px solid var(--theme-border-color)) Styles the border of the select
--zg-select-border-bottom var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the bottom border of the select
--zg-select-border-left var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the left border of the select
--zg-select-border-right var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the right border of the select
--zg-select-border-top var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the top border of the select
--zg-select-color var(--zing-grid-color, var(--theme-color)) Sets the font color of the select
--zg-select-color_active var(--theme-color) Sets the font color of the select option
--zg-select-font-family Browser's default value Sets the font family of the select option
--zg-select-font-size Browser's default value Sets the font size of the select option
--zg-select-font-weight Browser's default value Sets the font weight of the select option
--zg-select-height 28px Sets the minimum height of the select
--zg-select-line-height Browser's default value Sets the line height of the select option
--zg-select-mask-background var(--theme-color-secondary) Styles the background of select mask
--zg-select-mask-opacity .1 Sets the opacity of select mask
--zg-select-min-width Browser's default value Sets the minimum width of select
--zg-select-text-background #fff Styles the background of the 'text' portion of the zg-select element
--zg-select-transform Browser's default value Sets the transform of the select option
--zg-select-trigger-background var(--zg-select-arrow-background) Styles the background of the select arrow button (trigger)
--zg-selector-mask-background var(--theme-color-secondary) Styles the background of selector mask
--zg-selector-mask-opacity .1 Sets the opacity of selector mask
--zg-separator-border 1px solid var(--theme-border-color) Styles the border of separator in the menu
--zg-separator-border-bottom var(--zg-separator-border, 1px solid var(--theme-border-color)) Styles the bottom border of separator in the menu
--zg-separator-border-left var(--zg-separator-border, 0) Styles the left border of separator in the menu
--zg-separator-border-right var(--zg-separator-border, 1px solid var(--theme-border-color)) Styles the right border of separator in the menu
--zg-separator-border-top var(--zg-separator-border, 0) Styles the top border of separator in the menu
--zg-separator-margin 5px 0 Sets the margin of separator in the menu
--zg-source-background var(--theme-color-light) Styles the background of source when in ``
--zg-source-background_bottom var(--zg-source-background, var(--theme-color-light)) Styles the background of source in grid footer
--zg-source-background_top var(--zg-source-background, var(--theme-color-light)) Styles the background of source in grid header
--zg-source-border 1px solid var(--theme-border-color) Styles the border of source when in ``
--zg-source-border-bottom var(--zg-source-border, 0) Styles the bottom border of source when in ``
--zg-source-border-bottom_bottom var(--zg-source-border-bottom, var(--zg-source-border, 0)) Styles the bottom border of source in grid footer
--zg-source-border-bottom_top var(--zg-source-border-bottom, var(--zg-source-border, 1px solid var(--theme-border-color))) Styles the bottom border of source in grid header
--zg-source-border-left var(--zg-source-border, 0) Styles the left border of source when in ``
--zg-source-border-left_bottom var(--zg-source-border-left, var(--zg-source-border, 0)) Styles the left border of source when in grid footer
--zg-source-border-left_top var(--zg-source-border-left, var(--zg-source-border, 0)) Styles the left border of source in grid header
--zg-source-border-radius 0 Styles the border radius of source
--zg-source-border-radius_bottom var(--zg-source-border-radius, 0 0 var(--zing-grid-border-radius, 0) var(--zing-grid-border-radius, 0)) Styles the top border of source in grid footer
--zg-source-border-radius_top var(--zg-source-border-radius, 0) Sets the border radius of source in grid header
--zg-source-border-right var(--zg-source-border, 0) Styles the right border of source when in ``
--zg-source-border-right_bottom var(--zg-source-border-right, var(--zg-source-border, 0)) Styles the right border of source in grid footer
--zg-source-border-right_top var(--zg-source-border-right, var(--zg-source-border, 0)) Styles the right border of source in grid header
--zg-source-border-top var(--zg-source-border, 1px solid var(--theme-border-color) Styles the top border of source when in ``
--zg-source-border-top_bottom var(--zg-source-border-top, var(--zg-source-border, 1px solid var(--theme-border-color))) Sets the border radius of source in grid footer
--zg-source-border-top_top var(--zg-source-border-top, var(--zg-source-border, 0)) Styles the top border of source in grid header
--zg-source-border_bottom var(--zg-source-border, 0) Styles the border of source in grid footer
--zg-source-border_top 1px solid var(--theme-border-color) Styles the border of source in grid header
--zg-source-color var(--theme-font-size) Sets the font color content inside of source
--zg-source-color_bottom var(--zg-source-color, var(--zg-source-border, 0)) Sets the font color of source in grid footer
--zg-source-color_top var(--zg-source-color, var(--zg-source-border, 0)) Sets the font color of source in grid header
--zg-source-font-size inherit Sets the font size of source
--zg-source-font-size_bottom var(--zg-source-font-size, .8rem) Sets the font size of source in grid footer
--zg-source-font-size_top var(--zg-source-font-size, .8rem) Sets the font size of source in grid header
--zg-source-font-style inherit Sets the font style of source
--zg-source-font-style_bottom var(--zg-source-font-style, inherit) Sets the font style of source in grid footer
--zg-source-font-style_top var(--zg-source-font-style, inherit) Sets the font style of source in grid header
--zg-source-font-weight inherit Sets the font weight of source
--zg-source-font-weight_bottom var(--zg-source-font-weight, inherit) Sets the font weight of source in grid footer
--zg-source-font-weight_top var(--zg-source-font-weight, inherit) Sets the font weight of source in grid header
--zg-source-line-height inherit Setes the line height of source
--zg-source-line-height_bottom var(--zg-source-line-height, inherit) Sets the line height of source in grid footer
--zg-source-line-height_top var(--zg-source-line-height, inherit) Sets the line height of source in grid header
--zg-source-min-height auto Sets the min-height of source
--zg-source-min-height_bottom var(--zg-source-min-height, var(--zg-source-border, 0)) Sets the min-height of source in grid footer
--zg-source-min-height_top var(--zg-source-min-height, var(--zg-source-border, 0)) Sets the min-height of source in grid header
--zg-source-padding 5px var(--theme-padding_x) Sets the padding of source
--zg-source-padding_bottom var(--zg-source-padding, 5px var(--theme-padding_x)) Sets the padding of source when in grid footer
--zg-source-padding_top var(--zg-source-padding, 5px var(--theme-padding_x)) Sets the padding of source in grid header
--zg-source-text-align left Sets text alignment of content inside of source
--zg-source-text-align_bottom var(--zg-source-text-align, var(--zg-source-border, 0)) Sets the text alignment of source in grid footer
--zg-source-text-align_top var(--zg-source-text-align, var(--zg-source-border, 0)) Sets the text alignment of source in grid header
--zg-status-align-items center Sets the alignment of inner elements of status
--zg-status-background #333 Styles the background of status
--zg-status-border 0 Styles the border of status
--zg-status-border-bottom var(--zg-status-border, 0) Styles the bottom border of status
--zg-status-border-left var(--zg-status-border, 0) Styles the left border of status
--zg-status-border-right var(--zg-status-border, 0) Styles the right border of status
--zg-status-border-top var(--zg-status-border, 1px solid var(--theme-border-color)) Styles the top border of status
--zg-status-box-shadow none Applies a box shadow behind status
--zg-status-color #fff Sets the font color of contents in status
--zg-status-error-background red Styles the background of 'error' status
--zg-status-error-color #fff Sets the font color of contents of 'error' status
--zg-status-font-family var(--theme-font-family) Sets the font family of contents in status
--zg-status-font-size inherit Sets the font size of contents in status
--zg-status-line-height 1 Sets the line height of status
--zg-status-margin 0 Sets the margin of status
--zg-status-max-width 300px Sets the max-width of the status-message area
--zg-status-min-height 27px Sets the min-height of status
--zg-status-padding 14px var(--theme-padding_x) Sets the padding of status
--zg-status-success-background green Styles the background of 'success' status
--zg-status-success-color #fff Sets the font color of contents of 'success' status
--zg-text-color Browser's default value Sets the font color of text
--zg-text-font-family Browser's default value Sets the font family of text
--zg-text-font-size Browser's default value Sets the font size of text
--zg-text-font-style Browser's default value Sets the font style of text
--zg-text-font-weight Browser's default value Sets the font weight of text
--zg-text-line-height .8 Sets the line height of text
--zg-watermark-align-items center Sets the alignment of watermark
--zg-watermark-background #fbfbfb Styles the background of watermark
--zg-watermark-border-bottom var(--zg-watermark-border, 0) Styles the bottom border of watermark
--zg-watermark-border-left var(--zg-watermark-border, 0) Styles the left border of watermark
--zg-watermark-border-radius inherit Applies border radius to the watermark
--zg-watermark-border-right var(--zg-watermark-border, 0) Styles the right border of watermark
--zg-watermark-border-top var(--zg-watermark-border, 1px solid var(--theme-border-color)) Styles the top border of watermark
--zg-watermark-box-shadow none Applies a box shadow behing the watermark
--zg-watermark-color var(--theme-color-primary) Sets the color of watermark
--zg-watermark-color_strong var(--theme-color-secondary) Sets color of strong in watermark
--zg-watermark-font-family var(--theme-font-family) Sets the font of watermark
--zg-watermark-font-size .75rem Sets the font size of watermark
--zg-watermark-justify-content flex-end Sets the horizontal alignment of contents in the watermark
--zg-watermark-margin 0 Sets margins of watermark
--zg-watermark-min-height 27px Sets the minimum height of watermark
--zg-watermark-padding 0 var(--theme-padding_x) Sets padding of watermark
--zg-watermark-width auto Sets width of watermark
--zing-grid-background #fff Styles the background of grid
--zing-grid-batch-edit-style-border 1px solid #d6e9ff Styles the border of the batch edit styling element
--zing-grid-batch-edit-style-box-shadow inset 0 0 6px #99caff Styles the box-shadow of the frozen column styling element
--zing-grid-body-border 0 Styles the border of grid body
--zing-grid-body-border-bottom var(--zing-grid-body-border, 0) Styles the bottom border of grid body
--zing-grid-body-border-left var(--zing-grid-body-border, 0) Styles the left border of grid body
--zing-grid-body-border-right var(--zing-grid-body-border, 0) Styles the right border of grid body
--zing-grid-body-border-top var(--zing-grid-body-border, 0) Styles the top border of grid body
--zing-grid-border 1px solid var(--theme-border-color) Styles the border of grid
--zing-grid-border-bottom var(--zing-grid-border, 1px solid var(--theme-border-color)) Styles the bottom border of grid
--zing-grid-border-left var(--zing-grid-border, 1px solid var(--theme-border-color)) Styles the left border of grid
--zing-grid-border-radius 0 Applies border radious to grid
--zing-grid-border-right var(--zing-grid-border, 1px solid var(--theme-border-color)) Styles the right border of grid
--zing-grid-border-top var(--zing-grid-border, 1px solid var(--theme-border-color)) Styles the top border of grid
--zing-grid-box-shadow none Applies a box shadow behind grid
--zing-grid-color --theme-color The font color of grid
--zing-grid-font-family --theme-font-family Sets the font family of grid text
--zing-grid-font-size --theme-font-size Sets the font size of grid text
--zing-grid-font-style --theme-font-style Sets the font style of grid text
--zing-grid-font-weight --theme-font-weight Sets the font weight of grid text
--zing-grid-freeze-style-border 1px solid #d6e9ff Styles the border of the frozen column styling element
--zing-grid-freeze-style-box-shadow inset 0 0 6px #99caff Styles the box-shadow of the frozen column styling element
--zing-grid-table-border 0 Styles the border of grid table contents
--zing-grid-table-border-bottom var(--zing-grid-table-border, 0) Styles the bottom border of grid table contents
--zing-grid-table-border-left var(--zing-grid-table-border, 0) Styles the left border of grid table contents
--zing-grid-table-border-right var(--zing-grid-table-border, 0) Styles the right border of grid table contents
--zing-grid-table-border-top var(--zing-grid-table-border, 0) Styles the top border of grid table contents

[api: CSS Variables]

On This Page