tntd/lib/progress/progress.less

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

@import '../style/themes/index.less';
@import '../style/mixins/index';
@progress-prefix-cls: ~'@{ant-prefix}-progress';
.tnt-progress.@{progress-prefix-cls} {
    .ant-progress-text{
    //   font-family: PingFang SC;
      font-weight: 500;
    }
    .ant-progress-cus-format-label{
      .ant-progress-cus-format-label{
        padding-bottom: 4px;
      }
    }
    &-percent-bottom{
        .ant-progress-outer{
          padding-right: 0;
        }
        .ant-progress-text{
          width: 100%;
          display: block;
          text-align: right;
          margin-left: 0;
        }
    }
    &-circle-progress{
      .@{progress-prefix-cls}-cus-format{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    &-small-circle{
      .ant-progress-text{
        height: 100%;
      }
      .ant-progress-inner{
        overflow:visible;
      }
      .tntd-ellipsis{
        position: absolute;
        bottom: -1.8em;
        font-size: 0.75em;
        // margin-bottom: 2px;
        // color: #8B919E;
        color:tint(@text-color, 50%);
        font-family: Inter;
        font-weight: 500;
        text-align: center;
      }
    }
    &-large-circle{
      .ant-progress-text{
        height: 100%;
      }
      .tntd-ellipsis{
        font-size: 0.55em;
        // margin-bottom: 2px;
        color:tint(@text-color, 50%);
        font-family: Inter;
        font-weight: 500;
        text-align: center;
      }
    }
    &-small-half-circle{
      .ant-progress-text{
        height: 40%;
      }
      .tntd-ellipsis{
        bottom: -1.5em;
      }
    }
    &-large-half-circle{
      .ant-progress-inner{
        .ant-progress-text{
          top: 42%
        }
      }
    }
}