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