jizy-messenger/lib/less/structure.less

A simple JS DOM messaging library.

.app-messages {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2147483;
	justify-content: center;
	flex-direction: column;
	container-type: inline-size;

	&.backgrounded {
		background-color: var(--jizy-messenger-backdrop-color);
		height: 100vh;
		margin: 0;
		padding-top: 20px;
		top: 0 !important;
	}

	&:empty {
		display: none;
	}
}

.alert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 100%;
	color: var(--jizy-messenger-fg-color);
	border: none;
	margin: 0 auto;
	font-size: 1.1em;
	padding-left: 12px;
	padding-right: 12px;
	user-select: none;

	a {
		font-weight: 700;
		color: inherit !important;
	}

	p,
	ul {
		&:last-child {
			margin-bottom: 0;
		}
	}

	>div {
		flex-grow: 1;
	}

	&.alert-success {
		background-color: var(--jizy-messenger-success-bg-color);
	}

	&.alert-info {
		background-color: var(--jizy-messenger-info-bg-color);
	}

	&.alert-primary {
		background-color: var(--jizy-messenger-primary-bg-color);
	}

	&.alert-warning {
		background-color: var(--jizy-messenger-warning-bg-color);
	}

	&.alert-danger {
		background-color: var(--jizy-messenger-danger-bg-color);
	}

	&+.alert {
		margin-top: 6px;
	}

	&.alert-dismissible {
		position: relative;
	}

	// Reset the host page's / UA button chrome — the closer is just the glyph.
	// Only its colour is themeable (via --jizy-messenger-closer-color).
	.closer {
		appearance: none;
		-webkit-appearance: none;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0;
		margin: 0;
		font: inherit;
		text-shadow: none;
		color: var(--jizy-messenger-closer-color);
		cursor: pointer;
		font-size: 1.4rem;
		line-height: 1;
	}
}