antd-mini/less/Picker/index.less

antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。

@import (reference) './variable.less';
@import '../style/mixins/hairline.less';

@pickerPrefix: ant-picker;

.@{pickerPrefix} {
  display: inline-flex;
  align-items: center;
  color: @picker-item-color;
  &-disabled {
    color: @picker-placeholder-color;
  }
  &-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: @picker-header-padding;
    box-sizing: border-box;
    .hairline('bottom', @COLOR_BORDER);

    &-item {
      display: flex;
      align-items: center;
      height: 100%;
      white-space: nowrap;
      font-size: @picker-header-action-size;
      color: @picker-header-action-color;
      box-sizing: border-box;
    }

    &-title {
      display: flex;
      justify-content: center;
      overflow: hidden;
      -webkit-line-clamp: 1;
      box-orient: vertical;
      white-space: normal;
      color: @picker-item-color;
      width: @picker-header-title-width;
    }
  }


  &-content {
    background: @picker-content-background-color;

    .a-picker-view-picker-item {
      color: @picker-item-color;
    }
    .a-picker-view-picker-indicator {
      &::before,
      &::after {
        border-color: @picker-header-color;
      }
    }
    .a-picker-view-picker-mask {
      background-image: linear-gradient(
          to bottom,
          @picker-mask-bg-faded-95,
          @picker-mask-bg-faded-60
        ),
        linear-gradient(
          to top,
          @picker-mask-bg-faded-95,
          @picker-mask-bg-faded-60
        );
      will-change: transform;
    }
  }
  &-value {
    &-placeholder,
    &-text {
      &:not(:nth-child(1)) {
        display: none;
      }
    }
    &-placeholder {
      color: @picker-placeholder-color;
    }
  }
}