--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
var(--zg-dialog-background)
Styles the background of dialog footer
0
Styles the border of dialog footer
var(--zg-dialog-footer-border, 0)
Styles the bottom border of dialog footer
var(--zg-dialog-footer-border, 0)
Styles the left border of dialog footer
var(--zg-dialog-footer-border, 0)
Styles the right border of dialog footer
var(--zg-dialog-footer-border, 1px solid var(--theme-border-color))
Styles the top border of dialog footer
flex-end
Sets the horizontal alignment of contents in dialog footer
1.25rem 0 0
Sets the margin of dialog footer
.875rem 0 0
Sets the padding of dialog footer
var(--zg-dialog-background)
Styles the background of dialog header
0
Styles the border of dialog header
var(--zg-dialog-header-border, 0)
Styles the bottom border of dialog header
var(--zg-dialog-header-border, 0)
Styles the left border of dialog header
var(--zg-dialog-header-border, 0)
Styles the right border of dialog header
var(--zg-dialog-header-border, 0)
Styles the top border of dialog header
Browser's default value
Sets the font folor of dialog header
0
Sets the margin of dialog header
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.
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
1px solid var(--theme-border-color)
Styles the border of filter menu dropdown
var(--zg-filter-menu-border, 1px solid var(--theme-border-color))
Styles the bottom border of filter menu dropdown
var(--zg-filter-menu-border, 1px solid var(--theme-border-color))
Styles the left border of filter menu dropdown
var(--zg-filter-menu-border, 1px solid var(--theme-border-color))
Styles the right border of filter menu dropdown
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
var(--theme-body-color)
Applies a baseline color to the menu
0.8rem
Sets the font size of filter menu dropdown
var(--zg-filter-menu-background)
Styles the background of filter-menu footer
0
Styles the border of filter-menu footer
var(--zg-filter-menu-footer-border, 0)
Styles the bottom border of filter-menu footer
var(--zg-filter-menu-footer-border, 0)
Styles the left border of filter-menu footer
var(--zg-filter-menu-footer-border, 0)
Styles the right border of filter-menu footer
var(--zg-filter-menu-footer-border, 1px solid var(--theme-border-color))
Styles the top border of filter-menu footer
flex-end
Sets the horizontal alignment of contents in filter-menu footer
0
Sets the margin of filter-menu footer
.875rem 0 0
Sets the padding of filter-menu footer
var(--zg-filter-menu-background)
Styles the background of filter-menu header
0
Styles the border of filter-menu header
var(--zg-filter-menu-header-border, 0)
Styles the bottom border of filter-menu header
var(--zg-filter-menu-header-border, 0)
Styles the left border of filter-menu header
var(--zg-filter-menu-header-border, 0)
Styles the right border of filter-menu header
var(--zg-filter-menu-header-border, 0)
Styles the top border of filter-menu header
Browser's default value
Sets the font color of filter-menu header
16px
Sets the font size of filter-menu header
bold
Sets the font weight of filter-menu header
0
Sets the margin of filter-menu header
0
Sets the padding of filter-menu header
Browser's default value
Styles the font color of text in the input in the filter menu
Browser's default value
Sets the font size of the input in the filter menu
Browser's default value
Sets the height of the input in the dropdown filter menu
5px
Sets the margin of the input in the dropdown filter menu
100%
Sets the width of the input in the dropdown filter menu
var(--theme-color-light)
Sets the background of filter-menu list body
0
Sets the padding of the filter menu dropdown
Browser's default value
Styles the font color of text in the select dropdown filter menu
Browser's default value
Sets the font size of the select dropdown filter menu
Browser's default value
Sets the height of the select dropdown filter menu
5px
Sets the margin of the select dropdown filter menu
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
Browser's default value
Styles the background of grid foot
0
Styles the border of grid foot
var(--zg-foot-border, 0)
Styles the bottom border of grid foot
var(--zg-foot-border, 0)
Styles the left border of grid foot
var(--zg-foot-border, 0)
Styles the right border of grid foot
var(--zg-foot-border, 0)
Styles the top border of grid foot
auto
Sets the height of grid foot
0
Sets the padding of grid foot
0
Styles the background of footer
var(--zg-footer-border, 0)
Styles the bottom border of footer
var(--zg-footer-border, 0)
Styles the left border of footer
var(--zg-footer-border, 0)
Styles the right border of footer
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
Browser's default value
Styles the background of header
0
Styles the border of header
var(--zg-header-border, 0)
Styles the bottom border of header
var(--zg-header-border, 0)
Styles the left border of header
0
Applies border radius to header
var(--zg-header-border, 0)
Styles the right border of header
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
Browser's defaul value
Styles background of menu dropdown
1px solid var(--theme-border-color)
Styles the border of menu dropdown
var(--zg-menu-border, 1px solid var(--theme-border-color))
Styles the bottom border of menu dropdown
var(--zg-menu-border, 1px solid var(--theme-border-color))
Styles the left border of menu dropdown
var(--zg-menu-border, 1px solid var(--theme-border-color))
Styles the right border of menu dropdown
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
0.8rem
Sets the font size of menu dropdown
var(--zg-menu-background)
Styles the background of menu item
var(--zg-menu-item-background, var(--zg-menu-background))
Styles the background of menu item on hover
var(--zg-menu-item-border, 0)
Styles the border of menu item
var(--zg-menu-border-bottom, var(--zg-menu-item-border))
Styles the bottom border of menu item
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
var(--zg-menu-border-left, var(--zg-menu-item-border))
Styles the left border of menu item
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
var(--zg-menu-border-right, var(--zg-menu-item-border))
Styles the border-right of menu item
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
var(--zg-menu-border-top, var(--zg-menu-item-border))
Styles the border-top of menu item
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
var(--zg-menu-item-border)
Styles the border of menu item on hover
var(--zg-menu-color)
Styles the color of menu item
var(--zg-menu-item-color, var(--zg-menu-color))
Styles the color of menu item on hover
flex-start
Sets the horizontal alignment of contents in menu item
var(--zg-menu-item-justify-content, flex-start)
Sets the horizontal alignment of contents in menu item on hover
2px 9px
Sets the padding of menu item
var(--zg-menu-item-padding, 2px 9px)
Sets the padding of menu item on hover
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
Browser's default value
Styles the background of pager
var(--theme-color-primary)
Styles the background of pager buttons in 'button-pagination` mode
var(--theme-color-primary)
Styles the background of active pager buttons in 'button-pagination` mode
var(--theme-color-primary)
Styles the background of pager next/previous buttons in 'cursor-pagination` mode
0
Styles the border of pager
var(--zg-pager-border, 0)
Styles the bottom border of pager
var(--zg-pager-border_button)
Styles the bottom border of pager buttons in 'button-pagination' mode
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
0
Styles the bottom border of pager next/previous buttons in 'cursor-pagination' mode
var(--zg-pager-border, 0)
Styles the left border of pager
var(--zg-pager-border_button)
Styles the left border of pager buttons in 'button-pagination' mode
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
0
Styles the left border of pager next/previous buttons in 'cursor-pagination' mode
50%
Applies border radius to the pager buttons in 'button-pagination' mode
50%
Applies border radius to the pager next/previous buttons in 'button-pagination' mode
50%
Applies border radius to the pager next/previous buttons in 'cursor-pagination' mode
var(--zg-pager-border, 0)
Styles the right border of pager
var(--zg-pager-border_button)
Styles the right border of pager buttons in 'button-pagination' mode
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
0
Styles the right border of pager next/previous buttons in 'cursor-pagination' mode
var(--zg-pager-border)
Styles the top border of pager
var(--zg-pager-border_button)
Styles the top border of pager buttons in 'button-pagination' mode
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
0
Styles the top border of pager next/previous buttons in 'cursor-pagination' mode
1px solid var(--theme-border-color)
Styles the bottom border of pager buttons in 'button-pagination' mode
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
0 5px
Sets the margin of pager items
var(--zing-grid-color), var(--theme-color)
Sets the color of pager text
26px
Sets the color of pager buttons in 'button-text' mode
26px
Sets the color of pager buttons in 'button-pagination' mode
Browser's default value
Sets the font size of pager text
1px
Sets the minimum height of pager
26px
Sets the height of pager buttons in 'button-pagination' mode
26px
Sets the height of active pager buttons in 'button-pagination' mode
21px
Sets the height of pager next/previous buttons in 'cursor-pagination' mode
0
Sets the margin of pager
0 var(--theme-padding_x)
Sets the padding of pager
0 2px
Sets the margin of pager text
26px
Sets the width of pager buttons in 'button-pagination' mode
26px
Sets the width of active pager buttons in 'button-pagination' mode
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