frontend/src/styles/components/migrator.scss

72 lines
1.4 KiB
SCSS

.migration-services-overview {
text-align: center;
a {
display: inline-block;
width: 100px;
text-transform: capitalize;
margin-right: 1em;
img {
display: block;
}
}
}
.migration-in-progress-container {
max-width: 400px;
margin: 4em auto 0;
text-align: center;
}
.migration-in-progress {
text-align: center;
display: flex;
max-width: 400px;
justify-content: space-between;
align-items: center;
margin-bottom: 2em;
img {
display: block;
max-height: 100px;
}
.progress-dots {
height: 40px;
width: 140px;
overflow: visible;
span {
transition: all 500ms ease;
background: $grey;
height: 10px;
width: 10px;
display: inline-block;
border-radius: 10px;
animation: wave 2s ease infinite;
margin-right: 5px;
&:nth-child(1){ animation-delay: 0; }
&:nth-child(2){ animation-delay: 100ms; }
&:nth-child(3){ animation-delay: 200ms; }
&:nth-child(4){ animation-delay: 300ms; }
&:nth-child(5){ animation-delay: 400ms; }
&:nth-child(6){ animation-delay: 500ms; }
&:nth-child(7){ animation-delay: 600ms; }
&:nth-child(8){ animation-delay: 700ms; }
}
}
@keyframes wave{
0%, 40%, 100% {
transform: translate(0, 0);
background-color: $primary;
}
10% {
transform: translate(0, -15px);
background-color: $primary-dark;
}
}
}