Fix block reward styling on Mobile

pull/1403/head
Andrew Cravenho 6 years ago
parent 39f368d8d1
commit 53d5d77ca5
  1. 25
      apps/block_scout_web/assets/css/components/_animations.scss

@ -1,7 +1,17 @@
@keyframes fade-in {
0% {transform: scale(0.97); opacity: 0;}
50% {transform: scale(1);}
100% {transform: scale(1); opacity: 1;}
0% {
transform: scale(0.97);
opacity: 0;
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes fade-up-blocks-chain {
@ -11,9 +21,11 @@
opacity: 0;
overflow-x: hidden;
}
50% {
opacity: 0;
}
100% {
flex-basis: 25%;
width: 25%;
@ -27,10 +39,12 @@
height: 0;
opacity: 0;
}
25% {
opacity: 0;
transform: translateY(10px) scale(0.97);
}
100% {
height: 100%;
opacity: 1;
@ -43,6 +57,7 @@
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(0.75);
@ -68,7 +83,7 @@
animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
@media (max-width: 767px) {
max-height: 234px;
max-height: 300px;
animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
}
@ -76,4 +91,4 @@
.shrink-out {
transform-origin: bottom center;
animation: shrink-out 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
}
Loading…
Cancel
Save