ant-design/components/steps/style/index.less

@import "../../style/themes/default";
@import "../../style/mixins/index";

@steps-prefix-cls: ant-steps;
@process-icon-color: @primary-color;
@process-title-color: #666;
@process-description-color: @process-title-color;
@process-tail-color: @border-color-split;
@wait-icon-color: #ccc;
@wait-title-color: #999;
@wait-description-color: @wait-title-color;
@wait-tail-color: @process-tail-color;
@finish-icon-color: @process-icon-color;
@finish-title-color: @wait-title-color;
@finish-description-color: @finish-title-color;
@finish-tail-color: @process-icon-color;
@error-icon-color: @error-color;
@error-title-color: @error-color;
@error-description-color: @error-color;
@error-tail-color: @error-color;

.@{steps-prefix-cls} {
  font-size: 0;
  width: 100%;
  line-height: 1.5;
  .@{steps-prefix-cls}-item {
    position: relative;
    display: inline-block;
    vertical-align: top;

    &.@{steps-prefix-cls}-status-wait {
      .@{steps-prefix-cls}-head-inner {
        border-color: @wait-icon-color;
        background-color: #fff;
        > .@{steps-prefix-cls}-icon {
          color: @wait-icon-color;
        }
      }
      .@{steps-prefix-cls}-title {
        color: @wait-title-color;
      }
      .@{steps-prefix-cls}-description {
        color: @wait-description-color;
      }
      .@{steps-prefix-cls}-tail > i {
        background-color: @wait-tail-color;
      }
    }
    &.@{steps-prefix-cls}-status-process {
      .@{steps-prefix-cls}-head-inner {
        border-color: @process-icon-color;
        background-color: @process-icon-color;
        > .@{steps-prefix-cls}-icon {
          color: #fff;
        }
      }
      .@{steps-prefix-cls}-title {
        color: @process-title-color;
      }
      .@{steps-prefix-cls}-description {
        color: @process-description-color;
      }
      .@{steps-prefix-cls}-tail > i {
        background-color: @process-tail-color;
      }
    }
    &.@{steps-prefix-cls}-status-finish {
      .@{steps-prefix-cls}-head-inner {
        border-color: @finish-icon-color;
        background-color: #fff;
        > .@{steps-prefix-cls}-icon {
          color: @finish-icon-color;
        }
      }
      .@{steps-prefix-cls}-tail > i:after {
        width: 100%;
        background: @finish-tail-color;
        transition: all 0.4s ease;
        opacity: 1;
      }
      .@{steps-prefix-cls}-title {
        color: @finish-title-color;
      }
      .@{steps-prefix-cls}-description {
        color: @finish-description-color;
      }
    }

    &.@{steps-prefix-cls}-status-error {
      .@{steps-prefix-cls}-head-inner {
        border-color: @error-icon-color;
        background-color: #fff;
        > .@{steps-prefix-cls}-icon {
          color: @error-icon-color;
        }
      }
      .@{steps-prefix-cls}-title {
        color: @error-title-color;
      }
      .@{steps-prefix-cls}-description {
        color: @error-description-color;
      }
      .@{steps-prefix-cls}-tail > i {
        background-color: @process-tail-color;
      }
    }

    &.@{steps-prefix-cls}-next-error {
      .@{steps-prefix-cls}-tail > i,
      .@{steps-prefix-cls}-tail > i:after {
        background-color: @error-tail-color;
      }
    }

    &.@{steps-prefix-cls}-custom {
      .@{steps-prefix-cls}-head-inner {
        background: none;
        border: 0;
        width: auto;
        height: auto;
        > .@{steps-prefix-cls}-icon {
          font-size: 20px;
          top: 2px;
          width: 20px;
          height: 20px;
        }
      }
      &.@{steps-prefix-cls}-status-process {
        .@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
          color: @process-icon-color;
        }
      }
    }
  }

  .@{steps-prefix-cls}-head,
  .@{steps-prefix-cls}-main {
    position: relative;
    display: inline-block;
    vertical-align: top;
  }
  .@{steps-prefix-cls}-head {
    background: #fff;
  }

  .@{steps-prefix-cls}-head-inner {
    display: block;
    border: 1px solid @wait-icon-color;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 26px;
    font-size: 14px;