SU-SWS/decanter

View on GitHub
core/src/scss/utilities/mixins/gradient/_linear-gradient.scss

Summary

Maintainability
Test Coverage

///
/// Mixin to create a linear gradient with a plain color fallback.
///
/// @name linear-gradient
///
/// @author Hugo Giraudel
///
/// @example scss
///   @include linear-gradient(#31b7d7, #edac7d);
///   @include linear-gradient(to right, #eee 0%, $su-color-cardinal-red 50%, $su-color-palo-alto 100%);
///   @include linear-gradient(32deg, #53284f 0%, #00548f 50%, #0098db 50.01%, $su-color-white 100%);
///
/// @param {string} $direction - Linear gradient direction. One of: to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left
/// @param {list} $su-color-stops - Color-stops composing the gradient. Each includes a color value, and a location in percentage (when there are more than 2 $su-color-stops), e.g., #123456 30% .
///
/// @group mixin
@mixin linear-gradient($direction, $su-color-stops...) {
  @if is-direction-or-angle($direction) == false {
    $su-color-stops: ($direction, $su-color-stops);
    $direction: 180deg;
  }

  background: nth(nth($su-color-stops, 1), 1);
  background: linear-gradient($direction, $su-color-stops);
}