Sha256: bc8003fd76be0b050e07ccd73dd4ebfb5039a0878423c22bc2582c4d0d6ce5f9

Contents?: true

Size: 1.78 KB

Versions: 17

Compression:

Stored size: 1.78 KB

Contents

@mixin border-image($borders...) {
  $webkit-borders: ();
  $spec-borders: ();

  @each $border in $borders {
    $webkit-border: ();
    $spec-border: ();
    $border-type: type-of($border);

    @if $border-type == string or list {
      $border-str: if($border-type == list, nth($border, 1), $border);

      $url-str:       str-slice($border-str, 0, 3);
      $gradient-type: str-slice($border-str, 0, 6);

      @if $url-str == "url" {
        $webkit-border: $border;
        $spec-border:   $border;
      }

      @else if $gradient-type == "linear" {
        $gradients: _linear-gradient-parser("#{$border}");
        $webkit-border: map-get($gradients, webkit-image);
        $spec-border:   map-get($gradients, spec-image);
      }

      @else if $gradient-type == "radial" {
        $gradients: _radial-gradient-parser("#{$border}");
        $webkit-border: map-get($gradients, webkit-image);
        $spec-border:   map-get($gradients, spec-image);
      }

      @else {
        $webkit-border: $border;
        $spec-border:   $border;
      }
    }

    @else {
      $webkit-border: $border;
      $spec-border:   $border;
    }

    $webkit-borders: append($webkit-borders, $webkit-border, comma);
    $spec-borders:   append($spec-borders,   $spec-border,   comma);
  }

  -webkit-border-image: $webkit-borders;
          border-image: $spec-borders;
          border-style: solid;
}

//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));

Version data entries

17 entries across 16 versions & 7 rubygems

Version Path
soffes-blog-jekyll-0.2.0 _sass/bourbon/css3/_border-image.scss
soffes-blog-jekyll-0.1.0 _sass/bourbon/css3/_border-image.scss
va_common-0.1.0 app/assets/stylesheets/lib/bourbon/css3/_border-image.scss
us_web_design_standards-0.0.2 assets/_scss/lib/bourbon/css3/_border-image.scss
us_web_design_standards-0.0.2 app/assets/stylesheets/lib/bourbon/css3/_border-image.scss
us_web_design_standards-0.0.0 assets/_scss/lib/bourbon/css3/_border-image.scss
solidus_backend-1.0.0.pre3 vendor/bundle/gems/bourbon-4.2.3/app/assets/stylesheets/css3/_border-image.scss
nesta-contentfocus-extensions-0.0.3 assets/stylesheets/bourbon/css3/_border-image.scss
nesta-contentfocus-extensions-0.0.2 assets/stylesheets/bourbon/css3/_border-image.scss
solidus_backend-1.0.0.pre2 vendor/bundle/gems/bourbon-4.2.3/app/assets/stylesheets/css3/_border-image.scss
mifflin-0.1.1 vendor/assets/bower_components/bourbon/app/assets/stylesheets/css3/_border-image.scss
bourbon-4.2.3 app/assets/stylesheets/css3/_border-image.scss
bourbon-4.2.2 app/assets/stylesheets/css3/_border-image.scss
bourbon-4.2.1 app/assets/stylesheets/css3/_border-image.scss
bourbon-4.2.0 app/assets/stylesheets/css3/_border-image.scss
bourbon-4.2.0.beta app/assets/stylesheets/css3/_border-image.scss
bourbon-4.2.0.pre app/assets/stylesheets/css3/_border-image.scss