acud/lib/progress/style/lineProgress.less

acg react 组件库

@import './common.less';

.@{progress-prefix-cls}-line {
    white-space: nowrap;
    font-size: 0;

    .@{progress-prefix-cls}-wrapper {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 100%;
        margin-right: -50px;
        padding-right: 50px;
    }
    .@{progress-prefix-cls}-trail {
        width: 100%;
        height: 100%;
        border-radius: 100px;
        overflow: hidden;
        background-color: @progress-default-trail-color;
    }
    .@{progress-prefix-cls}-bar {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        height: 100%;
        transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
    }
    .@{progress-prefix-cls}-label {
        display: inline-block;
        vertical-align: middle;
    }
    .@{progress-prefix-cls}-label-outer {
        margin-left: @progress-label-outer-right;
    }
    .@{progress-prefix-cls}-label-inner {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
    .@{progress-prefix-cls}-label-inner-right {
        position: absolute;
        right: -8px;
        transform: translate(100%, -50%);
    }
    .@{progress-prefix-cls}-label-inner-left {
        position: absolute;
        right: 8px;
        transform: translate(0, -50%);
    }
}

.@{progress-prefix-cls}-label-hidden .@{progress-prefix-cls}-wrapper {
    padding-right: 0;
    margin-right: 0;
}

.@{progress-prefix-cls}-linecap-round .@{progress-prefix-cls}-bar {
    border-radius: 100px;
}

// 不同尺寸对应的进度条高度
each(.size-ratio-map(), .(@value, @key, @index) {
    .@{progress-prefix-cls}-line.@{progress-prefix-cls}-@{key} .@{progress-prefix-cls}-wrapper {
        height: @progress-line-width-unit * @value;
    }
});

// 不同状态对应的进度条颜色
each(.status-color-map(), .(@value, @key, @index) {
    .@{progress-prefix-cls}-line.@{progress-prefix-cls}-@{key} .@{progress-prefix-cls}-bar {
        background-color: @value;
    }
});