@import "../../../asset/less/main.less";
 
.adminbank-sider-box {
  
  .W(260);
  .rgba(255,255,255,.8);
  .Ha;
  .Pa;
  z-index: 9;
  left: 0;
  top: 0;
  border-right: 1px solid rgba(0,0,0,.1);
  .Tran;

  .logo {
    .Wa;
    .H(60);
    padding: 10px;
    .Ofh;
    
    i {
      .WH(40, 40);
      .Dpb;
      .Bg(url('../../../asset/img/logo-icon.png') no-repeat center center);
      background-size: 30px;
    }
    
    h1 {
      .Tran;
      .Fs(16);
      .Fwb;
      .CB;
      .Ls(.1);
      .Wa;
      .Pa;
      left: 0;
      top: 0;
      .Ofh;
      padding: 0 10px 0 60px;
      text-overflow: ellipsis;
      white-space: nowrap;
      .H(60);
      .Lh(60);
      
      &:hover {
        .CLinkHover;
      }
    }
  }
  
  .navlist {
    .Wa;
    height: calc(100% + - 60px);
    .noScrollBar;
    padding: 20px 0 20px 0;
    
    .Dpb;
    overflow-y: scroll;
    
    .child {
      .nav, .navs {
        .H(0);
        .Tran;
      }
      
      &.show {
        .nav {
          .H(40);
        }
      }
      &.shows {
        .navs {
          .H(40);
        }
      }
    }
    
    
    .list {
      border-bottom: 1px solid rgba(0,0,0,.1);
      
      .child {
        .nav, .navs {
          .BG;
        }
      }
      
      .nav, .navs {
        .Ofh;
        .Pr;
        .Lh(40);
      .Tran;
        padding-left: 10px;
        
        &:hover {
          .BgHover;
        }
      
        &:last-child {
          border: none;
        }
        
        &.one {
          i {
            .CG;
            &.left {
              .Fs(14);
              .Ml(10);
              &.icon-slack {
                .Fs(12);
              }
            }
          }
          span {
            padding-left: 46px;
          }
        }
        
        &.two {
          i {
            .CG;
            &.left {
              .Fs(13);
              .Ml(30);
            }
            &.icon-slack {
              .Fs(12);
            }
          }
          span {
            padding-left: 66px;
          }
        }

        &.three {
          i {
            .CG;
            &.left {
              .Fs(12);
              .Ml(50);
            }
          }
          span {
            padding-left: 80px;
            .CG;
          }
        }
        
        i {
          .transition(transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1));
          .Fs(12);
          .Pa;
          z-index: 3;
          top: 0;
          .H(40);
          .Lh(40);
          &.right {
            right: 20px;
          }
          &.left {
            left: 14px;
          }
          &.rotate {
            .transform(rotate(180deg));
          }
        }

        
        a {
          .Wa;
          .Dpi;
          .Cp;
        }
        
        
        span {
          .Dpi;
          .Wa;
          .Pa;
          left: 0;
          top: 0;
          .Ofh;
          .uselect;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        
        &.active {
          span, i {
            .CLink!important;
          }
        }
      }
    }
  }
  
  .trigger {
    .Pa;
    right: -60px;
    .WHb(60);
    .Lh(60);
    .Tac;
    .Fs(16);
    .CG;
    .Cp;
    .transition(all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1));
    
    &:hover {
      .CLinkHover;
    }
    
    
  }
  
  
  &.asidehide {
    .WHb(60);
    border: none;
    background: none;
    .trigger {
      .transform(rotateY(180deg));
    }
    
    .logo h1{
      .Dpn;
    }
    
    .navlist{
      .Dpn;
    }
    
  }
}

.listnav-enter-active, .listnav-leave-active {
  .Ofh;
}
.listnav-enter, .listnav-leave-to {
  .transform(translateX(-20px));
}