index.less 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @import './var.less';
  2. @import '../dropdown-item/var.less';
  3. :root {
  4. --van-dropdown-menu-height: @dropdown-menu-height;
  5. --van-dropdown-menu-background-color: @dropdown-menu-background-color;
  6. --van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow;
  7. --van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size;
  8. --van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color;
  9. --van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color;
  10. --van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color;
  11. --van-dropdown-menu-title-padding: @dropdown-menu-title-padding;
  12. --van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height;
  13. --van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color;
  14. --van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height;
  15. }
  16. .van-dropdown-menu {
  17. user-select: none;
  18. &__bar {
  19. position: relative;
  20. display: flex;
  21. height: var(--van-dropdown-menu-height);
  22. background: var(--van-dropdown-menu-background-color);
  23. box-shadow: var(--van-dropdown-menu-box-shadow);
  24. &--opened {
  25. z-index: calc(var(--van-dropdown-item-z-index) + 1);
  26. }
  27. }
  28. &__item {
  29. display: flex;
  30. flex: 1;
  31. align-items: center;
  32. justify-content: center;
  33. min-width: 0; // hack for flex ellipsis
  34. &--disabled {
  35. .van-dropdown-menu__title {
  36. color: var(--van-dropdown-menu-title-disabled-text-color);
  37. }
  38. }
  39. }
  40. &__title {
  41. position: relative;
  42. box-sizing: border-box;
  43. max-width: 100%;
  44. padding: var(--van-dropdown-menu-title-padding);
  45. color: var(--van-dropdown-menu-title-text-color);
  46. font-size: var(--van-dropdown-menu-title-font-size);
  47. line-height: var(--van-dropdown-menu-title-line-height);
  48. &::after {
  49. position: absolute;
  50. top: 50%;
  51. right: -4px;
  52. margin-top: -5px;
  53. border: 3px solid;
  54. border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
  55. transform: rotate(-45deg);
  56. opacity: 0.8;
  57. content: '';
  58. }
  59. &--active {
  60. color: var(--van-dropdown-menu-title-active-text-color);
  61. &::after {
  62. border-color: transparent transparent currentColor currentColor;
  63. }
  64. }
  65. &--down {
  66. &::after {
  67. margin-top: -1px;
  68. transform: rotate(135deg);
  69. }
  70. }
  71. }
  72. }