_border-image.scss 2.14 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
@mixin border-image($images) {
  -webkit-border-image: border-add-prefix($images, webkit);
     -moz-border-image: border-add-prefix($images, moz);
       -o-border-image: border-add-prefix($images, o);
          border-image: border-add-prefix($images);
}

@function border-add-prefix($images, $vendor: false) {
  $border-image: ();
  $images-type:  type-of(nth($images, 1));
  $first-var:    nth(nth($images, 1), 1);          // Get type of Gradient (Linear || radial)

  // If input is a gradient
  @if $images-type == string {
    @if ($first-var == "linear") or ($first-var == "radial") {
      @for $i from 2 through length($images) {
        $gradient-type: nth($images, 1);           // Get type of gradient (linear || radial)
        $gradient-args: nth($images, $i);          // Get actual gradient (red, blue)
        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
      }
    }

    // If input is a URL
    @else {
      $border-image: $images;
    }
  }

  // If input is gradient or url + additional args
  @else if $images-type == list {
    @for $i from 1 through length($images) {
      $type: type-of(nth($images, $i));           // Get type of variable - List or String

      // If variable is a list - Gradient
      @if $type == list {
        $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
        $border-image:  render-gradients($gradient-args, $gradient-type, $vendor);
      }

      // If variable is a string - Image or number
      @else if ($type == string) or ($type == number) {
        $border-image: append($border-image, nth($images, $i));
      }
    }
  }
  @return $border-image;
}

//Examples:
// @include border-image(url("image.png"));
// @include border-image(url("image.png") 20 stretch);
// @include border-image(linear-gradient(45deg, orange, yellow));
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));