polestar-ui-kit/styles/components/steps/index.less

## Install

@process-icon-color: @processing-color; // 체크 된 후 아이콘 색
@process-title-color: @heading-color; // ??
@process-description-color: @text-color; // ??
@process-tail-color: @process-title; // 스텝과 스텝 사이의 라인 기본 색
@process-icon-text-color: #fff; // ??
@wait-icon-color: @process-title; // 아직 넘어가지 않은 스텝의 아이콘 색
@wait-title-color: @process-title; // 아직 넘어가지 않은 스텝의 타이틀 색
@wait-description-color: @process-title; // 아직 넘어가지 않은 스텝의 타이틀 색(수정하지 않으면 타이틀 색을 따라감)
@wait-tail-color: @process-title; // 스텝과 스텝 사이의 라인 기본 색
@finish-icon-color: @process-title-active; // 체크 완료된 후 체크 아이콘의 색
@finish-title-color: @text-color-base; // 체크 완료된 후 타이틀 색
@finish-description-color: @text-color-base; // 체크 완료된 후 설명 색
@finish-tail-color: @process-title-active; // 체크 완료된 스텝과 스텝 사이의 라인 색
@error-icon-color: @error-color; // 에러체크 됐을때 아이콘 색
@error-title-color: @error-color; // 에러체크 됐을때 타이틀 색
@error-description-color: @error-color; // 에러체크 됐을때 설명 색
@error-tail-color: @error-color; // 에러체크 됐을때 스텝과 스텝 사이의 (오른쪽)라인 색
@steps-background: @component-background; // 각 숫자 아이콘의 배경 색


@steps-icon-circle: 3px;
@steps-icon-rectangle: 32px;

.@{steps-prefix-cls}-item {
  &-icon {
    border: @steps-border-width-base @steps-border-style-base @primary-6;
    border-radius: @steps-icon-circle;
    background: @primary-6;
    > .@{steps-prefix-cls}-icon {
        top: -3px;
        color: @white;
        }
    }
    &-tail {
        &:after {
          background: @process-title;
        }
      }
    &-title {
        color: @primary-6;
        .font-noto();  
        font-weight: 400;
    }
    &-description {
        font-size: @font-size-sm;
        color: @primary-6;
    }
}

@import "./vertical.less";