@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 #d4d4e4;
		border-radius: 3px;
		box-shadow: var(--gform-admin-box-shadow-outline-light);
	}

	.gform-meta-box__header {
		border-bottom: 1px solid #e4e4ee;
		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 #e4e4ee;
		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: var(--gform-admin-spacer-6);
				inset-inline-end: var(--gform-admin-spacer-6);
				padding: 0;
				position: absolute;
				transform: rotate(180deg);
			}
		}

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

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

		.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;
		}
	}
}