openfoodnetwork/app/webpacker/css/darkswarm/animations.scss

.turbo-progress-bar {
  background-color: $teal-400;
}

// ANIMATION FUNCTIONS

@keyframes fade-out-hide {
  0%   {opacity: 1; visibility: visible;}
  99%  {opacity: 0; visibility: visible;}
  100% {opacity: 0; visibility: hidden;}
}

.animate-hide-500 {
  animation: fade-out-hide 0.5s;
}

//
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes slideOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

// ANIMATION CLASSES

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

.reveal-modal.fade {
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -o-transition: -o-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;

  @media only screen and (min-width: 641px) {
    -webkit-transform: translate(0, -5%);
    -ms-transform: translate(0, -5%);
    transform: translate(0, -5%);
  }
}

.reveal-modal.in {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

.reveal-modal-bg.fade {
  filter: alpha(opacity = 0);
  opacity: 0;
}

.reveal-modal-bg.in {
  filter: alpha(opacity = 75);
  opacity: 0.75;
}

.animate-repeat {
  &.ng-move, &.ng-enter, &.ng-leave {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
  }

  &.ng-leave {
    opacity: 1;

    &.ng-leave-active {
      opacity: 0;
    }
  }

  &.ng-enter {
    opacity: 0;

    &.ng-enter-active {
      opacity: 1;
    }
  }
}

product.animate-repeat {
  &.ng-leave {
    border-color: rgba(153, 153, 153, 1);

    &.ng-leave-active {
      border-color: rgba(153, 153, 153, 0);
    }
  }

  &.ng-enter {
    border-color: rgba(153, 153, 153, 0);

    &.ng-enter-active {
      border-color: rgba(153, 153, 153, 1);
    }
  }
}

.animate-show {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  // line-height: 20px
  // opacity: 1
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
  // display: block !important
}

.animate-show.ng-hide {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;

  // line-height: 0
  // opacity: 0
  // padding: 0 10px
}

.row.animate-show ~ .row {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

//

.animate-slide {
  max-height: 500px;
  opacity: 1 !important;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;

  &.ng-hide {
    overflow: hidden;
    max-height: 0;
    opacity: 0 !important;
  }

  // &.ng-hide-add-active, &.ng-hide-remove-active

  &.ng-hide-add, &.ng-hide-remove {
    /* IMPORTANT: this needs to be here to make it visible during the animation
     * since the .ng-hide class is already on the element rendering
     * it as hidden. */
    display: block !important;
  }
}

.animate-show {
  opacity: 1 !important;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;

  &.ng-hide {
    opacity: 0 !important;
  }

  // &.ng-hide-add-active, &.ng-hide-remove-active

  &.ng-hide-add, &.ng-hide-remove {
    /* IMPORTANT: this needs to be here to make it visible during the animation
     * since the .ng-hide class is already on the element rendering
     * it as hidden. */
    display: block !important;
  }
}

@mixin csstrans {
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  -webkit-transform-style: preserve-3d;
}