@gravityforms/components/css/admin/steps.css

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

.gform-admin {

	.gform-steps {
		font-family: var(--gform-admin-font-family-base);
		font-size: var(--gform-admin-font-size-sm);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gform-steps__step {
		align-items: center;
		border: 1px solid #374b6b;
		border-radius: 50%;
		color: var(--gform-admin-color-white);
		display: flex;
		height: 2.125rem;
		justify-content: center;
		margin: 0 auto;
		width: 2.125rem;

		&:not(:last-child) {
			margin-block-end: 4rem;
			position: relative;

			&::after {
				background-color: #374b6b;
				content: "";
				height: 4rem;
				left: 50%;
				position: absolute;
				top: 2.1rem;
				width: 1px;
			}
		}
	}

	.gform-steps__step--active {
		background-color: var(--gform-admin-color-orange);
		border-color: var(--gform-admin-color-orange);
	}

	.gform-steps__step-icon {
		display: none;
		font-size: var(--gform-admin-font-size-lg);
	}

	.gform-steps__step--completed {

		.gform-steps__step-icon {
			display: block;
		}

		.gform-steps__step-count {
			display: none;
		}
	}
}