@uiw/react-layout/esm/style/index.less

React components that handle the overall layout of the page.

@layout-prefix: ~'w-layout';

.@{layout-prefix},
.@{layout-prefix} * {
  box-sizing: border-box;
}
.@{layout-prefix} {
  display: flex;
  flex: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  min-height: 0;
  background: #f0f2f5;
  margin: 0;
  padding: 0;

  &&-has-sider > &,
  &&-has-sider > &-content {
    width: 0;
  }
  &-header,
  &-footer {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
  }
  &-header {
    height: 53px;
    padding: 0 23px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 53px;
    background: #202225;
  }
  &-footer {
    padding: 16px 23px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    background: #f0f2f5;
  }
  &-content {
    -webkit-box-flex: 1;
    flex: auto;
  }
  &&-has-sider {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
  }
  &-sider {
    position: relative;
    min-width: 0;
    background: #343a40;
    transition: all 0.2s;
  }
}