Untitled

// Background gradients
// Provides classes for some gradients
// with a class for 4 different directions
// for each gradient
$colors: (
  "red": (
    "start": $color-orange-light,
    "end": $color-red
  ),
  "blue": (
    "start": $color-blue-light,
    "end": $color-blue
  ),
  "pink": (
    "start": $color-pink-light,
    "end": $color-purple
  ),
);

@each $variant, $gradient in $colors {
  $start: map-get($gradient, 'start');
  $end: map-get($gradient, 'end');
  @for $i from 0 through 3 {
    $direction-slug: 45 + $i*90;
    $direction: 45deg + $i*90;
    .gradient-#{$variant}-#{$direction-slug} {
      @include background(linear-gradient($direction, $start, $end));
    }
  }
  // Create one gradient background style for headings
  // to be used in the WYSIWYG editor
  h3.gradient-#{$variant} {
    @include background(linear-gradient(225deg, $start, $end));
    @include border-top-right-radius(30px);
    padding: 2em 30px 1em 30px;
    color: white;
  }
}