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

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

.gform-admin .gform-avatar {
		border-radius: 50%;
		box-sizing: border-box;
	}

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

		.gform-admin .gform-avatar.gform-avatar--has-border {
			border: 4px solid #fff;
			box-sizing: content-box;
		}

		/* File Upload */

		.gform-admin .gform-avatar .gform-file-upload__wrapper {
			border: 0;
			border-radius: 50%;
			cursor: pointer;
			min-height: auto;
			z-index: 1;
		}

		.gform-admin .gform-avatar .gform-file-upload__wrapper .file-drop {
				border-radius: 50%;
				min-height: auto;
			}

		.gform-admin .gform-avatar .gform-file-upload__wrapper .file-drop > .file-drop-target {
					border-radius: 50%;
				}

		.gform-admin .gform-avatar .gform-file-upload {
			border-radius: 50%;
		}

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

		.gform-admin .gform-avatar .gform-file-upload__preview img {
				block-size: 100%;
				border-radius: 50%;
				inline-size: 100%;
				inset-block-start: 50%;
				inset-inline-start: 50%;
				-o-object-fit: cover;
				   object-fit: cover;
				position: absolute;
				transform: translate(-50%, -50%);
			}

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

		.gform-admin .gform-avatar .gform-file-upload__icon, .gform-admin .gform-avatar .gform-file-upload__wrapper--has-preview .gform-file-upload__icon {
			background: #f2f3f5;
			border: 0;
			display: flex;
			font-size: 1.5rem;
			inset-block-start: 0;
			inset-inline-start: 0;
			opacity: 0;
			position: absolute;
			transition: opacity 0.2s;
		}

		.gform-admin .gform-avatar:hover .gform-file-upload__icon, .gform-admin .gform-avatar:hover .gform-file-upload__wrapper--has-preview .gform-file-upload__icon, .gform-admin .gform-avatar:focus-within .gform-file-upload__icon, .gform-admin .gform-avatar:focus-within .gform-file-upload__wrapper--has-preview .gform-file-upload__icon {
				opacity: 1;
			}

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

		/* Droplist */

		.gform-admin .gform-avatar .gform-avatar__droplist {
			block-size: 100%;
			border-radius: 50%;
			inline-size: 100%;
			opacity: 0;
			position: absolute;
			transition: opacity 0.2s;
			z-index: 1;
		}

		.gform-admin .gform-avatar .gform-avatar__droplist:hover, .gform-admin .gform-avatar .gform-avatar__droplist:focus-within {
				opacity: 1;
			}

		.gform-admin .gform-avatar .gform-avatar__droplist .gform-droplist__trigger {
				background: #f2f3f5;
				block-size: 100%;
				border: 0;
				border-radius: 50%;
				inline-size: 100%;
			}

		.gform-admin .gform-avatar .gform-avatar__droplist .gform-droplist__trigger .gform-button__icon {
					font-size: 1.5rem;
				}

		.gform-admin .gform-avatar .gform-avatar__droplist .gform-droplist__trigger:focus {
					box-shadow: none;
					outline: 0;
				}

		.gform-admin .gform-avatar.gform-avatar--no-image-icon-hidden.gform-avatar--initials-hidden:not(.gform-avatar--has-image) .gform-file-upload__icon, .gform-admin .gform-avatar.gform-avatar--no-image-icon-hidden.gform-avatar--initials-hidden:not(.gform-avatar--has-image) .gform-file-upload__wrapper--has-preview .gform-file-upload__icon, .gform-admin .gform-avatar.gform-avatar--no-image-icon-hidden.gform-avatar--initials-hidden:not(.gform-avatar--has-image) .gform-avatar__droplist {
				opacity: 1;
			}

	/* Sizes */

	.gform-admin .gform-avatar--size-2xs {
		block-size: 20px;
		flex: 0 0 20px;
		inline-size: 20px;
	}

	.gform-admin .gform-avatar--size-2xs .gform-avatar__no-image-icon {
			font-size: 0.75rem;
		}

	.gform-admin .gform-avatar--size-2xs .gform-avatar__initials {
			font-size: 0.61rem;
		}

	.gform-admin .gform-avatar--size-2xs .gform-file-upload__wrapper, .gform-admin .gform-avatar--size-2xs .gform-file-upload__icon, .gform-admin .gform-avatar--size-2xs .gform-avatar__no-image-icon, .gform-admin .gform-avatar--size-2xs .gform-avatar__initials {
			block-size: 20px;
			inline-size: 20px;
		}

	.gform-admin .gform-avatar--size-2xs .gform-avatar__logo {
			block-size: 8px;
			inline-size: 8px;
		}

	.gform-admin .gform-avatar--size-xs {
		block-size: 24px;
		flex: 0 0 24px;
		inline-size: 24px;
	}

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

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

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

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

	.gform-admin .gform-avatar--size-sm {
		block-size: 32px;
		flex: 0 0 32px;
		inline-size: 32px;
	}

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

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

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

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

	.gform-admin .gform-avatar--size-md {
		block-size: 40px;
		flex: 0 0 40px;
		inline-size: 40px;
	}

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

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

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

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

	.gform-admin .gform-avatar--size-lg {
		block-size: 48px;
		flex: 0 0 48px;
		inline-size: 48px;
	}

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

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

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

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

	.gform-admin .gform-avatar--size-xl {
		block-size: 56px;
		flex: 0 0 56px;
		inline-size: 56px;
	}

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

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

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

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

	.gform-admin .gform-avatar--size-2xl {
		block-size: 64px;
		flex: 0 0 64px;
		inline-size: 64px;
	}

	.gform-admin .gform-avatar--size-2xl .gform-avatar__no-image-icon {
			font-size: 1.75rem;
		}

	.gform-admin .gform-avatar--size-2xl .gform-avatar__initials {
			font-size: 1.5rem;
		}

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

	.gform-admin .gform-avatar--size-2xl .gform-avatar__logo {
			block-size: 20px;
			inline-size: 20px;
		}

	/* Rest Avatar */

	.gform-admin .gform-avatar__inner {
		background-color: #f2f3f5;
		background-position: 50% 50%;
		background-size: cover;
		block-size: 100%;
		border-radius: 50%;
		display: flex;
		inline-size: 100%;
		position: relative;
	}

	.gform-admin .gform-avatar__inner::after {
			block-size: 100%;
			border: 1px solid #000;
			border-radius: 50%;
			box-sizing: border-box;
			content: "";
			inline-size: 100%;
			opacity: 0.08;
			pointer-events: none;
			position: absolute;
		}

	.gform-admin .gform-avatar__no-image-icon, .gform-admin .gform-avatar__initials {
		align-items: center;
		background: #f2f3f5;
		border-radius: 50%;
		color: #5b5e80;
		display: flex;
		justify-content: center;
		position: absolute;
	}

	.gform-admin .gform-avatar__initials {
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-weight: 600;
		text-transform: uppercase;
		-webkit-user-select: none;
		   -moz-user-select: none;
		        user-select: none;
	}

	.gform-admin .gform-avatar__logo {
		align-items: center;
		background: #fff;
		border: 2px solid #fff;
		border-radius: 50%;
		box-sizing: content-box;
		box-sizing: initial;
		display: flex;
		inset-block-end: -4px;
		inset-inline-end: -4px;
		justify-content: center;
		overflow: hidden;
		position: absolute;
		z-index: 2;
	}

	.gform-admin .gform-avatar__logo svg {
			block-size: 100%;
			inline-size: 100%;
		}

/*# sourceMappingURL=avatar.css.map */