Global CSS API: Controls - File
The following CSS custom properties are used for file input type control UI.
Native File Input Type Control
Properties used for native file input type control UI.
Base
Properties used for base file input type control UI.
| Property | Description | Default |
|---|---|---|
| --gf-ctrl-file-padding-x | Horizontal (left/right) padding. | 0 var(--gf-ctrl-padding-x) |
File Input "Button"
Properties used for file input type control "button" UI.
| Property | Description | Default |
|---|---|---|
| Background | ||
| --gf-ctrl-file-btn-bg-color | Background color. | var(--gf-color-secondary-darker) |
| --gf-ctrl-file-btn-bg-color-hover | Background color on hover. | var(--gf-color-secondary) |
| --gf-ctrl-file-btn-bg-color-focus | Background color on focus. | var(--gf-ctrl-file-btn-bg-color) |
| --gf-ctrl-file-btn-bg-color-disabled | Background color when disabled. | var(--gf-ctrl-file-btn-bg-color) |
| Border | ||
| --gf-ctrl-file-btn-border-inline-end-width | Inline end (right) border width. | 1px |
| --gf-ctrl-file-btn-border-inline-end-style | Inline end (right) border style. | solid |
| --gf-ctrl-file-btn-border-inline-end-color | Inline end (right) border color. | var(--gf-ctrl-border-color) |
| --gf-ctrl-file-btn-border-inline-end-color-hover | Inline end (right) border color on hover. | var(--gf-ctrl-file-btn-border-inline-end-color) |
| --gf-ctrl-file-btn-border-inline-end-color-focus | Inline end (right) border color on focus. | var(--gf-ctrl-file-btn-border-inline-end-color) |
| --gf-ctrl-file-btn-border-inline-end-color-disabled | Inline end (right) border color when disabled. | var(--gf-ctrl-file-btn-border-inline-end-color) |
| --gf-ctrl-file-btn-radius | Border radius. | var(--gf-ctrl-radius) |
| Color | ||
| --gf-ctrl-file-btn-color | Color. | rgba(var(--gf-color-secondary-contrast-rgb), 0.725) |
| --gf-ctrl-file-btn-color-hover | Color on hover. | var(--gf-ctrl-file-btn-color) |
| --gf-ctrl-file-btn-color-focus | Color on focus. | var(--gf-ctrl-file-btn-color) |
| --gf-ctrl-file-btn-color-disabled | Color when disabled. | var(--gf-ctrl-file-btn-color) |
| Typography | ||
| --gf-ctrl-file-btn-font-family | Font family. | var(--gf-font-family-base) |
| --gf-ctrl-file-btn-font-size | Font size. | 14px |
| --gf-ctrl-file-btn-font-style | Font style. | var(--gf-font-style-base) |
| --gf-ctrl-file-btn-font-weight | Font weight. | 500 |
| --gf-ctrl-file-btn-letter-spacing | Letter spacing. | var(--gf-letter-spacing-primary) |
| --gf-ctrl-file-btn-line-height | Line height. | 1.43 |
| --gf-ctrl-file-btn-text-decoration | Text decoration. | none |
| --gf-ctrl-file-btn-text-transform | Text transform. | none |
| Spacing | ||
| --gf-ctrl-file-btn-margin-x | Horizontal (left/right) margin. | 0 12px |
| --gf-ctrl-file-btn-padding-x | Horizontal (left/right) padding. | 12px |
| Transition & Animation | ||
| --gf-ctrl-file-btn-transition | Transition. | var(--gf-ctrl-transition) |
Enhanced File Input Type Control
Properties used for enhanced file input type control UI.
File Upload Drop Area
Properties used for enhanced file upload drop area UI.
| Property | Description | Default |
|---|---|---|
| Border | ||
| --gf-ctrl-file-zone-border-style | Border style. | dashed |
| --gf-ctrl-file-zone-radius | Border radius. | var(--gf-ctrl-radius-max-lg) |
| Color | ||
| --gf-ctrl-file-zone-color | Color. | rgba(var(--gf-color-in-ctrl-contrast-rgb), 0.725) |
| Sizing | ||
| --gf-ctrl-file-zone-height | File upload drop area height. | auto |
| Spacing | ||
| --gf-ctrl-file-zone-padding-x | Horizontal (left/right) padding. | 40px |
| --gf-ctrl-file-zone-padding-y | Vertical (top/bottom) padding. | 40px |
| --gf-ctrl-file-zone-instructions-margin-y-end | Vertical end (bottom) margin for instructions. | 12px |
| Typography | ||
| --gf-ctrl-file-zone-font-weight | Font weight. | 500 |
| --gf-ctrl-file-zone-line-height | Line height. | 1 |
| Icon | ||
| --gf-ctrl-file-zone-icon-color | Icon color. | var(--gf-color-in-ctrl-primary) |
| --gf-ctrl-file-zone-icon-font-size | Icon font size. | 36px |
| --gf-ctrl-file-zone-icon-margin-y-end | Vertical end (bottom) margin. | 8px |
File Upload Progress
Properties used for enhanced file upload progress UI.
| Property | Description | Default |
|---|---|---|
| Progress UI | ||
| --gf-ctrl-file-prog-ui-gap | Progress UI gap. | 12px |
| --gf-ctrl-file-prog-ui-size | Progress bar size. | var(--gf-icon-font-size) |
| Progress Bar | ||
| --gf-ctrl-file-prog-bar-bg-color | Progress bar background color. | var(--gf-color-out-ctrl-light) |
| --gf-ctrl-file-prog-bar-bg-color-loading | Progress bar background color when loading. | var(--gf-color-primary) |
| --gf-ctrl-file-prog-bar-height | Progress bar height. | 6px |
| --gf-ctrl-file-prog-bar-radius | Progress bar border radius. | var(--gf-radius) |
| --gf-ctrl-file-prog-bar-transition | Progress bar transition. | var(--gf-transition-ctrl) |
| Progress Text | ||
| --gf-ctrl-file-prog-text-color | Progress UI text color. | var(--gf-ctrl-desc-color) |
| --gf-ctrl-file-prog-text-min-width | Progress UI text minimum width. | 33px |
| --gf-ctrl-file-prog-text-font-size | Progress UI text font size. | 12px |
| Progress Button | ||
| --gf-ctrl-file-prog-btn-inset-y-start | Progress UI button vertical start (top) position. | -2px |
| --gf-ctrl-file-prog-btn-inset-x-end | Progress UI button horizontal end (right) position. | -2px |
| --gf-ctrl-file-prog-btn-position | Progress UI button position. | absolute |
| --gf-ctrl-file-prog-btn-font-size-cancel | Progress UI cancel/remove button font size. | 0 |
| --gf-ctrl-file-prog-btn-icon-size | Progress UI button icon size. | var(--gf-icon-font-size) |
| --gf-ctrl-file-prog-btn-icon-color-complete | Progress UI button icon color when complete. | var(--gf-color-success) |
File Upload Preview
Properties used for enhanced file upload preview UI.
| Property | Description | Default |
|---|---|---|
| Preview Area | ||
| --gf-ctrl-file-prev-area-gap | Preview area gap. | 16px |
| --gf-ctrl-file-prev-area-margin-y-start | Preview area vertical start (top) margin. | 16px |
| --gf-ctrl-file-prev-font-family | Preview area font family. | var(--gf-font-family-secondary) |
| --gf-ctrl-file-prev-font-size | Preview area font size. | var(--gf-font-size-secondary) |
| --gf-ctrl-file-prev-font-style | Preview area font style. | var(--gf-font-style-secondary) |
| --gf-ctrl-file-prev-font-weight | Preview area font weight. | var(--gf-font-weight-secondary) |
| --gf-ctrl-file-prev-letter-spacing | Preview area letter spacing. | var(--gf-letter-spacing-secondary) |
| --gf-ctrl-file-prev-line-height | Preview area line height. | 1 |
| --gf-ctrl-file-prev-gap | Preview item gap. | 4px |
| Preview Item | ||
| --gf-ctrl-file-prev-name-color | Preview item name color. | var(--gf-ctrl-label-color-primary) |
| --gf-ctrl-file-prev-name-line-height | Preview item name line height. | var(--gf-line-height-secondary) |
| --gf-ctrl-file-prev-name-overflow | Preview item name overflow. | hidden |
| --gf-ctrl-file-prev-name-padding-x-end | Preview item name horizontal end (right) padding. | calc(var(--gf-ctrl-file-prog-btn-icon-size) + var(--gf-ctrl-file-prog-text-min-width) + calc(var(--gf-ctrl-file-prog-ui-gap) * 2)) |
| --gf-ctrl-file-prev-name-text-overflow | Preview item name text overflow. | ellipsis |
| --gf-ctrl-file-prev-name-white-space | Preview item name white space. | nowrap |
| Preview Item Size | ||
| --gf-ctrl-file-prev-size-color | Preview item size color. | var(--gf-ctrl-desc-color) |