antd-mobile/es/steps/style/index.less

基于 React 的移动设计规范实现

@import '../../style/mixins';
@import '../../style/themes/default';

@stepsPrefixCls: am-steps;
@errorTailCls: error-tail;
@ellipsisItem: ellipsis-item;
@defaultIconSize: 44px;
@smallIconSize: 36px;

.@{stepsPrefixCls} {
  font-size: 0;
  width: 100%;
  line-height: @line-height-paragraph;

  &-item {
    position: relative;
    display: inline-block;
    vertical-align: top;

    &.@{stepsPrefixCls}-status-wait {
      .@{stepsPrefixCls}-head-inner {
        border-color: @color-text-placeholder;
        background-color: @fill-base;

        > .@{stepsPrefixCls}-icon {
          color: @color-text-placeholder;
        }
      }

      .@{stepsPrefixCls}-title {
        color: @color-text-base;
      }

      .@{stepsPrefixCls}-description {
        color: @color-text-placeholder;
      }

      .@{stepsPrefixCls}-tail > i {
        background-color: @color-text-placeholder;
      }
    }

    &.@{stepsPrefixCls}-status-process {
      .@{stepsPrefixCls}-head-inner {
        border-color: @brand-primary;
        background-color: @brand-primary;
        width: 44px;
        height: 44px;
        border-radius: @radius-circle;
        border: 0;

        > .@{stepsPrefixCls}-icon {
          color: @color-text-base-inverse;
        }
      }

      .@{stepsPrefixCls}-title {
        color: @color-text-base;
      }

      .@{stepsPrefixCls}-description {
        color: @color-text-placeholder;
      }

      .@{stepsPrefixCls}-tail > i {
        background-color: @brand-primary;
        width: 50%;
      }
    }

    &.@{stepsPrefixCls}-status-finish {
      .@{stepsPrefixCls}-head-inner {
        border-color: @brand-primary;
        background-color: @fill-base;

        > .@{stepsPrefixCls}-icon {
          color: @brand-primary;
        }
      }

      .@{stepsPrefixCls}-tail > i {
        background-color: @brand-primary;
      }

      .@{stepsPrefixCls}-title {
        color: @color-text-base;
      }

      .@{stepsPrefixCls}-description {
        color: @color-text-placeholder;
      }
    }

    &.@{stepsPrefixCls}-status-error {
      .@{stepsPrefixCls}-head-inner {
        border-color: @brand-error;
        background-color: @fill-base;

        > .@{stepsPrefixCls}-icon {
          color: @brand-error;
        }
      }

      .@{stepsPrefixCls}-title {
        color: @color-text-base;
      }

      .@{stepsPrefixCls}-description {
        color: @color-text-placeholder;
      }

      .@{stepsPrefixCls}-tail > i {
        background-color: @border-color-base;
      }
    }

    &.@{stepsPrefixCls}-next-error {
      .@{stepsPrefixCls}-tail > i,
      .@{stepsPrefixCls}-tail > i:after {
        background-color: @brand-error;
      }
    }

    &.@{stepsPrefixCls}-custom {
      .@{stepsPrefixCls}-head-inner {
        background: none;
        border: 0;
        width: auto;
        height: auto;

        > .@{stepsPrefixCls}-icon {
          display: block;
          font-size: @defaultIconSize;
          width: @defaultIconSize;
          height: @defaultIconSize;
          background-color: @fill-base;
          border-radius: @radius-circle;
        }
      }

      &.@{stepsPrefixCls}-status-process {
        .@{stepsPrefixCls}-head-inner > .@{stepsPrefixCls}-icon {
          color: @brand-primary;
        }
      }
    }

    .@{ellipsisItem}.@{stepsPrefixCls}-status-wait&.@{stepsPrefixCls}-custom {
      .@{stepsPrefixCls}-head-inner {
        > .@{stepsPrefixCls}-icon {
          font-size: @font-size-subhead;
          line-height: 40px;
          width: 40px;
          height: 40px;
          border: 4px solid @color-text-placeholder;
          border-radius: @radius-circle;

          .am-icon {
            width: 36px;
            height: 36px;
          }
        }
      }
    }

    &.@{errorTailCls} .@{stepsPrefixCls}-tail {
      background-color: @brand-error;
    }
  }

  &-head,
  &-main {
    position: relative;
    display: inline-block;
    vertical-align: top;
  }

  &-head-inner {
    display: block;
    box-sizing: border-box;
    border: 4px solid @color-text-placeholder;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 48px;
    font-size: 28px;
    margin-right: 16px;
    transition: background-color 0.3s ease, border-color 0.3s ease;

    > .@{stepsPrefixCls}-icon {
      line-height: @line-height-base;
      top: -1.5px;
      color: @brand-primary;
      position: relative;
    }
  }

  &-title {
    font-size: @font-size-caption;
    margin-bottom: 4px;
    font-weight: bold;
    display: inline-block;
    padding-right: 10px;
  }

  &-item:last-child {
    .@{stepsPrefixCls}-title {
      padding-right: 0;
    }

    .@{stepsPrefixCls}-tail {
      display: none;
    }
  }

  &-description {
    font-size: @font-size-subhead;
  }

  &-tail {
    position: absolute;
    left: 0;
    width: 100%;
    top: 20px;

    > i {
      display: inline-block;
      vertical-align: top;
      background: @border-color-base;
      height: 4px;
      width: 100%;
      position: relative;

      &:after {
        position: absolute;
        content: '';
        top: 0;
        width: 0;
        background: @border-color-base;
        height: 100%;
        opacity: 0;
      }
    }
  }

  &&-small {
    .@{stepsPrefixCls}-main {
      margin-top: 0;
    }

    .@{stepsPrefixCls}-title {
      font-size: @font-size-caption;
      color: @color-text-base;
    }

    .@{stepsPrefixCls}-description {
      font-size: @font-size-caption-sm;
      color: @color-text-placeholder;
    }

    .@{stepsPrefixCls}-tail {
      padding: 0 8px;

      > i {
        height: 1px;
        border-radius: 1px;
        width: 100%;
      }
    }
  }

  &&-small &-item&-custom &-head-inner,
  &-item&-status-error &-head-inner,
  &-item&-custom &-head-inner {
    width: inherit;
    height: inherit;
    line-height: inherit;
    border-radius: 0;
    border: 0;
    background: none;
  }

  &&-small &-item&-custom &-head-inner {
    > .@{stepsPrefixCls}-icon {
      font-size: @smallIconSize;
      width: @smallIconSize;
      height: @smallIconSize;
      background-color: @fill-base;

      .am-icon {
        width: 36px;
        height: 36px;
      }
    }
  }

  &&-small .@{ellipsisItem}&-item&-status-wait&-custom &-head-inner {
    > .@{stepsPrefixCls}-icon {
      .am-icon {
        width: 24px;
        height: 24px;
      }
    }
  }

  &&-small &-item&-status-wait&-custom &-head-inner {
    > .@{stepsPrefixCls}-icon {
      font-size: 20px;
      width: 28px;
      height: 28px;
      line-height: 28px;
    }
  }

  &&-small &-item&-status-process &-head-inner {
    box-sizing: border-box;
    width: @smallIconSize;
    height: @smallIconSize;
    line-height: @smallIconSize;
    border-radius: @radius-circle;
  }
}

