/* Animations */

/* zoom-elastic animation */

.zoom-elastic-enter-active {
  animation: zoom-elastic .5s;
  animation-timing-function: ease;
}

.zoom-elastic-leave-active {
  animation: zoom-elastic .3s reverse;
  animation-timing-function: ease;
}


/* login-animations */

.login-form-enter-active {
  animation: slide-right-25 1s, fade-in 1s;
  animation-timing-function: ease;
}

.login-logo-enter-active {
  animation: slide-left-25 1s, fade-in 1s;
  animation-timing-function: ease;
}

/* Nav bar */

.nav-bar-enter-active {
  animation: slide-down-100 1s;
  animation-timing-function: ease;
}

/* Home page */

.pop-in-enter-active {
  animation: zoom-in 1s, fade-in 1s;
  animation-timing-function: ease;
}

/* Fast pop-in-out */

.pop-in-fast-enter-active {
  animation: zoom-in 0.4s, fade-in 0.4s;
  animation-timing-function: ease;
}

.pop-in-fast-leave-active {
  animation: zoom-in 0.4s, fade-in 0.4s;
  animation-direction: reverse;
  animation-timing-function: ease;
}

/* Orders */

.search-panel-enter-active {
  animation: slide-left-100 1s, fade-in 1s;
  animation-timing-function: ease;
}

/* List reordering v-for */

.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}




@keyframes slide-right-25 {
  0% {
    transform: translate(25%, 0%)
  }
  100% {
    transform: translate(0%, 0%)
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-left-25 {
  0% {
    transform: translate(-25%, 0%)
  }
  100% {
    transform: translate(0%, 0%)
  }
}

@keyframes slide-left-100 {
  0% {
    transform: translate(-100%, 0%)
  }
  100% {
    transform: translate(0%, 0%)
  }
}

@keyframes slide-down-100 {
  0% {
    transform: translate(0%, -100%)
  }
  100% {
    transform: translate(0%, 0%)
  }
}

@keyframes zoom-elastic {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoom-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}