_caret.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. @mixin caret-down() {
  2. border-top: $caret-width solid;
  3. border-right: $caret-width solid transparent;
  4. border-bottom: 0;
  5. border-left: $caret-width solid transparent;
  6. }
  7. @mixin caret-up() {
  8. border-top: 0;
  9. border-right: $caret-width solid transparent;
  10. border-bottom: $caret-width solid;
  11. border-left: $caret-width solid transparent;
  12. }
  13. @mixin caret-right() {
  14. border-top: $caret-width solid transparent;
  15. border-right: 0;
  16. border-bottom: $caret-width solid transparent;
  17. border-left: $caret-width solid;
  18. }
  19. @mixin caret-left() {
  20. border-top: $caret-width solid transparent;
  21. border-right: $caret-width solid;
  22. border-bottom: $caret-width solid transparent;
  23. }
  24. @mixin caret($direction: down) {
  25. @if $enable-caret {
  26. &::after {
  27. display: inline-block;
  28. margin-left: $caret-spacing;
  29. vertical-align: $caret-vertical-align;
  30. content: "";
  31. @if $direction == down {
  32. @include caret-down();
  33. } @else if $direction == up {
  34. @include caret-up();
  35. } @else if $direction == right {
  36. @include caret-right();
  37. }
  38. }
  39. @if $direction == left {
  40. &::after {
  41. display: none;
  42. }
  43. &::before {
  44. display: inline-block;
  45. margin-right: $caret-spacing;
  46. vertical-align: $caret-vertical-align;
  47. content: "";
  48. @include caret-left();
  49. }
  50. }
  51. &:empty::after {
  52. margin-left: 0;
  53. }
  54. }
  55. }