45 lines
1.0 KiB
SCSS
45 lines
1.0 KiB
SCSS
|
// from https://www.w3schools.com/howto/howto_js_snackbar.asp
|
||
|
|
#snackbar {
|
||
|
|
visibility: hidden;
|
||
|
|
min-width: 250px;
|
||
|
|
margin-left: -125px; /* Divide value of min-width by 2 */
|
||
|
|
background: linear-gradient(hsl($hue,60,30), hsl($hue,60,20));
|
||
|
|
// background: linear-gradient(#930, #620);
|
||
|
|
// background: linear-gradient(#555, #333);
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 16px;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1;
|
||
|
|
left: 50%;
|
||
|
|
bottom: 30px;
|
||
|
|
font-family: $sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
#snackbar.show {
|
||
|
|
visibility: visible;
|
||
|
|
-moz-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||
|
|
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||
|
|
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadein {
|
||
|
|
from {bottom: 0; opacity: 0;}
|
||
|
|
to {bottom: 30px; opacity: 1;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadein {
|
||
|
|
from {bottom: 0; opacity: 0;}
|
||
|
|
to {bottom: 30px; opacity: 1;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-webkit-keyframes fadeout {
|
||
|
|
from {bottom: 30px; opacity: 1;}
|
||
|
|
to {bottom: 0; opacity: 0;}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeout {
|
||
|
|
from {bottom: 30px; opacity: 1;}
|
||
|
|
to {bottom: 0; opacity: 0;}
|
||
|
|
}
|