index.less 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. @import './var.less';
  2. :root {
  3. --van-tree-select-font-size: @tree-select-font-size;
  4. --van-tree-select-nav-background-color: @tree-select-nav-background-color;
  5. --van-tree-select-content-background-color: @tree-select-content-background-color;
  6. --van-tree-select-nav-item-padding: @tree-select-nav-item-padding;
  7. --van-tree-select-item-height: @tree-select-item-height;
  8. --van-tree-select-item-active-color: @tree-select-item-active-color;
  9. --van-tree-select-item-disabled-color: @tree-select-item-disabled-color;
  10. --van-tree-select-item-selected-size: @tree-select-item-selected-size;
  11. }
  12. .van-tree-select {
  13. position: relative;
  14. display: flex;
  15. font-size: var(--van-tree-select-font-size);
  16. &__nav {
  17. flex: 1;
  18. overflow-y: auto;
  19. background: var(--van-tree-select-nav-background-color);
  20. -webkit-overflow-scrolling: touch;
  21. &-item {
  22. padding: var(--van-tree-select-nav-item-padding);
  23. }
  24. }
  25. &__content {
  26. flex: 2;
  27. overflow-y: auto;
  28. background: var(--van-tree-select-content-background-color);
  29. -webkit-overflow-scrolling: touch;
  30. }
  31. &__item {
  32. position: relative;
  33. padding: 0 32px 0 var(--van-padding-md);
  34. font-weight: var(--van-font-weight-bold);
  35. line-height: var(--van-tree-select-item-height);
  36. user-select: none;
  37. cursor: pointer;
  38. &--active {
  39. color: var(--van-tree-select-item-active-color);
  40. }
  41. &:active {
  42. background-color: var(--van-active-color);
  43. }
  44. &--disabled {
  45. color: var(--van-tree-select-item-disabled-color);
  46. cursor: not-allowed;
  47. &:active {
  48. background-color: transparent;
  49. }
  50. }
  51. }
  52. &__selected {
  53. position: absolute;
  54. top: 50%;
  55. right: var(--van-padding-md);
  56. margin-top: calc(var(--van-padding-xs) * -1);
  57. font-size: var(--van-tree-select-item-selected-size);
  58. }
  59. }