@gravityforms/components/dist/css/admin/file-upload.css

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

/* File Upload UI */

	.gform-admin .gform-file-upload__wrapper {
		align-items: center;
		border: 1px dashed #9092b0;
		border-radius: 3px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 1rem;
		justify-content: center;
		min-block-size: 150px;
		position: relative;
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}

	.gform-admin .gform-file-upload__wrapper * {
			box-sizing: border-box;
		}

	.gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.gform-file-upload__input\:focus\)]), .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.file-drop\%20\%3E\%20.file-drop-target.file-drop-dragging-over-frame\)]) {
				background-color: #f6f9fc;
				cursor: pointer;
			}

	.gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.gform-file-upload__input\:focus\)]), .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.file-drop\%20\%3E\%20.file-drop-target.file-drop-dragging-over-frame\)]) {
				background-color: #f6f9fc;
				cursor: pointer;
			}

	.gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where(:has(.gform-file-upload__input:focus)), .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where(:has(.file-drop > .file-drop-target.file-drop-dragging-over-frame)) {
				background-color: #f6f9fc;
				cursor: pointer;
			}

	.gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.gform-file-upload__input\:focus\)]) .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.gform-file-upload__input\:focus\)]) .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.file-drop\%20\%3E\%20.file-drop-target.file-drop-dragging-over-frame\)]) .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.file-drop\%20\%3E\%20.file-drop-target.file-drop-dragging-over-frame\)]) .gform-file-upload__preview-icon {
					background-color: #d5d7e9;
					border-color: #ecedf8;
				}

	.gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.gform-file-upload__input\:focus\)]) .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.gform-file-upload__input\:focus\)]) .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.file-drop\%20\%3E\%20.file-drop-target.file-drop-dragging-over-frame\)]) .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where([\:has\(.file-drop\%20\%3E\%20.file-drop-target.file-drop-dragging-over-frame\)]) .gform-file-upload__preview-icon {
					background-color: #d5d7e9;
					border-color: #ecedf8;
				}

	.gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):hover .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):focus .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where(:has(.gform-file-upload__input:focus)) .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where(:has(.gform-file-upload__input:focus)) .gform-file-upload__preview-icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where(:has(.file-drop > .file-drop-target.file-drop-dragging-over-frame)) .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper:where(:not(.gform-file-upload__wrapper--disabled)):where(:has(.file-drop > .file-drop-target.file-drop-dragging-over-frame)) .gform-file-upload__preview-icon {
					background-color: #d5d7e9;
					border-color: #ecedf8;
				}

	.gform-admin .gform-file-upload__wrapper .file-drop {
			block-size: 100%;
			position: relative;
			width: 100%;
		}

	.gform-admin .gform-file-upload__wrapper .file-drop > .file-drop-target {
				align-content: center;
				align-items: center;
				block-size: 100%;
				display: flex;
				flex-direction: column;
				inline-size: 100%;
				inset-block-start: 0;
				inset-inline-start: 0;
				justify-content: center;
				padding-block: 0.5rem;
				padding-inline: 1rem;
				position: absolute;
				text-align: center;
			}

	.gform-admin .gform-file-upload__wrapper--disabled {
		border-color: #d5d7e9;
		color: #d5d7e9;
	}

	.gform-admin .gform-file-upload__wrapper--disabled .gform-file-upload__message, .gform-admin .gform-file-upload__wrapper--disabled .gform-file-upload__filetypes, .gform-admin .gform-file-upload__wrapper--disabled .gform-file-upload__custom-helper-text {
			color: #d5d7e9;
		}

	.gform-admin .gform-file-upload__wrapper--disabled .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper--disabled .gform-file-upload__preview-icon {
			color: #d5d7e9;
		}

	.gform-admin .gform-file-upload__icon, .gform-admin .gform-file-upload__preview-icon {
		align-items: center;
		background-color: #ecedf8;
		block-size: 46px;
		border: 6px solid #f6f9fc;
		border-radius: 100%;
		color: #5b5e80;
		display: flex;
		flex: none;
		font-size: 1.375rem;
		inline-size: 46px;
		justify-content: center;
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}

	.gform-admin .gform-file-upload__message, .gform-admin .gform-file-upload__filetypes, .gform-admin .gform-file-upload__custom-helper-text {
		max-inline-size: 400px;
	}

	.gform-admin .gform-file-upload {
		block-size: 100%;
		inline-size: 100%;
		inset-block-start: 0;
		inset-inline-start: 0;
		position: absolute;
	}

	.gform-admin .gform-file-upload__input {
		block-size: 1px;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		inline-size: 1px;
		margin: -1px;
		opacity: 0;
		overflow: hidden;
		padding: 0;
		position: absolute;
	}

	.gform-admin .gform-file-upload__bold-text {
		font-weight: 500;
	}

	.gform-admin .gform-file-upload__wrapper--has-preview {
		padding: 1rem;
	}

	.gform-admin .gform-file-upload__wrapper--has-preview .gform-file-upload__message, .gform-admin .gform-file-upload__wrapper--has-preview .gform-file-upload__icon, .gform-admin .gform-file-upload__wrapper--has-preview .gform-file-upload__filetypes, .gform-admin .gform-file-upload__wrapper--has-preview .gform-file-upload__custom-helper-text {
			display: none;
		}

	/* File Preview UI */

	.gform-admin .gform-file-upload__preview {
		padding-block-end: 1rem;
		text-align: center;
	}

	.gform-admin .gform-file-upload__preview:where(:not(.gform-file-upload__preview--file)), .gform-admin .gform-file-upload__preview--image {
		line-height: 0;
	}

	.gform-admin .gform-file-upload__preview:where(:not(.gform-file-upload__preview--file)) img, .gform-admin .gform-file-upload__preview--image img {
			max-block-size: 300px;
			max-inline-size: 100%;
		}

	.gform-admin .gform-file-upload__preview--file {
		align-items: center;
		gap: 0.5rem;
		inline-size: 100%;
		justify-content: center;
	}

	.gform-admin .gform-file-upload__preview-file-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* File Preview UI (Multi-File Upload) */

	.gform-admin .gform-file-upload__preview--multi {
		box-sizing: border-box;
		flex-direction: column;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-size: 1rem;
		gap: 1rem;
		margin: 1rem auto 0;
		padding: 0;
		text-align: start;
	}

	.gform-admin .gform-file-upload__preview--multi * {
			box-sizing: border-box;
		}

	.gform-admin .gform-file-upload__preview--multi .gform-file-upload__preview-file-name {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 100%;
		}

	.gform-admin .gform-file-upload__preview-files {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		inline-size: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gform-admin .gform-file-upload__preview-file {
		align-items: flex-start;
		background-color: #fff;
		border: 1px solid #ecedf8;
		border-radius: 3px;
		display: flex;
		gap: 0.75rem;
		justify-content: space-between;
		padding: 0.75rem 1rem;
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}

	.gform-admin .gform-file-upload__preview-file-content {
		align-items: center;
		display: flex;
		flex: 1;
		gap: 1rem;
		min-width: 0; 
	}

	.gform-admin .gform-file-upload__preview-meta {
		flex: 1 1 auto;
		min-width: 0;
	}

	.gform-admin .gform-file-upload__preview-file-actions {
		display: flex;
		flex: 0 0 auto;
		gap: 0.25rem;
		justify-content: space-between;
	}

	/* File Actions UI (Multi-File Upload) */

	.gform-admin .gform-file-upload__preview-files-actions {
		align-items: center;
		display: flex;
		gap: 1rem;
		justify-content: center;
	}

	/* File Actions UI (Single-File Upload) */

	.gform-admin .gform-file-upload__buttons-wrapper {
		display: flex;
		gap: 0.875rem;
		justify-content: center;
	}

/*# sourceMappingURL=file-upload.css.map */