mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-05 13:08:58 +05:30
191 lines
3.8 KiB
SCSS
191 lines
3.8 KiB
SCSS
|
@import "~components/ui/fonts.scss";
|
||
|
|
||
|
// Original: http://codepen.io/vanderlanth/pen/rxpNMY
|
||
|
|
||
|
.page {
|
||
|
margin: 80px auto 0;
|
||
|
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
flex-direction: column;
|
||
|
}
|
||
|
|
||
|
.loading {
|
||
|
width: 200px;
|
||
|
height: 100px;
|
||
|
margin-bottom: 50px;
|
||
|
position: relative;
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: flex-end;
|
||
|
animation: loadStab 1s ease-out infinite;
|
||
|
}
|
||
|
|
||
|
.cube {
|
||
|
width: 50px;
|
||
|
height: 50px;
|
||
|
background: white;
|
||
|
animation: cubeRotate 1s ease-out infinite;
|
||
|
}
|
||
|
|
||
|
.road {
|
||
|
position: absolute;
|
||
|
width: 100%;
|
||
|
height: 1px;
|
||
|
background: white;
|
||
|
left: 0;
|
||
|
bottom: 0;
|
||
|
animation: roadStab 1s ease-out infinite;
|
||
|
}
|
||
|
|
||
|
@keyframes cubeRotate {
|
||
|
0% {transform: rotate(0deg) translate3D(0, 0, 0);}
|
||
|
65% {transform: rotate(45deg) translate3D(0, -13px, 0);}
|
||
|
90% {transform: rotate(70deg) translate3D(0, -8px, 0);}
|
||
|
100% {transform: rotate(90deg) translate3D(0, 0, 0);}
|
||
|
}
|
||
|
|
||
|
@keyframes roadStab {
|
||
|
0% {transform: translate3D(0, 0, 0);}
|
||
|
60% {transform: translate3D(0, 2px, 0);}
|
||
|
90% {transform: translate3D(0, 4px, 0);}
|
||
|
100% {transform: translate3D(0, 0, 0);}
|
||
|
}
|
||
|
|
||
|
@keyframes loadStab {
|
||
|
0% {transform: translate3D(0, 0, 0);}
|
||
|
60% {transform: translate3D(0, -2px, 0);}
|
||
|
95% {transform: translate3D(0, -2px, 0);}
|
||
|
100% {transform: translate3D(0, 0, 0);}
|
||
|
}
|
||
|
|
||
|
//------------------ MOUNTAINS ---------------------
|
||
|
|
||
|
.rocks {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
position: absolute;
|
||
|
bottom: -50px;
|
||
|
left: 0;
|
||
|
overflow: hidden;
|
||
|
animation: roadStab 1s ease-out infinite;
|
||
|
}
|
||
|
|
||
|
@mixin rock($rockName, $bottom, $delay) {
|
||
|
.#{$rockName} {
|
||
|
position: absolute;
|
||
|
border-left: 2px solid transparent;
|
||
|
border-right: 2px solid transparent;
|
||
|
border-bottom: 4px solid white;
|
||
|
bottom: $bottom;
|
||
|
right: -2%;
|
||
|
animation: rockTravelling 10s $delay ease-out infinite;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@include rock('rockOne', 23px, 0s);
|
||
|
@include rock('rockTwo', 40px, 2s);
|
||
|
@include rock('rockThree', 30px, 6s);
|
||
|
@include rock('rockFour', 10px, 4s);
|
||
|
@include rock('rockFive', 18px, 8s);
|
||
|
|
||
|
@keyframes rockTravelling {
|
||
|
0% {right: -2%;}
|
||
|
10% {right: 8%;}
|
||
|
20% {right: 18%;}
|
||
|
30% {right: 29%;}
|
||
|
40% {right: 40%;}
|
||
|
50% {right: 51%;}
|
||
|
60% {right: 62%;}
|
||
|
70% {right: 72%;}
|
||
|
80% {right: 82%;}
|
||
|
90% {right: 92%;}
|
||
|
100% {right: 102%;}
|
||
|
}
|
||
|
|
||
|
//------------------ CLOUDS ---------------------
|
||
|
|
||
|
.clouds {
|
||
|
width: 200%;
|
||
|
height: 200%;
|
||
|
animation: roadStab 1s ease-out infinite,
|
||
|
cloudStab 1s ease-out infinite;
|
||
|
position: absolute;
|
||
|
bottom: -50px;
|
||
|
left: -50%;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
.cloud {
|
||
|
position: absolute;
|
||
|
will-change: animation;
|
||
|
|
||
|
background-image: url('./cloud.svg');
|
||
|
background-size: cover;
|
||
|
}
|
||
|
|
||
|
.cloudOne {
|
||
|
composes: cloud;
|
||
|
|
||
|
top: 5px;
|
||
|
width: 100px;
|
||
|
height: 32px;
|
||
|
animation: cloudTravelling 16s linear infinite;
|
||
|
}
|
||
|
|
||
|
.cloudTwo {
|
||
|
composes: cloud;
|
||
|
|
||
|
top: 65px;
|
||
|
right: -30%;
|
||
|
width: 50px;
|
||
|
height: 16px;
|
||
|
animation: cloudTravelling 21s 5s linear infinite;
|
||
|
}
|
||
|
|
||
|
.cloudThree {
|
||
|
composes: cloud;
|
||
|
|
||
|
top: 40px;
|
||
|
right: -30%;
|
||
|
width: 70px;
|
||
|
height: 22px;
|
||
|
animation: cloudTravelling 26s 11s linear infinite;
|
||
|
}
|
||
|
|
||
|
@keyframes cloudTravelling {
|
||
|
0% {right: -30%;}
|
||
|
100% {right: 110%;}
|
||
|
}
|
||
|
|
||
|
@keyframes cloudStab {
|
||
|
0% {transform: translate3D(0, 0, 0);}
|
||
|
60% {transform: translate3D(0, 2px, 0);}
|
||
|
85% {transform: translate3D(0, 2px, 0);}
|
||
|
100% {transform: translate3D(0, 0, 0);}
|
||
|
}
|
||
|
|
||
|
%text {
|
||
|
font-family: $font-family-title;
|
||
|
text-align: center;
|
||
|
padding: 0 10px;
|
||
|
line-height: 1.2;
|
||
|
}
|
||
|
|
||
|
.text {
|
||
|
@extend %text;
|
||
|
|
||
|
font-size: 24px;
|
||
|
margin-top: 25px;
|
||
|
color: #666;
|
||
|
}
|
||
|
|
||
|
.subText {
|
||
|
@extend %text;
|
||
|
|
||
|
font-size: 16px;
|
||
|
margin-top: 5px;
|
||
|
color: #9a9a9a;
|
||
|
}
|