75 lines
1.1 KiB
SCSS
75 lines
1.1 KiB
SCSS
|
@import '../variables.scss';
|
||
|
|
|
||
|
|
.notifications-container{
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
margin: 1.5%;
|
||
|
|
width: 20%;
|
||
|
|
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: 2% 0;
|
||
|
|
min-height: 50px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 2%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.notif-danger{
|
||
|
|
background-color: $red;
|
||
|
|
opacity: 1;
|
||
|
|
transition: .3s;
|
||
|
|
&:hover{
|
||
|
|
background-color: lighten($color: $red, $amount: 20);
|
||
|
|
opacity: 0.8!important;
|
||
|
|
}
|
||
|
|
}
|