frame.less 1.85 KB
Newer Older
wanli's avatar
wanli committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
@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;
    }
  }
}