p0c-website

Proof of concepts for fun and profit
git clone https://git.in0rdr.ch/p0c-website.git
Log | Files | Refs | Pull requests |Archive | README | LICENSE

_linear-gradient.scss (1308B)


      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 
     12   // If $pos is missing from mixin, reassign vars and add default position
     13   @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
     14     $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
     15     $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
     16     $pos: null;
     17   }
     18 
     19   @if $pos {
     20     $positions: _linear-positions-parser($pos);
     21     $pos-degree: nth($positions, 1);
     22     $pos-spec:   nth($positions, 2);
     23   }
     24 
     25   $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
     26 
     27   // Set $g1 as the default fallback color
     28   $fallback-color: nth($g1, 1);
     29 
     30   // If $fallback is a color use that color as the fallback color
     31   @if (type-of($fallback) == color) or ($fallback == "transparent") {
     32     $fallback-color: $fallback;
     33   }
     34 
     35   background-color: $fallback-color;
     36   background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
     37   background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
     38 }