CSS Variables

All CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-body-backgroundtransparentStyles the background of grid body
--zg-body-border0Styles the border of grid body
--zg-body-border-bottomvar(--zg-body-border, 0)Styles the bottom border of grid body
--zg-body-border-leftvar(--zg-body-border, 0)Styles the left border of grid body
--zg-body-border-rightvar(--zg-body-border, 0)Styles the right border of grid body
--zg-body-border-topvar(--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-backgroundlinear-gradient(45deg, #f9fafb 20%, #fff)Styles the background of grid body in 'card' layout-mode
--zg-body-card-border0Styles the border of grid body in 'card' layout-mode
--zg-body-card-border-bottomvar(--zg-body-card-border, 0)Styles the bottom border of grid body in 'card' layout-mode
--zg-body-card-border-leftvar(--zg-body-card-border, 0)Styles the left border of grid body in 'card' layout-mode
--zg-body-card-border-rightvar(--zg-body-card-border, 0)Styles the right border of grid body in 'card' layout-mode
--zg-body-card-border-topvar(--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-displaygridSets display of grid body in 'card' layout-mode
--zg-body-colorinheritSets the font color of contents inside grid body
--zg-body-font-familyinheritSets the font family of contents inside grid body
--zg-body-font-sizeinheritSets the font size of contents inside grid body
--zg-body-font-styleinheritSets the font style of contents inside grid body
--zg-body-font-weightinheritSets the font weight of contents inside grid body
--zg-body-line-heightinheritSets the line-height of contents inside of grid body
--zg-button-backgroundBrowser's default valueStyles the background of button
--zg-button-background_activevar(--theme-background-color)Styles of background of button on active state
--zg-button-background_customBrowser's default valueStyles the background of custom button
--zg-button-background_custom_activeBrowser's default valueStyles the background of custom button on active state
--zg-button-background_custom_focusBrowser's default valueStyles the background of custom button on focus
--zg-button-background_custom_hoverBrowser's default valueStyles the background of custom button on hover
--zg-button-background_focusBrowser's default valueStyles the background of button on focus
--zg-button-background_hoverBrowser's default valueStyles the background of button on hover
--zg-button-borderBrowser's default valueStyles the border of a button
--zg-button-border-bottomBrowser's default valueStyles the bottom border of a button
--zg-button-border-bottom_activeBrowser's default valueStyles the bottom border of a button on active state
--zg-button-border-bottom_focusBrowser's default valueStyles the bottom border of a button on focus
--zg-button-border-bottom_hoverBrowser's default valueStyles the bottom border of a button on hover
--zg-button-border-leftBrowser's default valueStyles the left border of a button
--zg-button-border-left_activeBrowser's default valueStyles the left border of a button on active state
--zg-button-border-left_focusBrowser's default valueStyles the left border of a button on focus
--zg-button-border-left_hoverBrowser's default valueStyles the left border of a button on hover
--zg-button-border-rightBrowser's default valueStyles the right border of a button
--zg-button-border-right_activeBrowser's default valueStyles the right border of a button on active state
--zg-button-border-right_focusBrowser's default valueStyles the right border of a button on focus
--zg-button-border-right_hoverBrowser's default valueStyles the right border of a button on hover
--zg-button-border-topBrowser's default valueStyles the top border of a button
--zg-button-border-top_activeBrowser's default valueStyles the top border of a button on active state
--zg-button-border-top_focusBrowser's default valueStyles the top border of a button on focus
--zg-button-border-top_hoverBrowser's default valueStyles the top border of a button on hover
--zg-button-border_activeBrowser's default valueStyles the border of a button on active state
--zg-button-border_customBrowser's default valueStyles the border of custom button
--zg-button-border_custom_activeBrowser's default valueStyles the border of custom button on active state
--zg-button-border_custom_focusBrowser's default valueStyles the border of custom button on focus
--zg-button-border_custom_hoverBrowser's default valueStyles the border of custom button on hover
--zg-button-border_focusBrowser's default valueStyles the border of a button on focus state
--zg-button-border_hoverBrowser's default valueStyles the border of a button on hover state
--zg-button-box-shadowBrowser's default valueStyles the box-shadow of the button
--zg-button-box-shadow_activeBrowser's default valueStyles the box-shadow of the button on activation
--zg-button-box-shadow_customBrowser's default valueApplies a box shadow behind custom button
--zg-button-box-shadow_custom_activeBrowser's default valueApplies a box shadow behind custom button on active state
--zg-button-box-shadow_custom_focusBrowser's default valueApplies a box shadow behind custom button on focus
--zg-button-box-shadow_custom_hoverBrowser's default valueApplies a box shadow behing custom button on hover
--zg-button-box-shadow_hoverBrowser's default valueStyles the box-shadow of the button on hover
--zg-button-box-shadow_hoverBrowser's default valueStyles the box-shadow of the button on hover
--zg-button-colorBrowser's default valueSets the font color of button
--zg-button-color_activeBrowser's default valueStyles the color of the button on active state
--zg-button-color_custom_activeBrowser's default valueSets the font color of custom button on active state
--zg-button-color_custom_focusBrowser's default valueSets the font color of custom button on focus
--zg-button-color_custom_hoverBrowser's default valueSets the font color of custom button on hover
--zg-button-color_focusBrowser's default valueStyles the color of the button on focus
--zg-button-color_hoverBrowser's default valueStyles the color of the button on hover
--zg-button-font-familyinheritSets the font family of button
--zg-button-font-size90%Sets the font size of button
--zg-button-font-styleinheritSets the font style of button
--zg-button-font-weightinheritSets the font weight of button
--zg-button-icon-background_custom_hover#fffStyles the background of icon in custom button on hover
--zg-button-icon-background_hover#fffStyles the background of the icon in a button on hover state
--zg-button-line-heightinheritSets the line height of button
--zg-button-margin0Sets the margin of button
--zg-button-opacity_disabled0.2Styles the opacity of disabled button or button on hover
--zg-button-padding3pxSets the padding of button
--zg-button-transition_speedvar(--theme-transition_speed)Sets the transition speed of button
--zg-button-transition_speedvar(--theme-transition_speed)Sets the transition speed of button
--zg-caption-align-itemscenterSets the vertical alignment of items (title and toolbar) in caption
--zg-caption-backgroundBrowser's default valueStyles the background of caption
--zg-caption-border0Styles the border of caption
--zg-caption-border-bottomvar(--zg-caption-border, 0)Styles the bottom border of caption
--zg-caption-border-leftvar(--zg-caption-border, 0)Styles the left border of caption
--zg-caption-border-radius0Applies a border-radius to the caption
--zg-caption-border-rightvar(--zg-caption-border, 0)Styles the right border of caption
--zg-caption-border-topvar(--zg-caption-border, 0)Styles the top border of caption
--zg-caption-box-shadownoneApplies a box shadow behind caption
--zg-caption-button-backgroundvar(--zg-button-background)Styles the background of button in caption
--zg-caption-button-background_activevar(--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_focusvar(--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_hovervar(--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-colorBrowser's default valueSets the font color of caption
--zg-caption-flex-directionrowSets the flex direction of items (title and toolbar) in caption
--zg-caption-font-familyBrowser's default valueSets the font family of caption
--zg-caption-font-size1.25remSets the font size of caption
--zg-caption-font-styleBrowser's default valueSets the font style of caption
--zg-caption-font-weightBrowser's default valueSets the font weight of caption
--zg-caption-heightBrowser's default valueSets the height of caption
--zg-caption-margin0Sets the margin of caption
--zg-caption-opacityBrowser's default valueSets the opacity of caption
--zg-caption-padding0 var(--theme-padding_x)Sets the padding of caption
--zg-caption-title-align-selfcenterSets vertical alignment of items in caption title
--zg-caption-title-flex0 1 autoSets how items are flexed in caption title
--zg-caption-title-font-familyinheritSets the font-family of caption title
--zg-caption-title-font-sizeinheritSets the font size of caption title
--zg-caption-title-font-styleinheritSets the font style of caption title
--zg-caption-title-font-weightinheritSets the font weight of caption title
--zg-caption-title-margin0Sets the margin of caption title
--zg-caption-title-orderBrowser's default valueSets the order of caption title with respect to caption toolbar
--zg-caption-title-padding0Sets the padding of caption title
--zg-caption-title-text-aligninheritSets the text alignment of caption title
--zg-caption-title-transformnoneSets the transform of caption title
--zg-caption-title-width100%Sets the width of caption title
--zg-caption-toolbar-align-selfBrowser's default valueSets vertical alignment of items in caption toolbar
--zg-caption-toolbar-bottomBrowser's default valueSets the position from bottom of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-justify-contentflex-startSets the horizontal alignment of contents in caption toolbar
--zg-caption-toolbar-leftautoSets the left of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-margin0Sets the margin of caption toolbar
--zg-caption-toolbar-positionBrowser's default valueSets the position of caption toolbar
--zg-caption-toolbar-rightautoSets the right of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-topautoSets the top of caption toolbar. To apply, set --zg-caption-toolbar-position.
--zg-caption-toolbar-transformnoneSets the transform of caption toolbar
--zg-caption-toolbar-widthautoSets the width of caption toolbar
--zg-caption-transitionBrowser's default valueSets the transition of caption
--zg-cell-backgroundvar(--zg-cell-background)Styles the background of cells
--zg-cell-background_hoverBrowser's default valueStyles the background of cells on hover
--zg-cell-background_hover_layout_rowvar(--zg-cell-background_hover)Styles the background of cells in 'row' layout-mode on hover
--zg-cell-background_layout_cardBrowser's default valueStyles the background of cards in 'card' layout-mode
--zg-cell-background_layout_rowvar(--zg-cell-background)Styles the background of cells in 'row' layout-mode
--zg-cell-background_layout_row_sortedvar(--zg-cell-background_sorted)Styles the background of cells in sorted column in 'row' layout-mode
--zg-cell-background_sortedBrowser's default valueStyles the background of cells in sorted column
--zg-cell-border0Styles the border of cells
--zg-cell-border-bottomvar(--zg-cell-border, 0)Styles the bottom border of cells
--zg-cell-border-bottom_layout_cardvar(--zg-card-border, 0)Styles the bottom border of cards in 'card' layout-mode
--zg-cell-border-bottom_layout_rowvar(--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-leftvar(--zg-cell-border, 0)Styles the left border of cells
--zg-cell-border-left_layout_cardvar(--zg-card-border, 0)Styles the left border of cards in 'card' layout-mode
--zg-cell-border-left_layout_rowvar(--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-rightvar(--zg-cell-border, 0)Styles the right border of cells
--zg-cell-border-right_layout_cardvar(--zg-card-border, 0)Styles the right border of cards in 'card' layout-mode
--zg-cell-border-right_layout_rowvar(--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-topvar(--zg-cell-border, 0)Styles the top border of cells
--zg-cell-border-top_layout_cardvar(--zg-card-border, 0)Styles the top border of cards in 'card' layout-mode
--zg-cell-border-top_layout_rowvar(--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_card0Styles the border of cards in 'card' layout-mode
--zg-cell-border_layout_rowvar(--zg-cell-border-bottom, var(--zg-cell-border, 0))Styles the border of cells in 'row' layout-mode
--zg-cell-colorinheritStyles font color of text in cells
--zg-cell-color_hovervar(--zg-cell-color)Styles font color of cells on hover
--zg-cell-color_hover_layout_rowvar(--zg-cell-color_hover, var(--zg-cell-color))Styles font color of cells in 'row' layout-mode on hover
--zg-cell-color_layout_cardinheritSets the font color of cards in 'card' layout-mode
--zg-cell-color_layout_rowvar(--zg-cell-color, inherit)Styles font color of text in cells in 'row' layout-mode
--zg-cell-color_layout_row_sortedvar(--zg-cell-color_sorted, var(--zg-cell-color))Sets the font color of cells in sorted column in 'row' layout-mode
--zg-cell-color_sortedvar(--zg-cell-color)Sets the font color of cells in sorted column
--zg-cell-content-border-bottom_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the bottom border of card items in 'card' layout-mode
--zg-cell-content-border-left_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the left border of card items in 'card' layout-mode
--zg-cell-content-border-right_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the right border of card items in 'card' layout-mode
--zg-cell-content-border-top_layout_cardvar(--zg-cell-content-border_layout_card, 0)Styles the top border of card items in 'card' layout-mode
--zg-cell-content-border_layout_card0Styles the border of card items in 'card' layout-mode
--zg-cell-content-font-size_layout_cardinheritSets the font size of cards in 'card' layout-mode
--zg-cell-content-padding_layout_card3px 0Sets the padding of cards in 'card' layout-mode
--zg-cell-dirty-edit-border-colorred;Sets the color of the dirty cell marker
--zg-cell-dirty-edit-border-width7pxSets the border width of the dirty cell marker
--zg-cell-font-familyinheritSets the font family in cells
--zg-cell-font-family_layout_cardinheritSets the font family of cards in 'card' layout-mode
--zg-cell-font-family_layout_rowvar(--zg-cell-font-family, inherit)Sets the font family in cells in 'row' layout-mode
--zg-cell-font-sizeinheritSets the font size in cells
--zg-cell-font-size_layout_cardinheritSets the font size of cards in 'card' layout-mode
--zg-cell-font-size_layout_rowvar(--zg-cell-font-size, inherit)Sets the font size in cells in 'row' layout-mode
--zg-cell-font-styleinheritSets the font style in cells
--zg-cell-font-style_layout_cardinheritSets the font family of cards in 'card' layout-mode
--zg-cell-font-style_layout_rowvar(--zg-cell-font-style, inherit)Sets the font style in cells in 'row' layout-mode
--zg-cell-font-weightinheritSets the font weight in cells
--zg-cell-font-weight_layout_cardinheritSets the font weight of cards in 'card' layout-mode
--zg-cell-font-weight_layout_rowvar(--zg-cell-font-weight, inherit)Sets the font weight in cells in 'row' layout-mode
--zg-cell-heightautoSets height of cells
--zg-cell-height_layout_cardautoSets the height of cards in 'card' layout-mode
--zg-cell-height_layout_rowvar(--zg-cell-height, auto)Sets height of cells in 'row' layout-mode
--zg-cell-label-color_layout_cardvar(--theme-color-primary)Sets font color of label in cards in 'card' layout-mode
--zg-cell-label-display_layout_cardflexSets the display of label in cards in 'card' layout-mode
--zg-cell-label-font-size_layout_card85%Sets font size of label in cards in 'card' layout-mode
--zg-cell-label-font-weight_layout_cardBrowser's default valueSets font weight of label in cards in 'card' layout-mode
--zg-cell-label-margin_layout_card0 0 2pxSets the margin of label in cards in 'card' layout-mode
--zg-cell-label-overflow_layout_cardBrowser's default valueSets the overflow of label in cards in 'card' layout-mode
--zg-cell-label-transform_layout_cardBrowser's default valueSets transform of label in cards in 'card' layout-mode
--zg-cell-line-heightinheritSets line height of cells
--zg-cell-line-height_layout_cardinheritSets the line height of cards in 'card' layout-mode
--zg-cell-line-height_layout_rowvar(--zg-cell-line-height, inherit)Sets line height of cells in 'row' layout-mode
--zg-cell-paddingvar(--theme-padding_y) var(--theme-padding_x)Sets padding of cells
--zg-cell-padding_layout_cardvar(--theme-padding_y) var(--theme-padding_x)Sets the padding of cards in 'card' layout-mode
--zg-cell-padding_layout_rowvar(--zg-cell-padding, var(--theme-padding_y) var(--theme-padding_x))Sets padding of cells in 'row' layout-mode
--zg-cell-transitionBrowser's default valueSets the transition of cells
--zg-cell-transition_layout_cardBrowser's default valueSets the transition of cards in 'card' layout-mode
--zg-cell-transition_layout_rowvar(--zg-cell-transition)Sets the transition of cells in 'row' layout-mode
--zg-cell-vertical-alignmiddleSets vertical alignment of items in cells
--zg-cell-vertical-align_layout_rowvar(--zg-cell-vertical-align, middle)Sets vertical alignment of items in cells in 'row' layout-mode
--zg-cell-word-break_layout_cardbreak-allSets the word break of items in cards in 'card' layout-mode
--zg-column-resize-backgroundnoneSets the background of the resize handle
--zg-column-resize-height40%Sets the height of the resize handle
--zg-column-resize-top30%Sets the top position of the resize handle
--zg-column-resize-width4pxSets the width of the resize handle
--zg-control-bar-backgroundBrowser's default valueStyles the background of control-bar
--zg-control-bar-border1px solid var(--theme-border-color)Styles the border of control-bar
--zg-control-bar-border-bottomvar(--zg-control-bar-border, 1px solid var(--theme-border-color))Styles the bottom border of control-bar
--zg-control-bar-border-leftvar(--zg-control-bar-border, 0)Styles the left border of control-bar
--zg-control-bar-border-rightvar(--zg-control-bar-border, 0)Styles the right border of control-bar
--zg-control-bar-border-topvar(--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-contentflex-endSets the horizontal alignment of contents in inner layout container
--zg-control-bar-margin0Sets the margin of control-bar
--zg-control-bar-min-height30pxSets the min-height of control bar
--zg-control-bar-padding2px var(--theme-padding_x) 2px calc(var(--theme-padding_x) - 6px)Sets the padding of control-bar
--zg-control-bar-visibilityvisibleSets the visibility of component
--zg-dialog-background#fffStyles the background of dialog header
--zg-dialog-body-backgroundvar(--zg-dialog-background)Styles the background of dialog body
--zg-dialog-body-border0Styles the border of dialog body
--zg-dialog-body-border-bottomvar(--zg-dialog-body-border, 0)Styles the bottom border of dialog body
--zg-dialog-body-border-leftvar(--zg-dialog-body-border, 0)Styles the left border of dialog body
--zg-dialog-body-border-rightvar(--zg-dialog-body-border, 0)Styles the right border of dialog body
--zg-dialog-body-border-topvar(--zg-dialog-body-border, 0)Styles the top border of dialog body
--zg-dialog-body-margin10px 0Sets the margin of dialog body
--zg-dialog-body-padding0Sets the padding of dialog body
--zg-dialog-footer-backgroundvar(--zg-dialog-background)Styles the background of dialog footer
--zg-dialog-footer-border0Styles the border of dialog footer
--zg-dialog-footer-border-bottomvar(--zg-dialog-footer-border, 0)Styles the bottom border of dialog footer
--zg-dialog-footer-border-leftvar(--zg-dialog-footer-border, 0)Styles the left border of dialog footer
--zg-dialog-footer-border-rightvar(--zg-dialog-footer-border, 0)Styles the right border of dialog footer
--zg-dialog-footer-border-topvar(--zg-dialog-footer-border, 1px solid var(--theme-border-color))Styles the top border of dialog footer
--zg-dialog-footer-justify-contentflex-endSets the horizontal alignment of contents in dialog footer
--zg-dialog-footer-margin1.25rem 0 0Sets the margin of dialog footer
--zg-dialog-footer-padding.875rem 0 0Sets the padding of dialog footer
--zg-dialog-header-backgroundvar(--zg-dialog-background)Styles the background of dialog header
--zg-dialog-header-border0Styles the border of dialog header
--zg-dialog-header-border-bottomvar(--zg-dialog-header-border, 0)Styles the bottom border of dialog header
--zg-dialog-header-border-leftvar(--zg-dialog-header-border, 0)Styles the left border of dialog header
--zg-dialog-header-border-rightvar(--zg-dialog-header-border, 0)Styles the right border of dialog header
--zg-dialog-header-border-topvar(--zg-dialog-header-border, 0)Styles the top border of dialog header
--zg-dialog-header-colorBrowser's default valueSets the font folor of dialog header
--zg-dialog-header-margin0Sets the margin of dialog header
--zg-dialog-header-padding0Sets the padding of dialog header
--zg-editor-row-input-background#f5f5f5Styles the background of editor row
--zg-editor-row-input-background_focusvar(--theme-color-lighter)Styles the background of editor row input on focus
--zg-editor-row-input-border1px solid rgba(82, 168, 236, 0.8)Styles the border of editor row
--zg-editor-row-input-border-bottomvar(--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-leftvar(--zg-editor-row-input-border, 0)Styles the left border of editor row
--zg-editor-row-input-border-rightvar(--zg-editor-row-input-border, 0)Styles the right border of editor row
--zg-editor-row-input-border-topvar(--zg-editor-row-input-border, 0)Styles the top border of editor row
--zg-editor-row-input-box-shadow_focusinset 0 0 5px #cccApplies a box shadow behind editor row input on focus
--zg-editor-row-input-colorvar(--zg-editor-row-input-color, #fff)Sets the font color of editor row
--zg-editor-row-input-padding12px 15pxSets the padding of editor row
--zg-filter-backgroundBrowser's default valueStyles the background of filter
--zg-filter-background_sortedBrowser's default valueStyles the background color of filter when the column in sorted
--zg-filter-border0Styles the border of filter
--zg-filter-border-bottomvar(--zg-filter-border, 0)Styles the bottom border of filter
--zg-filter-border-leftvar(--zg-filter-border, 0)Styles the left border of filter
--zg-filter-border-rightvar(--zg-filter-border, 0)Styles the right border of filter
--zg-filter-border-topvar(--zg-filter-border, 1px solid var(--theme-border-color))Styles the top border of filter
--zg-filter-colorvar(--theme-color_alt)Sets the font color of text inputted in filter
--zg-filter-heightBrowser's default valueSets the height of filter
--zg-filter-input-backgroundBrowser's default valueStyles the background of input field in filter
--zg-filter-input-background_sortedBrowser's default valueStyles the background of input field in filter when sorted
--zg-filter-input-border0Styles the border of input field in filter
--zg-filter-input-border-bottomvar(--zg-filter-input-border)Styles the bottom border of input field in filter
--zg-filter-input-border-bottom_sortedvar(--zg-filter-input-border)Styles the bottom border of input field in filter when sorted
--zg-filter-input-border-leftvar(--zg-filter-input-border)Styles the left border of input field in filter
--zg-filter-input-border-left_sortedvar(--zg-filter-input-border)Styles the left border of input field in filter when sorted
--zg-filter-input-border-radiusBrowser's default valueApplies a border radius to filter input
--zg-filter-input-border-radius_sortedBrowser's default valueApplies border radius to filter input when sorted
--zg-filter-input-border-rightvar(--zg-filter-input-border)Styles the right border of input field in filter
--zg-filter-input-border-right_sortedvar(--zg-filter-input-border)Styles the right border of input field in filter when sorted
--zg-filter-input-border-topvar(--zg-filter-input-border)Styles the top border of input field in filter
--zg-filter-input-border-top_sortedvar(--zg-filter-input-border)Styles the top border of input field in filter when sorted
--zg-filter-input-border_sorted0Styles the border of input field in filter when sorted
--zg-filter-input-colorBrowser's default valueStyles the font color of text in input field of filter
--zg-filter-input-color_sortedBrowser's default valueStyles the font color of text in input field of filter when sorted
--zg-filter-input-font-sizeBrowser's default valueSets the font size of filter input
--zg-filter-input-height20pxSets 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-margin0 var(--theme-padding_x)Sets the margin of filter input
--zg-filter-input-padding0 0 0 5pxSets 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-paddingA cell's left and right paddingSets the padding of the filter
--zg-filter-select-colorBrowser's default valueStyles the font color of text in the select dropdown filter
--zg-filter-select-font-sizeBrowser's default valueSets the font size of the select dropdown filter
--zg-filter-select-heightBrowser's default valueSets the height of the select dropdown filter
--zg-filter-select-marginBrowser's default valueSets the width of the select dropdown filter
--zg-filter-select-marginBrowser's default valueSets the margin of the select dropdown filter
--zg-focus-border2px solid var(--theme-color-primary)Styles the border of cells on focus
--zg-focus-border-bottomvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the bottom border of cells on focus
--zg-focus-border-leftvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the left border of cells on focus
--zg-focus-border-rightvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the right border of cells on focus
--zg-focus-border-topvar(--zg-focus-border, 2px solid var(--theme-color-primary))Sets the top border of cells on focus
--zg-focus-bottom-transformnoneSets the transform of bottom border of cells on focus
--zg-focus-left-transformnoneSets the transform of left border of cells on focus
--zg-focus-right-transformnoneSets the transform of right border of cells on focus
--zg-focus-top-transformnoneSets the transform of top border of cells on focus
--zg-foot-backgroundBrowser's default valueStyles the background of grid foot
--zg-foot-border0Styles the border of grid foot
--zg-foot-border-bottomvar(--zg-foot-border, 0)Styles the bottom border of grid foot
--zg-foot-border-leftvar(--zg-foot-border, 0)Styles the left border of grid foot
--zg-foot-border-rightvar(--zg-foot-border, 0)Styles the right border of grid foot
--zg-foot-border-topvar(--zg-foot-border, 0)Styles the top border of grid foot
--zg-foot-heightautoSets the height of grid foot
--zg-foot-padding0Sets the padding of grid foot
--zg-footer-background0Styles the background of footer
--zg-footer-border-bottomvar(--zg-footer-border, 0)Styles the bottom border of footer
--zg-footer-border-leftvar(--zg-footer-border, 0)Styles the left border of footer
--zg-footer-border-rightvar(--zg-footer-border, 0)Styles the right border of footer
--zg-footer-border-topvar(--zg-footer-border, 0)Styles the top border of footer
--zg-head-backgroundBrowser's default valueStyles the background of grid head rows
--zg-head-border1px solid var(--theme-border-color)Styles the border of grid head rows
--zg-head-border-bottomvar(--zg-head-border, 1px solid var(--theme-border-color))Styles the bottom border of grid head rows
--zg-head-border-leftvar(--zg-head-border, 0)Styles the left border of grid head rows
--zg-head-border-radiusvar(--zg-head-border-radius)Styles the border-radius of grid head rows
--zg-head-border-rightvar(--zg-head-border, 0)Styles the right border of grid head rows
--zg-head-border-topvar(--zg-head-border)Styles the top border of grid head rows
--zg-head-cell-backgroundtransparentStyles the background of head cells
--zg-head-cell-background_hovervar(--zg-head-cell-backgroundStyles the background of head cells on hover
--zg-head-cell-background_sortedinheritStyles the background of sorted head cells
--zg-head-cell-background_sorted_hovervar(--zg-head-cell-background_sorted, inherit)Styles the background of sorted head cells on hover
--zg-head-cell-border0Styles the border of head cells
--zg-head-cell-border-bottomvar(--zg-head-cell-border, 0)Styles the bottom border of head cells
--zg-head-cell-border-bottom_sortedvar(--zg-head-cell-border_sorted, 0)Styles the bottom border of sorted head cells
--zg-head-cell-border-bottom_sorted_hovervar(--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-leftvar(--zg-head-cell-border, 0)Styles the left border of head cells
--zg-head-cell-border-left_sortedvar(--zg-head-cell-border_sorted, 0)Styles the left border of sorted head cells
--zg-head-cell-border-left_sorted_hovervar(--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-rightvar(--zg-head-cell-border, 0)Styles the right border of head cells
--zg-head-cell-border-right_sortedvar(--zg-head-cell-border_sorted, 0)Styles the right border of sorted head cells
--zg-head-cell-border-topvar(--zg-head-cell-border, 0)Styles the top border of head cells
--zg-head-cell-border-top_sortedvar(--zg-head-cell-border_sorted, 0)Styles the top border of sorted head cells
--zg-head-cell-border_sorted0Styles the border of sorted head cells
--zg-head-cell-colorBrowser's default valueSets the font color of head cells
--zg-head-cell-color_hovervar(--zg-head-cell-color)Sets the font color of head cells on hover
--zg-head-cell-color_sortedvar(--zg-head-cell-color)Sets the font color of sorted head cells
--zg-head-cell-color_sorted_hovervar(--zg-head-cell-color_sorted, var(--zg-head-cell-color))Sets the font color of sorted head cells on hover
--zg-head-cell-font-familyBrowser's default valueSets the font family of head cells
--zg-head-cell-font-sizeBrowser's default valueSets the font size of head cells
--zg-head-cell-font-weightBrowser's default valueSets the font weight of head cells
--zg-head-cell-icon-color_sortedvar(--theme-color)Sets the fill color of icon in sorted head cells
--zg-head-cell-icon-marginBrowser's default valueSets the margin of child icons in head cells
--zg-head-cell-icon-marginBrowser's default valueSets the margin of child icons in head cells
--zg-head-cell-inner-paddingBrowser's default valueSets the padding of head cells inner content
--zg-head-cell-justify-contentBrowser's default valueSets the horizontal alignment of contents in head cells
--zg-head-cell-paddingBrowser's default valueSets the padding of head cells
--zg-head-cell-parent-backgroundvar(--zg-head-cell-background)Styles the background of parent head cells
--zg-head-cell-parent-background_hovervar(--zg-head-cell-background_hover)Styles the background of parent head cells on hover
--zg-head-cell-parent-bordervar(--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-bottomvar(--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-leftvar(--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-rightvar(--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-topvar(--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-colorvar(--zg-head-cell-color)Sets the font color of parent head cells
--zg-head-cell-parent-color_hovervar(--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-sizevar(--zg-head-cell-font-size)Sets the font-size of parent head cells
--zg-head-cell-parent-font-weightvar(--zg-h -cell-font-weight)Sets the font weight of parent head cells
--zg-head-cell-parent-paddingvar(--zg-head-cell-padding)Sets the padding of parent head cells
--zg-head-cell-transitionBrowser's default valueSets the transition of head cells
--zg-head-visibilityBrowser's default valueSets the visibility of grid head rows
--zg-header-backgroundBrowser's default valueStyles the background of header
--zg-header-border0Styles the border of header
--zg-header-border-bottomvar(--zg-header-border, 0)Styles the bottom border of header
--zg-header-border-leftvar(--zg-header-border, 0)Styles the left border of header
--zg-header-border-radius0Applies border radius to header
--zg-header-border-rightvar(--zg-header-border, 0)Styles the right border of header
--zg-header-border-topvar(--zg-header-border, 0)Styles the top border of header
--zg-icon-colorvar(--theme-color-primary)Sets the fill color of icon
--zg-icon-heightBrowser's default valueSets the height of icon. Also set width using --zg-icon-width to scale icon.
--zg-icon-init-fillBrowser's default valueSets 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-widthBrowser's default valueSets the width of icon. Also set height using --zg-icon-height to scale icon.
--zg-input-background#fffStyles the background of input field
--zg-input-border1px solid var(--theme-border-color)Styles the border of input field
--zg-input-border-bottomvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the bottom border of input field
--zg-input-border-bottom_focusvar(--zg-input-border_focus, 1px solid rgba(82, 168, 236, 0.8))Styles the bottom border of input field on focus
--zg-input-border-leftvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the left border of input field
--zg-input-border-left_focusvar(--zg-input-border_focus, )))Styles the left border of input field on focus
--zg-input-border-radiusBrowser's default valueApplies a border radius to the input
--zg-input-border-rightvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the right border of input field
--zg-input-border-right_focusvar(--zg-input-border_focus, )))Styles the right border of input field in modal on focus
--zg-input-border-topvar(--zg-input-border, 1px solid var(--theme-border-color))Styles the top border of input field
--zg-input-border-top_focusvar(--zg-input-border_focus, )))Styles the top border of input field in modal on focus
--zg-input-border_focus1px solid rgba(82, 168, 236, 0.8)Styles the border of input field on focus
--zg-input-box-shadownoneApplies a box shadow behind input field
--zg-input-colorvar(--zing-grid-color, var(--theme-color))Sets the font color of input field
--zg-input-color_focusvar(--zg-input-color)Sets the font color of input field in modal on focus
--zg-input-font-familyinheritSets the font family of input field
--zg-input-font-sizeinheritSets the font size of input field
--zg-input-font-size_focusinheritSets the font size of input field on focus
--zg-input-font-styleinheritSets the font style of input field
--zg-input-font-weightinheritSets the font weight of input field
--zg-input-height28pxSets the height of input field
--zg-input-line-heightinheritSets the line height of input field
--zg-input-margin0Sets the margin of input field
--zg-input-padding0 6pxSets the padding of input field
--zg-input-text-aligncenterSets the text alignment of input field
--zg-input-transformBrowser's default valueSets the transform of input field
--zg-input-transform_focusBrowser's default valueSets the transform of input field in modal on focus
--zg-input-width28pxSets the width of input field
--zg-load-mask-color#fffSets the font color of the loading text
--zg-menu-backgroundBrowser's defaul valueStyles background of menu dropdown
--zg-menu-border1px solid var(--theme-border-color)Styles the border of menu dropdown
--zg-menu-border-bottomvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the bottom border of menu dropdown
--zg-menu-border-leftvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the left border of menu dropdown
--zg-menu-border-rightvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the right border of menu dropdown
--zg-menu-border-topvar(--zg-menu-border, 1px solid var(--theme-border-color))Styles the top border of menu dropdown
--zg-menu-box-shadow0 3px 3px #cccApplies a box shadow to menu dropdown
--zg-menu-font-size0.8remSets the font size of menu dropdown
--zg-menu-item-backgroundvar(--zg-menu-background)Styles the background of menu item
--zg-menu-item-background_hovervar(--zg-menu-item-background, var(--zg-menu-background))Styles the background of menu item on hover
--zg-menu-item-bordervar(--zg-menu-border)Styles the border of menu item
--zg-menu-item-border-bottomvar(--zg-menu-border-bottom, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the bottom border of menu item
--zg-menu-item-border-bottom_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-bottom, var(--zg-menu-border-bottom, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the bottom border of menu item on hover
--zg-menu-item-border-leftvar(--zg-menu-border-left, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the left border of menu item
--zg-menu-item-border-left_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-left, var(--zg-menu-border-left, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the left border of menu item on hover
--zg-menu-item-border-rightvar(--zg-menu-border-right, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the border-right of menu item
--zg-menu-item-border-right_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-right, var(--zg-menu-border-right, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the right border of menu item on hover
--zg-menu-item-border-topvar(--zg-menu-border-top, var(--zg-menu-item-border, var(--zg-menu-border)))Styles the border-top of menu item
--zg-menu-item-border-top_hovervar(--zg-menu-item-border_hover, var(--zg-menu-item-border-top, var(--zg-menu-border-top, var(--zg-menu-item-border, var(--zg-menu-border)))))Styles the top border of menu item on hover
--zg-menu-item-border_hovervar(--zg-menu-item-border, var(--zg-menu-border))Styles the border of menu item on hover
--zg-menu-item-colorvar(--zg-menu-color)Styles the color of menu item
--zg-menu-item-color_hovervar(--zg-menu-item-color, var(--zg-menu-color))Styles the color of menu item on hover
--zg-menu-item-displayinline-flexStyles the display of menu item
--zg-menu-item-justify-contentflex-startSets the horizontal alignment of contents in menu item
--zg-menu-item-justify-content_hovervar(--zg-menu-item-justify-content, flex-start)Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-justify-content_hovervar(--zg-menu-item-justify-content, flex-start)Sets the horizontal alignment of contents in menu item on hover
--zg-menu-item-padding2px 9pxSets the padding of menu item
--zg-menu-item-padding_hovervar(--zg-menu-item-padding, 2px 9px)Sets the padding of menu item on hover
--zg-menu-padding0Sets the padding of menu dropdown
--zg-no-data-backgroundvar(--theme-color-light)Styles the background of empty message when in ``
--zg-no-data-border1px solid var(--theme-border-color)Styles the border of empty message when in ``
--zg-no-data-border-bottomvar(--zg-no-data-border, 0)Styles the bottom border of empty message when in ``
--zg-no-data-border-leftvar(--zg-no-data-border, 0)Styles the left border of empty message when in ``
--zg-no-data-border-radius0Styles the border radius of empty message
--zg-no-data-border-rightvar(--zg-no-data-border, 0)Styles the right border of empty message when in ``
--zg-no-data-border-topvar(--zg-no-data-border, 1px solid var(--theme-border-color)Styles the top border of empty message when in ``
--zg-no-data-colorvar(--theme-font-size)Sets the font color content inside of empty message when in ``
--zg-no-data-font-sizeinheritSets the font size of empty message
--zg-no-data-font-styleinheritSets the font style of empty message
--zg-no-data-font-weightinheritSets the font weight of empty message
--zg-no-data-line-heightinheritSetes the line height of empty message
--zg-no-data-min-heightautoSets the min-height of empty message
--zg-no-data-paddingvar(--zg-cell-height, var(--theme-padding_x, auto))) var(--theme-padding_x)Sets the padding of empty message
--zg-no-data-text-alignleftSets text alignment of content inside of empty message
--zg-option-list-background#fffStyles the background of option list
--zg-option-list-border1px solid var(--theme-border-color)Styles the border of option list
--zg-option-list-border-bottomvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the bottom border of option list
--zg-option-list-border-leftvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the left border of option list
--zg-option-list-border-rightvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the right border of option list
--zg-option-list-border-topvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the bottom top of option list
--zg-option-list-colorBrowser's default valueStyles the color of option list item
--zg-option-list-item-background_hovervar(--theme-color-secondary)Sets the background of option list item on hover
--zg-option-list-item-border0Styles the border of option list item
--zg-option-list-item-border-bottomvar(--zg-option-list-item-border, 0)Styles the bottom border of option list item
--zg-option-list-item-border-leftvar(--zg-option-list-item-border, 0)Styles the left border of option list item
--zg-option-list-item-border-rightvar(--zg-option-list-item-border, 0)Styles the right border of option list item
--zg-option-list-item-border-topvar(--zg-option-list-item-border, 0)Styles the top border of option list item
--zg-option-list-item-height32pxSets the height of option list item
--zg-option-list-item-line-height32pxSets the line height of option list item
--zg-option-list-item-padding0 15pxSets the padding of option list item
--zg-pager-backgroundBrowser's default valueStyles the background of pager
--zg-pager-background_buttonvar(--theme-color-primary)Styles the background of pager buttons in 'button-pagination` mode
--zg-pager-background_button_activevar(--theme-color-primary)Styles the background of active pager buttons in 'button-pagination` mode
--zg-pager-background_cursorvar(--theme-color-primary)Styles the background of pager next/previous buttons in 'cursor-pagination` mode
--zg-pager-border0Styles the border of pager
--zg-pager-border-bottomvar(--zg-pager-border, 0)Styles the bottom border of pager
--zg-pager-border-bottom_buttonvar(--zg-pager-border_button)Styles the bottom border of pager buttons in 'button-pagination' mode
--zg-pager-border-bottom_button_activevar(--zg-pager-border_button_active)Styles the bottom border of active pager buttons in 'button-pagination' mode
--zg-pager-border-bottom_cursor0Styles the bottom border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-leftvar(--zg-pager-border, 0)Styles the left border of pager
--zg-pager-border-left_buttonvar(--zg-pager-border_button)Styles the left border of pager buttons in 'button-pagination' mode
--zg-pager-border-left_button_activevar(--zg-pager-border_button_active)Styles the left border of active pager buttons in 'button-pagination' mode
--zg-pager-border-left_cursor0Styles the left border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-radius_button50%Applies border radius to the pager buttons in 'button-pagination' mode
--zg-pager-border-radius_button_active50%Applies border radius to the pager next/previous buttons in 'button-pagination' mode
--zg-pager-border-radius_cursor50%Applies border radius to the pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-rightvar(--zg-pager-border, 0)Styles the right border of pager
--zg-pager-border-right_buttonvar(--zg-pager-border_button)Styles the right border of pager buttons in 'button-pagination' mode
--zg-pager-border-right_button_activevar(--zg-pager-border_button_active)Styles the right border of active pager buttons in 'button-pagination' mode
--zg-pager-border-right_cursor0Styles the right border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border-topvar(--zg-pager-border)Styles the top border of pager
--zg-pager-border-top_buttonvar(--zg-pager-border_button)Styles the top border of pager buttons in 'button-pagination' mode
--zg-pager-border-top_button_activevar(--zg-pager-border_button_active)Styles the top border of active pager buttons in 'button-pagination' mode
--zg-pager-border-top_cursor0Styles the top border of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-border_button1px solid var(--theme-border-color)Styles the bottom border of pager buttons in 'button-pagination' mode
--zg-pager-border_button_active1px solid var(--theme-border-color)Styles the bottom border of active pager buttons in 'button-pagination' mode
--zg-pager-box-shadow0Applies a box shadow behind the pager
--zg-pager-child-margin0 5pxSets the margin of pager items
--zg-pager-colorvar(--zing-grid-color), var(--theme-color)Sets the color of pager text
--zg-pager-color_button26pxSets the color of pager buttons in 'button-pagination' mode
--zg-pager-color_button_active26pxSets the color of pager buttons in 'button-pagination' mode
--zg-pager-font-sizeBrowser's default valueSets the font size of pager text
--zg-pager-height1pxSets the minimum height of pager
--zg-pager-height_button26pxSets the height of pager buttons in 'button-pagination' mode
--zg-pager-height_button_active26pxSets the height of active pager buttons in 'button-pagination' mode
--zg-pager-height_cursor21pxSets the height of pager next/previous buttons in 'cursor-pagination' mode
--zg-pager-margin0Sets the margin of pager
--zg-pager-padding0 var(--theme-padding_x)Sets the padding of pager
--zg-pager-text-margin0 2pxSets the margin of pager text
--zg-pager-width_button26pxSets the width of pager buttons in 'button-pagination' mode
--zg-pager-width_button_active26pxSets the width of active pager buttons in 'button-pagination' mode
--zg-pager-width_cursor21pxSets the width of pager next/previous buttons in 'cursor-pagination' mode
--zg-row-body-backgroundBrowser's default valueStyles the background of body rows
--zg-row-body-background_evenvar(--zg-row-body-background)Styles the background of 'even' body rows
--zg-row-body-background_even_hovervar(--zg-row-body-background_hover)Styles the background of 'even' body rows on hover
--zg-row-body-background_hoverBrowser's default valueStyles the background of body rows on hover
--zg-row-body-background_oddvar(--zg-row-body-background)Styles the background of 'odd' body rows
--zg-row-body-background_odd_hovervar(--zg-row-body-background_hover)Styles the background of 'odd' body rows on hover
--zg-row-body-bordervar(--zg-row-body-border, var(--zg-row-border-bottom, var(--zg-row-border, 0)))Styles the border of body rows
--zg-row-body-border-bottomvar(--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-leftvar(--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-rightvar(--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-topvar(--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-colorvar(--zg-row-color)Sets the font color of body rows
--zg-row-body-color_evenvar(--zg-row-body-color, var(--zg-row-color))Sets the font color of 'even' body rows
--zg-row-body-color_even_hovervar(--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_hovervar(--zg-row-color_hover, var(--zg-row-color))Styles the font color of body rows
--zg-row-body-color_oddvar(--zg-row-body-color, var(--zg-row-color))Styles the font color of 'odd' body rows
--zg-row-body-color_odd_hovervar(--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-heightvar(--zg-row-height)Sets the height of body rows
--zg-row-body-height_evenvar(--zg-row-body-height, var(--zg-row-height))Sets the height of 'even' body rows
--zg-row-body-height_oddvar(--zg-row-body-height, var(--zg-row-height))Sets the height of 'odd' body rows
--zg-row-border0Styles the border of row
--zg-row-border-bottomvar(--zg-row-border, var(--zg-row-border, 0))Styles the bottom border of row
--zg-row-card-background_evenvar(--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_oddvar(--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-border1px solid var(--theme-border-color)Styles the border of cards in 'card' layout-mode
--zg-row-card-border-bottom_evenvar(--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_oddvar(--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_evenvar(--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_oddvar(--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_evenvar(--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_oddvar(--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_evenvar(--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_oddvar(--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_evenvar(--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_oddvar(--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-shadownoneApplies a box shadow behind cards in 'card' layout-mode
--zg-row-card-box-shadow_oddvar(--zg-row-card-box-shadow, none)Applies a box shadow behind 'odd' cards in 'card' layout-mode
--zg-row-card-displaygridSets the display of cards in 'card' layout-mode
--zg-row-card-flex-basis100%Sets the flex-basis of cards in 'card' layout-mode
--zg-row-card-grid-gap10pxSets the gap between cards in 'card' layout-mode
--zg-row-card-padding10px 0 5pxSets the padding of cards in 'card' layout-mode when '[internal-card-header]' not added to ''
--zg-row-colorBrowser's default valueSets the font color of all rows
--zg-row-color_hovervar(--zg-row-color)Sets the font color of all rows on hover
--zg-row-dirty-delete-background-colorgray;Sets the background color of the dirty row on row delete
--zg-row-dirty-delete-colorSets the color of the dirty row on row delete
--zg-row-dirty-insert-background-colorgreen;Sets the background color of the dirty row on row insert
--zg-row-dirty-insert-colorSets the color of the dirty row on row insert
--zg-row-head-backgroundvar(--zg-head-background)Styles the background of grid head rows
--zg-row-head-background_evenvar(--zg-row-head-background, var(--zg-head-background))Styles the background of 'even' grid head rows
--zg-row-head-background_even_hovervar(--zg-row-head-background_hover, var(--zg-head-background_hover))Styles the background of 'even' grid head rows on hover
--zg-row-head-background_hoverBrowser's default valueStyles the background of grid head rows on hover
--zg-row-head-background_oddvar(--zg-row-head-background, var(--zg-head-background))Styles the background of 'odd' grid head rows
--zg-row-head-background_odd_hovervar(--zg-row-head-background_hover, var(--zg-head-background_hover))Styles the background of 'odd' grid head rows on hover
--zg-row-head-bordervar(--zg-row-border-bottom, var(--zg-row-border, var(--zg-row-border, 0)))Styles the border of grid head rows
--zg-row-head-border-bottomvar(--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-leftvar(--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-rightvar(--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-topvar(--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-colorvar(--zg-row-color)Styles the font color of grid head rows
--zg-row-head-color_evenvar(--zg-row-head-color, var(--zg-row-color))Styles the font color of 'even' grid head rows
--zg-row-head-color_even_hovervar(--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_hovervar(--zg-row-color_hover)Styles the font color of grid head rows on hover
--zg-row-head-color_oddvar(--zg-row-head-color, var(--zg-row-color))Sets the font color of 'odd' grid head rows
--zg-row-head-color_odd_hovervar(--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_evenvar(--zg-row-head-height, var(--zg-row-height))Sets the height of 'even' grid head rows
--zg-row-head-height_oddvar(--zg-row-head-height, var(--zg-row-height))Sets the height of 'odd' grid head rows
--zg-row-heightBrowser's default valueSets the height of all rows
--zg-search-backgroundBrowser's default valueStyles the background of search input field
--zg-search-border0Styles the border of search input field
--zg-search-border-bottomvar(--zg-search-border, 0)Styles the bottom border of search input field
--zg-search-border-leftvar(--zg-search-border, 0)Styles the left border of search input field
--zg-search-border-radius0Applies border radius to search input field
--zg-search-border-rightvar(--zg-search-border, 0)Styles the right border of search input field
--zg-search-border-topvar(--zg-search-border, 0)Styles the top border of search input field
--zg-search-colorvar(--theme-color_alt)Sets the font color of search input field
--zg-search-font-sizevdSets the font size of search input field
--zg-search-font-weightvar(--theme-font-weight)Sets the font weight of search input field
--zg-search-height32pxSets the height of search input field
--zg-search-padding0 10px 0 15pxSets the padding of search input field
--zg-search-top50%Sets the position from the top to place search input field
--zg-search-transformtranslateY(-50%)Sets the transform property of search input
--zg-select-arrow-border0Styles the border of the select arrow button
--zg-select-arrow-border-bottomvar(--zg-select-arrow-border, 0)Styles the bottom border of the select arrow button
--zg-select-arrow-border-leftvar(--zg-select-arrow-border, 1px solid var(--theme-border-color))Styles the left border of the select arrow button
--zg-select-arrow-border-rightvar(--zg-select-arrow-border, 0)Styles the right border of the select arrow button
--zg-select-arrow-border-topvar(--zg-select-arrow-border, 0)Styles the top border of the select arrow button
--zg-select-arrow-color#000Sets the color select arrow icon
--zg-select-backgroundBrowser's default valueStyles the background of the entire select parent wrapper
--zg-select-border1px solid var(--theme-border-color))Styles the border of the select
--zg-select-border-bottomvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the bottom border of the select
--zg-select-border-leftvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the left border of the select
--zg-select-border-rightvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the right border of the select
--zg-select-border-topvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the top border of the select
--zg-select-colorvar(--zing-grid-color, var(--theme-color))Sets the font color of the select
--zg-select-color_activeSets the font color of the select option
--zg-select-font-familyBrowser's default valueSets the font family of the select option
--zg-select-font-sizeBrowser's default valueSets the font size of the select option
--zg-select-font-weightBrowser's default valueSets the font weight of the select option
--zg-select-height28pxSets the minimum height of the select
--zg-select-line-heightBrowser's default valueSets the line height of the select option
--zg-select-mask-backgroundvar(--theme-color-secondary)Styles the background of select mask
--zg-select-mask-opacity.1Sets the opacity of select mask
--zg-select-min-widthBrowser's default valueSets the minimum width of select
--zg-select-outlineinheritSets the outline of the select option
--zg-select-text-background#fffStyles the background of the 'text' portion of the zg-select element
--zg-select-transformBrowser's default valueSets the transform of the select option
--zg-select-trigger-backgroundvar(--zg-select-arrow-background)Styles the background of the select arrow button (trigger)
--zg-selector-mask-backgroundvar(--theme-color-secondary)Styles the background of selector mask
--zg-selector-mask-opacity.1Sets the opacity of selector mask
--zg-separator-border1px solid var(--theme-border-color)Styles the border of separator in the menu
--zg-separator-border-bottomvar(--zg-separator-border, 1px solid var(--theme-border-color))Styles the bottom border of separator in the menu
--zg-separator-border-leftvar(--zg-separator-border, 0)Styles the left border of separator in the menu
--zg-separator-border-rightvar(--zg-separator-border, 1px solid var(--theme-border-color))Styles the right border of separator in the menu
--zg-separator-border-topvar(--zg-separator-border, 0)Styles the top border of separator in the menu
--zg-separator-margin5px 0Sets the margin of separator in the menu
--zg-source-backgroundvar(--theme-color-light)Styles the background of source when in ``
--zg-source-background_bottomvar(--zg-source-background, var(--theme-color-light))Styles the background of source in grid footer
--zg-source-background_topvar(--zg-source-background, var(--theme-color-light))Styles the background of source in grid header
--zg-source-border1px solid var(--theme-border-color)Styles the border of source when in ``
--zg-source-border-bottomvar(--zg-source-border, 0)Styles the bottom border of source when in ``
--zg-source-border-bottom_bottomvar(--zg-source-border-bottom, var(--zg-source-border, 0))Styles the bottom border of source in grid footer
--zg-source-border-bottom_topvar(--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-leftvar(--zg-source-border, 0)Styles the left border of source when in ``
--zg-source-border-left_bottomvar(--zg-source-border-left, var(--zg-source-border, 0))Styles the left border of source when in grid footer
--zg-source-border-left_topvar(--zg-source-border-left, var(--zg-source-border, 0))Styles the left border of source in grid header
--zg-source-border-radius0Styles the border radius of source
--zg-source-border-radius_bottomvar(--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_topvar(--zg-source-border-radius, 0)Sets the border radius of source in grid header
--zg-source-border-rightvar(--zg-source-border, 0)Styles the right border of source when in ``
--zg-source-border-right_bottomvar(--zg-source-border-right, var(--zg-source-border, 0))Styles the right border of source in grid footer
--zg-source-border-right_topvar(--zg-source-border-right, var(--zg-source-border, 0))Styles the right border of source in grid header
--zg-source-border-topvar(--zg-source-border, 1px solid var(--theme-border-color)Styles the top border of source when in ``
--zg-source-border-top_bottomvar(--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_topvar(--zg-source-border-top, var(--zg-source-border, 0))Styles the top border of source in grid header
--zg-source-border_bottomvar(--zg-source-border, 0)Styles the border of source in grid footer
--zg-source-border_top1px solid var(--theme-border-color)Styles the border of source in grid header
--zg-source-colorvar(--theme-font-size)Sets the font color content inside of source when in ``
--zg-source-color_bottomvar(--zg-source-color, var(--zg-source-border, 0))Sets the font color of source in grid footer
--zg-source-color_topvar(--zg-source-color, var(--zg-source-border, 0))Sets the font color of source in grid header
--zg-source-font-sizeinheritSets the font size of source
--zg-source-font-size_bottomvar(--zg-source-font-size, .8rem)Sets the font size of source in grid footer
--zg-source-font-size_topvar(--zg-source-font-size, .8rem)Sets the font size of source in grid header
--zg-source-font-styleinheritSets the font style of source
--zg-source-font-style_bottomvar(--zg-source-font-style, inherit)Sets the font style of source in grid footer
--zg-source-font-style_topvar(--zg-source-font-style, inherit)Sets the font style of source in grid header
--zg-source-font-weightinheritSets the font weight of source
--zg-source-font-weight_bottomvar(--zg-source-font-weight, inherit)Sets the font weight of source in grid footer
--zg-source-font-weight_topvar(--zg-source-font-weight, inherit)Sets the font weight of source in grid header
--zg-source-line-heightinheritSetes the line height of source
--zg-source-line-height_bottomvar(--zg-source-line-height, inherit)Sets the line height of source in grid footer
--zg-source-line-height_topvar(--zg-source-line-height, inherit)Sets the line height of source in grid header
--zg-source-min-heightautoSets the min-height of source
--zg-source-min-height_bottomvar(--zg-source-min-height, var(--zg-source-border, 0))Sets the min-height of source in grid footer
--zg-source-min-height_topvar(--zg-source-min-height, var(--zg-source-border, 0))Sets the min-height of source in grid header
--zg-source-padding5px var(--theme-padding_x)Sets the padding of source
--zg-source-padding_bottomvar(--zg-source-padding, 5px var(--theme-padding_x))Sets the padding of source when in grid footer
--zg-source-padding_topvar(--zg-source-padding, 5px var(--theme-padding_x))Sets the padding of source in grid header
--zg-source-text-alignleftSets text alignment of content inside of source
--zg-source-text-align_bottomvar(--zg-source-text-align, var(--zg-source-border, 0))Sets the text alignment of source in grid footer
--zg-source-text-align_topvar(--zg-source-text-align, var(--zg-source-border, 0))Sets the text alignment of source in grid header
--zg-status-align-itemscenterSets the alignment of inner elements of status
--zg-status-background#333Styles the background of status
--zg-status-border0Styles the border of status
--zg-status-border-bottomvar(--zg-status-border, 0)Styles the bottom border of status
--zg-status-border-leftvar(--zg-status-border, 0)Styles the left border of status
--zg-status-border-rightvar(--zg-status-border, 0)Styles the right border of status
--zg-status-border-topvar(--zg-status-border, 1px solid var(--theme-border-color))Styles the top border of status
--zg-status-box-shadownoneApplies a box shadow behind status
--zg-status-color#fffSets the font color of contents in status
--zg-status-error-backgroundredStyles the background of 'error' status
--zg-status-error-color#fffSets the font color of contents of 'error' status
--zg-status-font-familyvar(--theme-font-family)Sets the font family of contents in status
--zg-status-font-sizeinheritSets the font size of contents in status
--zg-status-line-height1Sets the line height of status
--zg-status-margin0Sets the margin of status
--zg-status-max-width300pxSets the max-width of the status-message area
--zg-status-min-height27pxSets the min-height of status
--zg-status-padding14px var(--theme-padding_x)Sets the padding of status
--zg-status-success-backgroundgreenStyles the background of 'success' status
--zg-status-success-color#fffSets the font color of contents of 'success' status
--zg-text-colorBrowser's default valueSets the font color of text
--zg-text-font-familyBrowser's default valueSets the font family of text
--zg-text-font-sizeBrowser's default valueSets the font size of text
--zg-text-font-styleBrowser's default valueSets the font style of text
--zg-text-font-weightBrowser's default valueSets the font weight of text
--zg-text-line-height.8Sets the line height of text
--zg-watermark-align-itemscenterSets the alignment of watermark
--zg-watermark-background#fbfbfbStyles the background of watermark
--zg-watermark-border-bottomvar(--zg-watermark-border, 0)Styles the bottom border of watermark
--zg-watermark-border-leftvar(--zg-watermark-border, 0)Styles the left border of watermark
--zg-watermark-border-radiusinheritApplies border radius to the watermark
--zg-watermark-border-rightvar(--zg-watermark-border, 0)Styles the right border of watermark
--zg-watermark-border-topvar(--zg-watermark-border, 1px solid var(--theme-border-color))Styles the top border of watermark
--zg-watermark-box-shadownoneApplies a box shadow behing the watermark
--zg-watermark-colorvar(--theme-color-primary)Sets the color of watermark
--zg-watermark-color_strongvar(--theme-color-secondary)Sets color of strong in watermark
--zg-watermark-font-familyvar(--theme-font-family)Sets the font of watermark
--zg-watermark-font-size.75remSets the font size of watermark
--zg-watermark-justify-contentflex-endSets the horizontal alignment of contents in the watermark
--zg-watermark-margin0Sets margins of watermark
--zg-watermark-min-height27pxSets the minimum height of watermark
--zg-watermark-padding0 var(--theme-padding_x)Sets padding of watermark
--zg-watermark-widthautoSets width of watermark
--zing-grid-background#fffStyles the background of grid
--zing-grid-batch-edit-style-border1px solid #d6e9ffStyles the border of the batch edit styling element
--zing-grid-batch-edit-style-box-shadowinset 0 0 6px #99caffStyles the box-shadow of the frozen column styling element
--zing-grid-body-border0Styles the border of grid body
--zing-grid-body-border-bottomvar(--zing-grid-body-border, 0)Styles the bottom border of grid body
--zing-grid-body-border-leftvar(--zing-grid-body-border, 0)Styles the left border of grid body
--zing-grid-body-border-rightvar(--zing-grid-body-border, 0)Styles the right border of grid body
--zing-grid-body-border-topvar(--zing-grid-body-border, 0)Styles the top border of grid body
--zing-grid-border1px solid var(--theme-border-color)Styles the border of grid
--zing-grid-border-bottomvar(--zing-grid-border, 1px solid var(--theme-border-color))Styles the bottom border of grid
--zing-grid-border-leftvar(--zing-grid-border, 1px solid var(--theme-border-color))Styles the left border of grid
--zing-grid-border-radius0Applies border radious to grid
--zing-grid-border-rightvar(--zing-grid-border, 1px solid var(--theme-border-color))Styles the right border of grid
--zing-grid-border-topvar(--zing-grid-border, 1px solid var(--theme-border-color))Styles the top border of grid
--zing-grid-box-shadownoneApplies a box shadow behind grid
--zing-grid-color--theme-colorThe font color of grid
--zing-grid-font-family--theme-font-familySets the font family of grid text
--zing-grid-font-size--theme-font-sizeSets the font size of grid text
--zing-grid-font-style--theme-font-styleSets the font style of grid text
--zing-grid-font-weight--theme-font-weightSets the font weight of grid text
--zing-grid-freeze-style-border1px solid #d6e9ffStyles the border of the frozen column styling element
--zing-grid-freeze-style-box-shadowinset 0 0 6px #99caffStyles the box-shadow of the frozen column styling element
--zing-grid-table-border0Styles the border of grid table contents
--zing-grid-table-border-bottomvar(--zing-grid-table-border, 0)Styles the bottom border of grid table contents
--zing-grid-table-border-leftvar(--zing-grid-table-border, 0)Styles the left border of grid table contents
--zing-grid-table-border-rightvar(--zing-grid-table-border, 0)Styles the right border of grid table contents
--zing-grid-table-border-topvar(--zing-grid-table-border, 0)Styles the top border of grid table contents

[api: CSS Variables]

On This Page