@charset 'utf-8';
@import '~css/base';

.layout{
   height: 100%;
   width: 100%;
}

.layout-sider{
   z-index: 15;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-transition: width .2s, max-width .2s;
   -o-transition: width .2s, max-width .2s;
   transition: width .2s, max-width .2s;

   &::-webkit-scrollbar{
      background-color: transparent;
      width: 4px;
   }

   &::-webkit-scrollbar-thumb{
      border-radius: 2px;
      background-color: #7a7a8c;
   }

   &::-webkit-scrollbar-track{
      width: 4px;
      background: transparent;
   }
}

.layout-nav{
   .logo-wrap{
      height: 64px;
      line-height: 64px;
      text-align: center;
      margin: 10px 0;

      img{
         &.big{
            height: 100%;
         }

         &.small{
            height: 80%;
         }
         
         display: inline-block;
         vertical-align: middle;
      }
   }

   .nav-wrap{
      margin-top: 15px;
   }

   .menu-collapsed{
      text-align: center;

      .ivu-dropdown{
         display: block;

         &:not(:last-child){
            margin-bottom: 20px;
         }
      }

      .icon{
         font-size: 22px;
         color: #fff;
         display: block;
         cursor: pointer;
      }

      .ivu-poptip-popper{
         min-width: 80px;
      }

      .ivu-poptip,.ivu-poptip-rel{
         display: block;
      }
   }
}

.layout-head{
   position: fixed;
   left: 0;
   right: 0;
   z-index: 10;
   -webkit-box-shadow: 0 1px 5px #bbb;
   box-shadow: 0 1px 5px #bbb;
   padding: 0 15px 0 256px;
   -webkit-transition: padding .2s;
   -o-transition: padding .2s;
   transition: padding .2s;

   .header-bar{
      position: relative;

      .collapsed-wrap{
         position: absolute;
         left: 15px;
         top: 0;

         .collapsed{
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
         }
      }

      .head-other{
         padding-left: 50px;
         padding-right: 100px;

         .ivu-menu-dark{
            float: right;
         }

         .ivu-menu-horizontal{
            height: 64px;
            line-height: 64px;
         }

         .ivu-menu-item-active{
            color: #fff;
            background-color: #6d7680;
         }
      }

      .user-wrap{
         position: absolute;
         right: 0;
         top: 0;

         .user-name{
            color: @text-color;
            white-space: normal;
            overflow: hidden;
            color: @primary-color;
         }

         .head-img{
            width: 32px;
            height: 32px;
            vertical-align: middle;
            border: 1px solid @border-color-base;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
         }
      }

   }

   &.theme-two{
      background: #001529;
      -webkit-box-shadow: none;
      box-shadow: none;

      .header-bar{

         .collapsed-wrap{
            .shrink{
               color: #fff;
            }
         }

         .user-wrap{
            .user-name{
               color: #fff;
            }

            .head-img{
               border-color: #001529;
            }
         }
      }
   }
}

.tag-nav-wrapper{
   position: fixed;
   top: 64px;
   right: 0;
   z-index: 10;
   left: 0;
   padding: 0;
   padding-left: 256px;
   height: 40px;
   background: #f0f0f0;
   overflow: hidden;
   -webkit-transition: padding .2s;
   -o-transition: padding .2s;
   transition: padding .2s;
}

.layout-content-wrap{
   padding-top: 104px;
   height: 100vh;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.layout-content{
   position: relative;
   margin: 15px;
   background-color: #fff;
   min-height: ~'calc(100% - 30px)';
   min-height: ~'-webkit-calc(100% - 30px)';

   &.height{
      height: ~'calc(100% - 30px)';
      height: ~'-webkit-calc(100% - 30px)';
   }
}
