vue-ant-patterns/es/d-layout/style/index.less

vue-ant-patterns

@import '../../style/themes/index.less';
@import '../../style/mixins/flex.less';

@import './sider.less';
@import './content.less';

@depot-prefix-cls: ~'@{depot-prefix}-layout';
@depot-prefix-sider-layout: ~'@{depot-prefix}-sider-layout';
@depot-prefix-sider: ~'@{depot-prefix}-sider';
@depot-prefix-content: ~'@{depot-prefix}-sider-layout-content';
.@{depot-prefix-cls} {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}
.@{depot-prefix-cls}-header {
  .flex;
  .flex-center-between;
  padding: 12px 24px;
  background-color: @layout-header-background;
  color: @heading-color-dark;
  height: @header-height;
  overflow: hidden;
}

.@{depot-prefix-cls}-content {
  flex: 1;
}
.@{depot-prefix-cls}-content-row {
  .flex;
  .flex-row;
}
.@{depot-prefix-cls}-content-column {
  .flex;
  .flex-col;
}

.@{depot-prefix-sider-layout} {
  width: 100%;
  .flex;
  // 全部调整为 flex, 如有问题恢复
  // .flex-start-between;
  .flex-justify-between;
}

.sider-layout-sider(@depot-prefix-sider);
.sider-layout-content(@depot-prefix-content);

.@{depot-prefix-sider-layout} {
  &-close {
    & > .@{depot-prefix-sider} {
      flex-basis: 0;
    }
    & > .@{depot-prefix-content} {
      width: 100%;
      flex-basis: 100%;
    }
  }
}

.@{depot-prefix-sider-layout} {
  &&-left {
    .@{depot-prefix-content} {
      padding-right: 0;
      padding-left: @padding-md;
    }
  }
  &&-right {
    .@{depot-prefix-content} {
      padding-left: 0;
      padding-right: @padding-md;
    }
  }

  &&-collapsed {
    & > .@{depot-prefix-sider} {
      width: @sider-collapse-width + @padding-md;
      flex-basis: @sider-collapse-width + @padding-md;
    }
    & > .@{depot-prefix-content} {
      width: calc(~'100% - (@{sider-collapse-width} + @{padding-md})');
      flex-basis: calc(~'100% - (@{sider-collapse-width} + @{padding-md})');
    }
  }
  &&-extends {
    & > .@{depot-prefix-sider} {
      width: @sider-width + @padding-md;
      flex-basis: @sider-width + @padding-md;
    }
    & > .@{depot-prefix-content} {
      width: calc(~'100% - (@{sider-width} + @{padding-md})');
      flex-basis: calc(~'100% - (@{sider-width} + @{padding-md})');
    }
  }
}