1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-30 16:18:07 +01:00
metamask-extension/ui/pages/swaps/loading-swaps-quotes/index.scss
2022-03-24 15:13:26 +01:00

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;
}
}