tdesign-react/esm/style/web/components/layout/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import '../../base.less';

@import './_var.less';

@import './_mixin.less';

@import '../../mixins/_reset.less';

.@{prefix}-layout {
  .reset;
}

.@{prefix}-layout,
.@{prefix}-layout__direction-vertical {
  display: flex;
  flex-direction: column;
  background: @layout-bg-color;
  flex: auto;
}

.@{prefix}-layout--with-sider,
.@{prefix}-layout__direction-horizontal {
  flex-direction: row;
}

.@{prefix}-layout__header {
  height: @layout-header-height;
  background-color: @layout-header-bg-color;
}

.@{prefix}-layout__content {
  flex: auto;
}

.@{prefix}-layout__sider {
  position: relative;
  transition: all @layout-sider-anim-duration;
  background: @layout-sider-bg-color;
  width: @layout-sider-width;
}

.@{prefix}-layout__footer {
  color: @layout-footer-color;
  padding: 24px;
}