myheats-website

Website for myheats
git clone https://git.in0rdr.ch/myheats-website.git
Log | Files | Refs | Pull requests |Archive | README | LICENSE

_background.scss (1778B)


      1 //************************************************************************//
      2 // Background property for adding multiple backgrounds using shorthand
      3 // notation.
      4 //************************************************************************//
      5 
      6 @mixin background($backgrounds...) {
      7   $webkit-backgrounds: ();
      8   $spec-backgrounds: ();
      9 
     10   @each $background in $backgrounds {
     11     $webkit-background: ();
     12     $spec-background: ();
     13     $background-type: type-of($background);
     14 
     15     @if $background-type == string or $background-type == list {
     16       $background-str: if($background-type == list, nth($background, 1), $background);
     17 
     18       $url-str:       str-slice($background-str, 1, 3);
     19       $gradient-type: str-slice($background-str, 1, 6);
     20 
     21       @if $url-str == "url" {
     22         $webkit-background: $background;
     23         $spec-background:   $background;
     24       }
     25 
     26       @else if $gradient-type == "linear" {
     27         $gradients: _linear-gradient-parser("#{$background}");
     28         $webkit-background: map-get($gradients, webkit-image);
     29         $spec-background:   map-get($gradients, spec-image);
     30       }
     31 
     32       @else if $gradient-type == "radial" {
     33         $gradients: _radial-gradient-parser("#{$background}");
     34         $webkit-background: map-get($gradients, webkit-image);
     35         $spec-background:   map-get($gradients, spec-image);
     36       }
     37 
     38       @else {
     39         $webkit-background: $background;
     40         $spec-background:   $background;
     41       }
     42     }
     43 
     44     @else {
     45       $webkit-background: $background;
     46       $spec-background:   $background;
     47     }
     48 
     49     $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
     50     $spec-backgrounds:   append($spec-backgrounds,   $spec-background,   comma);
     51   }
     52 
     53   background: $webkit-backgrounds;
     54   background: $spec-backgrounds;
     55 }