naive-ui/styles/Cascader.scss

/* stylelint-disable */
@import './mixins/mixins.scss';
@import './themes/vars.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 {
  width: 100%;
}

@include b(cascader-menu) {
  position: relative;
  @include fade-in-scale-up-transition(cascader-menu, inherit, .2s);
}

@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__loading {
    position: absolute;
    width: 14px;
    height: 14px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    opacity: 0;
    transition: opacity .3s $default-cubic-bezier;
  }
  &.n-cascader-option--active {
    color: $main-color;
  }
  &.n-cascader-option--disabled {
    color: rgba(255, 255, 255, .3);
    cursor: not-allowed;
  }
  &.n-cascader-option--tracked {
    background-color: rgba(81, 122, 126, 1);
  }
  &.n-cascader-option--not-leaf {
    &::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%;
      opacity: 1;
      transition: opacity .3s $default-cubic-bezier;
    }
  }
  &.n-cascader-option--loading {
    .n-cascader-option__loading {
      opacity: 1;
    }
    &.n-cascader-option--not-leaf {
      &::after {
        opacity: 0;
      }
    }
  }
}

.n-cascader-detached-content-container {
  transform: translateZ(0);
}

[n-suggested-transform-origin="bottom left"] {
  .n-cascader-select-menu--transition-leave {
    left: 0;
    bottom: 0;
    position: absolute;
  }
  .n-cascader-select-menu--transition-leave-active {
    left: 0;
    bottom: 0;
    position: absolute;
  }
  .n-cascader-cascader-menu--transition-leave {
    left: 0;
    bottom: 0;
    position: absolute;
  }
  .n-cascader-cascader-menu--transition-leave-active {
    left: 0;
    bottom: 0;
    position: absolute;
  }
}

[n-suggested-transform-origin="top left"] {
  .n-cascader-select-menu--transition-leave {
    left: 0;
    top: 0;
    position: absolute;
  }
  .n-cascader-select-menu--transition-leave-active {
    left: 0;
    top: 0;
    position: absolute;
  }
  .n-cascader-cascader-menu--transition-leave {
    left: 0;
    top: 0;
    position: absolute;
  }
  .n-cascader-cascader-menu--transition-leave-active {
    left: 0;
    top: 0;
    position: absolute;
  }
}


@include b(cascader-menu) {
  transform-origin: inherit;
  position: relative;
  margin-top: 4px;
  margin-bottom: 4px;
  min-height: 1px;
  .n-cascader-select-menu {
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
    @include fade-in-scale-up-transition(cascader-select-menu, inherit, .2s);
    margin: 0;
  }
  .n-cascader-cascader-menu {
    display: flex;
    flex-wrap: nowrap;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
    border-radius: 9px;
    @include fade-in-scale-up-transition(cascader-cascader-menu, inherit, .2s);
    .n-cascader-submenu {
      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;
    }
  }
}

@include b(base-menu-mask) {
  @include fade-in-transition(base-menu-mask);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  background-color: rgba(75, 81, 106, .75);
}