teagles / wagon

// scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty

@mixin -motion-ui-defaults {
  transition-duration: map-get($motion-ui-speeds, default);
  transition-timing-function: map-get($motion-ui-easings, default);
}

// Transitions
// - - - - - - - - - - - - - - -
@mixin motion-ui-transitions {
  // Slide
  .slide-in-down    { @include mui-slide(in,  down); }
  .slide-in-left    { @include mui-slide(in,  right); }
  .slide-in-up      { @include mui-slide(in,  up); }
  .slide-in-right   { @include mui-slide(in,  left); }
  .slide-out-down   { @include mui-slide(out, down); }
  .slide-out-right  { @include mui-slide(out, right); }
  .slide-out-up     { @include mui-slide(out, up); }
  .slide-out-left   { @include mui-slide(out, left); }

  // Fade
  .fade-in  { @include mui-fade(in,  0, 1); }
  .fade-out { @include mui-fade(out, 1, 0); }

  // Hinge
  .hinge-in-from-top      { @include mui-hinge(in,  top); }
  .hinge-in-from-right    { @include mui-hinge(in,  right); }
  .hinge-in-from-bottom   { @include mui-hinge(in,  bottom); }
  .hinge-in-from-left     { @include mui-hinge(in,  left); }
  .hinge-in-from-middle-x  { @include mui-hinge(in,  top,   center); }
  .hinge-in-from-middle-y  { @include mui-hinge(in,  right, center); }
  .hinge-out-from-top     { @include mui-hinge(out, top); }
  .hinge-out-from-right   { @include mui-hinge(out, right); }
  .hinge-out-from-bottom  { @include mui-hinge(out, bottom); }
  .hinge-out-from-left    { @include mui-hinge(out, left); }
  .hinge-out-from-middle-x { @include mui-hinge(out, top,   center); }
  .hinge-out-from-middle-y { @include mui-hinge(out, right, center); }

  // Scale
  .scale-in-up    { @include mui-zoom(in,  0.5, 1); }
  .scale-in-down  { @include mui-zoom(in,  1.5, 1); }
  .scale-out-up   { @include mui-zoom(out, 1, 1.5); }
  .scale-out-down { @include mui-zoom(out, 1, 0.5); }

  // Spin
  .spin-in     { @include mui-spin(in,  cw); }
  .spin-out    { @include mui-spin(out, cw); }
  .spin-in-ccw  { @include mui-spin(in,  ccw); }
  .spin-out-ccw { @include mui-spin(out, ccw); }

  // Transition Modifiers
  // - - - - - - - - - - - - - - -

  @each $name, $value in $motion-ui-speeds {
    @if $name != default {
      .#{$name} { transition-duration: $value !important; }
    }
  }

  @each $name, $value in $motion-ui-easings {
    @if $name != default {
      .#{$name} { transition-timing-function: $value !important; }
    }
  }

  @each $name, $value in $motion-ui-delays {
    @if $name != default {
      .#{$name}-delay { transition-delay: $value !important; }
    }
  }
}

// Animations
// - - - - - - - - - - - - - - -
@mixin motion-ui-animations {
  .shake    { @include mui-animation(shake); }
  .spin-cw  { @include mui-animation(spin); }
  .spin-ccw { @include mui-animation(spin(ccw)); }
  .wiggle   { @include mui-animation(wiggle); }

  .shake,
  .spin-cw,
  .spin-ccw,
  .wiggle {
    animation-duration: map-get($motion-ui-speeds, default);
  }

  // Animation Modifiers
  // - - - - - - - - - - - - - - -
  .infinite { animation-iteration-count: infinite; }

  @each $name, $value in $motion-ui-speeds {
    @if $name != default {
      .#{$name} { animation-duration: $value !important; }
    }
  }

  @each $name, $value in $motion-ui-easings {
    @if $name != default {
      .#{$name} { animation-timing-function: $value !important; }
    }
  }

  @each $name, $value in $motion-ui-delays {
    @if $name != default {
      .#{$name}-delay { animation-delay: $value !important; }
    }
  }
}