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

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

.gform-admin {

	/* File Upload UI */

	.gform-file-upload__wrapper {
		align-items: center;
		border: 1px dashed var(--gform-admin-color-santas);
		border-radius: 3px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base);
		justify-content: center;
		min-block-size: 150px;
		position: relative;
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

		* {
			box-sizing: border-box;
		}

		&:where(:not(.gform-file-upload__wrapper--disabled)) {

			&:hover,
			&:focus,
			&:where(:has(.gform-file-upload__input:focus)),
			&:where(:has(.file-drop > .file-drop-target.file-drop-dragging-over-frame)) {
				background-color: var(--gform-admin-color-light-blue);
				cursor: pointer;

				.gform-file-upload__icon,
				.gform-file-upload__preview-icon {
					background-color: var(--gform-admin-color-snuff);
					border-color: var(--gform-admin-color-white-lilac);
				}
			}
		}

		.file-drop {
			block-size: 100%;
			position: relative;
			width: 100%;

			& > .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: var(--gform-admin-spacer-2);
				padding-inline: var(--gform-admin-spacer-4);
				position: absolute;
				text-align: center;
			}
		}
	}

	.gform-file-upload__wrapper--disabled {
		border-color: var(--gform-admin-color-snuff);
		color: var(--gform-admin-color-snuff);

		.gform-file-upload__message,
		.gform-file-upload__filetypes,
		.gform-file-upload__custom-helper-text {
			color: var(--gform-admin-color-snuff);
		}

		.gform-file-upload__icon,
		.gform-file-upload__preview-icon {
			color: var(--gform-admin-color-snuff);
		}
	}

	.gform-file-upload__icon,
	.gform-file-upload__preview-icon {
		align-items: center;
		background-color: var(--gform-admin-color-white-lilac);
		block-size: 46px;
		border: 6px solid var(--gform-admin-color-light-blue);
		border-radius: 100%;
		color: var(--gform-admin-color-comet);
		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-file-upload__message,
	.gform-file-upload__filetypes,
	.gform-file-upload__custom-helper-text {
		max-inline-size: 400px;
	}

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

	.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-file-upload__bold-text {
		font-weight: var(--gform-admin-font-weight-medium);
	}

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

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

	/* File Preview UI */

	.gform-file-upload__preview {
		padding-block-end: var(--gform-admin-spacer-4);
		text-align: center;
	}

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

		img {
			max-block-size: 300px;
			max-inline-size: 100%;
		}
	}

	.gform-file-upload__preview--file {
		align-items: center;
		gap: var(--gform-admin-spacer-2);
		inline-size: 100%;
		justify-content: center;
	}

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

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

	.gform-file-upload__preview--multi {
		box-sizing: border-box;
		flex-direction: column;
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base);
		gap: var(--gform-admin-spacer-4);
		margin: var(--gform-admin-spacer-4) auto 0;
		padding: 0;
		text-align: start;

		* {
			box-sizing: border-box;
		}

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

	.gform-file-upload__preview-files {
		display: flex;
		flex-direction: column;
		gap: var(--gform-admin-spacer-3);
		inline-size: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gform-file-upload__preview-file {
		align-items: flex-start;
		background-color: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-white-lilac);
		border-radius: 3px;
		display: flex;
		gap: var(--gform-admin-spacer-3);
		justify-content: space-between;
		padding: var(--gform-admin-spacer-3) var(--gform-admin-spacer-4);
		transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	}

	.gform-file-upload__preview-file-content {
		align-items: center;
		display: flex;
		flex: 1;
		gap: var(--gform-admin-spacer-4);
		min-width: 0; 
	}

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

	.gform-file-upload__preview-file-actions {
		display: flex;
		flex: 0 0 auto;
		gap: var(--gform-admin-spacer-1);
		justify-content: space-between;
	}

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

	.gform-file-upload__preview-files-actions {
		align-items: center;
		display: flex;
		gap: var(--gform-admin-spacer-4);
		justify-content: center;
	}

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

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