Global CSS API: Fields - Page
The following CSS custom properties are used for the page based field UI.
Page Base
Properties used for base page field UI.
| Property | Description | Default |
|---|---|---|
| Color | ||
| --gf-field-pg-prog-color | Color. | var(--gf-color-out-ctrl-dark) |
| Spacing | ||
| --gf-field-pg-prog-margin-y-end | Vertical end (bottom) margin. | 24px |
| --gf-field-pg-prog-title-margin-y-end | Vertical end (bottom) margin for title. | 16px |
| Typography | ||
| --gf-field-pg-prog-font-family | Font family. | var(--gf-font-family-base) |
| --gf-field-pg-prog-font-size | Font size. | 14px |
| --gf-field-pg-prog-font-style | Font style. | var(--gf-font-style-base) |
| --gf-field-pg-prog-font-weight | Font weight. | 600 |
| --gf-field-pg-prog-letter-spacing | Letter spacing. | 0 |
| --gf-field-pg-prog-line-height | Line height. | 1 |
| --gf-field-pg-prog-text-transform | Text transform. | uppercase |
Page - Progress Bar
Properties used for page field progress bar UI.
| Property | Description | Default |
|---|---|---|
| Background | ||
| --gf-field-pg-prog-bar-bg-color | Background color. | var(--gf-color-out-ctrl-light) |
| --gf-field-pg-prog-bar-bg-color-blue | Background color for blue theme. | #204ce5 |
| --gf-field-pg-prog-bar-bg-color-gray | Background color for gray theme. | var(--gf-color-out-ctrl-dark) |
| --gf-field-pg-prog-bar-bg-color-green | Background color for green theme. | #31c48d |
| --gf-field-pg-prog-bar-bg-color-orange | Background color for orange theme. | #ff5a1f |
| --gf-field-pg-prog-bar-bg-color-red | Background color for red theme. | #c02b0a |
| --gf-field-pg-prog-bar-bg-gradient-spring | Background gradient for spring theme. | linear-gradient(270deg, #9cd790 0%, #76d7db 100%) |
| --gf-field-pg-prog-bar-bg-gradient-blues | Background gradient for blues theme. | linear-gradient(270deg, #00c2ff 0%, #7838e2 100%) |
| --gf-field-pg-prog-bar-bg-gradient-rainbow | Background gradient for rainbow theme. | linear-gradient(274.73deg, #74b551 -5.58%, #f3ca30 44.81%, #cd302b 93.15%) |
| Border | ||
| --gf-field-pg-prog-bar-radius | Border radius. | 100px |
| Sizing | ||
| --gf-field-pg-prog-bar-height | Height. | 10px |
Page - Steps
Properties used for page field steps UI.
| Grouo | Property | Description | Default |
|---|---|---|---|
| Background | --gf-field-pg-steps-number-bg-color | Background color. | transparent |
| --gf-field-pg-steps-number-bg-color-active | Background color for active step. | var(--gf-color-out-ctrl-light) | |
| --gf-field-pg-steps-number-bg-color-complete | Background color for completed step. | var(--gf-color-primary) | |
| Border | |||
| --gf-field-pg-steps-number-border-color | Border color. | var(--gf-color-out-ctrl-light-darker) | |
| --gf-field-pg-steps-number-border-color-active | Border color for active step. | transparent | |
| --gf-field-pg-steps-number-border-color-complete | Border color for completed step. | var(--gf-color-primary) | |
| --gf-field-pg-steps-number-border-style | Border style. | solid | |
| --gf-field-pg-steps-number-border-width | Border width. | 2px | |
| --gf-field-pg-steps-number-radius | Border radius. | 50% | |
| Color | |||
| --gf-field-pg-steps-number-color | Color. | var(--gf-color-out-ctrl-dark) | |
| --gf-field-pg-steps-number-color-active | Color for active step. | var(--gf-field-pg-steps-number-color) | |
| --gf-field-pg-steps-number-color-complete | Color for completed step. | var(--gf-color-primary-contrast) | |
| Icon | |||
| --gf-field-pg-steps-icon-font-size | Font size. | var(--gf-icon-font-size) | |
| Sizing | |||
| --gf-field-pg-steps-number-size | Size. | 32px | |
| Spacing | |||
| --gf-field-pg-steps-step-gap | Gap. | 12px | |