.@{stepsPrefixCls}-vertical {
  .@{stepsPrefixCls}-item {
    display: block;
  }

  .@{stepsPrefixCls}-tail {
    position: absolute;
    left: 22px;
    height: 100%;
    width: 4px;
    padding: 0;
    background-color: @border-color-base;

    > i {
      height: 100%;
      width: 4px;

      &:after {
        height: 0;
        width: 100%;
      }
    }
  }

  .@{stepsPrefixCls}-status-finish {
    .@{stepsPrefixCls}-tail > i:after {
      height: 100%;
    }
  }

  .@{stepsPrefixCls}-head {
    float: left;

    &-inner {
      margin-right: @h-spacing-lg;
    }
  }

  .@{stepsPrefixCls}-main {
    min-height: 140px;
    overflow: hidden;
    display: block;

    .@{stepsPrefixCls}-description {
      padding-bottom: @v-spacing-md;
    }
  }

  .@{stepsPrefixCls}-item.@{stepsPrefixCls}-status-process .@{stepsPrefixCls}-tail > i {
    width: 4px;
    height: 55%;
  }
}

.@{stepsPrefixCls}-vertical.@{stepsPrefixCls}-small {
  .@{stepsPrefixCls}-tail {
    position: absolute;
    left: 16px;
    padding: 0;
    width: 2px;

    > i {
      height: 100%;
    }
  }

  .@{stepsPrefixCls}-item.@{stepsPrefixCls}-status-process .@{stepsPrefixCls}-tail > i {
    height: 50%;
    width: 2px;
  }

  .@{stepsPrefixCls}-item .@{stepsPrefixCls}-head-inner {
    margin-right: @h-spacing-md;
  }
}

.@{stepsPrefixCls}-horizontal {
  &.@{stepsPrefixCls}-hidden {
    visibility: hidden;
  }

  .@{stepsPrefixCls}-description {
    max-width: 150px;
  }

  &.@{stepsPrefixCls}-small .@{stepsPrefixCls}-tail {
    top: 16px;
  }
}

.@{stepsPrefixCls}-label-vertical {
  .@{stepsPrefixCls}-tail {
    left: 60px;
    right: 0;
    width: auto;
    background-color: @border-color-base;
  }

  .@{stepsPrefixCls}-item {
    .@{stepsPrefixCls}-step {
      display: inline-block;
      text-align: center;
    }
  }

  .@{stepsPrefixCls}-item:not(:first-child) .@{stepsPrefixCls}-head {
    margin-left: 0;
    padding-left: 0;
  }

  .@{stepsPrefixCls}-head {
    display: inline-block;

    &-inner {
      margin: 0 auto;
    }
  }

  .@{stepsPrefixCls}-main {
    display: block;
    margin-top: @v-spacing-sm;

    .@{stepsPrefixCls}-title {
      padding-right: 0;
    }

    .@{stepsPrefixCls}-description {
      text-align: left;
    }
  }
}