--- title: "API CSS Variables | Docs" description: "Using CSS variables in ZingGrid is just like using any CSS variables. Apart from some default styling, users can adjust almost every aspect of the grid." url: https://www.zinggrid.com/docs/api/styling/reference --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/styling/reference.md mode: provenance representation: markdown origin_response_id: d0cea516473f2d8f13c6959ecb85e710 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.610Z version_nonce: 56871c23aa8ccbebbed8b7d8645dfde7 generated_at_utc: 2026-10-22T00:29:44.006Z response_nonce: 8114fd00b7b2358583126d12fa0d6131 ``` # CSS Variables ### ZingGrid | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zing-grid-background` | #fff | Styles the background of grid | [Example code](https://app.zingsoft.com/demos/embed/S2LGW6WY) | | `--zing-grid-border` | 1px solid var(--theme-border-color) | Styles the border of grid | [Example code](https://app.zingsoft.com/demos/embed/FNVV7TJP) | | `--zing-grid-border-bottom` | var(--zing-grid-border, 1px solid var(--theme-border-color)) | Styles the bottom border of grid | [Example code](https://app.zingsoft.com/demos/embed/BP54E8PI) | | `--zing-grid-border-left` | var(--zing-grid-border, 1px solid var(--theme-border-color)) | Styles the left border of grid | [Example code](https://app.zingsoft.com/demos/embed/BQ8DWU62) | | `--zing-grid-border-radius` | 0 | Applies border radious to grid | [Example code](https://app.zingsoft.com/demos/embed/O84UETSN) | | `--zing-grid-border-right` | var(--zing-grid-border, 1px solid var(--theme-border-color)) | Styles the right border of grid | [Example code](https://app.zingsoft.com/demos/embed/7AFJ7RUL) | | `--zing-grid-border-top` | var(--zing-grid-border, 1px solid var(--theme-border-color)) | Styles the top border of grid | [Example code](https://app.zingsoft.com/demos/embed/PZO08P3O) | | `--zing-grid-box-shadow` | none | Applies a box shadow behind grid | [Example code](https://app.zingsoft.com/demos/embed/58QV7GJW) | | `--zing-grid-color` | --theme-color | The font color of grid | [Example code](https://app.zingsoft.com/demos/embed/PEY7GS10) | | `--zing-grid-font-family` | --theme-font-family | Sets the font family of grid text | [Example code](https://app.zingsoft.com/demos/embed/7KFKVQX1) | | `--zing-grid-font-size` | --theme-font-size | Sets the font size of grid text | [Example code](https://app.zingsoft.com/demos/embed/HCQWBCQ1) | | `--zing-grid-font-style` | --theme-font-style | Sets the font style of grid text | [Example code](https://app.zingsoft.com/demos/embed/9Q837C38) | | `--zing-grid-font-weight` | --theme-font-weight | Sets the font weight of grid text | [Example code](https://app.zingsoft.com/demos/embed/9NIED1XI) | | `--zing-grid-freeze-style-border` | 1px solid #d6e9ff | Styles the border of the frozen column styling element | [Example code](https://app.zingsoft.com/demos/embed/PPZ5PJ0L) | | `--zing-grid-freeze-style-box-shadow` | inset 0 0 6px #99caff | Styles the box-shadow of the frozen column styling element | [Example code](https://app.zingsoft.com/demos/embed/KNJN315S) | | `--zing-grid-table-border` | 0 | Styles the border of grid table contents | [Example code](https://app.zingsoft.com/demos/embed/7AYEIA84) | | `--zing-grid-table-border-bottom` | var(--zing-grid-table-border, 0) | Styles the bottom border of grid table contents | [Example code](https://app.zingsoft.com/demos/embed/V22ON3LN) | | `--zing-grid-table-border-left` | var(--zing-grid-table-border, 0) | Styles the left border of grid table contents | [Example code](https://app.zingsoft.com/demos/embed/TYY11EZ3) | | `--zing-grid-table-border-right` | var(--zing-grid-table-border, 0) | Styles the right border of grid table contents | [Example code](https://app.zingsoft.com/demos/embed/JRSIU7TZ) | | `--zing-grid-table-border-top` | var(--zing-grid-table-border, 0) | Styles the top border of grid table contents | [Example code](https://app.zingsoft.com/demos/embed/U2UPKR02) | ### ZGBatchEdit | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-cell-dirty-edit-border-color` | red; | Sets the color of the dirty cell marker | [Example code](https://app.zingsoft.com/demos/embed/9DTR8P0D) | | `--zg-cell-dirty-edit-border-width` | 7px | Sets the border width of the dirty cell marker | [Example code](https://app.zingsoft.com/demos/embed/U90FN6VL) | | `--zg-row-dirty-delete-background-color` | gray; | Sets the background color of the dirty row on row delete | [Example code](https://app.zingsoft.com/demos/embed/QXUNHO2F) | | `--zg-row-dirty-delete-color` | | Sets the color of the dirty row on row delete | [Example code](https://app.zingsoft.com/demos/embed/GHEMFKE2) | | `--zg-row-dirty-insert-background-color` | green; | Sets the background color of the dirty row on row insert | [Example code](https://app.zingsoft.com/demos/embed/1QNVARYX) | | `--zg-row-dirty-insert-color` | | Sets the color of the dirty row on row insert | [Example code](https://app.zingsoft.com/demos/embed/XIUPV4FU) | | `--zing-grid-batch-edit-style-border` | 1px solid #d6e9ff | Styles the border of the batch edit styling element | [Example code](https://app.zingsoft.com/demos/embed/TX748SB9) | | `--zing-grid-batch-edit-style-box-shadow` | inset 0 0 6px #99caff | Styles the box-shadow of the frozen column styling element | [Example code](https://app.zingsoft.com/demos/embed/YKOH0VPL) | ### ZGBody | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-body-background` | transparent | Styles the background of grid body | [Example code](https://app.zingsoft.com/demos/embed/WVUSRWLP) | | `--zg-body-border` | 0 | Styles the border of grid body | [Example code](https://app.zingsoft.com/demos/embed/YWTPH9M0) | | `--zg-body-border-bottom` | var(--zg-body-border, 0) | Styles the bottom border of grid body | [Example code](https://app.zingsoft.com/demos/embed/25V704EG) | | `--zg-body-border-left` | var(--zg-body-border, 0) | Styles the left border of grid body | [Example code](https://app.zingsoft.com/demos/embed/FPYUYEEX) | | `--zg-body-border-right` | var(--zg-body-border, 0) | Styles the right border of grid body | [Example code](https://app.zingsoft.com/demos/embed/70O17569) | | `--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`. | [Example code](https://app.zingsoft.com/demos/embed/C9XJMTTQ) | | `--zg-body-card-background` | linear-gradient(45deg, #f9fafb 20%, #fff) | Styles the background of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/XGWDT5HI) | | `--zg-body-card-border` | 0 | Styles the border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/UMQX6FC1) | | `--zg-body-card-border-bottom` | var(--zg-body-card-border, 0) | Styles the bottom border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/0CXPJ9CM) | | `--zg-body-card-border-left` | var(--zg-body-card-border, 0) | Styles the left border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FPJ9DVE0) | | `--zg-body-card-border-right` | var(--zg-body-card-border, 0) | Styles the right border of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/YJHA2SIP) | | `--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`. | [Example code](https://app.zingsoft.com/demos/embed/ZQPWRYZ2) | | `--zg-body-card-display` | grid | Sets display of grid body in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/JHSU4OLH) | | `--zg-body-color` | inherit | Sets the font color of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/X9E64KMS) | | `--zg-body-font-family` | inherit | Sets the font family of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/XS22J4JG) | | `--zg-body-font-size` | inherit | Sets the font size of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/YLAXDUP9) | | `--zg-body-font-style` | inherit | Sets the font style of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/0VOTEN03) | | `--zg-body-font-weight` | inherit | Sets the font weight of contents inside grid body | [Example code](https://app.zingsoft.com/demos/embed/F6CRSTMQ) | | `--zg-body-line-height` | inherit | Sets the line-height of contents inside of grid body | [Example code](https://app.zingsoft.com/demos/embed/UO5MJUXO) | ### ZGButton | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-button-background` | Browser's default value | Styles the background of button | [Example code](https://app.zingsoft.com/demos/embed/0NOUHK2G) | | `--zg-button-background_active` | var(--theme-background-color) | Styles of background of button on active state | [Example code](https://app.zingsoft.com/demos/embed/B5GX883S) | | `--zg-button-background_custom` | Browser's default value | Styles the background of custom button | [Example code](https://app.zingsoft.com/demos/embed/ILHRA36E) | | `--zg-button-background_custom_active` | Browser's default value | Styles the background of custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/I7M662SJ) | | `--zg-button-background_custom_focus` | Browser's default value | Styles the background of custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/DNQPAWTN) | | `--zg-button-background_custom_hover` | Browser's default value | Styles the background of custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/3NS677KC) | | `--zg-button-background_focus` | Browser's default value | Styles the background of button on focus | [Example code](https://app.zingsoft.com/demos/embed/KHSJ4IAG) | | `--zg-button-background_hover` | Browser's default value | Styles the background of button on hover | [Example code](https://app.zingsoft.com/demos/embed/F1CZ5AEC) | | `--zg-button-border` | Browser's default value | Styles the border of a button | [Example code](https://app.zingsoft.com/demos/embed/OQ49B7D2) | | `--zg-button-border_active` | Browser's default value | Styles the border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/XPUZZ3LU) | | `--zg-button-border_custom` | Browser's default value | Styles the border of custom button | [Example code](https://app.zingsoft.com/demos/embed/VZ1UMHDW) | | `--zg-button-border_custom_active` | Browser's default value | Styles the border of custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/SBAJGZLD) | | `--zg-button-border_custom_focus` | Browser's default value | Styles the border of custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/6YMT2CI2) | | `--zg-button-border_custom_hover` | Browser's default value | Styles the border of custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/M471ONLC) | | `--zg-button-border_focus` | Browser's default value | Styles the border of a button on focus state | [Example code](https://app.zingsoft.com/demos/embed/6ECRZ83T) | | `--zg-button-border_hover` | Browser's default value | Styles the border of a button on hover state | [Example code](https://app.zingsoft.com/demos/embed/M6VZUWV3) | | `--zg-button-border-bottom` | Browser's default value | Styles the bottom border of a button | [Example code](https://app.zingsoft.com/demos/embed/49VYLDM2) | | `--zg-button-border-bottom_active` | Browser's default value | Styles the bottom border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/NOL6XBMR) | | `--zg-button-border-bottom_focus` | Browser's default value | Styles the bottom border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/TNC5VI4O) | | `--zg-button-border-bottom_hover` | Browser's default value | Styles the bottom border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/N34TY79O) | | `--zg-button-border-left` | Browser's default value | Styles the left border of a button | [Example code](https://app.zingsoft.com/demos/embed/5BOPSVLN) | | `--zg-button-border-left_active` | Browser's default value | Styles the left border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/RG7Z2CMD) | | `--zg-button-border-left_focus` | Browser's default value | Styles the left border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/OTDDVBOS) | | `--zg-button-border-left_hover` | Browser's default value | Styles the left border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/8WXKJKRH) | | `--zg-button-border-right` | Browser's default value | Styles the right border of a button | [Example code](https://app.zingsoft.com/demos/embed/LK4TGZ1R) | | `--zg-button-border-right_active` | Browser's default value | Styles the right border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/TX5552LK) | | `--zg-button-border-right_focus` | Browser's default value | Styles the right border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/MTB5U5AF) | | `--zg-button-border-right_hover` | Browser's default value | Styles the right border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/3F37KXA6) | | `--zg-button-border-top` | Browser's default value | Styles the top border of a button | [Example code](https://app.zingsoft.com/demos/embed/4SWUJJOY) | | `--zg-button-border-top_active` | Browser's default value | Styles the top border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/X9WBHY4L) | | `--zg-button-border-top_focus` | Browser's default value | Styles the top border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/LO0MH08V) | | `--zg-button-border-top_hover` | Browser's default value | Styles the top border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/8YBE3ACC) | | `--zg-button-box-shadow` | Browser's default value | Styles the box-shadow of the button | [Example code](https://app.zingsoft.com/demos/embed/TUG6V5YD) | | `--zg-button-box-shadow_active` | Browser's default value | Styles the box-shadow of the button on activation | [Example code](https://app.zingsoft.com/demos/embed/MX9J71NQ) | | `--zg-button-box-shadow_custom` | Browser's default value | Applies a box shadow behind custom button | [Example code](https://app.zingsoft.com/demos/embed/WV8BPHHG) | | `--zg-button-box-shadow_custom_active` | Browser's default value | Applies a box shadow behind custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/NFET6MLX) | | `--zg-button-box-shadow_custom_focus` | Browser's default value | Applies a box shadow behind custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/ZUYVPA4G) | | `--zg-button-box-shadow_custom_hover` | Browser's default value | Applies a box shadow behing custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/6G5744Z9) | | `--zg-button-box-shadow_focus` | Browser's default value | Styles the box-shadow of the button on focus | [Example code](https://app.zingsoft.com/demos/embed/P92OHBPM) | | `--zg-button-box-shadow_hover` | Browser's default value | Styles the box-shadow of the button on hover | [Example code](https://app.zingsoft.com/demos/embed/RAV3EMI2) | | `--zg-button-color` | Browser's default value | Sets the font color of button | [Example code](https://app.zingsoft.com/demos/embed/RPE1ZPAR) | | `--zg-button-color_active` | Browser's default value | Styles the color of the button on active state | [Example code](https://app.zingsoft.com/demos/embed/RARCAIWD) | | `--zg-button-color_custom_active` | Browser's default value | Sets the font color of custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/L6FV9PN6) | | `--zg-button-color_custom_focus` | Browser's default value | Sets the font color of custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/6SPOXN1V) | | `--zg-button-color_custom_hover` | Browser's default value | Sets the font color of custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/UTHW9VD5) | | `--zg-button-color_focus` | Browser's default value | Styles the color of the button on focus | [Example code](https://app.zingsoft.com/demos/embed/18C3727I) | | `--zg-button-color_hover` | Browser's default value | Styles the color of the button on hover | [Example code](https://app.zingsoft.com/demos/embed/TNO4DYRC) | | `--zg-button-font-family` | inherit | Sets the font family of button | [Example code](https://app.zingsoft.com/demos/embed/7JWFA1UO) | | `--zg-button-font-size` | 90% | Sets the font size of button | [Example code](https://app.zingsoft.com/demos/embed/0B3ZKXEO) | | `--zg-button-font-style` | inherit | Sets the font style of button | [Example code](https://app.zingsoft.com/demos/embed/N5ISV2HS) | | `--zg-button-font-weight` | inherit | Sets the font weight of button | [Example code](https://app.zingsoft.com/demos/embed/USH6VNB2) | | `--zg-button-icon-background_custom_hover` | #fff | Styles the background of icon in custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/KM9ESQ95) | | `--zg-button-icon-background_hover` | #fff | Styles the background of the icon in a button on hover state | [Example code](https://app.zingsoft.com/demos/embed/AKM36W15) | | `--zg-button-line-height` | inherit | Sets the line height of button | [Example code](https://app.zingsoft.com/demos/embed/BC7ELB6L) | | `--zg-button-margin` | 0 | Sets the margin of button | [Example code](https://app.zingsoft.com/demos/embed/M834XVE5) | | `--zg-button-opacity_disabled` | 0.2 | Styles the opacity of disabled button or button on hover | [Example code](https://app.zingsoft.com/demos/embed/L2BLE14D) | | `--zg-button-padding` | 3px | Sets the padding of button | [Example code](https://app.zingsoft.com/demos/embed/SXA4AMPI) | | `--zg-button-transition_speed` | var(--theme-transition_speed) | Sets the transition speed of button | [Example code](https://app.zingsoft.com/demos/embed/W9ECS6H6) | ### ZGCaption | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-caption-align-items` | center | Sets the vertical alignment of items (title and toolbar) in caption | [Example code](https://app.zingsoft.com/demos/embed/CQYPIK1K) | | `--zg-caption-background` | Browser's default value | Styles the background of caption | [Example code](https://app.zingsoft.com/demos/embed/6U2SY2K5) | | `--zg-caption-border` | 0 | Styles the border of caption | [Example code](https://app.zingsoft.com/demos/embed/0N4C0ECB) | | `--zg-caption-border-bottom` | var(--zg-caption-border, 0) | Styles the bottom border of caption | [Example code](https://app.zingsoft.com/demos/embed/99JLBVYH) | | `--zg-caption-border-bottom-left-radius` | 0 | Applies a bottom-left border-radius to the caption | [Example code](https://app.zingsoft.com/demos/embed/3BTC90I4) | | `--zg-caption-border-bottom-right-radius` | 0 | Applies a bottom-right border-radius to the caption | [Example code](https://app.zingsoft.com/demos/embed/NE02JR76) | | `--zg-caption-border-left` | var(--zg-caption-border, 0) | Styles the left border of caption | [Example code](https://app.zingsoft.com/demos/embed/FWLLXIJ5) | | `--zg-caption-border-radius` | 0 | Applies a border-radius to the caption | [Example code](https://app.zingsoft.com/demos/embed/XTZFER6B) | | `--zg-caption-border-right` | var(--zg-caption-border, 0) | Styles the right border of caption | [Example code](https://app.zingsoft.com/demos/embed/52JW357J) | | `--zg-caption-border-top` | var(--zg-caption-border, 0) | Styles the top border of caption | [Example code](https://app.zingsoft.com/demos/embed/NZ37Y0WR) | | `--zg-caption-border-top-left-radius` | 0 | Applies a top-left border-radius to the caption | [Example code](https://app.zingsoft.com/demos/embed/5MVQFYBS) | | `--zg-caption-border-top-right-radius` | 0 | Applies a top-right border-radius to the caption | [Example code](https://app.zingsoft.com/demos/embed/OZMXYPUP) | | `--zg-caption-box-shadow` | none | Applies a box shadow behind caption | [Example code](https://app.zingsoft.com/demos/embed/NGD7EIQQ) | | `--zg-caption-button-background` | var(--zg-button-background) | Styles the background of button in caption | [Example code](https://app.zingsoft.com/demos/embed/TJF6WCKE) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/RAU1QDPS) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/BSNFWAC2) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/2C4I6L8Q) | | `--zg-caption-color` | Browser's default value | Sets the font color of caption | [Example code](https://app.zingsoft.com/demos/embed/AWL1ZJ9P) | | `--zg-caption-flex-direction` | row | Sets the flex direction of items (title and toolbar) in caption | [Example code](https://app.zingsoft.com/demos/embed/7OAGC539) | | `--zg-caption-font-family` | Browser's default value | Sets the font family of caption | [Example code](https://app.zingsoft.com/demos/embed/AIW2OSGY) | | `--zg-caption-font-size` | 1.25rem | Sets the font size of caption | [Example code](https://app.zingsoft.com/demos/embed/GYEK88WP) | | `--zg-caption-font-style` | Browser's default value | Sets the font style of caption | [Example code](https://app.zingsoft.com/demos/embed/88F09GZT) | | `--zg-caption-font-weight` | Browser's default value | Sets the font weight of caption | [Example code](https://app.zingsoft.com/demos/embed/KY56OFL7) | | `--zg-caption-height` | Browser's default value | Sets the height of caption | [Example code](https://app.zingsoft.com/demos/embed/Y3GPK1TE) | | `--zg-caption-margin` | 0 | Sets the margin of caption | [Example code](https://app.zingsoft.com/demos/embed/4KJK4SH4) | | `--zg-caption-opacity` | Browser's default value | Sets the opacity of caption | [Example code](https://app.zingsoft.com/demos/embed/PE0HQJ5R) | | `--zg-caption-padding` | 0 var(--theme-padding_x) | Sets the padding of caption | [Example code](https://app.zingsoft.com/demos/embed/442ELH1B) | | `--zg-caption-title-align-self` | center | Sets vertical alignment of items in caption title | [Example code](https://app.zingsoft.com/demos/embed/67LXJX3V) | | `--zg-caption-title-flex` | 0 1 auto | Sets how items are flexed in caption title | [Example code](https://app.zingsoft.com/demos/embed/ZNF8KZ0Q) | | `--zg-caption-title-font-family` | inherit | Sets the font-family of caption title | [Example code](https://app.zingsoft.com/demos/embed/RSEFCP22) | | `--zg-caption-title-font-size` | inherit | Sets the font size of caption title | [Example code](https://app.zingsoft.com/demos/embed/957S8V57) | | `--zg-caption-title-font-style` | inherit | Sets the font style of caption title | [Example code](https://app.zingsoft.com/demos/embed/7998V87T) | | `--zg-caption-title-font-weight` | inherit | Sets the font weight of caption title | [Example code](https://app.zingsoft.com/demos/embed/SL5PZSVT) | | `--zg-caption-title-margin` | 0 | Sets the margin of caption title | [Example code](https://app.zingsoft.com/demos/embed/16DIJOGY) | | `--zg-caption-title-order` | Browser's default value | Sets the order of caption title with respect to caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/C23FWMV5) | | `--zg-caption-title-padding` | 0 | Sets the padding of caption title | [Example code](https://app.zingsoft.com/demos/embed/ZS07XHPH) | | `--zg-caption-title-text-align` | inherit | Sets the text alignment of caption title | [Example code](https://app.zingsoft.com/demos/embed/1598TAUJ) | | `--zg-caption-title-transform` | none | Sets the transform of caption title | [Example code](https://app.zingsoft.com/demos/embed/3XWSGQ3T) | | `--zg-caption-title-width` | 100% | Sets the width of caption title | [Example code](https://app.zingsoft.com/demos/embed/072GAQ92) | | `--zg-caption-toolbar-align-self` | Browser's default value | Sets vertical alignment of items in caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/S3ZCU3DO) | | `--zg-caption-toolbar-bottom` | Browser's default value | Sets the position from bottom of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/OEH3UY6Q) | | `--zg-caption-toolbar-justify-content` | flex-start | Sets the horizontal alignment of contents in caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/765LB16X) | | `--zg-caption-toolbar-left` | auto | Sets the left of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/S4O1P9G5) | | `--zg-caption-toolbar-margin` | 0 | Sets the margin of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/KZJX7TLX) | | `--zg-caption-toolbar-position` | Browser's default value | Sets the position of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/QHJA4VIJ) | | `--zg-caption-toolbar-right` | auto | Sets the right of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/4YMLUW88) | | `--zg-caption-toolbar-top` | auto | Sets the top of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/RFUEEGAP) | | `--zg-caption-toolbar-transform` | none | Sets the transform of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/CM2ERTMS) | | `--zg-caption-toolbar-width` | auto | Sets the width of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/MGC5Q8CR) | | `--zg-caption-transition` | Browser's default value | Sets the transition of caption | [Example code](https://app.zingsoft.com/demos/embed/NORAG1EP) | ### ZGCard | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-cell-background_layout_card` | Browser's default value | Styles the background of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/BEYZ88MV) | | `--zg-cell-border_layout_card` | 0 | Styles the border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/U0CW9K8N) | | `--zg-cell-border-bottom_layout_card` | var(--zg-card-border, 0) | Styles the bottom border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FGN7V34Y) | | `--zg-cell-border-left_layout_card` | var(--zg-card-border, 0) | Styles the left border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/BPYBZ5YQ) | | `--zg-cell-border-right_layout_card` | var(--zg-card-border, 0) | Styles the right border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/CK9N7ZQV) | | `--zg-cell-border-top_layout_card` | var(--zg-card-border, 0) | Styles the top border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/7Y7BXZCF) | | `--zg-cell-color_layout_card` | inherit | Sets the font color of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/X2B23BUZ) | | `--zg-cell-font-family_layout_card` | inherit | Sets the font family of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/O9LB0E7K) | | `--zg-cell-font-size_layout_card` | inherit | Sets the font size of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FN82MG62) | | `--zg-cell-font-style_layout_card` | inherit | Sets the font family of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/OOAIYJ3A) | | `--zg-cell-font-weight_layout_card` | inherit | Sets the font weight of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/HG4U54X7) | | `--zg-cell-height_layout_card` | auto | Sets the height of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/363ZH0L0) | | `--zg-cell-line-height_layout_card` | inherit | Sets the line height of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/GNXXL0I8) | | `--zg-cell-padding_layout_card` | var(--theme-padding_y) var(--theme-padding_x) | Sets the padding of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/NLQRJG8E) | | `--zg-cell-transition_layout_card` | Browser's default value | Sets the transition of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/EP738THM) | | `--zg-cell-word-break_layout_card` | break-all | Sets the word break of items in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/8M5I3J8P) | ### ZGCell | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-cell-background` | var(--zg-cell-background) | Styles the background of cells | [Example code](https://app.zingsoft.com/demos/embed/FPS1Y1BU) | | `--zg-cell-background_hover` | Browser's default value | Styles the background of cells on hover | [Example code](https://app.zingsoft.com/demos/embed/RT19PJTK) | | `--zg-cell-background_hover_layout_row` | var(--zg-cell-background_hover) | Styles the background of cells in 'row' layout-mode on hover | [Example code](https://app.zingsoft.com/demos/embed/K3W62J0D) | | `--zg-cell-background_layout_row` | var(--zg-cell-background) | Styles the background of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/OB4ZAO0E) | | `--zg-cell-background_layout_row_sorted` | var(--zg-cell-background_sorted) | Styles the background of cells in sorted column in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/EM0YQ90M) | | `--zg-cell-background_sorted` | Browser's default value | Styles the background of cells in sorted column | [Example code](https://app.zingsoft.com/demos/embed/DNFOJBRU) | | `--zg-cell-border` | 0 | Styles the border of cells | [Example code](https://app.zingsoft.com/demos/embed/5IAJRJAX) | | `--zg-cell-border_layout_row` | var(--zg-cell-border-bottom, var(--zg-cell-border, 0)) | Styles the border of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/VUY7YJN0) | | `--zg-cell-border-bottom` | var(--zg-cell-border, 0) | Styles the bottom border of cells | [Example code](https://app.zingsoft.com/demos/embed/6W1MBMS5) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/CBCRNIEW) | | `--zg-cell-border-left` | var(--zg-cell-border, 0) | Styles the left border of cells | [Example code](https://app.zingsoft.com/demos/embed/D7KFKEG9) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/09D81J37) | | `--zg-cell-border-right` | var(--zg-cell-border, 0) | Styles the right border of cells | [Example code](https://app.zingsoft.com/demos/embed/I1HTZ8O9) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/38MHHLP7) | | `--zg-cell-border-top` | var(--zg-cell-border, 0) | Styles the top border of cells | [Example code](https://app.zingsoft.com/demos/embed/5LO8GANO) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/7MVAC7VQ) | | `--zg-cell-color` | inherit | Styles font color of text in cells | [Example code](https://app.zingsoft.com/demos/embed/W7Z4EQX7) | | `--zg-cell-color_hover` | var(--zg-cell-color) | Styles font color of cells on hover | [Example code](https://app.zingsoft.com/demos/embed/KSG94XLN) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/0VCGU2R9) | | `--zg-cell-color_layout_row` | var(--zg-cell-color, inherit) | Styles font color of text in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4L4VCAVC) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/64ZKT87T) | | `--zg-cell-color_sorted` | var(--zg-cell-color) | Sets the font color of cells in sorted column | [Example code](https://app.zingsoft.com/demos/embed/427LWHVI) | | `--zg-cell-content-border_layout_card` | 0 | Styles the border of card items in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/PL7XVRO6) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/67415UAZ) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/KJY3M0EU) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UL1AANE2) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/S1QU5P5C) | | `--zg-cell-content-font-size_layout_card` | inherit | Sets the font size of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/YUH3FMTN) | | `--zg-cell-content-padding_layout_card` | 3px 0 | Sets the padding of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/FRM4C9ZH) | | `--zg-cell-font-family` | inherit | Sets the font family in cells | [Example code](https://app.zingsoft.com/demos/embed/FBT1I49W) | | `--zg-cell-font-family_layout_row` | var(--zg-cell-font-family, inherit) | Sets the font family in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/WEF8KGXB) | | `--zg-cell-font-size` | inherit | Sets the font size in cells | [Example code](https://app.zingsoft.com/demos/embed/5VXTAUSO) | | `--zg-cell-font-size_layout_row` | var(--zg-cell-font-size, inherit) | Sets the font size in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/9NBFBSO0) | | `--zg-cell-font-style` | inherit | Sets the font style in cells | [Example code](https://app.zingsoft.com/demos/embed/MBBRNXUX) | | `--zg-cell-font-style_layout_row` | var(--zg-cell-font-style, inherit) | Sets the font style in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/LJYPK43Z) | | `--zg-cell-font-weight` | inherit | Sets the font weight in cells | [Example code](https://app.zingsoft.com/demos/embed/C8CHJ5SG) | | `--zg-cell-font-weight_layout_row` | var(--zg-cell-font-weight, inherit) | Sets the font weight in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4FCZ5S1K) | | `--zg-cell-height` | auto | Sets height of cells | [Example code](https://app.zingsoft.com/demos/embed/0ADC78MI) | | `--zg-cell-height_layout_row` | var(--zg-cell-height, auto) | Sets height of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/2I7KY86Q) | | `--zg-cell-label-color_layout_card` | var(--theme-color-primary) | Sets font color of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/WLX26P3Q) | | `--zg-cell-label-display_layout_card` | flex | Sets the display of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/VJ2V5JBW) | | `--zg-cell-label-font-size_layout_card` | 85% | Sets font size of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/9M0IV26C) | | `--zg-cell-label-font-weight_layout_card` | Browser's default value | Sets font weight of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/SW2D92C5) | | `--zg-cell-label-margin_layout_card` | 0 0 2px | Sets the margin of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4YSN75PR) | | `--zg-cell-label-overflow_layout_card` | Browser's default value | Sets the overflow of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/RW2Y5KUP) | | `--zg-cell-label-transform_layout_card` | Browser's default value | Sets transform of label in cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/7HNBULB8) | | `--zg-cell-line-height` | inherit | Sets line height of cells | [Example code](https://app.zingsoft.com/demos/embed/13BR35NS) | | `--zg-cell-line-height_layout_row` | var(--zg-cell-line-height, inherit) | Sets line height of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/V1O45PMA) | | `--zg-cell-padding` | var(--theme-padding_y) var(--theme-padding_x) | Sets padding of cells | [Example code](https://app.zingsoft.com/demos/embed/L55WT5PW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/LXJRGOVN) | | `--zg-cell-transition` | Browser's default value | Sets the transition of cells | [Example code](https://app.zingsoft.com/demos/embed/XB0M7RTK) | | `--zg-cell-transition_layout_row` | var(--zg-cell-transition) | Sets the transition of cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/KNVU6GWJ) | | `--zg-cell-vertical-align` | middle | Sets vertical alignment of items in cells | [Example code](https://app.zingsoft.com/demos/embed/IRBQ32WL) | | `--zg-cell-vertical-align_layout_row` | var(--zg-cell-vertical-align, middle) | Sets vertical alignment of items in cells in 'row' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/4FFXFDKI) | ### ZGColumnResize | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-column-resize-background` | none | Sets the background of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/GY8NY03F) | | `--zg-column-resize-height` | 40% | Sets the height of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/18NKOWQO) | | `--zg-column-resize-top` | 30% | Sets the top position of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/02YVWHW2) | | `--zg-column-resize-width` | 4px | Sets the width of the resize handle | [Example code](https://app.zingsoft.com/demos/embed/2BTZFOU2) | ### ZGControlBar | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-control-bar-background` | Browser's default value | Styles the background of control-bar | [Example code](https://app.zingsoft.com/demos/embed/8QU13CU5) | | `--zg-control-bar-border` | 1px solid var(--theme-border-color) | Styles the border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/A5JYDEGW) | | `--zg-control-bar-border-bottom` | var(--zg-control-bar-border, 1px solid var(--theme-border-color)) | Styles the bottom border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/CWVOSQC7) | | `--zg-control-bar-border-left` | var(--zg-control-bar-border, 0) | Styles the left border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/QOCRCDUO) | | `--zg-control-bar-border-right` | var(--zg-control-bar-border, 0) | Styles the right border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/ZUGS5N4E) | | `--zg-control-bar-border-top` | var(--zg-control-bar-border, 0) | Styles the top border of control-bar | [Example code](https://app.zingsoft.com/demos/embed/UBYLTINT) | | `--zg-control-bar-layout-content` | "" | Sets the before 'content' of inner layout container | [Example code](https://app.zingsoft.com/demos/embed/MXM9N5T5) | | `--zg-control-bar-layout-justify-content` | flex-end | Sets the horizontal alignment of contents in inner layout container | [Example code](https://app.zingsoft.com/demos/embed/RY0BD0RX) | | `--zg-control-bar-margin` | 0 | Sets the margin of control-bar | [Example code](https://app.zingsoft.com/demos/embed/S6MYCHEP) | | `--zg-control-bar-min-height` | 30px | Sets the min-height of control bar | [Example code](https://app.zingsoft.com/demos/embed/9RT1IX7I) | | `--zg-control-bar-padding` | 2px var(--theme-padding_x) 2px calc(var(--theme-padding_x) - 6px) | Sets the padding of control-bar | [Example code](https://app.zingsoft.com/demos/embed/WR596XPW) | | `--zg-control-bar-visibility` | visible | Sets the visibility of component | [Example code](https://app.zingsoft.com/demos/embed/NMVK94RD) | ### ZGDialog | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-dialog-background` | #fff | Styles the background of dialog header | [Example code](https://app.zingsoft.com/demos/embed/7PR4SRRW) | | `--zg-dialog-body-background` | var(--zg-dialog-background) | Styles the background of dialog body | [Example code](https://app.zingsoft.com/demos/embed/179BYIFU) | | `--zg-dialog-body-border` | 0 | Styles the border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/QBM0OIM8) | | `--zg-dialog-body-border-bottom` | var(--zg-dialog-body-border, 0) | Styles the bottom border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/V7GPBX6Y) | | `--zg-dialog-body-border-left` | var(--zg-dialog-body-border, 0) | Styles the left border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/UT7PLIJD) | | `--zg-dialog-body-border-right` | var(--zg-dialog-body-border, 0) | Styles the right border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/3N8I2IAV) | | `--zg-dialog-body-border-top` | var(--zg-dialog-body-border, 0) | Styles the top border of dialog body | [Example code](https://app.zingsoft.com/demos/embed/P5NH1SU5) | | `--zg-dialog-body-margin` | 10px 0 | Sets the margin of dialog body | [Example code](https://app.zingsoft.com/demos/embed/JWPAD3TC) | | `--zg-dialog-body-padding` | 0 | Sets the padding of dialog body | [Example code](https://app.zingsoft.com/demos/embed/Z8DLXRVR) | | `--zg-dialog-footer-background` | var(--zg-dialog-background) | Styles the background of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/H27KMSA5) | | `--zg-dialog-footer-border` | 0 | Styles the border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/IW16P1T1) | | `--zg-dialog-footer-border-bottom` | var(--zg-dialog-footer-border, 0) | Styles the bottom border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/Q7VVGHZT) | | `--zg-dialog-footer-border-left` | var(--zg-dialog-footer-border, 0) | Styles the left border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/XWEQTFFE) | | `--zg-dialog-footer-border-right` | var(--zg-dialog-footer-border, 0) | Styles the right border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/ZSDQ13MP) | | `--zg-dialog-footer-border-top` | var(--zg-dialog-footer-border, 1px solid var(--theme-border-color)) | Styles the top border of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/PJRFHAGU) | | `--zg-dialog-footer-justify-content` | flex-end | Sets the horizontal alignment of contents in dialog footer | [Example code](https://app.zingsoft.com/demos/embed/CNK0M0O8) | | `--zg-dialog-footer-margin` | 1.25rem 0 0 | Sets the margin of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/EJ1GWKJR) | | `--zg-dialog-footer-padding` | .875rem 0 0 | Sets the padding of dialog footer | [Example code](https://app.zingsoft.com/demos/embed/QHF0OT6N) | | `--zg-dialog-header-background` | var(--zg-dialog-background) | Styles the background of dialog header | [Example code](https://app.zingsoft.com/demos/embed/G03K1B6P) | | `--zg-dialog-header-border` | 0 | Styles the border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/FTZ4O6XG) | | `--zg-dialog-header-border-bottom` | var(--zg-dialog-header-border, 0) | Styles the bottom border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/MGVKXZG2) | | `--zg-dialog-header-border-left` | var(--zg-dialog-header-border, 0) | Styles the left border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/RW53U4MG) | | `--zg-dialog-header-border-right` | var(--zg-dialog-header-border, 0) | Styles the right border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/J0L1R6CU) | | `--zg-dialog-header-border-top` | var(--zg-dialog-header-border, 0) | Styles the top border of dialog header | [Example code](https://app.zingsoft.com/demos/embed/PJO7AU08) | | `--zg-dialog-header-color` | Browser's default value | Sets the font folor of dialog header | [Example code](https://app.zingsoft.com/demos/embed/9HFIZO8V) | | `--zg-dialog-header-margin` | 0 | Sets the margin of dialog header | [Example code](https://app.zingsoft.com/demos/embed/VBZX6FJF) | | `--zg-dialog-header-padding` | 0 | Sets the padding of dialog header | [Example code](https://app.zingsoft.com/demos/embed/W0RHP8WF) | ### ZGEditorRow | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-editor-row-input-background` | #f5f5f5 | Styles the background of editor row | [Example code](https://app.zingsoft.com/demos/embed/3EBBN3A3) | | `--zg-editor-row-input-background_focus` | var(--theme-color-lighter) | Styles the background of editor row input on focus | [Example code](https://app.zingsoft.com/demos/embed/TUH8OZBD) | | `--zg-editor-row-input-border` | 1px solid rgba(82, 168, 236, 0.8) | Styles the border of editor row | [Example code](https://app.zingsoft.com/demos/embed/O48B8R6Z) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9P6CXB0Q) | | `--zg-editor-row-input-border-left` | var(--zg-editor-row-input-border, 0) | Styles the left border of editor row | [Example code](https://app.zingsoft.com/demos/embed/VF347SF8) | | `--zg-editor-row-input-border-right` | var(--zg-editor-row-input-border, 0) | Styles the right border of editor row | [Example code](https://app.zingsoft.com/demos/embed/8OAHGLVE) | | `--zg-editor-row-input-border-top` | var(--zg-editor-row-input-border, 0) | Styles the top border of editor row | [Example code](https://app.zingsoft.com/demos/embed/MA8A06J7) | | `--zg-editor-row-input-box-shadow_focus` | inset 0 0 5px #ccc | Applies a box shadow behind editor row input on focus | [Example code](https://app.zingsoft.com/demos/embed/NAS5WQHN) | | `--zg-editor-row-input-color` | var(--zg-editor-row-input-color, #fff) | Sets the font color of editor row | [Example code](https://app.zingsoft.com/demos/embed/QYZBZUVA) | | `--zg-editor-row-input-padding` | 12px 15px | Sets the padding of editor row | [Example code](https://app.zingsoft.com/demos/embed/9Q07P5B1) | ### ZGFilter | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-filter-background` | Browser's default value | Styles the background of filter | [Example code](https://app.zingsoft.com/demos/embed/G1WKUNFJ) | | `--zg-filter-background_sorted` | Browser's default value | Styles the background color of filter when the column in sorted | [Example code](https://app.zingsoft.com/demos/embed/WX39XEJ1) | | `--zg-filter-border` | 0 | Styles the border of filter | [Example code](https://app.zingsoft.com/demos/embed/MTNYLV9O) | | `--zg-filter-border-bottom` | var(--zg-filter-border, 0) | Styles the bottom border of filter | [Example code](https://app.zingsoft.com/demos/embed/6OQCF137) | | `--zg-filter-border-left` | var(--zg-filter-border, 0) | Styles the left border of filter | [Example code](https://app.zingsoft.com/demos/embed/9Z63KCAD) | | `--zg-filter-border-right` | var(--zg-filter-border, 0) | Styles the right border of filter | [Example code](https://app.zingsoft.com/demos/embed/YDKKR5TJ) | | `--zg-filter-border-top` | var(--zg-filter-border, 1px solid var(--theme-border-color)) | Styles the top border of filter | [Example code](https://app.zingsoft.com/demos/embed/I2QLWMWS) | | `--zg-filter-color` | var(--theme-color_alt) | Sets the font color of text inputted in filter | [Example code](https://app.zingsoft.com/demos/embed/E7L28DOF) | | `--zg-filter-height` | Browser's default value | Sets the height of filter | [Example code](https://app.zingsoft.com/demos/embed/QCSOKQE2) | | `--zg-filter-input-background` | Browser's default value | Styles the background of input field in filter | [Example code](https://app.zingsoft.com/demos/embed/EAG2BR7C) | | `--zg-filter-input-background_sorted` | Browser's default value | Styles the background of input field in filter when sorted | [Example code](https://app.zingsoft.com/demos/embed/0TAT4J8P) | | `--zg-filter-input-border` | 0 | Styles the border of input field in filter | [Example code](https://app.zingsoft.com/demos/embed/SXRIBL17) | | `--zg-filter-input-border_sorted` | 0 | Styles the border of input field in filter when sorted | [Example code](https://app.zingsoft.com/demos/embed/MFR4CCYN) | | `--zg-filter-input-border-bottom` | var(--zg-filter-input-border) | Styles the bottom border of input field in filter | [Example code](https://app.zingsoft.com/demos/embed/Z1COSRGD) | | `--zg-filter-input-border-bottom_sorted` | var(--zg-filter-input-border) | Styles the bottom border of input field in filter when sorted | [Example code](https://app.zingsoft.com/demos/embed/WFPS5S7O) | | `--zg-filter-input-border-left` | var(--zg-filter-input-border) | Styles the left border of input field in filter | [Example code](https://app.zingsoft.com/demos/embed/2Z1YS7PH) | | `--zg-filter-input-border-left_sorted` | var(--zg-filter-input-border) | Styles the left border of input field in filter when sorted | [Example code](https://app.zingsoft.com/demos/embed/QRJ8CB5I) | | `--zg-filter-input-border-radius` | Browser's default value | Applies a border radius to filter input | [Example code](https://app.zingsoft.com/demos/embed/6ILPV59X) | | `--zg-filter-input-border-radius_sorted` | Browser's default value | Applies border radius to filter input when sorted | [Example code](https://app.zingsoft.com/demos/embed/YLATIXYW) | | `--zg-filter-input-border-right` | var(--zg-filter-input-border) | Styles the right border of input field in filter | [Example code](https://app.zingsoft.com/demos/embed/JD0COXK4) | | `--zg-filter-input-border-right_sorted` | var(--zg-filter-input-border) | Styles the right border of input field in filter when sorted | [Example code](https://app.zingsoft.com/demos/embed/IWA4XX9B) | | `--zg-filter-input-border-top` | var(--zg-filter-input-border) | Styles the top border of input field in filter | [Example code](https://app.zingsoft.com/demos/embed/KRUW31YG) | | `--zg-filter-input-border-top_sorted` | var(--zg-filter-input-border) | Styles the top border of input field in filter when sorted | [Example code](https://app.zingsoft.com/demos/embed/O83MW4X2) | | `--zg-filter-input-color` | Browser's default value | Styles the font color of text in input field of filter | [Example code](https://app.zingsoft.com/demos/embed/0BWT9HA7) | | `--zg-filter-input-color_sorted` | Browser's default value | Styles the font color of text in input field of filter when sorted | [Example code](https://app.zingsoft.com/demos/embed/9GRVADYL) | | `--zg-filter-input-font-size` | Browser's default value | Sets the font size of filter input | [Example code](https://app.zingsoft.com/demos/embed/04EEADGO) | | `--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. | [Example code](https://app.zingsoft.com/demos/embed/3E22SKBU) | | `--zg-filter-input-margin` | 0 var(--theme-padding_x) | Sets the margin of filter input | [Example code](https://app.zingsoft.com/demos/embed/0BWT9HA7) | | `--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. | [Example code](https://app.zingsoft.com/demos/embed/5GPABPO2) | | `--zg-filter-padding` | A cell's left and right padding | Sets the padding of the filter | [Example code](https://app.zingsoft.com/demos/embed/2LNX65ZJ) | | `--zg-filter-select-color` | Browser's default value | Styles the font color of text in the select dropdown filter | [Example code](https://app.zingsoft.com/demos/embed/9GRVADYL) | | `--zg-filter-select-font-size` | Browser's default value | Sets the font size of the select dropdown filter | [Example code](https://app.zingsoft.com/demos/embed/7GR5F9EJ) | | `--zg-filter-select-height` | Browser's default value | Sets the height of the select dropdown filter | [Example code](https://app.zingsoft.com/demos/embed/1FM6QEGK) | | `--zg-filter-select-margin` | Browser's default value | Sets the margin of the select dropdown filter | [Example code](https://app.zingsoft.com/demos/embed/B8M40OM8) | ### ZGFilterMenu | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-filter-menu-background` | Browser's defaul value | Styles background of filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/3LSVR98Q) | | `--zg-filter-menu-body-background` | var(--zg-filter-menu-background) | Styles the background of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/8DUP83YR) | | `--zg-filter-menu-body-border` | 0 | Styles the border of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/INUME8VT) | | `--zg-filter-menu-body-border-bottom` | var(--zg-filter-menu-body-border, 0) | Styles the bottom border of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/PKEH5SVP) | | `--zg-filter-menu-body-border-left` | var(--zg-filter-menu-body-border, 0) | Styles the left border of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/MXUM8CK5) | | `--zg-filter-menu-body-border-right` | var(--zg-filter-menu-body-border, 0) | Styles the right border of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/01ZJCH01) | | `--zg-filter-menu-body-border-top` | var(--zg-filter-menu-body-border, 0) | Styles the top border of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/6XRPMP1Y) | | `--zg-filter-menu-body-margin` | 10px 0 | Sets the margin of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/GIGTWL40) | | `--zg-filter-menu-body-padding` | 0 | Sets the padding of filter-menu body | [Example code](https://app.zingsoft.com/demos/embed/X09NU65W) | | `--zg-filter-menu-border` | 1px solid var(--theme-border-color) | Styles the border of filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/HGADDHZK) | | `--zg-filter-menu-border-bottom` | var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) | Styles the bottom border of filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/1HLPMKV2) | | `--zg-filter-menu-border-left` | var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) | Styles the left border of filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/DOGU2Y2A) | | `--zg-filter-menu-border-right` | var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) | Styles the right border of filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/Y7QDF479) | | `--zg-filter-menu-border-top` | var(--zg-filter-menu-border, 1px solid var(--theme-border-color)) | Styles the top border of filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/MRRLRHH8) | | `--zg-filter-menu-box-shadow` | 0 3px 3px #ccc | Applies a box shadow to filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/26IQSM7J) | | `--zg-filter-menu-color` | var(--theme-body-color) | Applies a baseline color to the menu | [Example code](https://app.zingsoft.com/demos/embed/IQI8YOSD) | | `--zg-filter-menu-font-size` | 0.8rem | Sets the font size of filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/334A80QO) | | `--zg-filter-menu-footer-background` | var(--zg-filter-menu-background) | Styles the background of filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/P7UBHVKZ) | | `--zg-filter-menu-footer-border` | 0 | Styles the border of filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/KPF58X3J) | | `--zg-filter-menu-footer-border-bottom` | var(--zg-filter-menu-footer-border, 0) | Styles the bottom border of filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/OX96VGKE) | | `--zg-filter-menu-footer-border-left` | var(--zg-filter-menu-footer-border, 0) | Styles the left border of filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/OX96VGKE) | | `--zg-filter-menu-footer-border-right` | var(--zg-filter-menu-footer-border, 0) | Styles the right border of filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/8MSDL22A) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/6K4SD04B) | | `--zg-filter-menu-footer-justify-content` | flex-end | Sets the horizontal alignment of contents in filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/ON7UB0UD) | | `--zg-filter-menu-footer-margin` | 0 | Sets the margin of filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/57P373YA) | | `--zg-filter-menu-footer-padding` | .875rem 0 0 | Sets the padding of filter-menu footer | [Example code](https://app.zingsoft.com/demos/embed/Q3AJ6GBJ) | | `--zg-filter-menu-header-background` | var(--zg-filter-menu-background) | Styles the background of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/OV6EB5HD) | | `--zg-filter-menu-header-border` | 0 | Styles the border of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/VGH9DF1Q) | | `--zg-filter-menu-header-border-bottom` | var(--zg-filter-menu-header-border, 0) | Styles the bottom border of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/16XGX1F6) | | `--zg-filter-menu-header-border-left` | var(--zg-filter-menu-header-border, 0) | Styles the left border of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/UCFXBA9I) | | `--zg-filter-menu-header-border-right` | var(--zg-filter-menu-header-border, 0) | Styles the right border of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/KBA1XHPL) | | `--zg-filter-menu-header-border-top` | var(--zg-filter-menu-header-border, 0) | Styles the top border of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/F70HRBWV) | | `--zg-filter-menu-header-color` | Browser's default value | Sets the font color of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/VSVSC98U) | | `--zg-filter-menu-header-font-size` | 16px | Sets the font size of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/ONJCZPX0) | | `--zg-filter-menu-header-font-weight` | bold | Sets the font weight of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/7APXSB1W) | | `--zg-filter-menu-header-margin` | 0 | Sets the margin of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/I9H3G2MV) | | `--zg-filter-menu-header-padding` | 0 | Sets the padding of filter-menu header | [Example code](https://app.zingsoft.com/demos/embed/8BIZ0DFZ) | | `--zg-filter-menu-input-color` | Browser's default value | Styles the font color of text in the input in the filter menu | [Example code](https://app.zingsoft.com/demos/embed/DAK6VRSM) | | `--zg-filter-menu-input-font-size` | Browser's default value | Sets the font size of the input in the filter menu | [Example code](https://app.zingsoft.com/demos/embed/6EJ4WE4S) | | `--zg-filter-menu-input-height` | Browser's default value | Sets the height of the input in the dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/0QP2NP1Q) | | `--zg-filter-menu-input-margin` | 5px | Sets the margin of the input in the dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/UOTHCGEH) | | `--zg-filter-menu-input-width` | 100% | Sets the width of the input in the dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/NNCHPQBV) | | `--zg-filter-menu-list-background` | var(--theme-color-light) | Sets the background of filter-menu list body | [Example code](https://app.zingsoft.com/demos/embed/7NRU6DHO) | | `--zg-filter-menu-list-color` | var(--zg-menu-item-color, var(--zg-menu-color) | Sets the color of filter-menu list items | [Example code](https://app.zingsoft.com/demos/embed/1F9SVLAK) | | `--zg-filter-menu-list-font-size` | rowser's default value | Sets the font size of filter-menu list items | [Example code](https://app.zingsoft.com/demos/embed/JLQT6IJ1) | | `--zg-filter-menu-list-font-weight` | Browser's default value | Sets the font weight of filter-menu list items | [Example code](https://app.zingsoft.com/demos/embed/1YJ3SV9P) | | `--zg-filter-menu-list-line-height` | Browser's default value | Sets the line height of filter-menu list items | [Example code](https://app.zingsoft.com/demos/embed/7WOFDQ0C) | | `--zg-filter-menu-padding` | 0 | Sets the padding of the filter menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/J096OGQY) | | `--zg-filter-menu-select-color` | Browser's default value | Styles the font color of text in the select dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/IOT7TN36) | | `--zg-filter-menu-select-font-size` | Browser's default value | Sets the font size of the select dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/GLET705I) | | `--zg-filter-menu-select-height` | Browser's default value | Sets the height of the select dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/CMHS47TY) | | `--zg-filter-menu-select-margin` | 5px | Sets the margin of the select dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/9DZNFAAS) | | `--zg-filter-menu-select-width` | 100% | Sets the width of the select dropdown filter menu | [Example code](https://app.zingsoft.com/demos/embed/EOGP2TXT) | ### ZGFocus | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-focus-border` | 2px solid var(--theme-color-primary) | Styles the border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/OBOGAYLI) | | `--zg-focus-border-bottom` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the bottom border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/UKS4GLIB) | | `--zg-focus-border-left` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the left border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/0S69YQQ1) | | `--zg-focus-border-right` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the right border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/RCL5RW0I) | | `--zg-focus-border-top` | var(--zg-focus-border, 2px solid var(--theme-color-primary)) | Sets the top border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/XNXNZ5X2) | | `--zg-focus-bottom-transform` | none | Sets the transform of bottom border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/463BLSLE) | | `--zg-focus-left-transform` | none | Sets the transform of left border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/KZ23KZP1) | | `--zg-focus-right-transform` | none | Sets the transform of right border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/C5WLZKW8) | | `--zg-focus-top-transform` | none | Sets the transform of top border of cells on focus | [Example code](https://app.zingsoft.com/demos/embed/FU5AB2MU) | ### ZGFoot | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-foot-background` | Browser's default value | Styles the background of grid foot | [Example code](https://app.zingsoft.com/demos/embed/5NW1UUJB) | | `--zg-foot-border` | 0 | Styles the border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/GJKYV9E6) | | `--zg-foot-border-bottom` | var(--zg-foot-border, 0) | Styles the bottom border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/FRJXV4YB) | | `--zg-foot-border-left` | var(--zg-foot-border, 0) | Styles the left border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/VYNWYDXA) | | `--zg-foot-border-right` | var(--zg-foot-border, 0) | Styles the right border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/4YL86H63) | | `--zg-foot-border-top` | var(--zg-foot-border, 0) | Styles the top border of grid foot | [Example code](https://app.zingsoft.com/demos/embed/906SOMMP) | | `--zg-foot-padding` | 0 | Sets the padding of grid foot | [Example code](https://app.zingsoft.com/demos/embed/XA3FXCSI) | ### ZGFooter | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-footer-background` | 0 | Styles the background of footer | [Example code](https://app.zingsoft.com/demos/embed/0EVTA5YN) | | `--zg-footer-border-bottom` | var(--zg-footer-border, 0) | Styles the bottom border of footer | [Example code](https://app.zingsoft.com/demos/embed/PUY88M0U) | | `--zg-footer-border-left` | var(--zg-footer-border, 0) | Styles the left border of footer | [Example code](https://app.zingsoft.com/demos/embed/V3H9QB6G) | | `--zg-footer-border-right` | var(--zg-footer-border, 0) | Styles the right border of footer | [Example code](https://app.zingsoft.com/demos/embed/TAJ68HA9) | | `--zg-footer-border-top` | var(--zg-footer-border, 0) | Styles the top border of footer | [Example code](https://app.zingsoft.com/demos/embed/FMUNXOES) | ### ZGHead | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-head-background` | Browser's default value | Styles the background of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/CO1P3ZJI) | | `--zg-head-border` | 1px solid var(--theme-border-color) | Styles the border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/12I3VYOI) | | `--zg-head-border-bottom` | var(--zg-head-border, 1px solid var(--theme-border-color)) | Styles the bottom border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/4G7I1G9M) | | `--zg-head-border-left` | var(--zg-head-border, 0) | Styles the left border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/CM2MSBIS) | | `--zg-head-border-radius` | var(--zg-head-border-radius) | Styles the border-radius of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/Y25A4K13) | | `--zg-head-border-right` | var(--zg-head-border, 0) | Styles the right border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/89L6VL2X) | | `--zg-head-border-top` | var(--zg-head-border) | Styles the top border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/Y25A4K13) | | `--zg-head-visibility` | Browser's default value | Sets the visibility of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/6LA6GMQ7) | | `--zg-row-head-background` | var(--zg-head-background) | Styles the background of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/T8UI8JED) | | `--zg-row-head-background_even` | var(--zg-row-head-background, var(--zg-head-background)) | Styles the background of 'even' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/SFSLBH2B) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/NTNFHUQO) | | `--zg-row-head-background_hover` | Browser's default value | Styles the background of grid head rows on hover | [Example code](https://app.zingsoft.com/demos/embed/WEG2YAI2) | | `--zg-row-head-background_odd` | var(--zg-row-head-background, var(--zg-head-background)) | Styles the background of 'odd' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/P3C6STNW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/V416TJNV) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/8GTM3CE7) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UG4IJY7N) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/FN1JN1YH) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B52RNC1C) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9WUUNY7A) | | `--zg-row-head-color` | var(--zg-row-color) | Styles the font color of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/XNSFRPXK) | | `--zg-row-head-color_even` | var(--zg-row-head-color, var(--zg-row-color)) | Styles the font color of 'even' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/MVTLQ6OY) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/R7N097DV) | | `--zg-row-head-color_hover` | var(--zg-row-color_hover) | Styles the font color of grid head rows on hover | [Example code](https://app.zingsoft.com/demos/embed/AB7QQ2HJ) | | `--zg-row-head-color_odd` | var(--zg-row-head-color, var(--zg-row-color)) | Sets the font color of 'odd' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/ORCFAHM5) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/CFKT71C3) | | `--zg-row-head-height` | var(--zg-row-height) | Sets the height of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/XHLX4VSA) | | `--zg-row-head-height_even` | var(--zg-row-head-height, var(--zg-row-height)) | Sets the height of 'even' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/ZJKCHBEN) | | `--zg-row-head-height_odd` | var(--zg-row-head-height, var(--zg-row-height)) | Sets the height of 'odd' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/HR7CPKI6) | ### ZGHeadCell | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-head-cell-background` | transparent | Styles the background of head cells | [Example code](https://app.zingsoft.com/demos/embed/5217Z4FJ) | | `--zg-head-cell-background_hover` | var(--zg-head-cell-background | Styles the background of head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/I05OFWBJ) | | `--zg-head-cell-background_sorted` | inherit | Styles the background of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/F7W6O5Y8) | | `--zg-head-cell-background_sorted_hover` | var(--zg-head-cell-background_sorted, inherit) | Styles the background of sorted head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/A4RMGO6M) | | `--zg-head-cell-border` | 0 | Styles the border of head cells | [Example code](https://app.zingsoft.com/demos/embed/SX3TZT8V) | | `--zg-head-cell-border_sorted` | 0 | Styles the border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/NJHYC5BT) | | `--zg-head-cell-border-bottom` | var(--zg-head-cell-border, 0) | Styles the bottom border of head cells | [Example code](https://app.zingsoft.com/demos/embed/DGH901RE) | | `--zg-head-cell-border-bottom_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the bottom border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/7J8IXN3Q) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9NEF2EKA) | | `--zg-head-cell-border-left` | var(--zg-head-cell-border, 0) | Styles the left border of head cells | [Example code](https://app.zingsoft.com/demos/embed/YCA4IWR7) | | `--zg-head-cell-border-left_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the left border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/86HPGI9W) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/U7Q6173N) | | `--zg-head-cell-border-right` | var(--zg-head-cell-border, 0) | Styles the right border of head cells | [Example code](https://app.zingsoft.com/demos/embed/04L65K0J) | | `--zg-head-cell-border-right_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the right border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/PUMKY3AA) | | `--zg-head-cell-border-top` | var(--zg-head-cell-border, 0) | Styles the top border of head cells | [Example code](https://app.zingsoft.com/demos/embed/8M5QYK55) | | `--zg-head-cell-border-top_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the top border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/CGQ6DGYI) | | `--zg-head-cell-color` | Browser's default value | Sets the font color of head cells | [Example code](https://app.zingsoft.com/demos/embed/MOTKNFI7) | | `--zg-head-cell-color_hover` | var(--zg-head-cell-color) | Sets the font color of head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/ICS004MX) | | `--zg-head-cell-color_sorted` | var(--zg-head-cell-color) | Sets the font color of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/XZEPKE31) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/FKHQA0MI) | | `--zg-head-cell-font-family` | Browser's default value | Sets the font family of head cells | [Example code](https://app.zingsoft.com/demos/embed/O1EIWZE1) | | `--zg-head-cell-font-size` | Browser's default value | Sets the font size of head cells | [Example code](https://app.zingsoft.com/demos/embed/UWQF6LZV) | | `--zg-head-cell-font-weight` | Browser's default value | Sets the font weight of head cells | [Example code](https://app.zingsoft.com/demos/embed/2LOCXCAB) | | `--zg-head-cell-icon-color_sorted` | var(--theme-color) | Sets the fill color of icon in sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/I4QTA64O) | | `--zg-head-cell-icon-margin` | Browser's default value | Sets the margin of child icons in head cells | [Example code](https://app.zingsoft.com/demos/embed/GGPPE0Q1) | | `--zg-head-cell-inner-padding` | Browser's default value | Sets the padding of head cells inner content | [Example code](https://app.zingsoft.com/demos/embed/KW2O5OZH) | | `--zg-head-cell-justify-content` | Browser's default value | Sets the horizontal alignment of contents in head cells | [Example code](https://app.zingsoft.com/demos/embed/M1I5BGRD) | | `--zg-head-cell-padding` | Browser's default value | Sets the padding of head cells | [Example code](https://app.zingsoft.com/demos/embed/YEEKXD9Z) | | `--zg-head-cell-parent-background` | var(--zg-head-cell-background) | Styles the background of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/34TZMCUN) | | `--zg-head-cell-parent-background_hover` | var(--zg-head-cell-background_hover) | Styles the background of parent head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/Y16SOZ0Y) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/J34P5J1C) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B0M2Q9JO) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/8HS4D09Y) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/J0AQFH0Z) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/ECL23JR1) | | `--zg-head-cell-parent-color` | var(--zg-head-cell-color) | Sets the font color of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/0Z3W1AR3) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/YSGAZGLF) | | `--zg-head-cell-parent-font-size` | var(--zg-head-cell-font-size) | Sets the font-size of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/8BVKTKQO) | | `--zg-head-cell-parent-font-weight` | var(--zg-h -cell-font-weight) | Sets the font weight of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/T658V69Y) | | `--zg-head-cell-parent-padding` | var(--zg-head-cell-padding) | Sets the padding of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/JAH3NI1F) | | `--zg-head-cell-transition` | Browser's default value | Sets the transition of head cells | [Example code](https://app.zingsoft.com/demos/embed/5VYSMZ3T) | ### ZGHeader | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-header-background` | Browser's default value | Styles the background of header | [Example code](https://app.zingsoft.com/demos/embed/RNK9KGL1) | | `--zg-header-border` | 0 | Styles the border of header | [Example code](https://app.zingsoft.com/demos/embed/D3AD1LTZ) | | `--zg-header-border-bottom` | var(--zg-header-border, 0) | Styles the bottom border of header | [Example code](https://app.zingsoft.com/demos/embed/ZOYVLTTM) | | `--zg-header-border-left` | var(--zg-header-border, 0) | Styles the left border of header | [Example code](https://app.zingsoft.com/demos/embed/AMLDCFOE) | | `--zg-header-border-radius` | 0 | Applies border radius to header | [Example code](https://app.zingsoft.com/demos/embed/J5P8R36J) | | `--zg-header-border-right` | var(--zg-header-border, 0) | Styles the right border of header | [Example code](https://app.zingsoft.com/demos/embed/XCB64506) | | `--zg-header-border-top` | var(--zg-header-border, 0) | Styles the top border of header | [Example code](https://app.zingsoft.com/demos/embed/7UN98I97) | ### ZGIcon | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-icon-color` | var(--theme-color-primary) | Sets the fill color of icon | [Example code](https://app.zingsoft.com/demos/embed/QP3CK186) | | `--zg-icon-height` | Browser's default value | Sets the height of icon. Also set width using --zg-icon-width to scale icon. | [Example code](https://app.zingsoft.com/demos/embed/35ELYFHO) | | `--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. | [Example code](https://app.zingsoft.com/demos/embed/K3C0AD5K) | | `--zg-icon-width` | Browser's default value | Sets the width of icon. Also set height using --zg-icon-height to scale icon. | [Example code](https://app.zingsoft.com/demos/embed/QN5FK1OU) | ### ZGInput | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-input-background` | #fff | Styles the background of input field | [Example code](https://app.zingsoft.com/demos/embed/QTKU281K) | | `--zg-input-border` | 1px solid var(--theme-border-color) | Styles the border of input field | [Example code](https://app.zingsoft.com/demos/embed/DDD2BCSL) | | `--zg-input-border_focus` | 1px solid rgba(82, 168, 236, 0.8) | Styles the border of input field on focus | [Example code](https://app.zingsoft.com/demos/embed/I3GK9SS3) | | `--zg-input-border-bottom` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the bottom border of input field | [Example code](https://app.zingsoft.com/demos/embed/MDMU28K6) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/2SM40FSO) | | `--zg-input-border-left` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the left border of input field | [Example code](https://app.zingsoft.com/demos/embed/JLCD44RA) | | `--zg-input-border-left_focus` | var(--zg-input-border_focus, ))) | Styles the left border of input field on focus | [Example code](https://app.zingsoft.com/demos/embed/FQ51FTQF) | | `--zg-input-border-radius` | Browser's default value | Applies a border radius to the input | [Example code](https://app.zingsoft.com/demos/embed/EPJYLC6I) | | `--zg-input-border-right` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the right border of input field | [Example code](https://app.zingsoft.com/demos/embed/8A95H8P7) | | `--zg-input-border-right_focus` | var(--zg-input-border_focus, ))) | Styles the right border of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/11XL0MH6) | | `--zg-input-border-top` | var(--zg-input-border, 1px solid var(--theme-border-color)) | Styles the top border of input field | [Example code](https://app.zingsoft.com/demos/embed/LCS35KDI) | | `--zg-input-border-top_focus` | var(--zg-input-border_focus, ))) | Styles the top border of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/BLSGA86T) | | `--zg-input-box-shadow` | none | Applies a box shadow behind input field | [Example code](https://app.zingsoft.com/demos/embed/18VIQFAN) | | `--zg-input-color` | var(--zing-grid-color, var(--theme-color)) | Sets the font color of input field | [Example code](https://app.zingsoft.com/demos/embed/XOU2K69C) | | `--zg-input-color_focus` | var(--zg-input-color) | Sets the font color of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/62OIL7CR) | | `--zg-input-font-family` | inherit | Sets the font family of input field | [Example code](https://app.zingsoft.com/demos/embed/T5ZCU5MK) | | `--zg-input-font-size` | inherit | Sets the font size of input field | [Example code](https://app.zingsoft.com/demos/embed/2N4JCUM7) | | `--zg-input-font-size_focus` | inherit | Sets the font size of input field on focus | [Example code](https://app.zingsoft.com/demos/embed/BPE8TYD5) | | `--zg-input-font-style` | inherit | Sets the font style of input field | [Example code](https://app.zingsoft.com/demos/embed/23LLZSPN) | | `--zg-input-font-weight` | inherit | Sets the font weight of input field | [Example code](https://app.zingsoft.com/demos/embed/D4KPNBOE) | | `--zg-input-height` | 28px | Sets the height of input field | [Example code](https://app.zingsoft.com/demos/embed/B0P81J0Q) | | `--zg-input-margin` | 0 | Sets the margin of input field | [Example code](https://app.zingsoft.com/demos/embed/QIT4GPWJ) | | `--zg-input-padding` | 0 6px | Sets the padding of input field | [Example code](https://app.zingsoft.com/demos/embed/6YX1BW65) | | `--zg-input-text-align` | center | Sets the text alignment of input field | [Example code](https://app.zingsoft.com/demos/embed/19KNP52I) | | `--zg-input-transform` | Browser's default value | Sets the transform of input field | [Example code](https://app.zingsoft.com/demos/embed/OSSRVJZZ) | | `--zg-input-transform_focus` | Browser's default value | Sets the transform of input field in modal on focus | [Example code](https://app.zingsoft.com/demos/embed/ZCZMD7I3) | | `--zg-input-width` | 28px | Sets the width of input field | [Example code](https://app.zingsoft.com/demos/embed/SCCSW2QV) | ### ZGLoadMask | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-load-mask-color` | #fff | Sets the font color of the loading text | [Example code](https://app.zingsoft.com/demos/embed/YTE2VZ54) | ### ZGMenu | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-menu-background` | Browser's defaul value | Styles background of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/H302IPDV) | | `--zg-menu-border` | 1px solid var(--theme-border-color) | Styles the border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/L29XD0SG) | | `--zg-menu-border-bottom` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the bottom border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/BP6Q1ONR) | | `--zg-menu-border-left` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the left border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/YTOQWH4D) | | `--zg-menu-border-right` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the right border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/9PZS6F7O) | | `--zg-menu-border-top` | var(--zg-menu-border, 1px solid var(--theme-border-color)) | Styles the top border of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/60VFS9X7) | | `--zg-menu-box-shadow` | 0 3px 3px #ccc | Applies a box shadow to menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/8KM669HT) | | `--zg-menu-font-size` | 0.8rem | Sets the font size of menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/H08WWNC4) | | `--zg-menu-padding` | 0 | Sets the padding of the menu dropdown | [Example code](https://app.zingsoft.com/demos/embed/O1VERLUD) | ### ZGMenuItem | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-menu-item-background` | var(--zg-menu-background) | Styles the background of menu item | [Example code](https://app.zingsoft.com/demos/embed/B9ZW7JZ1) | | `--zg-menu-item-background_hover` | var(--zg-menu-item-background, var(--zg-menu-background)) | Styles the background of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/TGJCKUFU) | | `--zg-menu-item-border` | var(--zg-menu-item-border, 0) | Styles the border of menu item | [Example code](https://app.zingsoft.com/demos/embed/OY846P1S) | | `--zg-menu-item-border_hover` | var(--zg-menu-item-border) | Styles the border of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/COY3QOQ4) | | `--zg-menu-item-border-bottom` | var(--zg-menu-border-bottom, var(--zg-menu-item-border)) | Styles the bottom border of menu item | [Example code](https://app.zingsoft.com/demos/embed/K3RGBXUS) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/Y257HM34) | | `--zg-menu-item-border-left` | var(--zg-menu-border-left, var(--zg-menu-item-border)) | Styles the left border of menu item | [Example code](https://app.zingsoft.com/demos/embed/I02JZBV4) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/L6B0TSI2) | | `--zg-menu-item-border-right` | var(--zg-menu-border-right, var(--zg-menu-item-border)) | Styles the border-right of menu item | [Example code](https://app.zingsoft.com/demos/embed/XBLE7Y9F) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B0CA9PC5) | | `--zg-menu-item-border-top` | var(--zg-menu-border-top, var(--zg-menu-item-border)) | Styles the border-top of menu item | [Example code](https://app.zingsoft.com/demos/embed/JXUI3ZZ1) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/IEQ87DM1) | | `--zg-menu-item-color` | var(--zg-menu-color) | Styles the color of menu item | [Example code](https://app.zingsoft.com/demos/embed/PB332NEO) | | `--zg-menu-item-color_hover` | var(--zg-menu-item-color, var(--zg-menu-color)) | Styles the color of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/G87OUAAS) | | `--zg-menu-item-justify-content` | flex-start | Sets the horizontal alignment of contents in menu item | [Example code](https://app.zingsoft.com/demos/embed/E73X0A1J) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/E0CSUDJQ) | | `--zg-menu-item-padding` | 2px 9px | Sets the padding of menu item | [Example code](https://app.zingsoft.com/demos/embed/J8SC2JZ7) | | `--zg-menu-item-padding_hover` | var(--zg-menu-item-padding, 2px 9px) | Sets the padding of menu item on hover | [Example code](https://app.zingsoft.com/demos/embed/2L3WUNZM) | ### ZGNoData | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-no-data-background` | var(--theme-color-light) | Styles the background of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/DZ18XBMU) | | `--zg-no-data-border` | 1px solid var(--theme-border-color) | Styles the border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/H9H8800K) | | `--zg-no-data-border-bottom` | var(--zg-no-data-border, 0) | Styles the bottom border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/5GHU0UT2) | | `--zg-no-data-border-left` | var(--zg-no-data-border, 0) | Styles the left border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/8PC30SFF) | | `--zg-no-data-border-radius` | 0 | Styles the border radius of empty message | [Example code](https://app.zingsoft.com/demos/embed/A1CYESQT) | | `--zg-no-data-border-right` | var(--zg-no-data-border, 0) | Styles the right border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/4SZ8NQ8O) | | `--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 `` | [Example code](https://app.zingsoft.com/demos/embed/F5LJEMJO) | | `--zg-no-data-color` | var(--theme-font-size) | Sets the font color content inside of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/9QIBFMGP) | | `--zg-no-data-font-size` | inherit | Sets the font size of empty message | [Example code](https://app.zingsoft.com/demos/embed/26M7XA7S) | | `--zg-no-data-font-style` | inherit | Sets the font style of empty message | [Example code](https://app.zingsoft.com/demos/embed/ERYSUAI0) | | `--zg-no-data-font-weight` | inherit | Sets the font weight of empty message | [Example code](https://app.zingsoft.com/demos/embed/PT3I1OQC) | | `--zg-no-data-line-height` | inherit | Sets the line height of empty message | [Example code](https://app.zingsoft.com/demos/embed/XGIEZHE5) | | `--zg-no-data-min-height` | auto | Sets the min-height of empty message | [Example code](https://app.zingsoft.com/demos/embed/84P0AHF7) | | `--zg-no-data-padding` | var(--zg-cell-height, var(--theme-padding_x, auto))) var(--theme-padding_x) | Sets the padding of empty message | [Example code](https://app.zingsoft.com/demos/embed/S9ZVCD9A) | | `--zg-no-data-text-align` | left | Sets text alignment of content inside of empty message | [Example code](https://app.zingsoft.com/demos/embed/TWOSCDLC) | ### ZGOptionList | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-option-list-background` | #fff | Styles the background of option list | [Example code](https://app.zingsoft.com/demos/embed/JCRKBH4Y) | | `--zg-option-list-border` | 1px solid var(--theme-border-color) | Styles the border of option list | [Example code](https://app.zingsoft.com/demos/embed/SQNKOS7B) | | `--zg-option-list-border-bottom` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the bottom border of option list | [Example code](https://app.zingsoft.com/demos/embed/31Q5PRQB) | | `--zg-option-list-border-left` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the left border of option list | [Example code](https://app.zingsoft.com/demos/embed/3BWGQYG6) | | `--zg-option-list-border-right` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the right border of option list | [Example code](https://app.zingsoft.com/demos/embed/SG9TA4DQ) | | `--zg-option-list-border-top` | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the bottom top of option list | [Example code](https://app.zingsoft.com/demos/embed/CZ8HY148) | | `--zg-option-list-color` | Browser's default value | Styles the color of option list item | [Example code](https://app.zingsoft.com/demos/embed/RLKIPFXB) | | `--zg-option-list-item-background_focus` | var(--theme-color-secondary) | Sets the background of option list item on focus | [Example code](https://app.zingsoft.com/demos/embed/5CHDS97H) | | `--zg-option-list-item-background_hover` | var(--theme-color-secondary) | Sets the background of option list item on hover | [Example code](https://app.zingsoft.com/demos/embed/SQITNDOY) | | `--zg-option-list-item-border` | 0 | Styles the border of option list item | [Example code](https://app.zingsoft.com/demos/embed/VH6WGYS9) | | `--zg-option-list-item-border-bottom` | var(--zg-option-list-item-border, 0) | Styles the bottom border of option list item | [Example code](https://app.zingsoft.com/demos/embed/QCJG4ENK) | | `--zg-option-list-item-border-left` | var(--zg-option-list-item-border, 0) | Styles the left border of option list item | [Example code](https://app.zingsoft.com/demos/embed/DCZNW2UY) | | `--zg-option-list-item-border-right` | var(--zg-option-list-item-border, 0) | Styles the right border of option list item | [Example code](https://app.zingsoft.com/demos/embed/442R7DGZ) | | `--zg-option-list-item-border-top` | var(--zg-option-list-item-border, 0) | Styles the top border of option list item | [Example code](https://app.zingsoft.com/demos/embed/LBZKLEVF) | | `--zg-option-list-item-height` | 32px | Sets the height of option list item | [Example code](https://app.zingsoft.com/demos/embed/LZZDJ4ZH) | | `--zg-option-list-item-line-height` | 32px | Sets the line height of option list item | [Example code](https://app.zingsoft.com/demos/embed/9QGZA2DF) | | `--zg-option-list-item-padding` | 0 15px | Sets the padding of option list item | [Example code](https://app.zingsoft.com/demos/embed/3TSJS7B1) | ### ZGPager | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-pager-background` | Browser's default value | Styles the background of pager | [Example code](https://app.zingsoft.com/demos/embed/DSI1M4K6) | | `--zg-pager-background_button` | var(--theme-color-primary) | Styles the background of pager buttons in 'button-pagination` mode | [Example code](https://app.zingsoft.com/demos/embed/RFPJ268T) | | `--zg-pager-background_button_active` | var(--theme-color-primary) | Styles the background of active pager buttons in 'button-pagination` mode | [Example code](https://app.zingsoft.com/demos/embed/30Q3UD77) | | `--zg-pager-background_cursor` | var(--theme-color-primary) | Styles the background of pager next/previous buttons in 'cursor-pagination` mode | [Example code](https://app.zingsoft.com/demos/embed/2W0L943N) | | `--zg-pager-border` | 0 | Styles the border of pager | [Example code](https://app.zingsoft.com/demos/embed/12I3VYOI) | | `--zg-pager-border_button` | 1px solid var(--theme-border-color) | Styles the bottom border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/GMCTJPNT) | | `--zg-pager-border_button_active` | 1px solid var(--theme-border-color) | Styles the bottom border of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/S0T1BVWQ) | | `--zg-pager-border-bottom` | var(--zg-pager-border, 0) | Styles the bottom border of pager | [Example code](https://app.zingsoft.com/demos/embed/HLBTB6HX) | | `--zg-pager-border-bottom_button` | var(--zg-pager-border_button) | Styles the bottom border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/SX86NT1Z) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/DTH3NBH8) | | `--zg-pager-border-bottom_cursor` | 0 | Styles the bottom border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/6GTM4FBP) | | `--zg-pager-border-left` | var(--zg-pager-border, 0) | Styles the left border of pager | [Example code](https://app.zingsoft.com/demos/embed/A3EQ97B7) | | `--zg-pager-border-left_button` | var(--zg-pager-border_button) | Styles the left border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/7ZFWGWPZ) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/DMB3KOV6) | | `--zg-pager-border-left_cursor` | 0 | Styles the left border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/RYTF8WCR) | | `--zg-pager-border-radius_button` | 50% | Applies border radius to the pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/C5XSS45A) | | `--zg-pager-border-radius_button_active` | 50% | Applies border radius to the pager next/previous buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/4NN6CW5X) | | `--zg-pager-border-radius_cursor` | 50% | Applies border radius to the pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/NVMU8M40) | | `--zg-pager-border-right` | var(--zg-pager-border, 0) | Styles the right border of pager | [Example code](https://app.zingsoft.com/demos/embed/8PKZ2V87) | | `--zg-pager-border-right_button` | var(--zg-pager-border_button) | Styles the right border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/E0Z1Z61Z) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/8IH4UBJB) | | `--zg-pager-border-right_cursor` | 0 | Styles the right border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/CROQ1YCC) | | `--zg-pager-border-top` | var(--zg-pager-border) | Styles the top border of pager | [Example code](https://app.zingsoft.com/demos/embed/S7J5KA7S) | | `--zg-pager-border-top_button` | var(--zg-pager-border_button) | Styles the top border of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/GUTPFSA2) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/3P68ZU21) | | `--zg-pager-border-top_cursor` | 0 | Styles the top border of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/FUJKHWQ4) | | `--zg-pager-box-shadow` | 0 | Applies a box shadow behind the pager | [Example code](https://app.zingsoft.com/demos/embed/E3ZE0EHX) | | `--zg-pager-child-margin` | 0 5px | Sets the margin of pager items | [Example code](https://app.zingsoft.com/demos/embed/BHPOIOVV) | | `--zg-pager-color` | var(--zing-grid-color), var(--theme-color) | Sets the color of pager text | [Example code](https://app.zingsoft.com/demos/embed/C1JDZLU9) | | `--zg-pager-color_button` | 26px | Sets the color of pager buttons in 'button-text' mode | [Example code](https://app.zingsoft.com/demos/embed/3PUA1QDD) | | `--zg-pager-color_button_active` | 26px | Sets the color of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/65T7U4OO) | | `--zg-pager-font-size` | Browser's default value | Sets the font size of pager text | [Example code](https://app.zingsoft.com/demos/embed/4MA9LSWA) | | `--zg-pager-height` | 1px | Sets the minimum height of pager | [Example code](https://app.zingsoft.com/demos/embed/5LQ86G4I) | | `--zg-pager-height_button` | 26px | Sets the height of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/NU8PS15R) | | `--zg-pager-height_button_active` | 26px | Sets the height of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/YQK9B3TR) | | `--zg-pager-height_cursor` | 21px | Sets the height of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/1Q1Y5Y7U) | | `--zg-pager-margin` | 0 | Sets the margin of pager | [Example code](https://app.zingsoft.com/demos/embed/SQZ9LICW) | | `--zg-pager-padding` | 0 var(--theme-padding_x) | Sets the padding of pager | [Example code](https://app.zingsoft.com/demos/embed/DFS7ZU1P) | | `--zg-pager-text-margin` | 0 2px | Sets the margin of pager text | [Example code](https://app.zingsoft.com/demos/embed/JRVD4KCC) | | `--zg-pager-width_button` | 26px | Sets the width of pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/TND8N5QP) | | `--zg-pager-width_button_active` | 26px | Sets the width of active pager buttons in 'button-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/JGGN84RM) | | `--zg-pager-width_cursor` | 21px | Sets the width of pager next/previous buttons in 'cursor-pagination' mode | [Example code](https://app.zingsoft.com/demos/embed/XDFDMJDM) | ### ZGRow | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-row-body-background` | Browser's default value | Styles the background of body rows | [Example code](https://app.zingsoft.com/demos/embed/90PL3ZDR) | | `--zg-row-body-background_even` | var(--zg-row-body-background) | Styles the background of 'even' body rows | [Example code](https://app.zingsoft.com/demos/embed/VMHOQP1A) | | `--zg-row-body-background_even_hover` | var(--zg-row-body-background_hover) | Styles the background of 'even' body rows on hover | [Example code](https://app.zingsoft.com/demos/embed/AIYZXTF0) | | `--zg-row-body-background_hover` | Browser's default value | Styles the background of body rows on hover | [Example code](https://app.zingsoft.com/demos/embed/FNZQKLOI) | | `--zg-row-body-background_odd` | var(--zg-row-body-background) | Styles the background of 'odd' body rows | [Example code](https://app.zingsoft.com/demos/embed/GB8RXLPN) | | `--zg-row-body-background_odd_hover` | var(--zg-row-body-background_hover) | Styles the background of 'odd' body rows on hover | [Example code](https://app.zingsoft.com/demos/embed/41M3NTDX) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/EAVHDY7O) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/HNJ2XN7Y) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/E72YL6QW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/E72YL6QW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B3XG2R64) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B3XG2R64) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9PTJDF3I) | | `--zg-row-body-color` | var(--zg-row-color) | Sets the font color of body rows | [Example code](https://app.zingsoft.com/demos/embed/ZWULY1D1) | | `--zg-row-body-color_even` | var(--zg-row-body-color, var(--zg-row-color)) | Sets the font color of 'even' body rows | [Example code](https://app.zingsoft.com/demos/embed/96LE1ORX) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9OLTDTMD) | | `--zg-row-body-color_hover` | var(--zg-row-color_hover, var(--zg-row-color)) | Styles the font color of body rows | [Example code](https://app.zingsoft.com/demos/embed/XCEJKX89) | | `--zg-row-body-color_odd` | var(--zg-row-body-color, var(--zg-row-color)) | Styles the font color of 'odd' body rows | [Example code](https://app.zingsoft.com/demos/embed/RRFIV8VL) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/XVED8WRA) | | `--zg-row-body-height` | var(--zg-row-height) | Sets the height of body rows | [Example code](https://app.zingsoft.com/demos/embed/E2CM149E) | | `--zg-row-body-height_even` | var(--zg-row-body-height, var(--zg-row-height)) | Sets the height of 'even' body rows | [Example code](https://app.zingsoft.com/demos/embed/PHUE49RH) | | `--zg-row-body-height_odd` | var(--zg-row-body-height, var(--zg-row-height)) | Sets the height of 'odd' body rows | [Example code](https://app.zingsoft.com/demos/embed/CC4GKUD7) | | `--zg-row-border` | 0 | Styles the border of row | [Example code](https://app.zingsoft.com/demos/embed/W9UFLHOX) | | `--zg-row-border-bottom` | var(--zg-row-border, var(--zg-row-border, 0)) | Styles the bottom border of row | [Example code](https://app.zingsoft.com/demos/embed/6ZQGCDWL) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/Z3JQXTST) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/MYI4STFX) | | `--zg-row-card-border` | 1px solid var(--theme-border-color) | Styles the border of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/5V9VVXDQ) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/H8PWRCJT) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/48K2LXTZ) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UKFWTUFU) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/6KWRAGP6) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/T8FJCD4O) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/E0MU4LOA) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/NYUK87GS) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/BQ9TSN4A) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UWJMSEYU) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/MYMKX9W0) | | `--zg-row-card-box-shadow` | none | Applies a box shadow behind cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/HQ7WKPH0) | | `--zg-row-card-box-shadow_odd` | var(--zg-row-card-box-shadow, none) | Applies a box shadow behind 'odd' cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/1D7VE3BL) | | `--zg-row-card-display` | grid | Sets the display of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/Y17MDY9A) | | `--zg-row-card-flex-basis` | 100% | Sets the flex-basis of cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/T0ZQ0N6R) | | `--zg-row-card-grid-gap` | 10px | Sets the gap between cards in 'card' layout-mode | [Example code](https://app.zingsoft.com/demos/embed/JOUVG6NN) | | `--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>' | [Example code](https://app.zingsoft.com/demos/embed/3ANH9F1F) | | `--zg-row-color` | Browser's default value | Sets the font color of all rows | [Example code](https://app.zingsoft.com/demos/embed/DZMUUEIE) | | `--zg-row-height` | Browser's default value | Sets the height of all rows | [Example code](https://app.zingsoft.com/demos/embed/MG7QBHBV) | ### ZGRowDetails | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-row-details-background` | var(--zg-head-background) | Styles the background of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/ZQITYBCD) | | `--zg-row-details-border` | 0 | Styles the border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/XUPZGG5M) | | `--zg-row-details-border-bottom` | 0 | Styles the bottom border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/1C1FUBS3) | | `--zg-row-details-border-left` | 0 | Styles the left border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/0Q6KGVBN) | | `--zg-row-details-border-right` | 0 | Styles the right border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/XUOEKMK0) | | `--zg-row-details-border-top` | 0 | Styles the top border of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/8AAENGKD) | | `--zg-row-details-color` | inherit | Sets the font color of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/9NW8L2IH) | | `--zg-row-details-font-family` | inherit | Sets the font family of zg-row-details | [Example code](https://app.zingsoft.com/demos/embed/1IC8COR5) | | `--zg-row-details-font-size` | inherit | Sets the font size of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/3O7ZITE8) | | `--zg-row-details-font-style` | inherit | Sets the font style of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/IWIXU6TH) | | `--zg-row-details-font-weight` | inherit | Sets the font weight of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/LXCWR0IN) | | `--zg-row-details-height` | auto | Sets the height of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/GEKP6YHP) | | `--zg-row-details-line-height` | inherit | Sets the line height of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/IIF14UEK) | | `--zg-row-details-min-height` | 70px | Sets the min-height of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/BINV8SFR) | | `--zg-row-details-padding` | 20px 70px | Sets the padding of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/8GUP63P3) | | `--zg-row-details-transition` | Browser's default value | Sets the transition of zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/XB0M7RTK) | | `--zg-row-details-word-break` | break-all | Sets the word break of items in zg-row-details (v2.x.x only) | [Example code](https://app.zingsoft.com/demos/embed/CKYSM34R) | ### ZGSearch | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-search-background` | Browser's default value | Styles the background of search input field | [Example code](https://app.zingsoft.com/demos/embed/IYW53NTF) | | `--zg-search-border` | 0 | Styles the border of search input field | [Example code](https://app.zingsoft.com/demos/embed/4PDUZTH1) | | `--zg-search-border-bottom` | var(--zg-search-border, 0) | Styles the bottom border of search input field | [Example code](https://app.zingsoft.com/demos/embed/3JVK4H1O) | | `--zg-search-border-left` | var(--zg-search-border, 0) | Styles the left border of search input field | [Example code](https://app.zingsoft.com/demos/embed/YDSOVV4E) | | `--zg-search-border-radius` | 0 | Applies border radius to search input field | [Example code](https://app.zingsoft.com/demos/embed/KXLSPBB4) | | `--zg-search-border-right` | var(--zg-search-border, 0) | Styles the right border of search input field | [Example code](https://app.zingsoft.com/demos/embed/79MXY4RD) | | `--zg-search-border-top` | var(--zg-search-border, 0) | Styles the top border of search input field | [Example code](https://app.zingsoft.com/demos/embed/BVEFKOAX) | | `--zg-search-color` | var(--theme-color_alt) | Sets the font color of search input field | [Example code](https://app.zingsoft.com/demos/embed/P6DBIQ77) | | `--zg-search-font-size` | vd | Sets the font size of search input field | [Example code](https://app.zingsoft.com/demos/embed/0ZWF57WG) | | `--zg-search-font-weight` | var(--theme-font-weight) | Sets the font weight of search input field | [Example code](https://app.zingsoft.com/demos/embed/C460WKFJ) | | `--zg-search-height` | 32px | Sets the height of search input field | [Example code](https://app.zingsoft.com/demos/embed/VHSG3LZG) | | `--zg-search-padding` | 0 10px 0 15px | Sets the padding of search input field | [Example code](https://app.zingsoft.com/demos/embed/I9PHNPDX) | ### ZGSelect | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-select-arrow-border` | 0 | Styles the border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/SWYPNN61) | | `--zg-select-arrow-border-bottom` | var(--zg-select-arrow-border, 0) | Styles the bottom border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/EFHCN5FS) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/MK7EXGQL) | | `--zg-select-arrow-border-right` | var(--zg-select-arrow-border, 0) | Styles the right border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/1DGO75SG) | | `--zg-select-arrow-border-top` | var(--zg-select-arrow-border, 0) | Styles the top border of the select arrow button | [Example code](https://app.zingsoft.com/demos/embed/1IT6DL7R) | | `--zg-select-arrow-color` | #000 | Sets the color select arrow icon. This also sets the font color of the select (`--zg-select-color`). | [Example code](https://app.zingsoft.com/demos/embed/2HTIGGVX) | | `--zg-select-background` | Browser's default value | Styles the background of the entire select parent wrapper | [Example code](https://app.zingsoft.com/demos/embed/FKASS504) | | `--zg-select-border` | 1px solid var(--theme-border-color)) | Styles the border of the select | [Example code](https://app.zingsoft.com/demos/embed/C1KEFISX) | | `--zg-select-border-bottom` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the bottom border of the select | [Example code](https://app.zingsoft.com/demos/embed/318YQ5SY) | | `--zg-select-border-left` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the left border of the select | [Example code](https://app.zingsoft.com/demos/embed/3DXGEXHM) | | `--zg-select-border-radius` | var(--zg-select-border-radius, 0) | Sets the border radius of the select | [Example code](https://app.zingsoft.com/demos/embed/90A63X1F) | | `--zg-select-border-right` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the right border of the select | [Example code](https://app.zingsoft.com/demos/embed/TXSP6105) | | `--zg-select-border-top` | var(--zg-select-border, 1px solid var(--theme-border-color)) | Styles the top border of the select | [Example code](https://app.zingsoft.com/demos/embed/DSM6AYMB) | | `--zg-select-color` | var(--zing-grid-color, var(--theme-color)) | Sets the font color of the select | [Example code](https://app.zingsoft.com/demos/embed/LHLU0OLY) | | `--zg-select-color_active` | var(--theme-color) | Sets the font color of the select option | [Example code](https://app.zingsoft.com/demos/embed/6I5A2CSK) | | `--zg-select-font-family` | Browser's default value | Sets the font family of the select option | [Example code](https://app.zingsoft.com/demos/embed/QEQSYYSZ) | | `--zg-select-font-size` | Browser's default value | Sets the font size of the select option | [Example code](https://app.zingsoft.com/demos/embed/DY8BR3BP) | | `--zg-select-font-weight` | Browser's default value | Sets the font weight of the select option | [Example code](https://app.zingsoft.com/demos/embed/370EUHZ2) | | `--zg-select-height` | 28px | Sets the minimum height of the select | [Example code](https://app.zingsoft.com/demos/embed/B5HJ4SD8) | | `--zg-select-line-height` | Browser's default value | Sets the line height of the select option | [Example code](https://app.zingsoft.com/demos/embed/WLLWY3LZ) | | `--zg-select-min-width` | Browser's default value | Sets the minimum width of select | [Example code](https://app.zingsoft.com/demos/embed/UPQ9KFW0) | | `--zg-select-text-background` | #fff | Styles the background of the 'text' portion of the zg-select element | [Example code](https://app.zingsoft.com/demos/embed/MZG3WH82) | | `--zg-select-transform` | Browser's default value | Sets the transform of the select option | [Example code](https://app.zingsoft.com/demos/embed/UCROZGFJ) | | `--zg-select-trigger-background` | var(--zg-select-arrow-background) | Styles the background of the select arrow button (trigger) | [Example code](https://app.zingsoft.com/demos/embed/VXK1UMDY) | ### ZGSelectMask | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-select-mask-background` | var(--theme-color-secondary) | Styles the background of select mask | [Example code](https://app.zingsoft.com/demos/embed/IRMA1ZQW) | | `--zg-select-mask-opacity` | .1 | Sets the opacity of select mask | [Example code](https://app.zingsoft.com/demos/embed/1UHOVY9H) | ### ZGSelectorMask | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-selector-mask-background` | var(--theme-color-secondary) | Styles the background of selector mask | [Example code](https://app.zingsoft.com/demos/embed/WNZ6POC7) | | `--zg-selector-mask-opacity` | .1 | Sets the opacity of selector mask | [Example code](https://app.zingsoft.com/demos/embed/1UHOVY9H) | ### ZGSeparator | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-separator-border` | 1px solid var(--theme-border-color) | Styles the border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/RNVZ20TC) | | `--zg-separator-border-bottom` | var(--zg-separator-border, 1px solid var(--theme-border-color)) | Styles the bottom border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/LUS0AQM5) | | `--zg-separator-border-left` | var(--zg-separator-border, 0) | Styles the left border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/1644TNHT) | | `--zg-separator-border-right` | var(--zg-separator-border, 1px solid var(--theme-border-color)) | Styles the right border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/0E92TO7L) | | `--zg-separator-border-top` | var(--zg-separator-border, 0) | Styles the top border of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/VLP6EXTJ) | | `--zg-separator-margin` | 5px 0 | Sets the margin of separator in the menu | [Example code](https://app.zingsoft.com/demos/embed/M1YEHDNJ) | ### ZGSource | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-source-background` | var(--theme-color-light) | Styles the background of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/B8CEE4RW) | | `--zg-source-background_bottom` | var(--zg-source-background, var(--theme-color-light)) | Styles the background of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/U2ULZN3K) | | `--zg-source-background_top` | var(--zg-source-background, var(--theme-color-light)) | Styles the background of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/HMPYHCA5) | | `--zg-source-border` | 1px solid var(--theme-border-color) | Styles the border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/61L4J1BK) | | `--zg-source-border_bottom` | var(--zg-source-border, 0) | Styles the border of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/NLGMWVFV) | | `--zg-source-border_top` | 1px solid var(--theme-border-color) | Styles the border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/XDGD9PE9) | | `--zg-source-border-bottom` | var(--zg-source-border, 0) | Styles the bottom border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/7PHK3BWY) | | `--zg-source-border-bottom_bottom` | var(--zg-source-border-bottom, var(--zg-source-border, 0)) | Styles the bottom border of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/HU2H5A7R) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/ZLU0PJ8K) | | `--zg-source-border-left` | var(--zg-source-border, 0) | Styles the left border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/V4JCUJ5Z) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/TMDEY84Q) | | `--zg-source-border-left_top` | var(--zg-source-border-left, var(--zg-source-border, 0)) | Styles the left border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/ZOSVTPPP) | | `--zg-source-border-radius` | 0 | Styles the border radius of source | [Example code](https://app.zingsoft.com/demos/embed/8A6G8QCU) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/FX3KMZFC) | | `--zg-source-border-radius_top` | var(--zg-source-border-radius, 0) | Sets the border radius of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/YANV98VN) | | `--zg-source-border-right` | var(--zg-source-border, 0) | Styles the right border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/F2Q3GGWE) | | `--zg-source-border-right_bottom` | var(--zg-source-border-right, var(--zg-source-border, 0)) | Styles the right border of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/DVIKUSPV) | | `--zg-source-border-right_top` | var(--zg-source-border-right, var(--zg-source-border, 0)) | Styles the right border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/XYYNP87U) | | `--zg-source-border-top` | var(--zg-source-border, 1px solid var(--theme-border-color) | Styles the top border of source when in `` | [Example code](https://app.zingsoft.com/demos/embed/IYUVRHY0) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/HHTAVNAN) | | `--zg-source-border-top_top` | var(--zg-source-border-top, var(--zg-source-border, 0)) | Styles the top border of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/QFZ02F7M) | | `--zg-source-color` | var(--theme-font-size) | Sets the font color content inside of source | [Example code](https://app.zingsoft.com/demos/embed/2V50QBIJ) | | `--zg-source-color_bottom` | var(--zg-source-color, var(--zg-source-border, 0)) | Sets the font color of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/ZYE5IX57) | | `--zg-source-color_top` | var(--zg-source-color, var(--zg-source-border, 0)) | Sets the font color of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/HXKVXNN1) | | `--zg-source-font-size` | inherit | Sets the font size of source | [Example code](https://app.zingsoft.com/demos/embed/26M7XA7S) | | `--zg-source-font-size_bottom` | var(--zg-source-font-size, .8rem) | Sets the font size of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/8OUWG6MW) | | `--zg-source-font-size_top` | var(--zg-source-font-size, .8rem) | Sets the font size of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/9L6UUOD1) | | `--zg-source-font-style` | inherit | Sets the font style of source | [Example code](https://app.zingsoft.com/demos/embed/DHFAV0VU) | | `--zg-source-font-style_bottom` | var(--zg-source-font-style, inherit) | Sets the font style of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/MO9TACWW) | | `--zg-source-font-style_top` | var(--zg-source-font-style, inherit) | Sets the font style of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/840GA0V0) | | `--zg-source-font-weight` | inherit | Sets the font weight of source | [Example code](https://app.zingsoft.com/demos/embed/MN67ITKE) | | `--zg-source-font-weight_bottom` | var(--zg-source-font-weight, inherit) | Sets the font weight of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/ZI6A0WHC) | | `--zg-source-font-weight_top` | var(--zg-source-font-weight, inherit) | Sets the font weight of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/USHIZ6F6) | | `--zg-source-line-height` | inherit | Setes the line height of source | [Example code](https://app.zingsoft.com/demos/embed/XGIEZHE5) | | `--zg-source-line-height_bottom` | var(--zg-source-line-height, inherit) | Sets the line height of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/2AFGKKGF) | | `--zg-source-line-height_top` | var(--zg-source-line-height, inherit) | Sets the line height of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/5YF3GLIN) | | `--zg-source-min-height` | auto | Sets the min-height of source | [Example code](https://app.zingsoft.com/demos/embed/65FQVPFH) | | `--zg-source-min-height_bottom` | var(--zg-source-min-height, var(--zg-source-border, 0)) | Sets the min-height of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/XFJ87KHV) | | `--zg-source-min-height_top` | var(--zg-source-min-height, var(--zg-source-border, 0)) | Sets the min-height of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/0QZLOW3U) | | `--zg-source-padding` | 5px var(--theme-padding_x) | Sets the padding of source | [Example code](https://app.zingsoft.com/demos/embed/3Q444PE7) | | `--zg-source-padding_bottom` | var(--zg-source-padding, 5px var(--theme-padding_x)) | Sets the padding of source when in grid footer | [Example code](https://app.zingsoft.com/demos/embed/32PB37Q8) | | `--zg-source-padding_top` | var(--zg-source-padding, 5px var(--theme-padding_x)) | Sets the padding of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/RVNCXN9N) | | `--zg-source-text-align` | left | Sets text alignment of content inside of source | [Example code](https://app.zingsoft.com/demos/embed/39DT0WPU) | | `--zg-source-text-align_bottom` | var(--zg-source-text-align, var(--zg-source-border, 0)) | Sets the text alignment of source in grid footer | [Example code](https://app.zingsoft.com/demos/embed/F3WEBJI1) | | `--zg-source-text-align_top` | var(--zg-source-text-align, var(--zg-source-border, 0)) | Sets the text alignment of source in grid header | [Example code](https://app.zingsoft.com/demos/embed/340QGB1B) | ### ZGStatus | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-status-align-items` | center | Sets the alignment of inner elements of status | [Example code](https://app.zingsoft.com/demos/embed/ZRT752NI) | | `--zg-status-background` | #333 | Styles the background of status | [Example code](https://app.zingsoft.com/demos/embed/W5V0YNUC) | | `--zg-status-border` | 0 | Styles the border of status | [Example code](https://app.zingsoft.com/demos/embed/Z8G1Y9J0) | | `--zg-status-border-bottom` | var(--zg-status-border, 0) | Styles the bottom border of status | [Example code](https://app.zingsoft.com/demos/embed/RDBMZRYT) | | `--zg-status-border-left` | var(--zg-status-border, 0) | Styles the left border of status | [Example code](https://app.zingsoft.com/demos/embed/0N6OVVNL) | | `--zg-status-border-right` | var(--zg-status-border, 0) | Styles the right border of status | [Example code](https://app.zingsoft.com/demos/embed/V4FJ8NP0) | | `--zg-status-border-top` | var(--zg-status-border, 1px solid var(--theme-border-color)) | Styles the top border of status | [Example code](https://app.zingsoft.com/demos/embed/JR75IU0Z) | | `--zg-status-box-shadow` | none | Applies a box shadow behind status | [Example code](https://app.zingsoft.com/demos/embed/AFADODNH) | | `--zg-status-color` | #fff | Sets the font color of contents in status | [Example code](https://app.zingsoft.com/demos/embed/4M1VTWI2) | | `--zg-status-error-background` | red | Styles the background of 'error' status | [Example code](https://app.zingsoft.com/demos/embed/6PA9F3ZV) | | `--zg-status-error-color` | #fff | Sets the font color of contents of 'error' status | [Example code](https://app.zingsoft.com/demos/embed/I2PDH9NT) | | `--zg-status-font-family` | var(--theme-font-family) | Sets the font family of contents in status | [Example code](https://app.zingsoft.com/demos/embed/V9XSI899) | | `--zg-status-font-size` | inherit | Sets the font size of contents in status | [Example code](https://app.zingsoft.com/demos/embed/DWUD8JY8) | | `--zg-status-line-height` | 1 | Sets the line height of status | [Example code](https://app.zingsoft.com/demos/embed/NIZJO06Q) | | `--zg-status-margin` | 0 | Sets the margin of status | [Example code](https://app.zingsoft.com/demos/embed/68R9EOE1) | | `--zg-status-max-width` | 300px | Sets the max-width of the status-message area | [Example code](https://app.zingsoft.com/demos/embed/SQY0NAMY) | | `--zg-status-min-height` | 27px | Sets the min-height of status | [Example code](https://app.zingsoft.com/demos/embed/I8H3QJQH) | | `--zg-status-padding` | 14px var(--theme-padding_x) | Sets the padding of status | [Example code](https://app.zingsoft.com/demos/embed/OMHQO954) | | `--zg-status-success-background` | green | Styles the background of 'success' status | [Example code](https://app.zingsoft.com/demos/embed/NBN1ICRW) | | `--zg-status-success-color` | #fff | Sets the font color of contents of 'success' status | [Example code](https://app.zingsoft.com/demos/embed/NOBFYNI2) | ### ZGText | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-text-color` | Browser's default value | Sets the font color of text | [Example code](https://app.zingsoft.com/demos/embed/6MC0B6AC) | | `--zg-text-font-family` | Browser's default value | Sets the font family of text | [Example code](https://app.zingsoft.com/demos/embed/0WX0EZZ8) | | `--zg-text-font-size` | Browser's default value | Sets the font size of text | [Example code](https://app.zingsoft.com/demos/embed/R9RX1WRC) | | `--zg-text-font-style` | Browser's default value | Sets the font style of text | [Example code](https://app.zingsoft.com/demos/embed/LE7Z8B73) | | `--zg-text-font-weight` | Browser's default value | Sets the font weight of text | [Example code](https://app.zingsoft.com/demos/embed/J9EWFRHT) | | `--zg-text-line-height` | .8 | Sets the line height of text | [Example code](https://app.zingsoft.com/demos/embed/W14MFSEF) | ### ZGWatermark | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-watermark-align-items` | center | Sets the alignment of watermark | [Example code](https://app.zingsoft.com/demos/embed/S5YW98DV) | | `--zg-watermark-background` | #fbfbfb | Styles the background of watermark | [Example code](https://app.zingsoft.com/demos/embed/PLI8AW69) | | `--zg-watermark-border-bottom` | var(--zg-watermark-border, 0) | Styles the bottom border of watermark | [Example code](https://app.zingsoft.com/demos/embed/3VCNCH3C) | | `--zg-watermark-border-left` | var(--zg-watermark-border, 0) | Styles the left border of watermark | [Example code](https://app.zingsoft.com/demos/embed/13YH2AD1) | | `--zg-watermark-border-radius` | inherit | Applies border radius to the watermark | [Example code](https://app.zingsoft.com/demos/embed/HCZ0FTPR) | | `--zg-watermark-border-right` | var(--zg-watermark-border, 0) | Styles the right border of watermark | [Example code](https://app.zingsoft.com/demos/embed/ULJ95NPX) | | `--zg-watermark-border-top` | var(--zg-watermark-border, 1px solid var(--theme-border-color)) | Styles the top border of watermark | [Example code](https://app.zingsoft.com/demos/embed/GCQARHA3) | | `--zg-watermark-box-shadow` | none | Applies a box shadow behing the watermark | [Example code](https://app.zingsoft.com/demos/embed/DNU5EE34) | | `--zg-watermark-color` | var(--theme-color-primary) | Sets the color of watermark | [Example code](https://app.zingsoft.com/demos/embed/RHV3AZL7) | | `--zg-watermark-color_strong` | var(--theme-color-secondary) | Sets color of strong in watermark | [Example code](https://app.zingsoft.com/demos/embed/OWU6641C) | | `--zg-watermark-font-family` | var(--theme-font-family) | Sets the font of watermark | [Example code](https://app.zingsoft.com/demos/embed/Z5DUURMU) | | `--zg-watermark-font-size` | .75rem | Sets the font size of watermark | [Example code](https://app.zingsoft.com/demos/embed/GSCFSFBN) | | `--zg-watermark-justify-content` | flex-end | Sets the horizontal alignment of contents in the watermark | [Example code](https://app.zingsoft.com/demos/embed/J3IEZOOI) | | `--zg-watermark-margin` | 0 | Sets margins of watermark | [Example code](https://app.zingsoft.com/demos/embed/JKMSIB8K) | | `--zg-watermark-min-height` | 27px | Sets the minimum height of watermark | [Example code](https://app.zingsoft.com/demos/embed/LLLRII80) | | `--zg-watermark-padding` | 0 var(--theme-padding_x) | Sets padding of watermark | [Example code](https://app.zingsoft.com/demos/embed/2F6JMW08) | | `--zg-watermark-width` | auto | Sets width of watermark | [Example code](https://app.zingsoft.com/demos/embed/52DLY7I5) |