acud/lib/timeline/style/theme.less

acg react 组件库

.theme {
    // 默认
    .is-default {
        background-color: @timeline-default-color;
    }

    .dot-default {
        color: @timeline-default-color;
    }
    // 成功
    .is-success {
        background-color: @timeline-success-color;
    }

    .dot-success {
        color: @timeline-success-color;
    }
    // 错误
    .is-error {
        background-color: @timeline-error-color;
    }

    .dot-error {
        color: @timeline-error-color;
    }
    // 告警
    .is-warning {
        background-color: @timeline-warning-color;
        color: @timeline-warning-color;
    }

    .dot-warning {
        color: @timeline-warning-color;
    }
    // 等待中
    .is-waiting {
        background-color: @timeline-default-color;
    }

    .dot-waiting {
        color: @timeline-default-color;
    }
    // 运行中
    .is-pending {
        background-color: transparent;
        border-top: 1px solid @timeline-pending-color;
        border-right: 1px solid @timeline-pending-color;
        border-bottom: 1px solid @timeline-pending-color;
        border-left: 1px solid transparent;
        animation: rotate 1s linear infinite;

        @keyframes rotate {
            from { transform: rotate(0); }
            to { transform: rotate(360deg); }
        }
    }

    .dot-pending {
        animation: breath 1.5s linear infinite;
        color: @timeline-pending-color;

        @keyframes breath {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
    }
}