1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- @import '../style/var';
- .van-dropdown-menu {
- user-select: none;
- &__bar {
- position: relative;
- display: flex;
- height: @dropdown-menu-height;
- background-color: @dropdown-menu-background-color;
- box-shadow: @dropdown-menu-box-shadow;
- &--opened {
- z-index: @dropdown-item-z-index + 1;
- }
- }
- &__item {
- display: flex;
- flex: 1;
- align-items: center;
- justify-content: center;
- min-width: 0; // hack for flex ellipsis
- cursor: pointer;
- &:active {
- opacity: @active-opacity;
- }
- &--disabled {
- &:active {
- opacity: 1;
- }
- .van-dropdown-menu__title {
- color: @dropdown-menu-title-disabled-text-color;
- }
- }
- }
- &__title {
- position: relative;
- box-sizing: border-box;
- max-width: 100%;
- padding: @dropdown-menu-title-padding;
- color: @dropdown-menu-title-text-color;
- font-size: @dropdown-menu-title-font-size;
- line-height: @dropdown-menu-title-line-height;
- &::after {
- position: absolute;
- top: 50%;
- right: -4px;
- margin-top: -5px;
- border: 3px solid;
- border-color: transparent transparent @gray-4 @gray-4;
- transform: rotate(-45deg);
- opacity: 0.8;
- content: '';
- }
- &--active {
- color: @dropdown-menu-title-active-text-color;
- &::after {
- border-color: transparent transparent currentColor currentColor;
- }
- }
- &--down {
- &::after {
- margin-top: -1px;
- transform: rotate(135deg);
- }
- }
- }
- }
|