_linear-gradient.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. @mixin linear-gradient($pos, $g1, $g2: null,
  2. $g3: null, $g4: null,
  3. $g5: null, $g6: null,
  4. $g7: null, $g8: null,
  5. $g9: null, $g10: null,
  6. $fallback: null) {
  7. // Detect what type of value exists in $pos
  8. $pos-type: type-of(nth($pos, 1));
  9. $pos-spec: null;
  10. $pos-degree: null;
  11. // If $pos is missing from mixin, reassign vars and add default position
  12. @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
  13. $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
  14. $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
  15. $pos: null;
  16. }
  17. @if $pos {
  18. $positions: _linear-positions-parser($pos);
  19. $pos-degree: nth($positions, 1);
  20. $pos-spec: nth($positions, 2);
  21. }
  22. $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
  23. // Set $g1 as the default fallback color
  24. $fallback-color: nth($g1, 1);
  25. // If $fallback is a color use that color as the fallback color
  26. @if (type-of($fallback) == color) or ($fallback == "transparent") {
  27. $fallback-color: $fallback;
  28. }
  29. background-color: $fallback-color;
  30. background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
  31. background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
  32. }