@gravityforms/components/css/admin/avatar.css

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

.gform-admin {

	.gform-avatar {
		background-size: cover;
		border-radius: 100%;
		box-sizing: border-box;
		display: flex;
		position: relative;

		&:focus-within {

			.gform-file-upload__wrapper--has-preview .gform-file-upload__icon {
				opacity: 1;
			}
		}

		&:hover {

			.gform-file-upload__icon,
			.gform-file-upload__wrapper--has-preview .gform-file-upload__icon {
				opacity: 1;
			}
		}

		&.gform-avatar--has-upload {
			box-sizing: content-box;
		}

		* {
			box-sizing: border-box;
		}

		.gform-file-upload__wrapper {
			border: 0;
			cursor: pointer;
			min-height: auto;
			z-index: 2;

			.file-drop {
				min-height: auto;
			}
		}

		.gform-file-upload__preview {
			block-size: 100%;
			border-radius: 100%;
			inline-size: 100%;
			overflow: hidden;
			position: relative;

			img {
				block-size: 100%;
				inline-size: 100%;
				inset-block-start: 50%;
				inset-inline-start: 50%;
				object-fit: cover;
				position: absolute;
				transform: translate(-50%, -50%);
			}
		}

		.gform-file-upload__wrapper--has-preview,
		.gform-file-upload__preview {
			padding: 0;
		}

		.gform-file-upload__icon,
		.gform-file-upload__wrapper--has-preview .gform-file-upload__icon {
			background: var(--gform-admin-color-anti-flash-white);
			border: 1px solid var(--gform-admin-color-metal-gray);
			display: flex;
			font-size: 1.5rem;
			inset-block-start: 0;
			inset-inline-start: 0;
			opacity: 0;
			position: absolute;
			transition: opacity 0.2s;
			z-index: 2;
		}

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

		&.gform-avatar--size-xs {
			block-size: 24px;
			inline-size: 24px;

			.gform-avatar__no-image-icon {
				font-size: 0.9rem;
			}

			.gform-avatar__initials {
				font-size: 0.73rem;
			}

			.gform-file-upload__wrapper,
			.gform-file-upload__icon,
			.gform-avatar__no-image-icon,
			.gform-avatar__initials {
				block-size: 24px;
				inline-size: 24px;
			}

			.gform-avatar__logo {
				block-size: 10px;
				inline-size: 10px;
			}
		}

		&.gform-avatar--size-sm {
			block-size: 32px;
			inline-size: 32px;

			.gform-avatar__no-image-icon {
				font-size: 1rem;
			}

			.gform-avatar__initials {
				font-size: 0.9rem;
			}

			.gform-file-upload__wrapper,
			.gform-file-upload__icon,
			.gform-avatar__no-image-icon,
			.gform-avatar__initials {
				block-size: 32px;
				inline-size: 32px;
			}

			.gform-avatar__logo {
				block-size: 12px;
				inline-size: 12px;
			}
		}

		&.gform-avatar--size-md {
			block-size: 40px;
			inline-size: 40px;

			.gform-avatar__no-image-icon {
				font-size: 1.25rem;
			}

			.gform-avatar__initials {
				font-size: 1rem;
			}

			.gform-file-upload__wrapper,
			.gform-file-upload__icon,
			.gform-avatar__no-image-icon,
			.gform-avatar__initials {
				block-size: 40px;
				inline-size: 40px;
			}

			.gform-avatar__logo {
				block-size: 14px;
				inline-size: 14px;
			}
		}

		&.gform-avatar--size-lg {
			block-size: 48px;
			inline-size: 48px;

			.gform-avatar__no-image-icon {
				font-size: 1.5rem;
			}

			.gform-avatar__initials {
				font-size: 1.1rem;
			}

			.gform-file-upload__wrapper,
			.gform-file-upload__icon,
			.gform-avatar__no-image-icon,
			.gform-avatar__initials {
				block-size: 48px;
				inline-size: 48px;
			}

			.gform-avatar__logo {
				block-size: 16px;
				inline-size: 16px;
			}
		}

		&.gform-avatar--size-xl {
			block-size: 56px;
			inline-size: 56px;

			.gform-avatar__no-image-icon {
				font-size: 1.65rem;
			}

			.gform-avatar__initials {
				font-size: 1.25rem;
			}

			.gform-file-upload__wrapper,
			.gform-file-upload__icon,
			.gform-avatar__no-image-icon,
			.gform-avatar__initials {
				block-size: 56px;
				inline-size: 56px;
			}

			.gform-avatar__logo {
				block-size: 18px;
				inline-size: 18px;
			}
		}

		&.gform-avatar--size-2xl {
			block-size: 64px;
			inline-size: 64px;

			.gform-avatar__no-image-icon {
				font-size: 1.75rem;
			}

			.gform-avatar__initials {
				font-size: 1.5rem;
			}

			.gform-file-upload__wrapper,
			.gform-file-upload__icon,
			.gform-avatar__no-image-icon,
			.gform-avatar__initials {
				block-size: 64px;
				inline-size: 64px;
			}

			.gform-avatar__logo {
				block-size: 20px;
				inline-size: 20px;
			}
		}
	}

	.gform-avatar__no-image-icon,
	.gform-avatar__initials {
		align-items: center;
		background: var(--gform-admin-color-anti-flash-white);
		border-radius: 100%;
		color: var(--gform-admin-color-comet);
		display: flex;
		justify-content: center;
		position: absolute;
		z-index: 1;
	}

	.gform-avatar__initials {
		font-family: var(--gform-admin-font-family-base);
		font-weight: var(--gform-admin-font-weight-semibold);
		text-transform: uppercase;
		user-select: none;
	}

	.gform-avatar__logo {
		align-items: center;
		background: var(--gform-admin-color-white);
		border: 2px solid var(--gform-admin-color-white);
		border-radius: 100%;
		box-sizing: initial;
		display: flex;
		inset-block-end: -4px;
		inset-inline-end: -4px;
		justify-content: center;
		overflow: hidden;
		position: absolute;
		z-index: 3;

		svg {
			block-size: 100%;
			inline-size: 100%;
		}
	}
}