@gravityforms/components/css/admin/meta-box.css

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

.gform-admin {

	.gform-meta-box {
		background: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-porcelain-gray);
		border-radius: 3px;
		box-shadow: var(--gform-admin-box-shadow-outline-light);
	}

	.gform-meta-box__header {
		border-bottom: 1px solid var(--gform-admin-color-porcelain-gray);
		padding-block: var(--gform-admin-spacer-5);
		padding-inline: var(--gform-admin-spacer-6);
	}

	.gform-meta-box__content {
		padding: var(--gform-admin-spacer-6);
	}

	.gform-meta-box__footer {
		border-top: 1px solid var(--gform-admin-color-porcelain-gray);
		padding: var(--gform-admin-spacer-4);
	}

	.gform-meta-box--is-collapsible {

		.gform-meta-box__header {
			padding-block: 0;
			padding-inline: 0;
		}

		.gform-meta-box__toggle-icon {
			color: var(--gform-admin-color-comet);
			font-size: 1rem;
			inset-block-start: 50%;
			inset-inline-end: var(--gform-admin-spacer-6);
			padding: 0;
			position: absolute;
			transform: translateY(-50%) rotate(180deg);
		}

		.gform-meta-box__toggle {
			display: flex;
			height: auto;
			padding-block: var(--gform-admin-spacer-5);
			padding-inline: var(--gform-admin-spacer-6);
			position: relative;
			width: 100%;
		}
	}

	.gform-meta-box--is-collapsed {

		.gform-meta-box__header {
			border-bottom: 0;
		}

		.gform-meta-box__toggle-icon {
			transform: translateY(-50%) rotate(0deg);
		}
	}

	.gform-meta-box--style-compact {
		box-shadow: none;

		.gform-meta-box__header {
			background: var(--gform-admin-color-titan-white);
			padding-block: var(--gform-admin-spacer-3);
			padding-inline: var(--gform-admin-spacer-4);
		}

		.gform-meta-box__content {
			padding-block: var(--gform-admin-spacer-3);
			padding-inline: var(--gform-admin-spacer-4);
		}
	}

	.gform-meta-box--style-compact.gform-meta-box--is-collapsible {

		.gform-meta-box__header {
			padding-block: 0;
			padding-inline: 0;
		}

		.gform-meta-box__toggle {
			padding-block: var(--gform-admin-spacer-3);
			padding-inline: var(--gform-admin-spacer-4);
		}
	}
}