index.less 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. @import './var.less';
  2. :root {
  3. --van-sidebar-font-size: @sidebar-font-size;
  4. --van-sidebar-line-height: @sidebar-line-height;
  5. --van-sidebar-text-color: @sidebar-text-color;
  6. --van-sidebar-disabled-text-color: @sidebar-disabled-text-color;
  7. --van-sidebar-padding: @sidebar-padding;
  8. --van-sidebar-active-color: @sidebar-active-color;
  9. --van-sidebar-background-color: @sidebar-background-color;
  10. --van-sidebar-selected-font-weight: @sidebar-selected-font-weight;
  11. --van-sidebar-selected-text-color: @sidebar-selected-text-color;
  12. --van-sidebar-selected-border-width: @sidebar-selected-border-width;
  13. --van-sidebar-selected-border-height: @sidebar-selected-border-height;
  14. --van-sidebar-selected-border-color: @sidebar-selected-border-color;
  15. --van-sidebar-selected-background-color: @sidebar-selected-background-color;
  16. }
  17. .van-sidebar-item {
  18. position: relative;
  19. display: block;
  20. box-sizing: border-box;
  21. padding: var(--van-sidebar-padding);
  22. overflow: hidden;
  23. color: var(--van-sidebar-text-color);
  24. font-size: var(--van-sidebar-font-size);
  25. line-height: var(--van-sidebar-line-height);
  26. background: var(--van-sidebar-background-color);
  27. cursor: pointer;
  28. user-select: none;
  29. &:active {
  30. background-color: var(--van-sidebar-active-color);
  31. }
  32. &:not(:last-child)::after {
  33. border-bottom-width: 1px;
  34. }
  35. &__text {
  36. // https://github.com/vant-ui/vant/issues/7455
  37. word-break: break-all;
  38. }
  39. &--select {
  40. color: var(--van-sidebar-selected-text-color);
  41. font-weight: var(--van-sidebar-selected-font-weight);
  42. &,
  43. &:active {
  44. background-color: var(--van-sidebar-selected-background-color);
  45. }
  46. &::before {
  47. position: absolute;
  48. top: 50%;
  49. left: 0;
  50. width: var(--van-sidebar-selected-border-width);
  51. height: var(--van-sidebar-selected-border-height);
  52. background-color: var(--van-sidebar-selected-border-color);
  53. transform: translateY(-50%);
  54. content: '';
  55. }
  56. }
  57. &--disabled {
  58. color: var(--van-sidebar-disabled-text-color);
  59. cursor: not-allowed;
  60. &:active {
  61. background-color: var(--van-sidebar-background-color);
  62. }
  63. }
  64. }