127 lines
1.9 KiB
SCSS
127 lines
1.9 KiB
SCSS
@import '../variables.scss';
|
|
|
|
.notifications-container{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 1.5%;
|
|
width: 375px;
|
|
z-index: 100000000;
|
|
|
|
|
|
}
|
|
|
|
@keyframes pop {
|
|
from{
|
|
opacity: 0;
|
|
}to{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from{opacity: 1;}
|
|
to{opacity: 0;}
|
|
}
|
|
.fadeOut{
|
|
animation: fadeOut .3s forwards!important;
|
|
}
|
|
|
|
|
|
.notif-title{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
& svg{
|
|
margin-inline-end: 8px;
|
|
}
|
|
}
|
|
|
|
.notif{
|
|
width: 100%;
|
|
animation: pop .3s forwards;
|
|
margin: 10px 0;
|
|
min-height: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $background!important;
|
|
&::after{
|
|
content: '';
|
|
width: 2%;
|
|
height: 3px;
|
|
background-color: blue;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 0;
|
|
animation: progress 3.5s forwards;
|
|
}
|
|
|
|
&::before{
|
|
content: '';
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: $background-light;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.notif-content{
|
|
padding: 2%;
|
|
}
|
|
|
|
@keyframes progress {
|
|
from{width: 100%;}
|
|
to{width: 0;}
|
|
}
|
|
|
|
.notif-msg{
|
|
margin-left: 8%;
|
|
font-size: .9em;
|
|
& svg{
|
|
margin-inline-end: 8px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.notif-success{
|
|
// background-color: $green;
|
|
opacity: 1;
|
|
transition: .3s;
|
|
&:hover{
|
|
// background-color: lighten($color: $green, $amount: 20);
|
|
opacity: 0.8!important;
|
|
}
|
|
&::after{
|
|
background-color: $green;
|
|
}
|
|
}
|
|
|
|
.notif-danger,.notif-warning{
|
|
// background-color: $red;
|
|
opacity: 1;
|
|
transition: .3s;
|
|
&:hover{
|
|
// background-color: lighten($color: $red, $amount: 20);
|
|
opacity: 0.8!important;
|
|
}
|
|
|
|
&::after{
|
|
background-color: $red;
|
|
}
|
|
}
|
|
.notif-info{
|
|
// background-color: $red;
|
|
opacity: 1;
|
|
transition: .3s;
|
|
&:hover{
|
|
// background-color: lighten($color: $red, $amount: 20);
|
|
opacity: 0.8!important;
|
|
}
|
|
|
|
&::after{
|
|
background-color: $bleu;
|
|
}
|
|
} |