silki/lib/generator/generators/app/spa-template/src/components/Layout/Layout.less

Cli tool for build react app, based on generator-react-multipage, create-react-app, roadhog. Support react multiple pages app develop.

.layout{
  display: flex;
  background: #ececec;
  padding-left: 230px;
  &.collapsed{
    padding-left: 64px;
    .logo{
      width: 64px;
      h1{
        opacity: 1;
        display: none;
      }
    }
  }
  transition: padding-left .2s; // 动画
}
.wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.sidebar{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99;
}
.sidebarInner{
  height: 100vh;
  min-height: 100vh;
  background: #05213a;
  color: #afbdcaf7;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  z-index: 99;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  >div{
    display: flex;
    flex-direction: column;
  }
}
.menuList{
  overflow-y: scroll;
  flex: 1;
  margin-bottom: 70px;
}
.header{
  display: flex;
  position: sticky;
  top: 0px;
  width: 100%;
  background: #fff;
  z-index: 88;
  padding: 0 20px;
  font-size: 15px;
  box-shadow: rgba(64, 110, 128, 0.1) 0px 2px 6px 0px, rgb(238, 239, 245) 0px -1px 0px 0px inset;
}
.more{
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-self: center;
  height: 60px;
  align-items: center;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
}
.env{
  margin-right: 10px;
}
.main{
  margin: 16px;
  flex: 1;
}
.logo{
  background: #0a2944;
  font-weight: 700;
  color: #fff;
  text-align: center;
  display: block;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  font-size: 21px;
  display: flex;
  justify-content: center;
  height: 60px;
  line-height: 60px;
  align-items: center;
  h1{
    font-size: 21px;
    color: #fff;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: all .2s; // 动画
  }
}
.footer{
  text-align: center;
  padding: 48px 0 24px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  letter-spacing: 2px;
}

:global{
  .cpntLayout{
    .ant-menu-dark{
      background: #05223a;
    }
    .ant-menu.ant-menu-dark .ant-menu-item-selected{
      padding-left: 24px;
      background: #268eea;
    }
    .ant-menu-dark .ant-menu-inline.ant-menu-sub{
      background: #031321;
      color: #afbdcaf7;
    }
    .ant-menu-horizontal{
      border: none;
    }
    .ant-layout-sider-trigger{
      align-self: center;
      background: transparent; // 防止动画不一致影响视觉效果
    }
    .ant-menu{
      line-height: 60px;
    }
  }
}