There are no notes for this item.
<div class="toaster toaster--error animated fadeIn">
<p class="toaster__content">Toaster popup content</p>
</div>
/*------------------------------------*\
#MESSAGE PAGE
\*------------------------------------*/
// Check Toaster CSS
.toaster--error {
top: 0;
bottom: inherit;
border-color: $border-error;
background-color: $background-default;
position: relative;
padding-left: 45px;
}
.toaster--error:before {
content: "";
background-color: $background-error;
height: 100%;
display: block;
width: 30px;
position: absolute;
top: 0;
left: 0;
}
.toaster--error:after {
content: "\00d7";
border-radius: $radius-circle;
background-color: $background-default;
color: $background-error;
font-size: 20px;
font-weight: 900;
display: block;
top: calc(50% - 7px);
position: absolute;
left: calc(15px - 7px);
padding: 7px 0 6px 1px;
line-height: 0;
}