115 lines
No EOL
1.6 KiB
CSS
115 lines
No EOL
1.6 KiB
CSS
/* Transition for modal background appearing/disappearing */
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
|
|
.fade-enter, .fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
|
|
/* Transition for modal card appearing disappearing */
|
|
.top-slide-enter-active {
|
|
animation: top-slide-in 1s;
|
|
}
|
|
.top-slide-leave-active { animation: top-slide-out 1s; }
|
|
|
|
@keyframes top-slide-in {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes top-slide-out {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Transition for past questions expanding in */
|
|
.expand-from-left-enter-active {
|
|
animation: expand-from-left 1s;
|
|
transform-origin: left;
|
|
}
|
|
.expand-from-left-leave-active {
|
|
animation: shrink-to-left 1s;
|
|
transform-origin: left;
|
|
}
|
|
@keyframes expand-from-left {
|
|
0% {
|
|
transform: scaleX(0);
|
|
}
|
|
100% {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
@keyframes shrink-to-left {
|
|
0% {
|
|
transform: scaleX(1);
|
|
}
|
|
100% {
|
|
transform: scaleX(0);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Transition for modal card appearing disappearing */
|
|
.burst-enter-active {
|
|
animation: burst-in .5s;
|
|
}
|
|
.burst-leave-active { animation: burst-out .5s; }
|
|
|
|
@keyframes burst-in {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes burst-out {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
@keyframes burst-in {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(1.25);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes burst-out {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.25);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
} |