naive-ui/styles/Select.scss

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

@include b(select) {
  display: inline-block;
  border: none;
  outline: none;
  width: 100%;
  color: $select-text-color;
  font-family: $default-font-family;
  text-align: start;
}

.n-select-menu__content-wrapper {
  @include detachedContentWrapper;
  transform: translateZ(0);
  .n-select-menu__content {
    @include detachedContent;
    border-radius: 6px;
    .n-select-menu-wrapper {
      margin-top: 4px;
      margin-bottom: 4px;
      @include fade-in-scale-up-transition(select-menu);
      .n-select-menu {
        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-select-menu__item-wrapper {
          position: relative;
          width: 100%;
        }
        .n-select-menu__item {
          cursor: pointer;
          position: relative;
          padding: 0px 14px;
          white-space: nowrap;
          &.n-select-menu__item--disabled {
            color: rgba(255, 255, 255, .3)!important;
            &::after {
              display: none;
            }
            &.n-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-select-menu__item--selected {
            color: #63E2B7FF;
          }
          &.n-select-menu__item--no-data {
            color: rgba(255, 255, 255, .5);
            text-align: center;
            pointer-events: none;
          }
          &.n-select-menu__item--not-found {
            color: rgba(255, 255, 255, .5);
            text-align: center;
            pointer-events: none;

          }
          &.n-select-menu__item--loading {
            color: rgba(255, 255, 255, .5);
            text-align: center;
            pointer-events: none;
          }
        }
        .n-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-select-menu--small-size {
          .n-scrollbar-container {
            max-height: $small-height * 7.6;
          }
          .n-select-menu__item, .n-select-menu__light-bar {
            height: $small-height;
            line-height: $small-height;
            font-size: 14px;
          }
        }
        &.n-select-menu--default-size, &.n-select-menu--medium-size {
          .n-scrollbar-container {
            max-height: $default-height * 7.6;
          }
          .n-select-menu__item, .n-select-menu__light-bar {
            height: $default-height;
            line-height: $default-height;
            font-size: 14px;
          }
        }
        &.n-select-menu--large-size {
          .n-select-menu__item, .n-select-menu__light-bar {
            height: $large-height;
            line-height: $large-height;
          }
          .n-scrollbar-container {
            max-height: $large-height * 7.6;
          }
        }
        &.n-select-menu--multiple {
          .n-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-select-menu__item--selected {
              background: none;
              &::after {
                opacity: 1;
                transform: rotate(45deg) scale(1);
              }
            }
            &:active {
              color: #63E2B7FF;
            }
          }
        }
      }
    }
    
    /** transition of menu light bar */
    .n-select-menu__light-bar--transition-enter-active {
      transition: opacity .15s $fast-in-cubic-bezier, top .3s $default-cubic-bezier!important;
    }
    .n-select-menu__light-bar--transition-leave-active {
      transition: opacity .15s $slow-out-cubic-bezier, top .3s $default-cubic-bezier!important;
    }
    .n-select-menu__light-bar--transition-enter, .n-select-menu__light-bar--transition-leave-to {
      opacity: 0;
    }    
  }
}

@include b(select-input-tag) {
  position: relative;
  margin-bottom: 4px;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  .n-select-input-tag__input {
    padding: 0;
    background-color: transparent;
    outline: none;
    border: none;
    max-width: 100%;
    caret-color: $input-caret-color;
    color: $select-text-color;
    height: 100%;
    width: 1em;
    line-height: inherit;
    cursor: pointer;
  }
  .n-select-input-tag__mirror {
    position: absolute;
    padding-right: .5em;
    left: 0;
    top: 0;
    white-space: pre;
    visibility: hidden;
    user-select: none;
    opacity: 0;
  }
}