Generateurv2/frontend/styles/exos/Notifications.module.scss

127 lines
1.9 KiB
SCSS
Raw Normal View History

2022-05-18 10:15:54 +02:00
@import '../variables.scss';
.notifications-container{
position: fixed;
top: 0;
right: 0;
margin: 1.5%;
2022-06-24 13:42:16 +02:00
width: 375px;
2022-05-18 10:15:54 +02:00
z-index: 100000000;
2022-06-24 13:42:16 +02:00
2022-05-18 10:15:54 +02:00
}
@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;
2022-06-24 13:42:16 +02:00
margin: 10px 0;
2022-05-18 10:15:54 +02:00
min-height: 50px;
display: flex;
flex-direction: column;
2022-06-24 13:42:16 +02:00
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{
2022-05-18 10:15:54 +02:00
padding: 2%;
}
2022-06-24 13:42:16 +02:00
@keyframes progress {
from{width: 100%;}
to{width: 0;}
}
2022-05-18 10:15:54 +02:00
.notif-msg{
margin-left: 8%;
font-size: .9em;
& svg{
margin-inline-end: 8px;
opacity: 0;
}
}
.notif-success{
2022-06-24 13:42:16 +02:00
// background-color: $green;
2022-05-18 10:15:54 +02:00
opacity: 1;
transition: .3s;
&:hover{
2022-06-24 13:42:16 +02:00
// background-color: lighten($color: $green, $amount: 20);
2022-05-18 10:15:54 +02:00
opacity: 0.8!important;
}
2022-06-24 13:42:16 +02:00
&::after{
background-color: $green;
}
2022-05-18 10:15:54 +02:00
}
2022-06-24 13:42:16 +02:00
.notif-danger,.notif-warning{
// background-color: $red;
2022-05-18 10:15:54 +02:00
opacity: 1;
transition: .3s;
&:hover{
2022-06-24 13:42:16 +02:00
// background-color: lighten($color: $red, $amount: 20);
2022-05-18 10:15:54 +02:00
opacity: 0.8!important;
}
2022-06-24 13:42:16 +02:00
&::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;
}
2022-05-18 10:15:54 +02:00
}