UNPKG

@gravityforms/components

Version:

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

1 lines 8.58 kB
{"version":3,"sources":["file-upload.css"],"names":[],"mappings":"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","file":"file-upload.css","sourcesContent":[".gform-admin {\n\n\t/* File Upload UI */\n\n\t.gform-file-upload__wrapper {\n\t\talign-items: center;\n\t\tborder: 1px dashed var(--gform-admin-color-santas);\n\t\tborder-radius: 3px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-admin-font-size-base);\n\t\tjustify-content: center;\n\t\tmin-block-size: 150px;\n\t\tposition: relative;\n\t\ttransition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t&:where(:not(.gform-file-upload__wrapper--disabled)) {\n\n\t\t\t&:hover,\n\t\t\t&:focus,\n\t\t\t&:where(:has(.gform-file-upload__input:focus)),\n\t\t\t&:where(:has(.file-drop > .file-drop-target.file-drop-dragging-over-frame)) {\n\t\t\t\tbackground-color: var(--gform-admin-color-light-blue);\n\t\t\t\tcursor: pointer;\n\n\t\t\t\t.gform-file-upload__icon,\n\t\t\t\t.gform-file-upload__preview-icon {\n\t\t\t\t\tbackground-color: var(--gform-admin-color-snuff);\n\t\t\t\t\tborder-color: var(--gform-admin-color-white-lilac);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.file-drop {\n\t\t\tblock-size: 100%;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\n\t\t\t& > .file-drop-target {\n\t\t\t\talign-content: center;\n\t\t\t\talign-items: center;\n\t\t\t\tblock-size: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tinline-size: 100%;\n\t\t\t\tinset-block-start: 0;\n\t\t\t\tinset-inline-start: 0;\n\t\t\t\tjustify-content: center;\n\t\t\t\tpadding-block: var(--gform-admin-spacer-2);\n\t\t\t\tpadding-inline: var(--gform-admin-spacer-4);\n\t\t\t\tposition: absolute;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-file-upload__wrapper--disabled {\n\t\tborder-color: var(--gform-admin-color-snuff);\n\t\tcolor: var(--gform-admin-color-snuff);\n\n\t\t.gform-file-upload__message,\n\t\t.gform-file-upload__filetypes,\n\t\t.gform-file-upload__custom-helper-text {\n\t\t\tcolor: var(--gform-admin-color-snuff);\n\t\t}\n\n\t\t.gform-file-upload__icon,\n\t\t.gform-file-upload__preview-icon {\n\t\t\tcolor: var(--gform-admin-color-snuff);\n\t\t}\n\t}\n\n\t.gform-file-upload__icon,\n\t.gform-file-upload__preview-icon {\n\t\talign-items: center;\n\t\tbackground-color: var(--gform-admin-color-white-lilac);\n\t\tblock-size: 46px;\n\t\tborder: 6px solid var(--gform-admin-color-light-blue);\n\t\tborder-radius: 100%;\n\t\tcolor: var(--gform-admin-color-comet);\n\t\tdisplay: flex;\n\t\tflex: none;\n\t\tfont-size: 1.375rem;\n\t\tinline-size: 46px;\n\t\tjustify-content: center;\n\t\ttransition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n\t}\n\n\t.gform-file-upload__message,\n\t.gform-file-upload__filetypes,\n\t.gform-file-upload__custom-helper-text {\n\t\tmax-inline-size: 400px;\n\t}\n\n\t.gform-file-upload {\n\t\tblock-size: 100%;\n\t\tinline-size: 100%;\n\t\tinset-block-start: 0;\n\t\tinset-inline-start: 0;\n\t\tposition: absolute;\n\t}\n\n\t.gform-file-upload__input {\n\t\tblock-size: 1px;\n\t\tclip: rect(0, 0, 0, 0);\n\t\tclip-path: inset(50%);\n\t\tinline-size: 1px;\n\t\tmargin: -1px;\n\t\topacity: 0;\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t\tposition: absolute;\n\t}\n\n\t.gform-file-upload__bold-text {\n\t\tfont-weight: var(--gform-admin-font-weight-medium);\n\t}\n\n\t.gform-file-upload__wrapper--has-preview {\n\t\tpadding: 1rem;\n\n\t\t.gform-file-upload__message,\n\t\t.gform-file-upload__icon,\n\t\t.gform-file-upload__filetypes,\n\t\t.gform-file-upload__custom-helper-text {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t/* File Preview UI */\n\n\t.gform-file-upload__preview {\n\t\tpadding-block-end: var(--gform-admin-spacer-4);\n\t\ttext-align: center;\n\t}\n\n\t.gform-file-upload__preview:where(:not(.gform-file-upload__preview--file)),\n\t.gform-file-upload__preview--image {\n\t\tline-height: 0;\n\n\t\timg {\n\t\t\tmax-block-size: 300px;\n\t\t\tmax-inline-size: 100%;\n\t\t}\n\t}\n\n\t.gform-file-upload__preview--file {\n\t\talign-items: center;\n\t\tgap: var(--gform-admin-spacer-2);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t}\n\n\t.gform-file-upload__preview-file-name {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* File Preview UI (Multi-File Upload) */\n\n\t.gform-file-upload__preview--multi {\n\t\tbox-sizing: border-box;\n\t\tflex-direction: column;\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-admin-font-size-base);\n\t\tgap: var(--gform-admin-spacer-4);\n\t\tmargin: var(--gform-admin-spacer-4) auto 0;\n\t\tpadding: 0;\n\t\ttext-align: start;\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t.gform-file-upload__preview-file-name {\n\t\t\tdisplay: block;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t.gform-file-upload__preview-files {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gform-admin-spacer-3);\n\t\tinline-size: 100%;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.gform-file-upload__preview-file {\n\t\talign-items: flex-start;\n\t\tbackground-color: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-white-lilac);\n\t\tborder-radius: 3px;\n\t\tdisplay: flex;\n\t\tgap: var(--gform-admin-spacer-3);\n\t\tjustify-content: space-between;\n\t\tpadding: var(--gform-admin-spacer-3) var(--gform-admin-spacer-4);\n\t\ttransition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n\t}\n\n\t.gform-file-upload__preview-file-content {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tgap: var(--gform-admin-spacer-4);\n\t\tmin-width: 0; \n\t}\n\n\t.gform-file-upload__preview-meta {\n\t\tflex: 1 1 auto;\n\t\tmin-width: 0;\n\t}\n\n\t.gform-file-upload__preview-file-actions {\n\t\tdisplay: flex;\n\t\tflex: 0 0 auto;\n\t\tgap: var(--gform-admin-spacer-1);\n\t\tjustify-content: space-between;\n\t}\n\n\t/* File Actions UI (Multi-File Upload) */\n\n\t.gform-file-upload__preview-files-actions {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tgap: var(--gform-admin-spacer-4);\n\t\tjustify-content: center;\n\t}\n\n\t/* File Actions UI (Single-File Upload) */\n\n\t.gform-file-upload__buttons-wrapper {\n\t\tdisplay: flex;\n\t\tgap: 0.875rem;\n\t\tjustify-content: center;\n\t}\n}\n"]}