toast.scss
No OneTemporary
Actions

Authored By

Unknown

Size

1 KB

Referenced Files

None

Subscribers

None

toast.scss
View Options

	.toast-container {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0.5rem;
	width: 320px;
	max-height: calc(100% - 1rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(52, 58, 64, 95%) transparent;
	z-index: 1065; // above Bootstrap modal backdrop and dialogs

	@media (max-width: 375px) {
	left: 0;
	width: auto;
	}
	}

	.toast {
	background-color: rgba(52, 58, 64, 95%);

	&:not(:last-child) {
	margin-bottom: 0.3rem;
	}

	@media (max-width: 375px) {
	max-width: 100%;
	}
	}

	.toast-header {
	background-color: #343a40;
	border-color: #555;
	color: #fff;

	strong {
	flex: 1;
	}

	svg {
	font-size: 1.2em;
	margin-right: 0.5rem;
	}

	.btn-close {
	font-size: 0.8em;
	cursor: pointer;
	}
	}

	.toast-body {
	color: #fff;
	}

	.toast-progress {
	margin: 0.5em;
	margin-top: 0;
	height: 3px;
	background: #222;
	border-radius: 1.5px;
	overflow: hidden;
	}

	.toast-progress-bar {
	height: 100%;
	background: $main-color;
	}