_border-image.scss 1.8 KB

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