Contents

@mixin linear-gradient($pos, $G1, $G2: false,
                       $G3: false, $G4: false,
                       $G5: false, $G6: false,
                       $G7: false, $G8: false,
                       $G9: false, $G10: false,
                       $fallback: false) {
  // Detect what type of value exists in $pos
  $pos-type: type-of(nth($pos, 1));

  // If $pos is missing from mixin, reassign vars and add default position
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
    $pos: top; // Default position
  }

  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);

  // Set $G1 as the default fallback color
  $fallback-color: nth($G1, 1);

  // If $fallback is a color use that color as the fallback color
  @if (type-of($fallback) == color) or ($fallback == "transparent") {
    $fallback-color: $fallback;
  }

  background-color: $fallback-color;
  background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0
  background-image:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
  background-image:     -moz-linear-gradient($pos, $full);
  background-image:      -ms-linear-gradient($pos, $full);
  background-image:       -o-linear-gradient($pos, $full);
  background-image: unquote("linear-gradient(#{$pos}, #{$full})");
}


// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
// @include linear-gradient(#color1, color2);
// @include linear-gradient(#color1, #color2, $fallback:#color3);
// @include linear-gradient(top, #color1 0%, #color2 50%);
// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #color1 50%, #color2 51%, #color3 100%);

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
app_sleuth-0.0.1.pre	lib/app_sleuth/server/assets/sass/mixins/css3/_linear-gradient.scss