index.less 1.5 KB

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