ygd/lib/steps/style/custom-icon.less

An enterprise-class UI design language and React-based implementation

.@{steps-prefix-cls}-item-custom {
  .@{steps-prefix-cls}-item-icon {
    width: 26px;
    height: 26px;
    > .@{steps-prefix-cls}-icon {
      top: 0;
      left: 0.5px;
      width: @steps-icon-size;
      height: @steps-icon-size;
      font-size: 20px;
      line-height: @steps-icon-size;
    }
  }
  .@{steps-prefix-cls}-item-finish {
    background-color: @primary-color;
    border-color: @primary-color;
    > .@{steps-prefix-cls}-icon {
      color: @text-color-inverse;
    }
  }

  .@{steps-prefix-cls}-item-process {
    background-color: @primary-color;
    border-color: @primary-color;
    > .@{steps-prefix-cls}-icon {
      color: @text-color-inverse;
    }
  }




  .@{steps-prefix-cls}-item-content {
    margin-left: 5px;
    .@{steps-prefix-cls}-item-title {
      &::after {
        position: absolute;
        top: 0;
        left: 100%;
        display: block;
        width: 0px;
        height: 0px;
        background: @wait-tail-color;
        content: ' > ';
      }
    }
  }
  
  &.@{steps-prefix-cls}-item-process {
    .@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
      color: @text-color-inverse;
    }
  }
}

// Only adjust horizontal customize icon width
.@{steps-prefix-cls} {
  &:not(.@{steps-prefix-cls}-vertical) {
    .@{steps-prefix-cls}-item-custom {
      .@{steps-prefix-cls}-item-icon {
        width: 26px;
        border-width: 2px;
      }
    }
  }
}