animated-gradient.scss

// 
// Animated gradients
// 
// Adapted from: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
// 

@mixin animated-gradient(
  $staticStart: null,
  $staticEnd: null,
  $hoverStart: null,
  $hoverEnd: null,
  $opacityOverride: null,
  $transition: null,
  $assembledStaticGradient: null,
  $assembledHoverGradient: null
) {
  position: relative;
  z-index: 100;
  @if $assembledStaticGradient != null {
    background: $assembledStaticGradient;
  }
  @else {
    background: linear-gradient($staticStart, $stacticEnd);
  }

  &:before {
    position: absolute;
    top: 0; left: 0;
    z-index: -100;
    content: "";
    width: 100%;
    height: 100%;
    will-change: opacity;
    @if $opacityOverride != null {
      opacity: $opacityOverride;
    }
    @else {
      opacity: 0;
    }
    border-radius: inherit;
    @if $assembledHoverGradient != null {
      background: $assembledHoverGradient;
    }
    @else {
      background: linear-gradient($hoverStart, $hoverEnd);
    }
    transition: $transition;
  }

  &:hover:before {
    opacity: 1;
  }
}