amis2/scss/components/_status.scss

.#{$ns}StatusField {
    white-space: nowrap;

    &-label {
        font-size: $fontSizeSm;
        margin-left: $gap-sm;
    }

    @keyframes animation-rolling_red {
        0% {
            left: 0;
        }

        50% {
            left: px2rem(13px);
        }

        100% {
            left: 0;
        }
    }

    @keyframes animation-rolling_blue {
        0% {
            left: $gap-sm + $gap-base;
        }

        50% {
            left: px2rem(12px);
        }

        100% {
            left: $gap-sm + $gap-base;
        }
    }

    .#{$ns}Status-icon {
        &--danger,
        &--primary,
        &--rolling,
        &--success,
        &--warning {
            &::before {
                font-family: "iconfont";
                content: "\e632";
                font-style: normal;
            }
        }

        &--rolling {
            color: $warning;
            position: relative;
            left: $gap-md;

            &::before {
                font-size: inherit;
                color: $danger;
                position: absolute;
                left: 0;
                top: px2rem(1px);
                margin-left: px2rem(-27px);
                animation: animation-rolling_red 2s;
                animation-iteration-count: infinite;
            }

            &::after {
                font-family: "iconfont";
                content: "\e632";
                font-style: normal;
                font-size: inherit;
                color: $primary;
                position: absolute;
                left: $gap-sm + $gap-base;
                top: px2rem(1px);
                margin-left: px2rem(-39px);
                animation: animation-rolling_blue 2s;
                animation-iteration-count: infinite;
            }
        }

        &--success {
            &::before {
                color: $success;
            }
        }

        &--danger {
            &::before {
                color: $danger;
            }
        }

        &--warning {
            &::before {
                color: $warning;
            }
        }

        &--primary {
            &::before {
                color: $primary;
            }
        }
    }

    .#{$ns}Status-icon--rolling + &-label {
        color: $warning;
        position: relative;
        left: $gap-md;
    }

    .#{$ns}Status-icon--success + &-label {
        color: $success;
    }

    .#{$ns}Status-icon--danger + &-label {
        color: $danger;
    }

    .#{$ns}Status-icon--warning + &-label {
        color: $warning;
    }

    .#{$ns}Status-icon--primary + &-label {
        color: $primary;
    }
}