@epig/admin-tools/lib/layouts/BasicLayout.less

admin project tools

@import "~antd/lib/style/themes/default.less";
@import '../util/default.less';

.@{prefix-cls}-basic-layout {
  &-layout {
    overflow: hidden;
  }

  &-logo {
    height: 32px;
    background: #333;
    border-radius: 6px;
    margin: 16px;
  }
  
  &-header {
    &.ant-layout-header {
      padding: 0 12px 0 0;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
      position: relative;
      height: 64px;
      line-height: 64px;
      z-index: 120;
    }
  }

  &-trigger {
    font-size: 20px;
    line-height: 64px;
    cursor: pointer;
    transition: all .3s,padding 0s;
    padding: 0 24px;
  }
  
  &-left {
    float: left;
    height: 100%;
  }
  
  &-right {
    float: right;
    height: 100%;
    .search {
      padding: 0;
      margin: 0 12px;
      &:hover {
        background: transparent;
      }
    }
    .account {
      padding: 0 12px;
      .avatar {
        margin-right: 8px;
        color: @primary-color;
        background: rgba(209, 201, 201, 0.85);
        vertical-align: middle;
      }
    }
    .setting{
      padding: 0 12px;
      cursor: pointer;
      i{
        margin-right: 8px;
      }
    }
  }
  
  &-sider {
    overflow: auto;
    min-height: 100%;
    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    position: relative;
    z-index: 10;
  }

  &-menuOutWrap {
    height: calc(100vh - 64px);
    overflow: hidden;
  }
  
  &-menuWrap {
    height: 100%;
    overflow: auto;
  }
  
  &-menu {
    height: 100%;
  
    &.ant-menu-dark .ant-menu-item > span > a {
      display: inline;
      color: hsla(0,0%,100%,.65);
      text-decoration-line: none;
    }
  }

  &-mainLayout {
    height: 100vh;
    overflow-x: auto;
  }
}