naive-ui/styles/NimbusServiceLayout.scss

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

@include themes-mixin() {
  @include b(nimbus-service-layout) {
    $layout-nav-height: 64px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-color: $service-layout-body-background-color;
    color: $service-layout-color;
    @include e(nav) {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      background-color: $service-layout-nav-background-color;
      box-sizing: border-box;
      border-bottom: 1px solid $service-layout-border-color;
      // box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.17);
      transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
      height: $layout-nav-height;
    }
    @include e(body) {
      font-size: 14px;
      position: absolute;
      left: 272px;
      right: 0px;
      top: 0;
      bottom: 0;
      overflow: hidden;
      background-color: $service-layout-body-background-color;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier, left .3s $--n-ease-in-out-cubic-bezier;
      @include m(active) {
        left: 272px;
      }
      @include m(collapsed) {
        left: 48px;
      }
      @include m(disable-menu) {
        left: 0px;
      }
      @include m(with-header) {
        top: $layout-nav-height;
      }
    }
    @include b(nimbus-service-layout-drawer) {
      border-right: 1px solid $service-layout-border-color;
      display: inline-block;
      background-color: $service-layout-drawer-background-color;
      width: 272px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
      // box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
      @include b(nimbus-service-layout-drawer-divider) {
        margin: 0px 25px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
      }
      @include e(toggle-button) {
        transition: transform .3s $--n-ease-in-out-cubic-bezier;
        cursor: pointer;
        width: 36px;
        height: 36px;
        path {
          transition: fill .3s $--n-ease-in-out-cubic-bezier;
          fill: $service-layout-toggle-button-color;
        }
        position: absolute;
        top: 50%;
        right: 0;
      }
      @include b(nimbus-service-layout-drawer-content) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        transition: opacity .3s $--n-ease-in-out-cubic-bezier;
        @include b(nimbus-service-layout-drawer-header) {
          position: relative;
          font-weight: 500;
          height: $layout-nav-height;
          padding-left: 48px;
          font-size: 16px;
          display: flex;
          align-items: center;
          @include e(header) {
            opacity: 1;
          }
          @include e(icon) {
            position: absolute;
            left: 22px;
            fill: $--n-text-color;
          }
        }
        @include b(nimbus-service-layout-drawer-item) {
          cursor: pointer;
          position: relative;
          padding-top: 16px;
          padding-bottom: 16px;
          padding-left: 48px;
          font-size: 14px;
          @include e(icon) {
            &::before {
              content: '';
              width: 10px;
              height: 10px;
              position: absolute;
              background-image:linear-gradient(47deg,rgba(120, 205, 104, 1) 0%,rgba(20, 166, 165, 1) 100%);
              top: 20px;
              left: 30px;
              -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%);
              clip-path: polygon(100% 0, 100% 100%, 0% 100%);
            }
          }
          span {
            transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, color 0.3s $--n-ease-in-out-cubic-bezier;
            opacity: 1;
          }
          @include m(active) {
            @include not-m(is-group-item) {
              color: $--service-kayout-item-active-color;
            }
            span {
              opacity: 1;
            }
          }
          &:hover span {
            opacity: 1;
          }
          &::before { // item background
            content: "";
            background-size: 300%;
            background-image: $service-layout-item-background-image;
            background-position: $--service-layout-item-background-position;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
            transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
            opacity: 0;
          }
          @include m(active) {
            &::before {
              opacity: .9;
            }
          }
          @include m(is-group-header) {
            &::after { // down arrow
              content: '';
              height: 6px;
              width: 6px;
              border-left: 2px solid $--n-primary-color;
              border-top: 2px solid $--n-primary-color;
              position: absolute;
              left: 240px;
              top: calc(50% - 1px);
              transform: rotate(45deg);
              transform-origin: 25% 25%;
              transition: transform 0.3s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier;
            }
            // @include m(group-item-is-choosed) {
            //   span {
            //     color: #63E2B7;
            //   }
            // }
            @include m(collapsed) {
              &::after {
                transform: rotate(225deg) ;
              }
            }
          }
          @include m(is-group-item) {
            padding-left: 64px;
          }
        }
        @include b(nimbus-service-layout-drawer-group-items) {
          overflow: hidden;
          transition: max-height .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
          opacity: 1;
          @include m(collapsed) {
            max-height: 0;
            opacity: 0;
          }
        }
      }
      @include m(active) {
        transform: translateX(0);
        opacity: 1;
        // transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
        @include e(toggle-button) {
          transform: translateX(50%) translateY(-50%) rotate(0deg);
        }
        @include b(nimbus-service-layout-drawer-content) {
          opacity: 1;
        }
      }
      @include m(collapsed) {
        opacity: 1;
        transform: translateX(-224px);
        // transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
        pointer-events: none;
        @include e(toggle-button) {
          transform: translateX(50%) translateY(-50%) rotate(180deg);
          pointer-events: all;
        }
        @include b(nimbus-service-layout-drawer-content) {
          opacity: 0;
        }
      }
      @include m(with-header) {
        top: $layout-nav-height;
      }
      @include m(disabled) {
        transform: translateX(-272px);
        opacity: 0;
      }
    }
  }
}