_triangle.scss 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @mixin triangle ($size, $color, $direction) {
  2. height: 0;
  3. width: 0;
  4. $width: nth($size, 1);
  5. $height: nth($size, length($size));
  6. $foreground-color: nth($color, 1);
  7. $background-color: if(length($color) == 2, nth($color, 2), transparent);
  8. @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
  9. $width: $width / 2;
  10. $height: if(length($size) > 1, $height, $height/2);
  11. @if $direction == up {
  12. border-left: $width solid $background-color;
  13. border-right: $width solid $background-color;
  14. border-bottom: $height solid $foreground-color;
  15. } @else if $direction == right {
  16. border-top: $width solid $background-color;
  17. border-bottom: $width solid $background-color;
  18. border-left: $height solid $foreground-color;
  19. } @else if $direction == down {
  20. border-left: $width solid $background-color;
  21. border-right: $width solid $background-color;
  22. border-top: $height solid $foreground-color;
  23. } @else if $direction == left {
  24. border-top: $width solid $background-color;
  25. border-bottom: $width solid $background-color;
  26. border-right: $height solid $foreground-color;
  27. }
  28. }
  29. @else if ($direction == up-right) or ($direction == up-left) {
  30. border-top: $height solid $foreground-color;
  31. @if $direction == up-right {
  32. border-left: $width solid $background-color;
  33. } @else if $direction == up-left {
  34. border-right: $width solid $background-color;
  35. }
  36. }
  37. @else if ($direction == down-right) or ($direction == down-left) {
  38. border-bottom: $height solid $foreground-color;
  39. @if $direction == down-right {
  40. border-left: $width solid $background-color;
  41. } @else if $direction == down-left {
  42. border-right: $width solid $background-color;
  43. }
  44. }
  45. @else if ($direction == inset-up) {
  46. border-width: $height $width;
  47. border-style: solid;
  48. border-color: $background-color $background-color $foreground-color;
  49. }
  50. @else if ($direction == inset-down) {
  51. border-width: $height $width;
  52. border-style: solid;
  53. border-color: $foreground-color $background-color $background-color;
  54. }
  55. @else if ($direction == inset-right) {
  56. border-width: $width $height;
  57. border-style: solid;
  58. border-color: $background-color $background-color $background-color $foreground-color;
  59. }
  60. @else if ($direction == inset-left) {
  61. border-width: $width $height;
  62. border-style: solid;
  63. border-color: $background-color $foreground-color $background-color $background-color;
  64. }
  65. }