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;
}