134 lines
2.5 KiB
SCSS
134 lines
2.5 KiB
SCSS
/* Loader */
|
|
// Spinner
|
|
@include keyframes('spinner-show') {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@include keyframes('spinner-hide') {
|
|
|
|
0% {
|
|
color: _palette(fg-lighter);
|
|
z-index: _misc(z-index-overlay) + 1;
|
|
|
|
@include vendor('transform', 'scale(1) rotate(0deg)');
|
|
}
|
|
|
|
99% {
|
|
color: _palette(bg);
|
|
z-index: _misc(z-index-overlay) + 1;
|
|
|
|
@include vendor('transform', 'scale(0.5) rotate(360deg)');
|
|
}
|
|
|
|
100% {
|
|
color: _palette(bg); z-index: -1;
|
|
|
|
@include vendor('transform', 'scale(0.5) rotate(360deg)');
|
|
}
|
|
}
|
|
|
|
@include keyframes('spinner-rotate') {
|
|
|
|
0% {
|
|
|
|
@include vendor('transform', 'scale(1) rotate(0deg)');
|
|
}
|
|
|
|
100% {
|
|
|
|
@include vendor('transform', 'scale(1) rotate(360deg)');
|
|
}
|
|
}
|
|
|
|
// Overlay
|
|
@include keyframes('overlay-hide') {
|
|
|
|
0% {
|
|
opacity: 1;
|
|
z-index: _misc(z-index-overlay);
|
|
}
|
|
|
|
15% {
|
|
opacity: 1;
|
|
z-index: _misc(z-index-overlay);
|
|
}
|
|
|
|
99% {
|
|
opacity: 0;
|
|
z-index: _misc(z-index-overlay);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
body.landing {
|
|
@include icon;
|
|
|
|
// Spinner (inactive)
|
|
&::before {
|
|
@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important'));
|
|
@include vendor('transform-origin', '50% 50%');
|
|
|
|
color: _palette(fg-lighter);
|
|
content: '\f1ce';
|
|
cursor: default;
|
|
display: block;
|
|
font-family: "Font Awesome 5 Free";
|
|
font-size: 2em;
|
|
font-weight: 900;
|
|
height: 2em;
|
|
left: 50%;
|
|
line-height: 2em;
|
|
margin: -1em 0 0 -1em;
|
|
opacity: 0;
|
|
position: fixed;
|
|
text-align: center;
|
|
top: 50%;
|
|
width: 2em;
|
|
z-index: -1;
|
|
}
|
|
|
|
// Overlay (inactive)
|
|
&::after {
|
|
@include vendor('animation', 'overlay-hide #{_duration(landing-fadein)} ease-in forwards !important');
|
|
|
|
background: _palette(bg);
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
&.is-loading {
|
|
// Spinner (active)
|
|
&::before {
|
|
@include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important'));
|
|
|
|
z-index: _misc(z-index-overlay) + 1;
|
|
}
|
|
|
|
// Overlay (active)
|
|
&::after {
|
|
@include vendor('animation', 'none !important');
|
|
|
|
opacity: 1;
|
|
z-index: _misc(z-index-overlay);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 2) {
|
|
body.landing::before {
|
|
line-height: 2.025em;
|
|
}
|
|
}
|
|
|