yu.css.ui/css/component/layout.css

纯CSS通用UI模块和组件

.yu-header {
  flex-shrink: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  padding: 0 14px;
  box-sizing: border-box; }
  .yu-header.align-left {
    text-align: left; }
  .yu-header.align-center {
    text-align: center; }
  .yu-header.align-right {
    text-align: right; }
  .yu-header > .float-right {
    float: right; }
  .yu-header > .float-left {
    float: left; }
  .yu-header.small {
    height: 50px;
    line-height: 50px; }
  .yu-header.tiny {
    height: 40px;
    line-height: 40px; }

.yu-content {
  padding: 14px;
  width: 100%;
  height: 100%;
  box-sizing: border-box; }

.yu-footer {
  flex-shrink: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  padding: 0 14px;
  box-sizing: border-box; }
  .yu-footer.align-left {
    text-align: left; }
  .yu-footer.align-center {
    text-align: center; }
  .yu-footer.align-right {
    text-align: right; }
  .yu-footer > .float-right {
    float: right; }
  .yu-footer > .float-left {
    float: left; }
  .yu-footer.small {
    height: 50px;
    line-height: 50px; }
  .yu-footer.tiny {
    height: 40px;
    line-height: 40px; }

.yu-sidebar {
  display: inline-block;
  width: 200px;
  height: 100%;
  box-sizing: border-box; }

.yu-center {
  position: relative;
  width: 100%;
  height: 100%; }
  .yu-center .center {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    .yu-center .center.large {
      width: 400px;
      height: 400px; }
    .yu-center .center.big {
      width: 500px;
      height: 500px; }

.yu-layout, .yu-layout-block {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; }

.yu-layout-inline {
  display: flex;
  width: 100%;
  height: 100%; }
  .yu-layout-inline .yu-sidebar {
    flex-shrink: 0; }

.yu-layout-block {
  box-sizing: border-box; }
  .yu-layout-block.padding {
    padding: 30px 30px 0 30px; }