@gravityforms/components/css/admin/router-navbar.css

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

.gform-admin {

	.gform-router-nav-bar {
		inline-size: 100%;

		&,
		* {
			box-sizing: border-box;
		}
	}

	.gform-router-nav-bar__list {
		display: flex;
		flex-direction: column;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gform-router-nav-bar__item {
		margin: 0;
	}

	.gform-router-nav-bar--icon-button {
		padding-block: var(--gform-admin-spacer-6);

		.gform-router-nav-bar__list {
			gap: var(--gform-admin-spacer-4);
		}

		.gform-router-nav-bar__item {
			align-items: center;
			display: flex;
			flex-direction: column;
			gap: var(--gform-admin-spacer-2);
			justify-content: center;
		}

		.gform-router-nav-bar__item-link {
			cursor: pointer;
			text-decoration: none;
		}

		.gform-router-nav-bar__item-icon {
			font-size: 1.25rem;
		}

		.gform-router-nav-bar__item--disabled .gform-router-nav-bar__item-text {
			opacity: 0.5;
		}
	}

	.gform-router-nav-bar--icon-text-tag {
		padding-block: var(--gform-admin-spacer-8);
		padding-inline: var(--gform-admin-spacer-6);

		.gform-router-nav-bar__list {
			gap: var(--gform-admin-spacer-1);
		}

		.gform-router-nav-bar__item-link,
		.gform-router-nav-bar__item-button {
			align-items: center;
			block-size: 36px;
			border: 1px solid transparent;
			border-radius: 3px;
			color: var(--gform-admin-color-port);
			cursor: pointer;
			display: flex;
			flex-direction: row;
			gap: var(--gform-admin-spacer-2);
			inline-size: 100%;
			justify-content: flex-start;
			padding: 0.4375rem 0.6875rem;
			text-decoration: none;

			&:hover,
			&:focus-visible {
				background: var(--gform-admin-color-light-blue);
				border-color: var(--gform-admin-color-light-blue);
			}

			&:focus {
				box-shadow: none;
				outline: none;
			}

			&:active {
				background: var(--gform-admin-color-light-blue);
				border-color: var(--gform-admin-color-focus);
			}

			&:disabled {
				background: transparent;
				border-color: transparent;
			}
		}

		.gform-router-nav-bar__item--active .gform-router-nav-bar__item-link {
			background: var(--gform-admin-color-light-blue);
			border-color: var(--gform-admin-color-hawkes-blue);
		}

		.gform-router-nav-bar__item--disabled {

			.gform-router-nav-bar__item-link,
			.gform-router-nav-bar__item-button {
				opacity: 0.5;
			}
		}

		.gform-router-nav-bar__item-icon {
			color: var(--gform-admin-color-comet);
			font-size: 1.25rem;
		}
	}
}