tntd/lib/columns/index.less

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

.tnt-columns {
  .ant-col:not(:first-of-type) > div {
    box-shadow: 5px 5px 10px -4px rgba(213, 213, 213, 0.5),
      3px -5px 10px -4px rgba(213, 213, 213, 0.4);
    .gutter & {
      box-shadow: 0 0 10px 0 rgba(213, 213, 213, 0.5);
    }
  }

  .ant-col:first-child > div {
    box-shadow: 0 0 10px 0 rgba(213, 213, 213, 0.5);
  }

  &-col {
    height: inherit;
    & > div {
      height: inherit;
    }

    &-header {
      padding: 0 20px;
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #e1e6ee;

      .title-left {
        float: left;
        color: @text-color;
        font-size: 14px;
      }
      .title-extra {
        float: right;

        .ant-btn {
          width: 64px;
          height: 22px;
          font-size: 12px;
        }

        .ant-btn-primary {
          background: #126bfb;
          border-radius: 2px;
          border-color: #126bfb;
        }
      }
    }

    &-tabs {
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #e1e6ee;
      color: @text-color;
      font-size: 14px;

      .tab-item {
        display: inline-block;
        padding: 0 20px;
        height: 48px;
        text-align: center;
        cursor: pointer;
        transition: borderBottom 1s;
      }

      .active-tab {
        border-bottom: 2px solid #126bfb;
      }
    }

    &-body {
      height: calc(~'100% - 48px');
      padding: 10px 20px;
      overflow-y: scroll;
      color: @text-color;
    }
  }
}