@antmjs/vantui/lib/dropdown-menu/index.less

一套适用于Taro3及React的vantui组件库

/* stylelint-disable no-descending-specificity */
@import '../style/var.less';

.van-dropdown-menu {
  display: flex;
  user-select: none;
  .theme(dropdown-menu-box-shadow, '@dropdown-menu-box-shadow');
  .theme(height, '@dropdown-menu-height');
  .theme(background-color, '@dropdown-menu-background-color');

  &__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0; // hack for flex ellipsis

    &:active {
      opacity: 0.7;
    }

    &--disabled {
      &:active {
        opacity: 1;
      }

      .van-dropdown-menu__title {
        .theme(color, '@dropdown-menu-title-disabled-text-color');
      }
    }
  }

  &__title {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    .theme(padding, '@dropdown-menu-title-padding');
    .theme(color, '@dropdown-menu-title-text-color');
    .theme(font-size,'@dropdown-menu-title-font-size');
    .theme(line-height,'@dropdown-menu-title-line-height');

    &::after {
      position: absolute;
      top: 50%;
      right: -8px;
      margin-top: -10px;
      border: 6px solid;
      border-color: transparent transparent currentcolor currentcolor;
      transform: rotate(-45deg);
      opacity: 0.8;
      content: '';
    }

    &--active {
      .theme(color,'@dropdown-menu-title-active-text-color');
    }

    &--down {
      &::after {
        margin-top: -2px;
        transform: rotate(135deg);
      }
    }
  }
}