@gravityforms/components/css/admin/heading.css

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

.gform-admin {

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

		&.gform-heading--boxed {
			background: var(--gform-admin-color-titan-white);
			border: 1px solid var(--gform-admin-color-porcelain-gray);
			border-radius: 3px;
			padding-block: var(--gform-admin-spacer-3);
			padding-inline: var(--gform-admin-spacer-4);
		}
	}

	.gform-heading:not(:focus-within),
	.gform-heading__wrapper:not(:focus-within) {

		&:hover {

			.gform-heading__edit-button,
			.gform-heading__copy-button {
				opacity: 1;
			}
		}
	}

	.gform-heading__wrapper {
		position: relative;

		.gform-heading {
			display: inline;
		}

		.gform-heading__edit-button,
		.gform-heading__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.1rem;
			}

			&.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-heading__edit-button,
	.gform-heading__copy-button {
		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-heading[contenteditable]:not(.gform-heading--boxed) {
		background: transparent;
		border-radius: 3px;

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

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

	.gform-heading[contenteditable="true"]:empty {
		display: inline-block;

		&::before {
			color: var(--gform-admin-color-comet);
			content: attr(placeholder);
			display: block;
			pointer-events: none;
		}
	}

	.gform-heading[contenteditable]:focus {
		border: none;
		outline: none;
	}
}