naive-ui/styles/BaseSelectMenu.scss

@import './mixins/mixins.scss';

@mixin base-select-size-mixin ($size) {
  @include m($size + '-size') {
    @include b(virtual-scroller) {
      height: 100%;
      max-height: map-get($--n-height, $size) * 7.6;
      scrollbar-width: none;
      -moz-scrollbar-width: none;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
    @include b(scrollbar-container) {
      max-height: map-get($--n-height, $size) * 7.6;
    }
    @include b(base-select-option) {
      height: map-get($--n-height, $size);
      line-height: map-get($--n-height, $size);
      font-size: map-get($--n-font-size, $size);
    }
    @include b(base-select-group-header) {
      height: map-get($--n-height, $size);
      line-height: map-get($--n-height, $size);
      font-size: map-get($--n-font-size, $size) - 2px;
    }
  }
}

@include themes-mixin {
  @include b(base-select-menu) {
    @include once {
      @include base-select-size-mixin("small");
      @include base-select-size-mixin("medium");
      @include base-select-size-mixin("large");
      @include base-select-size-mixin("huge");
      outline: none;
      margin-top: 4px;
      margin-bottom: 4px;
      z-index: 0;
      position: relative;
      border-radius: $--n-base-select-menu-border-radius;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
      overflow: hidden;
      @include b(base-select-menu-option-wrapper) {
        position: relative;
        width: 100%;
      }
      @include e(action) {
        padding: 8px 14px;
        font-size: 14px;
      }
    }
    background-color: $--base-select-menu-background-color;
    box-shadow: $--base-select-menu-box-shadow;
    @include b(base-select-group-header) {
      @include once {
        cursor: default;
        padding: 0 14px;
      }
      color: map-get($--base-select-menu-group-header-text-color, 'default');
    }
    @include b(base-select-option) {
      @include once {
        cursor: pointer;
        position: relative;
        padding: 0 14px;
        white-space: nowrap;
        transition: color .3s $--n-ease-in-out-cubic-bezier;
        text-overflow: ellipsis;
        overflow: hidden;
        box-sizing: border-box;
        @include m(grouped) {
          padding: 0 21px;
        }
      }
      color: map-get($--base-select-menu-option-color, "default");
      @include m(selected) {
        color: map-get($--base-select-menu-option-color, "selected");
      }
      @include m(disabled) {
        color: map-get($--base-select-menu-option-color, "disabled");
        @include once {
          &::after {
            display: none;
          }
        }
        @include m(selected) {
          color: map-get($--base-select-menu-option-color, "disabled-selected");
          &::after {
            border-right: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
            border-bottom: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
            @include once {
              display: block;
            }
          }
        }
        @include once {
          cursor: not-allowed;
        }
      }
    }
    @include e(action) {
      @include once {
        transition:
          color .3s $--n-ease-in-out-cubic-bezier,
          border-color .3s $--n-ease-in-out-cubic-bezier;
      }
      border-top: 1px solid $--base-select-menu-action-divider-color;
      color: $--base-select-menu-action-text-color;
    }
    @include m(no-tracking-rect) {
      @include b(base-select-option) {
        @include not-m(disabled) {
          &:hover {
            color: map-get($--base-select-menu-option-color, "selected");
          }
        }
      }
    }
    @include m(multiple) {
      @include b(base-select-option) {
        @include once {
          position: relative;
          transition: color .3s $--n-ease-in-out-cubic-bezier;
          padding-right: 28px;
          @include m(selected) {
            background: none;
            &::after {
              opacity: 1;
              transform: rotate(45deg) scale(1);
            }
          }
        }
        &::after {
          @include once {
            content: '';
            height: 6px;
            width: 3px;
            position: absolute;
            right: 14px;
            transform: rotate(45deg) scale(.5);
            top: calc(50% - 4px);
            opacity: 0;
            transition:
              transform .3s $--n-ease-in-out-cubic-bezier,
              opacity .3s $--n-ease-in-out-cubic-bezier;
          }
          border-right: 1px solid $--base-select-menu-option-check-mark-color;
          border-bottom: 1px solid $--base-select-menu-option-check-mark-color;
        }
        &:active {
          color: map-get($--base-select-menu-option-color, "active");
        }
      }
    }
  }
}