@gravityforms/components/css/admin/status-indicator.css

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

.gform-admin {

	.gform-status-indicator {
		align-items: center;
		background: var(--gform-admin-color-white-lilac);
		border: 1px solid var(--gform-admin-color-porcelain-gray);
		color: var(--gform-admin-color-port);
		cursor: pointer;
		display: inline-flex;
		font-family: var(--gform-admin-font-family-base);
		transition: all ease-in-out 200ms;
		white-space: nowrap;
		width: auto;

		&::before {
			background: var(--gform-admin-color-port);
			block-size: 0.375rem;
			border-radius: 50%;
			content: "";
			display: inline-block;
			inline-size: 0.375rem;
			transition: all ease-in-out 200ms;
		}

		&.gform-status--no-hover {
			cursor: auto;
			transition: none;
		}

		&.gform-status--no-pill {
			border-radius: 3px;
		}

		&.gform-status--active,
		&.gform-status--success {
			background: var(--gform-admin-color-feta);
			border-color: var(--gform-admin-color-emerald);
			color: var(--gform-admin-color-hunter);

			&::before {
				background: var(--gform-admin-color-primary-green);
			}
		}

		&.gform-status--error {
			background: var(--gform-admin-color-background-red);
			border-color: var(--gform-admin-color-red);
			color: var(--gform-admin-color-red);

			&::before {
				background: var(--gform-admin-color-red);
			}
		}

		&.gform-status--warning {
			background: var(--gform-admin-color-sazerac-yellow);
			border-color: var(--gform-admin-color-yellow);
			color: var(--gform-admin-color-orange-soda);

			&::before {
				background: var(--gform-admin-color-orange-soda);
			}
		}

		&.gform-status--gray {
			background: var(--gform-admin-color-titan-white);
			border-color: var(--gform-admin-color-porcelain-gray);
			color: var(--gform-admin-color-port);

			&::before {
				background: var(--gform-admin-color-comet);
			}
		}

		&.gform-status--blue {
			background: var(--gform-admin-color-blue-50);
			border-color: var(--gform-admin-color-blue-200);
			color: var(--gform-admin-color-blue-700);

			&::before {
				background: var(--gform-admin-color-blue-500);
			}
		}

		&.gform-status--static {
			pointer-events: none;
		}

		&.gform-status--no-icon::before {
			content: none;
		}

		&:not(.gform-status--no-hover):focus,
		&:not(.gform-status--no-hover):hover,
		&:not(.gform-status--no-hover):active {
			border-color: var(--gform-admin-color-gravity-blue);
			box-shadow: var(--gform-admin-box-shadow-focus-light);
			outline: none;
		}
	}

	.gform-status-indicator--size-sm {
		border-radius: 0.75rem;
		gap: 0.25rem;
		padding-block: 0.0625rem;
		padding-inline: 0.375rem 0.5rem;

		&.gform-status--no-icon {
			padding-inline-start: 0.5rem;
		}
	}

	.gform-status-indicator--size-md {
		border-radius: 0.8125rem;
		gap: 0.375rem;
		padding-block: 0.0625rem;
		padding-inline: 0.5rem 0.625rem;

		&.gform-status--no-icon {
			padding-inline-start: 0.625rem;
		}
	}

	.gform-status-indicator--size-lg {
		border-radius: 0.9375rem;
		gap: 0.375rem;
		padding-block: 0.1875rem;
		padding-inline: 0.625rem 0.75rem;

		&.gform-status--no-icon {
			padding-inline-start: 0.75rem;
		}
	}

	.wp-list-table .gform-status-indicator {
		margin-left: 0.375rem;
	}
}