@gravityforms/components/css/admin/text.css

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

.gform-admin {

	.gform-text {
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-base-old);
		font-style: normal;

		&.gform-text--truncate {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			* {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.gform-text:not(:focus-within),
	.gform-text__wrapper:not(:focus-within) {

		&:hover {

			.gform-text__copy-button {
				opacity: 1;
			}
		}
	}

	.gform-text__wrapper {
		position: relative;

		.gform-text {
			display: inline;
		}

		.gform-text__copy-button {
			display: inline-block;
			height: auto;
			line-height: 1;
			vertical-align: middle;

			.gform-button__icon {
				color: var(--gform-admin-color-comet);
				font-size: inherit;
			}

			&.gform-typography--size-text-md,
			&.gform-typography--size-text-lg {
				margin-block-start: -0.3rem;
			}

			&.gform-typography--size-text-xl {
				margin-block-start: -0.15rem;
			}

			&.gform-typography--size-display-xs {
				margin-block-start: -0.25rem;
			}

			&.gform-typography--size-display-sm {
				margin-block-start: -0.35rem;
			}

			&.gform-typography--size-display-md {
				margin-block-start: -0.5rem;
			}

			&.gform-typography--size-display-lg {
				margin-block-start: -0.75rem;
			}

			&.gform-typography--size-display-xl {
				margin-block-start: -1rem;
			}

			&.gform-typography--size-display-2xl {
				margin-block-start: -1.2rem;
			}

			&.gform-typography--size-display-3xl {
				margin-block-start: -1.5rem;
			}
		}
	}

	.gform-text--color-port {
		color: var(--gform-admin-color-port);
	}

	.gform-text--color-comet {
		color: var(--gform-admin-color-comet);
	}

	.gform-text--color-white {
		color: var(--gform-admin-color-white);
	}

	.gform-text--color-secondary-text {
		color: var(--gform-admin-color-secondary-text);
	}

	.gform-text--color-amethyst-smoke {
		color: var(--gform-admin-color-amethyst-smoke);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {

		&.gform-text {
			color: var(--gform-admin-color-port);
			font-family: var(--gform-admin-font-family-base);
			margin: 0;
			padding: 0;
		}
	}

	.gform-button.gform-text__copy-button {
		height: auto;
		line-height: 1;
		margin-inline-start: var(--gform-admin-spacer-1);
		opacity: 0;
		transition: opacity 0.2s ease;
		vertical-align: middle;

		&:hover {

			.gform-button__icon {
				color: var(--gform-admin-color-port);
			}
		}

		&:focus {
			opacity: 1;
		}

		.gform-button__icon {
			color: var(--gform-admin-color-comet);
			font-size: inherit;
		}
	}

	.gform-text[contenteditable] {
		background: transparent;
		border-radius: 3px;

		&:not(.gform-text--has-copy) {
			position: relative;
		}

		&::after {
			background-color: transparent;
			content: "";
			transition: background-color 0.3s ease;
		}
	}

	.gform-text[contenteditable="true"]:empty::before {
		color: var(--gform-admin-color-comet);
		content: attr(placeholder);
		display: block;
		pointer-events: none;
	}
}