_caret.less 1.2 KB

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