@gravityforms/components/dist/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: #fff;
		border: 1px solid #d5d7e9;
		border-radius: 3px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.11), 0 0 4px rgba(18, 25, 97, 0.0405344);
		color: #242748;
		display: flex;
		flex-wrap: nowrap;
		font-family: inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
		font-weight: 500;
		margin-block-end: 1rem;
		padding-block-end: 12px;
		padding-block-start: 11px;
		padding-inline: 20px;
		position: relative;
	}

		.field_setting .gform-admin .gform-alert, .gform-admin .gform-alert + .field_setting {
			margin-block-start: 1rem;
		}

		/* Style variant: Inline */

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

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

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

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

		/*
		 * Alert: Message
		 */

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

		.gform-admin .gform-alert .gform-alert__message-wrap .gform-alert__message {
				color: inherit;
				flex: 1 1 auto;
				font-size: 0.8125rem;
				font-weight: 500;
				line-height: 1.5;
				margin: 0;
				padding-block-start: 7px;
			}

		.gform-admin .gform-alert .gform-alert__message-wrap .gform-alert__message a, .gform-admin .gform-alert .gform-alert__message-wrap .gform-alert__message a:hover {
					color: inherit;
				}

		/*
		 * Alert: Dismiss Action
		 */

		.gform-admin .gform-alert .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;
		}

		.gform-admin .gform-alert .gform-alert__dismiss::before, .gform-admin .gform-alert .gform-alert__dismiss::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;
			}

		.gform-admin .gform-alert .gform-alert__dismiss::before {
				height: 23px;
				width: 23px;
				z-index: 1;
			}

		.gform-admin .gform-alert .gform-alert__dismiss::after {
				border-width: 2px;
				height: 25px;
				width: 25px;
			}

		.gform-admin .gform-alert .gform-alert__dismiss:hover .gform-icon, .gform-admin .gform-alert .gform-alert__dismiss:focus .gform-icon {
					color: #5b5e80;
				}

		.gform-admin .gform-alert .gform-alert__dismiss:focus::before {
					border-color: #3985b7;
				}

		.gform-admin .gform-alert .gform-alert__dismiss:focus::after {
					border-color: #bed8ed;
				}

		.gform-admin .gform-alert .gform-alert__dismiss .gform-icon {
				color: #9092b2;
				font-size: 2.1rem;
				height: 0;
				inset-block-start: 50%;
				inset-inline-start: 0;
				line-height: 0;
				position: absolute;
				transition: color 200ms ease-in-out;
			}

		/* Style variant: Notice */

		.gform-admin .gform-alert.gform-alert--notice {
			border-color: #175cff;
			color: #175cff;
		}

		.gform-admin .gform-alert.gform-alert--notice .gform-alert__icon {
				color: #175cff;
			}

		/* Style variant: Error */

		.gform-admin .gform-alert.gform-alert--error {
			border-color: #dd301d;
			color: #dd301d;
		}

		.gform-admin .gform-alert.gform-alert--error .gform-alert__icon {
				color: #dd301d;
			}

		/* Style variant: Success */

		.gform-admin .gform-alert.gform-alert--success {
			border-color: #22a753;
			color: #22a753;
		}

		.gform-admin .gform-alert.gform-alert--success .gform-alert__icon {
				color: #22a753;
			}

		/* Style variant: Accessibility */

		.gform-admin .gform-alert.gform-alert--accessibility {
			border-color: #ffbe03;
		}

		/* Theme: Cosmos */

		.gform-admin .gform-alert.gform-alert--theme-cosmos {
			border-color: #d2d5db;
			padding: 1rem;
		}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap {
				min-height: 25px;
				padding-block-start: 2rem;
				padding-inline-start: 0;
			}

		@media (min-width: 768px) {

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap {
					padding-block-start: 0;
					padding-inline-start: 2rem
			}
				}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message {
					font-size: 0.875rem;
					padding-block-start: 0;
				}

		@media (min-width: 768px) {

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message {
						padding-block-start: 0.125rem
				}
					}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message > * {
						font-size: 0.875rem;
						font-weight: 400;
					}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message .gform-list {
						margin-inline-start: 1rem;
					}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message .gform-list.gform-list--bulleted, .gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message .gform-list.gform-list--decimal {
							padding-inline-start: 0;
						}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message .gform-list.gform-list--bulleted li, .gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__message-wrap .gform-alert__message .gform-list.gform-list--decimal li {
								margin-block-end: 0;
							}

		/* Style variant: Info */

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--info {
				color: #242748;
			}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--info .gform-alert__message-wrap .gform-alert__message {
						color: #242748;
					}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--info .gform-alert__message-wrap .gform-alert__message > * {
							color: #585e6a;
						}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--info .gform-alert__icon {
					color: #242748;
				}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--info .gform-alert__icon::after {
						background-color: #f2f3f5;
						border-color: #d2d5db;
					}

		/* Style variant: Notice */

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--notice {
				background: #f4f8ff;
				border-color: #c3d9ff;
				color: #044ad3;
			}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--notice .gform-alert__message-wrap .gform-alert__message {
						color: #044ad3;
					}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--notice .gform-alert__icon {
					color: #044ad3;
				}

		/* Style variant: Success */

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--success {
				background: #fbfffb;
				border-color: #31c48d;
				color: #2f833d;
			}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--success .gform-alert__message-wrap .gform-alert__message {
						color: #2f833d;
					}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--success .gform-alert__icon {
					color: #2f833d;
				}

		/* Style variant: Error */

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--error, .gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--incorrect {
				background: #fff9f9;
				border-color: #ffc7bb;
				color: #c02b0a;
			}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--error .gform-alert__message-wrap .gform-alert__message, .gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--incorrect .gform-alert__message-wrap .gform-alert__message {
						color: #c02b0a;
					}

		.gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--error .gform-alert__icon, .gform-admin .gform-alert.gform-alert--theme-cosmos.gform-alert--incorrect .gform-alert__icon {
					color: #c02b0a;
				}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__icon {
				inset-inline-start: 16px;
			}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__icon.gform-icon--preset-active {
					position: absolute;
				}

		.gform-admin .gform-alert.gform-alert--theme-cosmos .gform-alert__icon.gform-icon--preset-active::before {
						position: absolute;
					}

	/*
	 * Alert: Icon
	 */

	.gform-admin .gform-alert__icon {
		color: #242748;
		font-size: 24px;
		height: 21px;
		inset-block-start: 17px;
		inset-inline-start: 20px;
		position: absolute;
		width: 21px;
	}

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

	/* Message CTA */

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

/*# sourceMappingURL=alert.css.map */