Examples
Documentation
Overview
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-file-upload | <div>, <form> | Initiates the file upload component. Required. |
.pf-c-file-upload__file-select | <div> | Initiates the file select element. Required |
.pf-c-file-upload__file-details | <div> | Initiates the file details element. Required |
.pf-c-file-upload__file-details-spinner | <div> | Initiates the file details element. Required |
.pf-m-drag-hover | .pf-c-file-upload | Modifies file upload for when an element is dragged or dropped inside of its container. |
.pf-m-loading | .pf-c-file-upload | Modifies file upload for the loading state. |
CSS variables
| .pf-c-file-upload | --pf-c-file-upload--m-loading__file-details--before--BackgroundColor | #fff | ||
| .pf-c-file-upload | --pf-c-file-upload--m-loading__file-details--before--Left | 1px | ||
| .pf-c-file-upload | --pf-c-file-upload--m-loading__file-details--before--Right | 1px | ||
| .pf-c-file-upload | --pf-c-file-upload--m-loading__file-details--before--Bottom | 1px | ||
| .pf-c-file-upload | --pf-c-file-upload--m-drag-hover--before--BorderWidth | 1px | ||
| .pf-c-file-upload | --pf-c-file-upload--m-drag-hover--before--BorderColor | #06c | ||
| .pf-c-file-upload | --pf-c-file-upload--m-drag-hover--before--ZIndex | 100 | ||
| .pf-c-file-upload | --pf-c-file-upload--m-drag-hover--after--BackgroundColor | #06c | ||
| .pf-c-file-upload | --pf-c-file-upload--m-drag-hover--after--Opacity | .1 | ||
| .pf-c-file-upload | --pf-c-file-upload__file-details__c-form-control--MinHeight | calc(4rem * 2) | ||
| .pf-c-file-upload | --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset | calc(-1 * 0.25rem) | ||
View source on GitHub