tntd/lib/tntd-second-page/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@header-height: 50px;
@title-height: 40px;
@bgColor: #f1f2f5;

.tntd-second-page {
  & {
    background: @white;
    height: calc(100vh - @header-height);
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  &-header {
    position: relative;
    background: @white;
    padding: 0 20px;
    height: @title-height;
    line-height: @title-height;
    box-shadow: 1px 0 5px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
    &-back {
      font-size: 14px;
      font-weight: 400;
      color: @text-color;
      margin-right: 10px;
    }
    &-title {
      font-size: 14px;
      color: @text-color;
    }
    &-toolbar {
      float: right;
    }
  }
  &-body {
    padding: 16px 20px;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: @bgColor;
    height: calc(100vh - @header-height - @title-height);
  }
  &-inner {
    background: @white;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    min-height: 100%;
    & > div > .ant-form,
    & > .ant-form,
    .ant-form {
      padding: 20px 0;
    }
  }
  &-footer {
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 20px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 12px 0 rgba(170, 182, 206, 0.2),
      inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.3);
    z-index: 2;
  }
  &-hidden {
    display: none !important;
  }
  &-absolute {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
  }
  &-intab {
    top: -@title-height;
  }
  &-fixed {
    & {
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 500;
    }
    .tntd-second-page {
      &-header {
        height: @header-height;
        line-height: @header-height;
        &-back {
          font-size: 16px;
        }
        &-title {
          font-size: 16px;
        }
      }
      &-body {
        background: @white;
        height: calc(100vh - @header-height);
      }
      &-inner {
        box-shadow: none;
      }
    }
  }
}