@gravityforms/components/css/admin/alert.css

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

.gform-admin {

	.gform-alert {
		-webkit-font-smoothing: antialiased;
		align-items: flex-start; /* stylelint-disable-line */
		background-color: var(--gform-admin-color-white);
		border: 1px solid var(--gform-admin-color-snuff);
		border-radius: 3px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.11), 0 0 4px rgba(18, 25, 97, 0.0405344);
		color: var(--gform-admin-color-text);
		display: flex;
		flex-wrap: nowrap;
		font-family: var(--gform-admin-font-family-base);
		font-weight: var(--gform-common-font-weight-medium);
		margin-block-end: 1rem;
		padding-block-end: 12px;
		padding-block-start: 11px;
		padding-inline: 20px;
		position: relative;

		.field_setting &,
		& + .field_setting {
			margin-block-start: 1rem;
		}

		/* Style variant: Inline */

		&.gform-alert--inline {
			padding-block-end: 7px;
			padding-block-start: 6px;
			padding-inline: 12px;

			.gform-alert__message-wrap {
				column-gap: 10px;
				padding-inline-start: 28px;
				row-gap: 7px;

				.gform-alert__message {
					font-size: 0.75rem;
					padding-block-start: 8px;
				}
			}

			.gform-alert__icon {
				font-size: 21px;
				height: 19px;
				inset-block-start: 13px;
				inset-inline-start: 12px;
				width: 19px;
			}
		}

		/*
		 * Alert: Message
		 */

		.gform-alert__message-wrap {
			column-gap: 15px;
			display: flex;
			flex-wrap: wrap;
			min-height: 33px;
			padding-inline-start: 32px;
			row-gap: 10px;
			width: 100%;

			.gform-alert__message {
				color: inherit;
				flex: 1 1 auto;
				font-size: 0.8125rem;
				font-weight: var(--gform-common-font-weight-medium);
				line-height: var(--gform-admin-line-height-base);
				margin: 0;
				padding-block-start: 7px;

				a,
				a:hover {
					color: inherit;
				}
			}
		}

		/*
		 * Alert: Dismiss Action
		 */

		.gform-alert__dismiss {
			align-self: flex-start;
			background: none;
			border: none;
			cursor: pointer;
			height: 20px;
			inset-block-start: 8px;
			margin-inline-start: 12px;
			min-width: 20px;
			padding: 0;
			position: relative;
			text-align: center;
			width: 20px;

			&::before,
			&::after {
				border: 1px solid transparent;
				border-radius: 50%;
				content: "";
				inset-block-start: calc(50% - 1px);
				inset-inline-start: 50%;
				position: absolute;
				transform: translate3d(-50%, -50%, 0);
				transition: border-color 200ms ease-in-out;
			}

			&::before {
				height: 23px;
				width: 23px;
				z-index: 1;
			}

			&::after {
				border-width: 2px;
				height: 25px;
				width: 25px;
			}

			&:hover,
			&:focus {

				.gform-icon {
					color: var(--gform-admin-color-comet);
				}
			}

			&:focus {

				&::before {
					border-color: var(--gform-admin-color-primary-light);
				}

				&::after {
					border-color: var(--gform-admin-color-focus);
				}
			}

			.gform-icon {
				color: var(--gform-admin-color-amethyst-smoke);
				font-size: 2.1rem;
				height: 0;
				inset-block-start: 50%;
				inset-inline-start: 0;
				line-height: var(--gform-admin-line-height-none);
				position: absolute;
				transition: color 200ms ease-in-out;
			}
		}


		/* Style variant: Notice */

		&.gform-alert--notice {
			border-color: var(--gform-admin-color-blue-ribbon);
			color: var(--gform-admin-color-blue-ribbon);

			.gform-alert__icon {
				color: var(--gform-admin-color-blue-ribbon);
			}
		}

		/* Style variant: Error */

		&.gform-alert--error {
			border-color: var(--gform-admin-color-error);
			color: var(--gform-admin-color-error);

			.gform-alert__icon {
				color: var(--gform-admin-color-error);
			}
		}

		/* Style variant: Success */

		&.gform-alert--success {
			border-color: var(--gform-admin-color-green);
			color: var(--gform-admin-color-green);

			.gform-alert__icon {
				color: var(--gform-admin-color-green);
			}
		}

		/* Style variant: Accessibility */

		&.gform-alert--accessibility {
			border-color: var(--gform-admin-color-yellow);
		}

		/* Theme: Cosmos */

		&.gform-alert--theme-cosmos {
			border-color: var(--gform-admin-color-mischka);
			padding: 1rem;

			.gform-alert__message-wrap {
				min-height: 25px;
				padding-block-start: 2rem;
				padding-inline-start: 0;

				@media (--gform-admin-viewport-md) {
					padding-block-start: 0;
					padding-inline-start: 2rem;
				}

				.gform-alert__message {
					font-size: var(--gform-admin-font-size-sm);
					padding-block-start: 0;

					@media (--gform-admin-viewport-md) {
						padding-block-start: 0.125rem;
					}

					& > * {
						font-size: var(--gform-admin-font-size-sm);
						font-weight: 400;
					}

					.gform-list {
						margin-inline-start: 1rem;

						&.gform-list--bulleted,
						&.gform-list--decimal {
							padding-inline-start: 0;

							li {
								margin-block-end: 0;
							}
						}
					}
				}
			}

			/* Style variant: Info */

			&.gform-alert--info {
				color: var(--gform-admin-color-port);

				.gform-alert__message-wrap {

					.gform-alert__message {
						color: var(--gform-admin-color-port);

						& > * {
							color: var(--gform-admin-color-shuttle-gray);
						}
					}
				}

				.gform-alert__icon {
					color: var(--gform-admin-color-port);

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

			/* Style variant: Notice */

			&.gform-alert--notice {
				background: var(--gform-admin-color-zircon);
				border-color: var(--gform-admin-color-broad-daylight);
				color: var(--gform-admin-color-science-blue);

				.gform-alert__message-wrap {

					.gform-alert__message {
						color: var(--gform-admin-color-science-blue);
					}
				}

				.gform-alert__icon {
					color: var(--gform-admin-color-science-blue);
				}
			}

			/* Style variant: Success */

			&.gform-alert--success {
				background: var(--gform-admin-color-sugar-cane);
				border-color: var(--gform-admin-color-shamrock);
				color: var(--gform-admin-color-sea-green);

				.gform-alert__message-wrap {

					.gform-alert__message {
						color: var(--gform-admin-color-sea-green);
					}
				}

				.gform-alert__icon {
					color: var(--gform-admin-color-sea-green);
				}
			}

			/* Style variant: Error */

			&.gform-alert--error,
			&.gform-alert--incorrect {
				background: var(--gform-admin-color-rose-white);
				border-color: var(--gform-admin-color-spanish-pink);
				color: var(--gform-admin-color-once-bitten);

				.gform-alert__message-wrap {

					.gform-alert__message {
						color: var(--gform-admin-color-once-bitten);
					}
				}

				.gform-alert__icon {
					color: var(--gform-admin-color-once-bitten);
				}
			}

			.gform-alert__icon {
				inset-inline-start: 16px;

				&.gform-icon--preset-active {
					position: absolute;

					&::before {
						position: absolute;
					}
				}
			}
		}
	}

	/*
	 * Alert: Icon
	 */

	.gform-alert__icon {
		color: var(--gform-admin-color-text);
		font-size: 24px;
		height: 21px;
		inset-block-start: 17px;
		inset-inline-start: 20px;
		position: absolute;
		width: 21px;

		&::before {
			height: 0;
			inset-block-start: 50%;
			left: 50%;
			line-height: var(--gform-admin-line-height-none);
			position: absolute;
			transform: translate3d(-50%, -50%, 0);
			z-index: 1;
		}
	}

	/* Message CTA */

	.gform-alert__cta {
		margin-block-start: 1px;
	}
}