wetrade-design/lib/cascader/style/index-pure.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../checkbox/style/mixin';

@cascader-prefix-cls: ~'@{wd-prefix}-cascader';
@select-prefix-cls: ~'@{wd-prefix}-select';

.antCheckboxFn(@checkbox-prefix-cls: ~'@{cascader-prefix-cls}-checkbox');

.@{cascader-prefix-cls} {
  width: 184px;

  &-checkbox {
    top: 0;
    margin-right: @padding-xs;
  }

  &-menus {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;

    &.@{cascader-prefix-cls}-menu-empty {
      .@{cascader-prefix-cls}-menu {
        width: 100%;
        height: auto;
      }
    }
  }

  &-menu {
    min-width: 138px;
    max-width: 260px;
    overflow-x: hidden;
    height: 280px;
    margin: -@dropdown-edge-child-vertical-padding 0;
    padding: @padding-sm @padding-xs;
    overflow: overlay;
    vertical-align: top;
    list-style: none;
    border-right: @border-width-base @border-style-base @cascader-menu-border-color-split;
    -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: @sp-scroll-bar;
      border-radius: @border-radius-sm;
    }

    &:last-of-type {
      border-right: none;
    }

    // &:first-of-type {
    //   padding: 0;
    // }

    &-item {
      max-width: 280px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: @cascader-dropdown-vertical-padding @cascader-dropdown-edge-child-horizontal-padding;
      line-height: @cascader-dropdown-line-height;
      border-radius: @cascader-dropdown-item-border-radius;
      cursor: pointer;
      // transition: all 0.3s;
      font-size: @cascader-dropdown-font-size;
      margin-top: @cascader-dropdown-item-margin-top;

      &:first-of-type {
        margin-top: 0;
      }

      &:hover {
        background-color: @cascader-item-selected-bg;
      }

      &-disabled {
        color: @disabled-color;
        cursor: not-allowed;

        &:hover {
          background: transparent;
        }
      }

      .@{cascader-prefix-cls}-menu-empty & {
        color: @disabled-color;
        cursor: default;
        pointer-events: none;
      }

      &-active:not(&-disabled) {
        color: @brand-text;
        // font-weight: @cascader-dropdown-active-font-weight;
        // &,
        // &:hover {
        // font-weight: @select-item-selected-font-weight;
        // background-color: @cascader-item-selected-bg;
        // }
      }

      &-expand &-expand-icon,
      &-loading-icon {
        display: flex;
        align-items: center;
        margin-left: @padding-xss;
        color: @text-color-secondary;
        font-size: @font-size-sm;

        .@{cascader-prefix-cls}-menu-item-disabled& {
          color: @disabled-color;
        }
      }

      &-expand-icon {
        color: @cascader-menu-expand-icon-color !important;
      }

      &-keyword {
        color: @highlight-color;
      }

      &-content {
        white-space: wrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-word;
        flex: 1;
      }
    }
  }

  &-dropdown {
    &.@{select-prefix-cls}-dropdown {
      padding: 0;
    }
  }
}

@import './rtl';