naive-ui/styles/BaseSelectMenu.scss

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

.n-base-select-menu {
  outline: none;
  margin-top: 4px;
  margin-bottom: 4px;
  z-index: 0;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background-color: rgba(75, 81, 106, 1);
  box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.16);
  .n-base-select-menu__item-wrapper {
    position: relative;
    width: 100%;
  }
  .n-base-select-menu__item {
    cursor: pointer;
    position: relative;
    padding: 0px 14px;
    white-space: nowrap;
    &.n-base-select-menu__item--disabled {
      color: rgba(255, 255, 255, .3)!important;
      &::after {
        display: none;
      }
      &.n-base-select-menu__item--selected {
        color: rgba(99, 226, 183, .3)!important;
        &::after {
          border-right: 1px solid rgba(99, 226, 183, .3);
          border-bottom: 1px solid rgba(99, 226, 183, .3);
          display: block;
        }
      }
      cursor: not-allowed;
    }
    &.n-base-select-menu__item--selected {
      color: #63E2B7FF;
    }
    &.n-base-select-menu__item--no-data {
      color: rgba(255, 255, 255, .5);
      text-align: center;
      pointer-events: none;
    }
    &.n-base-select-menu__item--not-found {
      color: rgba(255, 255, 255, .5);
      text-align: center;
      pointer-events: none;

    }
    &.n-base-select-menu__item--loading {
      color: rgba(255, 255, 255, .5);
      text-align: center;
      pointer-events: none;
    }
  }
  .n-base-select-menu__light-bar {
    position: absolute;
    width:100%;
    background-color: $select-item-background-color--active;
    top: 0;
    left: 0;
    transition: top .15s $default-cubic-bezier;
  }
  &.n-base-select-menu--small-size {
    .n-scrollbar-container {
      max-height: $small-height * 7.6;
    }
    .n-base-select-menu__item, .n-base-select-menu__light-bar {
      height: $small-height;
      line-height: $small-height;
      font-size: 14px;
    }
  }
  &.n-base-select-menu--default-size, &.n-base-select-menu--medium-size {
    .n-scrollbar-container {
      max-height: $default-height * 7.6;
    }
    .n-base-select-menu__item, .n-base-select-menu__light-bar {
      height: $default-height;
      line-height: $default-height;
      font-size: 14px;
    }
  }
  &.n-base-select-menu--large-size {
    .n-base-select-menu__item, .n-base-select-menu__light-bar {
      height: $large-height;
      line-height: $large-height;
    }
    .n-scrollbar-container {
      max-height: $large-height * 7.6;
    }
  }
  &.n-base-select-menu--multiple {
    .n-base-select-menu__item {
      position: relative;
      transition: color .3s $default-cubic-bezier;
      padding-right: 28px;
      &::after {
        content: '';
        height: 6px;
        width: 3px;
        border-right: 1px solid #63E2B7FF;
        border-bottom: 1px solid #63E2B7FF;
        position: absolute;
        right: 14px;
        transform: rotate(45deg) scale(.5);
        top: calc(50% - 4px);
        opacity: 0;
        transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
      }
      &.n-base-select-menu__item--selected {
        background: none;
        &::after {
          opacity: 1;
          transform: rotate(45deg) scale(1);
        }
      }
      &:active {
        color: #63E2B7FF;
      }
    }
  }
  /** transition of menu light bar */
  .n-base-select-menu__light-bar--transition-enter-active {
    transition: opacity .15s $fast-in-cubic-bezier, top .3s $default-cubic-bezier!important;
  }
  .n-base-select-menu__light-bar--transition-leave-active {
    transition: opacity .15s $slow-out-cubic-bezier, top .3s $default-cubic-bezier!important;
  }
  .n-base-select-menu__light-bar--transition-enter, .n-base-select-menu__light-bar--transition-leave-to {
    opacity: 0;
  }
}