naive-ui/styles/NimbusServiceLayout.scss

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

.n-nimbus-service-layout{
  background: #171D33;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  .n-nimbus-service-layout__body {
    position: absolute;
    left: 272px;
    right: 0px;
    top: 0;
    bottom: 0;
    transition: left .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.2);
      border-radius: 2.5px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: rgba(255,255,255,0.3);
    }
    &.n-nimbus-service-layout__body--active {
      left: 272px;
    }
    &.n-nimbus-service-layout__body--collapsed {
      left: 48px;
    }
  }
  .n-nimbus-service-layout__drawer {
    display: inline-block;
    background-color: #1f263e;
    width: 272px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
    .n-nimbus-service-layout-drawer__toggle-button {
      transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      cursor: pointer;
      width: 36px;
      height: 36px;
      opacity: 0.3;
      position: absolute;
      top: 50%;
      right: 0;
    }
    .n-nimbus-service-layout-drawer__item-wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      transition: opacity .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      &::-webkit-scrollbar {
        width: 5px;
      }
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
        border-radius: 2.5px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.3);
      }
      .n-nimbus-service-layout-drawer__header {
        position: relative;
        font-weight: 700;
        height: 60px;
        padding-left: 48px;
        font-size: 16px;
        color: #E9E9EC;
        display: flex;
        align-items: center;
        .n-nimbus-service-layout-drawer-header__content {
          opacity: 1;
        }
        .n-nimbus-service-layout-drawer-header__icon {
          position: absolute;
          left: 22px;
          i::before {
            color: #626778FF;
          }
        }
      }
      .n-nimbus-service-layout-drawer__item {
        cursor: pointer;
        position: relative;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 48px;
        font-size: 14px;
        color: #E9E9EC;
        .n-nimbus-service-layout-drawer-item__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;
            clip-path: polygon(100% 0, 100% 100%, 0% 100%);
          }
        }
        span {
          transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
          opacity: 1;
        }
        &.n-nimbus-service-layout-drawer__item--active {
          &:not(.n-nimbus-service-layout-drawer__item--is-group-item) {
            color: #63E2B7;
          }
          span {
            opacity: 1;
          }
        }
        &:hover span {
          opacity: 1;
        }
        &::before {
          content: "";
          background-image:linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: -1;
          transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
          opacity: 0;
        }
        &.n-nimbus-service-layout-drawer__item--active::before {
          opacity: .9;
        }
        &.n-nimbus-service-layout-drawer__item--is-group-header {
          span {
            transition: color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            color: #E9E9EC;
          }
          &::after { // down arrow
            content: '';
            height: 6px;
            width: 6px;
            border-left: 2px solid #63E2B7;
            border-top: 2px solid #63E2B7;
            position: absolute;
            left: 240px;
            top: calc(50% - 1px);
            transform: rotate(45deg);
            transform-origin: 25% 25%;
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
          }
          &.n-nimbus-service-layout-drawer__item--group-item-is-choosed {
            span {
              color: #63E2B7;
            }
          }
          &.n-nimbus-service-layout-drawer__item--collapsed::after {
            transform: rotate(225deg) ;
          }
          
        }
        &.n-nimbus-service-layout-drawer__item--is-group-item {
          padding-left: 64px;
        }
      }
      .n-nimbus-service-layout-drawer__group-items {
        overflow: hidden;
        transition: max-height .45s cubic-bezier(0.4, 0.0, 0.2, 1);
        &.n-nimbus-service-layout-drawer__group-items--collapsed {
          max-height: 0;
        }
      }
    }
    &.n-nimbus-service-layout__drawer--active {
      transform: translateX(0);
      transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      .n-nimbus-service-layout-drawer__toggle-button {
        transform: translateX(50%) translateY(-50%) rotate(0deg);
      }
      .n-nimbus-service-layout-drawer__item-wrapper {
        opacity: 1;
      }
    }
    &.n-nimbus-service-layout__drawer--collapsed {
      transform: translateX(-224px);
      transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      pointer-events: none;
      .n-nimbus-service-layout-drawer__toggle-button {
        transform: translateX(50%) translateY(-50%) rotate(180deg);
        pointer-events: all;
      }
      .n-nimbus-service-layout-drawer__item-wrapper {
        opacity: 0;
      }
    }
    .n-nimbus-service-layout-drawer__divider {
      margin: 0px 25px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
  }
}