frontend_v2/src/app/components/utility/toast/toast.component.scss
@import './variables.scss';
@import './mixins.scss';
.toast-container {
visibility: hidden;
word-wrap: break-word;
z-index: 1;
display: inline-block;
color: #fff;
text-align: center;
position: fixed;
right: 0;
top: 64px;
box-shadow: none;
.toast-desc {
padding: 15px 20px;
@include box-shadow(0px, 0px, 10px, 5px, $overlay-light);
.toast-message {
font-size: $fs-14;
font-weight: $fw-light;
margin-left: 8px;
}
.fa-info,
.fa-times,
.fa-check {
font-size: 15px;
}
}
&.show {
visibility: visible;
-webkit-animation: fadein 0.5s, shake 1s 0.5s, shake 1s 0.5s; //stay 5s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, shake 1s 0.5s, shake 1s 0.5s; //stay 5s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
width: 350px;
transition: width 0.5s;
transition-delay: 1.5s;
.toast-desc {
visibility: visible;
transition: visibility 0s;
transition-delay: 1.5s;
-webkit-animation: showpls 0s 1s;
animation: showpls 0s 1s;
}
}
}
.toast-desc {
word-break: initial;
&.toast-success {
background-color: $green-med;
&:hover {
background-color: $green-med;
}
}
&.toast-error {
background-color: $med-red;
&:hover {
background-color: $med-red;
}
}
&.toast-info {
background-color: $info-blue;
&:hover {
background-color: $info-blue;
}
}
}
@include screen-small {
.toast-container {
&.show {
min-width: 300px;
}
.toast-desc {
margin-left: -15px;
min-width: 250px;
.toast-message {
max-width: 250px;
}
}
}
}
@include keyframes(fadein) {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@include keyframes(shake) {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}