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

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

.gform-admin {

	.gform-file-upload__wrapper {
		border: 1px dashed var(--gform-admin-color-santas);
		border-radius: 3px;
		color: var(--gform-admin-color-port);
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base);
		min-height: 150px;
		position: relative;

		&:hover {
			border-color: var(--gform-admin-color-comet);
		}

		.gform-file-upload__message,
		.gform-file-upload__filetypes {
			color: var(--gform-admin-color-comet);
		}

		.file-drop {
			height: 100%;
			min-height: 150px;
			position: relative;
			width: 100%;

			& > .file-drop-target {
				align-content: center;
				align-items: center;
				border-radius: 2px;
				display: flex;
				flex-direction: column;
				height: 100%;
				inset-inline-start: 0;
				justify-content: center;
				position: absolute;
				text-align: center;
				top: 0;
				width: 100%;
			}
		}

		&:not(.gform-file-upload__wrapper--disabled) .file-drop > .file-drop-target.file-drop-dragging-over-frame {
			background-color: var(--gform-admin-color-light-blue);
			border: none;
			box-shadow: none;
			opacity: 1;
			z-index: 50;

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

			.gform-file-upload__bold-text {
				color: var(--gform-admin-color-chathams);
			}
		}
	}

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

		.gform-file-upload__bold-text {
			color: var(--gform-admin-color-snuff);
		}
	}

	.gform-file-upload__icon {
		align-items: center;
		background: var(--gform-admin-color-white-lilac);
		border: 6px solid var(--gform-admin-color-light-blue);
		border-radius: 100%;
		color: var(--gform-admin-color-comet);
		display: flex;
		font-size: 1.375rem;
		height: 34px;
		justify-content: center;
		width: 34px;
	}

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

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

	.gform-file-upload {
		height: 100%;
		inset-inline-start: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.gform-file-upload__input {
		height: 1px;
		opacity: 0;
		overflow: hidden;
		width: 1px;
	}

	.gform-file-upload__bold-text {
		font-weight: var(--gform-admin-font-weight-medium);
	}

	.gform-file-upload__preview {
		padding-block-end: 1.25rem;
		text-align: center;

		img {
			max-height: 300px;
			max-width: 100%;
		}
	}

	.gform-file-upload__buttons-wrapper {
		display: flex;
		justify-content: center;

		.gform-button + .gform-button {
			margin-inline-start: 0.875rem;
		}
	}
}