qt-public-ui/lib/PageCard/style.less

新设计规范下业务组件库

@import (reference) '../../style/common.less';

.umui-page-card,
.umui-expand-card {
  .@{ant-prefix}-card-head {
    min-height: unset;
    .@{ant-prefix}-card-head-title {
      font-size: 16px;
      line-height: 20px;
      font-weight: @font-weight-bold;
    }
    .@{ant-prefix}-card-extra {
      padding: 0;
    }
  }
  .umui-expand-controller {
    cursor: pointer;
    .umui-expand-icon {
      font-size: 18px;
      color: @text-color-secondary;
    }
  }
  .@{ant-prefix}-card-body {
    padding: 0;
  }
  .umui-expand-wrapper-inner,
  .umui-expand-wrapper {
    .clearfix;

    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: @card-padding-base;
    .@{ant-prefix}-card {
      box-shadow: none;
    }
  }
  .umui-expand-wrapper-inner {
    padding: 0;
    padding-bottom: @card-padding-base;
  }
  .umui-expandless {
    height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .umui-page-card-subtitle {
    font-size: 12px;
    margin-left: 12px;
    color: @text-color-info;
  }

  &.umui-without-border {
    box-shadow: none;
    background-color: transparent;
    .@{ant-prefix}-card-head {
      padding: 0;
      background-color: transparent;
      border: none;
    }
    .umui-expand-wrapper {
      padding: 0;
    }
  }
}

.umui-page-card {
  margin-bottom: 16px;
  .@{ant-prefix}-card-head {
    padding: 6px 20px;
    background: inherit;
  }

  &.umui-with-expand-child {
    .umui-expand-wrapper {
      padding-bottom: 0;
    }
  }
  &:last-child {
    margin-bottom: 20px;
  }
  .umui-expand-icon {
    padding-left: 8px;
    vertical-align: text-bottom;
  }
  .@{ant-prefix}-tabs-top:not(.@{ant-prefix}-tabs-card) .@{ant-prefix}-tabs-nav {
    padding: 0;
  }
  .@{ant-prefix}-tabs-ink-bar .@{ant-prefix}-tabs-ink-bar-animated {
    transform: translateX(0);
  }

  .@{ant-prefix}-tabs-top > .@{ant-prefix}-tabs-nav::before {
    border-bottom: unset;
  }
}

.umui-expand-card {
  border: none;
  margin-top: 16px;
  border-top: 1px dashed @border-color-base !important;
  .@{ant-prefix}-card-head {
    background: @component-background;
    border: none;
    padding: 0;
    .@{ant-prefix}-card-head-title {
      font-size: 12px;
      line-height: 2em;
    }
  }
  .umui-expand-icon {
    padding-right: 2px;
    vertical-align: text-top;
  }
}

.umui-page-card-row {
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 20px;
  }
  .umui-page-card,
  .umui-expand-card {
    margin-bottom: 0;
  }
}

.@{ant-prefix}-card-head {
  .@{ant-prefix}-tabs-top:not(.@{ant-prefix}-tabs-card) .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
    font-size: 16px;
    color: @text-color;
    &.@{ant-prefix}-tabs-tab-active {
      color: @primary-color;
    }
  }
}

.@{ant-prefix}-card-contain-tabs {
  .@{ant-prefix}-card-head {
    padding: 2px 20px;
  }
  .@{ant-prefix}-tabs-tab-btn {
    font-size: 18px;
    color: @text-color-secondary;
  }
  .@{ant-prefix}-tabs-tab-active {
    .@{ant-prefix}-tabs-tab-btn {
      font-size: 18px;
      line-height: 26px;
      font-weight: 500;
      color: @text-color;
      text-shadow: unset;
    }
  }
}