_caret.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  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. width: 0;
  29. height: 0;
  30. margin-left: $caret-width * .85;
  31. vertical-align: $caret-width * .85;
  32. content: "";
  33. @if $direction == down {
  34. @include caret-down;
  35. } @else if $direction == up {
  36. @include caret-up;
  37. } @else if $direction == right {
  38. @include caret-right;
  39. }
  40. }
  41. @if $direction == left {
  42. &::after {
  43. display: none;
  44. }
  45. &::before {
  46. display: inline-block;
  47. width: 0;
  48. height: 0;
  49. margin-right: $caret-width * .85;
  50. vertical-align: $caret-width * .85;
  51. content: "";
  52. @include caret-left;
  53. }
  54. }
  55. &:empty::after {
  56. margin-left: 0;
  57. }
  58. }
  59. }