117 lines
1.6 KiB
SCSS
117 lines
1.6 KiB
SCSS
.notification {
|
|
right: 10px;
|
|
top: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
width: 90%;
|
|
max-width: 400px;
|
|
pointer-events: none;
|
|
|
|
.notification-item {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
div {
|
|
position: unset;
|
|
padding: unset;
|
|
}
|
|
|
|
div.notification-item {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.notification-item {
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
overflow: hidden;
|
|
|
|
&.success {
|
|
background-color: $success;
|
|
}
|
|
|
|
&.error {
|
|
background-color: $error;
|
|
}
|
|
|
|
&.warning {
|
|
background-color: $warning;
|
|
}
|
|
|
|
&.info {
|
|
background-color: $info;
|
|
}
|
|
|
|
.message {
|
|
padding: 1em;
|
|
}
|
|
}
|
|
|
|
.notification-item .fade-bar {
|
|
animation: fadeOut ease-in-out 3000ms;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: -1;
|
|
opacity: 0.4;
|
|
transform-origin: left;
|
|
|
|
&:after {
|
|
content: '';
|
|
z-index: 1;
|
|
bottom: 0;
|
|
height: 4px;
|
|
width: 100%;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
}
|
|
|
|
&.endless {
|
|
animation: endlessFade ease-in-out 500ms infinite;
|
|
}
|
|
|
|
&.success {
|
|
background-color: $successBorder;
|
|
}
|
|
|
|
&.error {
|
|
background-color: $errorBorder;
|
|
}
|
|
|
|
&.warning {
|
|
background-color: $warningBorder;
|
|
}
|
|
|
|
&.info {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
transform: scaleX(1);
|
|
}
|
|
to {
|
|
transform: scaleX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes endlessFade {
|
|
0% {
|
|
transform: scaleX(1);
|
|
transform-origin: right;
|
|
}
|
|
49% {
|
|
transform-origin: right;
|
|
}
|
|
50% {
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
}
|
|
100% {
|
|
transform: scaleX(1);
|
|
}
|
|
} |