@fesjs/fes-design/es/layout/style/index.css

fes-design for PC

.fes-layout {
  margin: 0;
  padding: 0;
  outline: none;
  color: var(--f-text-color);
  font-size: var(--f-font-size-base);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-variant: tabular-nums;
  line-height: 22px;
  font-feature-settings: 'tnum';
  position: relative;
  flex: auto;
  box-sizing: border-box;
  transition: width 0.2s;
}
.fes-layout > .fes-layout-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.fes-layout.is-horizontal > .fes-layout-container {
  flex-direction: row;
}
.fes-layout.is-fixed {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: left 0.2s, right 0.2s;
}
.fes-layout-aside {
  position: relative;
  flex-shrink: 0;
  color: var(--f-text-color);
  transition: width 0.2s;
}
.fes-layout-aside.is-fixed {
  position: absolute;
  top: 0;
  bottom: 0;
}
.fes-layout-aside.is-fixed.is-placement-left {
  left: 0;
}
.fes-layout-aside.is-fixed.is-placement-right {
  right: 0;
}
.fes-layout-aside.is-has-trigger {
  z-index: 10;
}
.fes-layout-aside.is-inverted {
  color: var(--f-white);
  background-color: var(--f-font-color-base);
}
.fes-layout-aside.is-inverted .fes-layout-aside-trigger {
  color: var(--f-white);
  background-color: var(--f-layout-inverted-bg-color);
  border-top: none;
}
.fes-layout-aside.is-bordered {
  border-right: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-base);
}
.fes-layout-aside.is-collapsed {
  overflow: visible;
}
.fes-layout-aside-trigger {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 48px;
  font-size: var(--f-font-size-base);
  line-height: 48px;
  text-align: center;
  background-color: var(--f-white);
  border-top: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-split);
}
.fes-layout-header {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 54px;
  padding: 0;
  color: var(--f-text-color);
  line-height: 54px;
  background-color: var(--f-white);
}
.fes-layout-header.is-inverted {
  color: var(--f-white);
  background-color: var(--f-font-color-base);
}
.fes-layout-header.is-bordered {
  border-bottom: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-base);
}
.fes-layout-header.is-fixed {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.fes-layout-main {
  flex: auto;
  color: var(--f-text-color);
  font-size: var(--f-font-size-base);
  transition: width 0.2s;
}
.fes-layout-main.is-embedded {
  background: var(--f-component-bg-color);
}
.fes-layout-footer {
  flex-shrink: 0;
  color: var(--f-text-color);
  font-size: var(--f-font-size-base);
}
.fes-layout-footer.is-embedded {
  background: var(--f-component-bg-color);
}
.fes-layout-footer.is-bordered {
  border-top: var(--f-border-width-base) var(--f-border-style-base) var(--f-border-color-base);
}
.fes-layout-footer.is-fixed {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}