_caret.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  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-bottom: $caret-width solid transparent;
  16. border-left: $caret-width solid;
  17. }
  18. @mixin caret-left {
  19. border-top: $caret-width solid transparent;
  20. border-right: $caret-width solid;
  21. border-bottom: $caret-width solid transparent;
  22. }
  23. @mixin caret($direction: down) {
  24. @if $enable-caret {
  25. &::after {
  26. display: inline-block;
  27. width: 0;
  28. height: 0;
  29. margin-left: $caret-width * .85;
  30. vertical-align: $caret-width * .85;
  31. content: "";
  32. @if $direction == down {
  33. @include caret-down;
  34. } @else if $direction == up {
  35. @include caret-up;
  36. } @else if $direction == right {
  37. @include caret-right;
  38. }
  39. }
  40. @if $direction == left {
  41. &::after {
  42. display: none;
  43. }
  44. &::before {
  45. display: inline-block;
  46. width: 0;
  47. height: 0;
  48. margin-right: $caret-width * .85;
  49. vertical-align: $caret-width * .85;
  50. content: "";
  51. @include caret-left;
  52. }
  53. }
  54. &:empty::after {
  55. margin-left: 0;
  56. }
  57. }
  58. }