p0c-website

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

_border-image.scss (1827B)

      1 @mixin border-image($borders...) {
      2   $webkit-borders: ();
      3   $spec-borders: ();
      4 
      5   @each $border in $borders {
      6     $webkit-border: ();
      7     $spec-border: ();
      8     $border-type: type-of($border);
      9 
     10     @if $border-type == string or list {
     11       $border-str: if($border-type == list, nth($border, 1), $border);
     12 
     13       $url-str:       str-slice($border-str, 1, 3);
     14       $gradient-type: str-slice($border-str, 1, 6);
     15 
     16       @if $url-str == "url" {
     17         $webkit-border: $border;
     18         $spec-border:   $border;
     19       }
     20 
     21       @else if $gradient-type == "linear" {
     22         $gradients: _linear-gradient-parser("#{$border}");
     23         $webkit-border: map-get($gradients, webkit-image);
     24         $spec-border:   map-get($gradients, spec-image);
     25       }
     26 
     27       @else if $gradient-type == "radial" {
     28         $gradients: _radial-gradient-parser("#{$border}");
     29         $webkit-border: map-get($gradients, webkit-image);
     30         $spec-border:   map-get($gradients, spec-image);
     31       }
     32 
     33       @else {
     34         $webkit-border: $border;
     35         $spec-border:   $border;
     36       }
     37     }
     38 
     39     @else {
     40       $webkit-border: $border;
     41       $spec-border:   $border;
     42     }
     43 
     44     $webkit-borders: append($webkit-borders, $webkit-border, comma);
     45     $spec-borders:   append($spec-borders,   $spec-border,   comma);
     46   }
     47 
     48   -webkit-border-image: $webkit-borders;
     49           border-image: $spec-borders;
     50           border-style: solid;
     51 }
     52 
     53 //Examples:
     54 // @include border-image(url("image.png"));
     55 // @include border-image(url("image.png") 20 stretch);
     56 // @include border-image(linear-gradient(45deg, orange, yellow));
     57 // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
     58 // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
     59 // @include border-image(radial-gradient(top, cover, orange, yellow, orange));