naive-ui/styles/Cascader.scss

/* stylelint-disable */
@import './mixins/mixins.scss';
@import './theme/default.scss';

.n-cascader-light-bar-container {
  @include fade-in-transition(cascader-light-bar);
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .n-cascader-light-bar {
    position: absolute;
    width: 100%;
    background-color: rgba(81, 122, 126, 1);
    left: 0;
    height: 34px;
    transition: top .15s $default-cubic-bezier;
  }
}

.n-cascader {
  outline: none;
}

@include b(cascader-menu) {
  @include fade-in-scale-up-transition(cascader-menu);
}

@include b(cascader-option) {
  box-sizing: border-box;
  min-width: 182px;
  height: $default-height;
  line-height: $default-height;
  background-color: transparent;
  transition: background-color .2s $default-cubic-bezier, color 0.2s $default-cubic-bezier;
  height: 34px;
  line-height: 34px;
  display: flex;
  padding: 0px 24px 0 33px;
  white-space: nowrap;
  position: relative;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
  .n-cascader-option__checkbox {
    position: absolute;
    left: 11px;
    line-height: 1;
    top: 10px;
    display: block;
  }
  .n-cascader-option__radio {
    position: absolute;
    left: 11px;
    line-height: 1;
    top: 7px;
    display: block;
  }
  &.n-cascader-option--active {
    font-weight: bold;
  }
  &.n-cascader-option--disabled {
    color: rgba(255, 255, 255, .3);
    cursor: not-allowed;
  }
  
  &.n-cascader-option--traced {
    background-color: rgba(81, 122, 126, 1);
  }
  &.n-cascader-option--has-children {
    &::after {
      content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      border-top: 2px solid rgba(255, 255, 255, 0.3);
      border-right: 2px solid rgba(255, 255, 255, 0.3);
      transform: rotate(45deg) translateY(-50%);
      right: 18px;
      top: 50%;
    }
  }
}

.n-cascader-menu__content-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  transform: translateZ(0);
  .n-cascader-menu__content {
    margin-top: 4px;
    .n-cascader-menu {
      display: flex;
      z-index: 0;
      position: relative;
      border-radius: 9px;      
      box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
      .n-cascader-submenu {
        outline: none;
        position: relative;
        overflow: hidden;
        min-width: 182px;
        height: 204px;
        .n-scrollbar-content {
          position: relative;
        }
        &:first-child {
          border-top-left-radius: 9px;
          border-bottom-left-radius: 9px;
        }
        &:last-child {
          border-top-right-radius: 9px;
          border-bottom-right-radius: 9px;
        }
        &:not(:first-child) {
          border-left: 1px solid rgba(255, 255, 255, 0.15);
        }
        background-color: #4b516a;
      }
    }
  }
}