@frame-box-shadow: rgba(0,21,41,.08);

#app{
  .app-frame {
    min-height: 100vh;
  }

  .h-layout-sider{
    z-index: 2;
    box-shadow: 0 1px 4px @frame-box-shadow;
  }
  .h-layout-header{
    overflow: hidden;
    box-shadow: 0px 1px 4px 0 @frame-box-shadow;
  }

  .h-layout-sider-collapsed {
    .app-logo{
      padding-left: 5px;
    }
    .h-layout-header-fixed {
      .sys-tabs-vue {
        left: @layout-sider-collapse-width;
      }
    }
  }

  .h-layout-header-fixed {
    .sys-tabs-vue {
      position: fixed;
      top: @layout-header-height;
      right: 0;
      z-index: 2;
      left: @layout-sider-width;
    }
    .sys-tabs-vue + .h-layout-content {
      margin-top: 45px;
    }
  }
  .h-layout-sider-fixed .h-layout-header-fixed {
    .h-layout-content {
      overflow: auto;
      height: calc(~"100vh - @{layout-header-height}");
    }
    .sys-tabs-vue + .h-layout-content {
      height: calc(~"100vh - @{layout-header-height} - @{sys-tabs-height}");
    }
  }

  .h-layout-sider-theme-dark .app-logo a{
    color: #FFF;
  }
  
}

@media (max-width: 900px) {
  #app {
    .app-header-info {
      .h-autocomplete, .app-header-icon-item {
        display: none;
      }
    }
    .h-layout {
      padding-left: 0;
      .app-menu-mask {
        position: fixed;
        left: @layout-sider-width;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        z-index: 1;
      }
      &.h-layout-sider-collapsed {
        > .h-layout-sider {
          transform: translateX(-@layout-sider-collapse-width);
          overflow: hidden;
        }
        .app-menu-mask {
          display: none;
        }
      }
    }
    .h-layout-content {
      -webkit-overflow-scrolling: touch;
    }
    .h-layout-header-fixed .h-layout-header {
      left: 0 !important;
    }
    .sys-tabs-vue {
      left: 0 !important;
    }
  }
}