@gravityforms/components/css/admin/icon.css

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

.gform-admin {

	[class*="gform-icon-preset--status"] {
		align-items: center;
		display: flex;
		font-size: 1.25rem;
		height: 20px;
		justify-content: center;
		position: relative;
		width: 20px;

		&::before {
			position: relative;
			z-index: 2;
		}

		&::after {
			border: 2px solid transparent;
			border-radius: 50%;
			box-sizing: border-box;
			content: "";
			height: 20px;
			left: 50%;
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 20px;
		}
	}

	[class*="gform-icon-preset--metric"] {
		align-items: center;
		background: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-snuff);
		border-radius: 3px;
		box-shadow: 0 2px 2px 0 rgba(58, 58, 87, 0.06);
		color: var(--gform-admin-color-comet);
		display: flex;
		font-size: 1.5rem;
		height: 48px;
		justify-content: center;
		position: relative;
		width: 48px;
	}

	/* Style variant: Metric Success */
	.gform-icon-preset--metric-success {
		background: var(--gform-admin-color-feta);
		border-color: var(--gform-admin-color-enchanted-meadow);
		color: var(--gform-admin-color-green);
	}

	/* Style variant: Metric Warn */
	.gform-icon-preset--metric-warn {
		background: var(--gform-admin-color-sazerac-yellow);
		border-color: var(--gform-admin-color-light-pastel-yellow);
		color: var(--gform-admin-color-yellow);
	}

	/* Style variant: Metric Error */
	.gform-icon-preset--metric-error {
		background: var(--gform-admin-color-rose-white);
		border-color: var(--gform-admin-color-background-red);
		color: var(--gform-admin-color-red);
	}

	/* Style variant: Status Default and Locked */
	.gform-icon-preset--status-default,
	.gform-icon-preset--status-locked {
		color: var(--gform-admin-color-port);

		&::after {
			background-color: var(--gform-admin-color-anti-flash-white);
			border-color: var(--gform-admin-color-mischka);
		}
	}

	.gform-icon-preset--status-locked {
		color: var(--gform-admin-color-amethyst-smoke);
	}

	/* Style variant: Status Info */
	.gform-icon-preset--status-info {
		color: var(--gform-admin-color-science-blue);

		&::after {
			background-color: var(--gform-admin-color-zircon);
			border-color: var(--gform-admin-color-broad-daylight);
		}
	}

	/* Style variant: Status Error, Status Incorrect */
	.gform-icon-preset--status-error,
	.gform-icon-preset--status-incorrect {
		color: var(--gform-admin-color-once-bitten);

		&::after {
			background-color: var(--gform-admin-color-rose-white);
			border-color: var(--gform-admin-color-spanish-pink);
		}
	}

	/* Style variant: Status Correct */
	.gform-icon-preset--status-correct {
		color: var(--gform-admin-color-sea-green);

		&::after {
			background: var(--gform-admin-color-feta);
			border-color: var(--gform-admin-color-enchanted-meadow);
		}
	}
}