mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-30 16:18:07 +01:00
109 lines
2.1 KiB
SCSS
109 lines
2.1 KiB
SCSS
.loading-swaps-quotes {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
width: 100%;
|
|
|
|
&__content {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-height: 445px;
|
|
}
|
|
|
|
&__quote-counter {
|
|
@include H7;
|
|
|
|
color: var(--color-text-alternative);
|
|
margin-top: 3px;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
&__quote-name-check {
|
|
@include H4;
|
|
|
|
font-weight: bold;
|
|
color: var(--color-text-default);
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&__background-1,
|
|
&__background-2 {
|
|
width: 265.18px;
|
|
height: 221.02px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
-webkit-animation: spin 38s linear infinite;
|
|
-moz-animation: spin 38s linear infinite;
|
|
animation: spin 38s linear infinite;
|
|
|
|
@-moz-keyframes spin {
|
|
100% {
|
|
-moz-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__background-2 {
|
|
width: 182.8px;
|
|
height: 195.39px;
|
|
-webkit-animation: spin 42s linear infinite;
|
|
-moz-animation: spin 42s linear infinite;
|
|
animation: spin 42s linear infinite;
|
|
}
|
|
|
|
&__mascot-container {
|
|
position: absolute;
|
|
}
|
|
|
|
&__animation {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
height: 60%;
|
|
width: 316px;
|
|
}
|
|
|
|
&__loading-bar-container {
|
|
width: 248px;
|
|
height: 3px;
|
|
background: var(--color-background-alternative);
|
|
display: flex;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
&__loading-bar {
|
|
height: 3px;
|
|
background: var(--color-primary-default);
|
|
-webkit-transition: width 0.5s linear;
|
|
-moz-transition: width 0.5s linear;
|
|
-o-transition: width 0.5s linear;
|
|
transition: width 0.5s linear;
|
|
}
|
|
}
|