/* MODULE SCSS => ./scss2/_animate.scss
*//*
 * LICENCE : CloudUnit is available under the Affero Gnu Public License GPL V3 : https://www.gnu.org/licenses/agpl-3.0.html
 *     but CloudUnit is licensed too under a standard commercial license.
 *     Please contact our sales team if you would like to discuss the specifics of our Enterprise license.
 *     If you are not sure whether the GPL is right for you,
 *     you can always test our software under the GPL and inspect the source code before you contact us
 *     about purchasing a commercial license.
 *
 *     LEGAL TERMS : "CloudUnit" is a registered trademark of Treeptik and can't be used to endorse
 *     or promote products derived from this project without prior written permission from Treeptik.
 *     Products or services derived from this software may not be called "CloudUnit"
 *     nor may "Treeptik" or similar confusing terms appear in their names without prior written permission.
 *     For any questions, contact us : contact@treeptik.fr
 */

/*.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0.0)
  }
  40% {
    -webkit-transform: scale(1.0)
  }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  }
  40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.spinner {
  height: 4px;
  width: auto;
  display: inline-block;
}

.spinner > div {
  display: none;
  width: 4px;
  height: 4px;
  background-color: $color-muted;
  border-radius: 100%;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  *//* Prevent first frame from flickering when animation starts *//*
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  .pending & {
    display: inline-block;
  }*/

.spinner {
  width: auto;
}

.spinner > div {
  display: none;
  background-color: #ff5722;
  height: 34px;
  width: 6px;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
  .pending & {
    display: inline-block;
  }
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.animate-module {
  -webkit-animation: displayingCardList .5s 1 linear;
  animation: displayingCardList .5s 1 linear;
  animation-fill-mode: forwards;
  -wekkit-animation-fill-mode: forwards;
  opacity: 0;

}

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

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 1;
  }
}

.colapse-reduct {
  transition: .3s;
  line-height: 20px;

  &.colapse-on {
    line-height: 0px;
    transform: scale(0);
    -webkit-transform: scale(0);
    width: 0;
    display: flex;
  }
}

@keyframes dropHeader {
  0% {
    transform: translateY(-100%) scaleY(0);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}
