@gravityforms/components/css/admin/tabs.css

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

.gform-admin {

	.gform-tabs {
		display: flex;
		flex-direction: column;
		gap: var(--gform-admin-spacer-6);
	}

	.gform-tabs--tab-width-even {

		.gform-tabs__tablist {
			flex-wrap: nowrap;
		}

		.gform-tabs__tab {
			flex: 1 1 0;
			justify-content: center;
		}
	}

	.gform-tabs__tablist {
		border-block-end: 1px solid var(--gform-admin-color-porcelain-gray);
		display: flex;
		flex-wrap: wrap;
		gap: var(--gform-admin-spacer-6);
	}

	.gform-tabs__tab {
		block-size: auto;
		border: none;
		border-block-end: 2px solid transparent;
		border-radius: 0;
		color: var(--gform-admin-color-comet);
		gap: var(--gform-admin-spacer-2);
		margin-block-end: -1px;
		padding-block: 1px var(--gform-admin-spacer-4);
		padding-inline: var(--gform-admin-spacer-1);
		transition: var(--gform-admin-transition-hover);

		&:focus {
			background: transparent;
			border-block-end: 2px solid var(--gform-admin-color-santas);
			color: var(--gform-admin-color-comet);
			outline: none;
		}

		&:hover {
			background: transparent;
			border-block-end: 2px solid var(--gform-admin-color-port);
			color: var(--gform-admin-color-port);
		}

		.gform-button__icon.gform-icon {
			margin: 0;
		}

		.gform-status-indicator {
			margin-block: -1px;
		}
	}

	.gform-tabs__tab--active {

		&,
		&:hover,
		&:focus {
			background: transparent;
			border-block-end: 2px solid var(--gform-admin-color-port);
			color: var(--gform-admin-color-port);
		}
	}
}