Global CSS API: Controls - Date
The following CSS custom properties are used for the date control UI, namely the date picker.
Enhanced UI Date Picker
Properties used for enhanced date picker control UI.
| Property | Description | Default |
|---|---|---|
| Base | ||
| --gf-ctrl-date-picker-bg-color | Background color. | var(--gf-ctrl-bg-color) |
| --gf-ctrl-date-picker-shadow | Box shadow. | 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03) |
| --gf-ctrl-date-picker-padding-y | Vertical (top/bottom) padding. | 16px 12px |
| --gf-ctrl-date-picker-padding-y-viewport-sm | Vertical (top/bottom) padding for wider viewports. | 16px |
| --gf-ctrl-date-picker-padding-x | Horizontal (left/right) padding. | 12px |
| --gf-ctrl-date-picker-padding-x-viewport-sm | Horizontal (left/right) padding for wider viewports. | 16px |
| --gf-ctrl-date-picker-margin-y-start | Vertical start (top) margin. | 12px |
| --gf-ctrl-date-picker-radius | Border radius. | var(--gf-ctrl-radius-max-md) |
| --gf-ctrl-date-picker-width | Width. | 250px |
| --gf-ctrl-date-picker-width-viewport-sm | Width for wider viewports. | 300px |
| Icon | ||
| --gf-ctrl-date-picker-header-icons-width | Icon width. | 20px |
| --gf-ctrl-date-picker-header-icons-color | Icon color. | var(--gf-ctrl-icon-color) |
| --gf-ctrl-date-picker-header-icons-color-hover | Icon color on hover. | var(--gf-ctrl-icon-color-hover) |
| --gf-ctrl-date-picker-header-icons-font-size | Icon font size. | 20px |
| Title | ||
| --gf-ctrl-date-picker-title-color | Title color. | var(--gf-color-secondary-contrast) |
| --gf-ctrl-date-picker-title-font-size | Title font size. | 12px |
| --gf-ctrl-date-picker-title-font-size-viewport-sm | Title font size for wider viewports. | 14px |
| --gf-ctrl-date-picker-title-font-weight | Title font weight. | 500 |
| --gf-ctrl-date-picker-title-gap | Title gap. | 4px |
| --gf-ctrl-date-picker-title-gap-viewport-sm | Title gap for wider viewports. | 8px |
| --gf-ctrl-date-picker-title-line-height | Title line height. | 1.5 |
| --gf-ctrl-date-picker-title-margin-x | Title horizontal (left/right) margin. | 4px |
| --gf-ctrl-date-picker-title-margin-x-viewport-sm | Title horizontal (left/right) margin for wider viewports. | 8px |
| Dropdown | ||
| --gf-ctrl-date-picker-dropdown-bg-img | Dropdown icon background image. | var(--gf-icon-ctrl-select) |
| --gf-ctrl-date-picker-dropdown-bg-position | Dropdown icon background position. | var(--gf-ctrl-select-icon-position) |
| --gf-ctrl-date-picker-dropdown-bg-size | Dropdown icon background size. | var(--gf-ctrl-select-icon-size) |
| --gf-ctrl-date-picker-dropdown-border-color | Dropdown border color. | var(--gf-color-in-ctrl-light-darker) |
| --gf-ctrl-date-picker-dropdown-border-style | Dropdown border style. | var(--gf-ctrl-border-style) |
| --gf-ctrl-date-picker-dropdown-border-width | Dropdown border width. | var(--gf-ctrl-border-width) |
| --gf-ctrl-date-picker-dropdown-shadow | Dropdown box shadow. | 0 1px 2px rgba(0, 0, 0, 0.05) |
| --gf-ctrl-date-picker-dropdown-text-align | Dropdown text alignment. | start |
| Table | ||
| --gf-ctrl-date-picker-table-margin-y-start | Table top margin. | 16px |
| --gf-ctrl-date-picker-table-margin-y-end | Table bottom margin. | 0 |
| Table - Head Cell | ||
| --gf-ctrl-date-picker-head-cell-font-size | Head cell font size. | 12px |
| --gf-ctrl-date-picker-head-cell-font-weight | Head cell font weight. | 600 |
| --gf-ctrl-date-picker-head-cell-line-height | Head cell line height. | 1.33 |
| Table - Cell | ||
| --gf-ctrl-date-picker-cell-padding | Cell padding. | 1px |
| --gf-ctrl-date-picker-cell-padding-y | Cell block (top/bottom) padding. | 6px |
| --gf-ctrl-date-picker-cell-padding-y-viewport-sm | Cell vertical (top/bottom) padding for wider viewports. | var(--gf-ctrl-date-picker-cell-padding) |
| --gf-ctrl-date-picker-cell-height | Cell height. | 29px |
| --gf-ctrl-date-picker-cell-height-viewport-sm | Cell height for wider viewports. | 40px |
| --gf-ctrl-date-picker-cell-font-size | Cell font size. | 14px |
| --gf-ctrl-date-picker-cell-font-weight | Cell font weight. | 400 |
| --gf-ctrl-date-picker-cell-line-height | Cell line height. | 1.43 |
| Table - Cell Content | ||
| --gf-ctrl-date-picker-cell-content-align-items | Cell content alignment. | center |
| --gf-ctrl-date-picker-cell-content-bg-color-disabled | Cell content background color when disabled. | transparent |
| --gf-ctrl-date-picker-cell-content-bg-color-hover | Cell content background color on hover. | var(--gform-theme-color-uber-light-blue) |
| --gf-ctrl-date-picker-cell-content-bg-color-selected | Cell content background color when selected. | var(--gf-color-in-ctrl-primary) |
| --gf-ctrl-date-picker-cell-content-border | Cell content border. | var(--gf-ctrl-border-width) var(--gf-ctrl-border-style) var(--gf-color-in-ctrl-primary) |
| --gf-ctrl-date-picker-cell-content-radius | Cell content border radius. | var(--gf-ctrl-radius-max-md) |
| --gf-ctrl-date-picker-cell-content-color | Cell content color. | var(--gf-color-secondary-contrast) |
| --gf-ctrl-date-picker-cell-content-color-disabled | Cell content color when disabled. | var(--gform-theme-color-uber-light) |
| --gf-ctrl-date-picker-cell-content-color-hover | Cell content color on hover. | var(--gf-ctrl-date-picker-cell-content-color) |
| --gf-ctrl-date-picker-cell-content-color-selected | Cell content color when selected. | var(--gf-color-in-ctrl-primary-contrast) |
| --gf-ctrl-date-picker-cell-content-width | Cell content width. | 27px |
| --gf-ctrl-date-picker-cell-content-width-viewport-sm | Cell content width for wider viewports. | 100% |