@alifd/meet-react/es/step/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
.mt-step-item-content, .mt-step-item-title, .mt-step-item-node {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-step::-webkit-scrollbar {
  display: none;
}

/*
  @component step
  @display Step
  @chinese 步骤
  @family navigation
*/
:root {
  /*
    @desc horn-width
    @semantic 连接线粗细
    @namespace size/bounding
   */
  --step-horn-line-width: var(--line-1);
  /*
    @desc spacing
    @semantic 元素间距
    @namespace size/padding
   */
  --step-spacing: var(--box-medium-spacing);
  /*
    @desc circle-inner-font-size
    @semantic circle 模式内部字体大小
    @namespace size/font
   */
  --step-circle-inner-font-size: var(--p-body-1-icon-size);
  /*
    @desc title-font-size
    @semantic 标题字体大小
    @namespace size/font
   */
  --step-title-font-size: var(--p-body-2-icon-size);
  /*
    @desc content-font-size
    @semantic 描述文案字体大小
    @namespace size/font
   */
  --step-content-font-size: var(--p-body-1-icon-size);
  /*
    @desc circle-size
    @semantic circle 尺寸
    @namespace size/bounding
   */
  --step-circle-size: var(--s-7);
  /*
    @desc dot-size
    @semantic dot 尺寸
    @namespace size/bounding
   */
  --step-dot-size: var(--s-4);
  /*
    @desc arrow-size
    @semantic arrow 高度
    @namespace size/bounding
   */
  --step-arrow-size: 7.466666666666667vw;
  /*
    @desc common-active-color
    @semantic 激活颜色
    @namespace style/normal
   */
  --step-active-color: var(--color-brand-3);
  /*
    @desc node-bg-color
    @semantic 节点背景颜色
    @namespace style/normal
   */
  --step-node-bg-color: var(--color-white);
  /*
   @desc text-color
   @semantic 标题和描述文案颜色
   @namespace style/normal
  */
  --step-body-font-color: var(--color-text1-3);
  /*
    @desc process-title-font-color
    @semantic 标题 process 颜色
    @namespace style/normal
   */
  --step-title-process-color: var(--color-text1-4);
  /*
    @desc wait-line-color
    @semantic 连接线颜色
    @namespace style/normal
   */
  --step-wait-line-color: var(--color-line1-3);
  /*
    @desc vertical-spacing
    @semantic 垂直模式元素间距
    @namespace size/padding
   */
  --step-vertical-spacing: var(--s-4);
  /*
    @desc arrow-bg-color
    @semantic 已完成背景颜色(arrow 模式)
    @namespace style/finish
   */
  --step-arrow-finish-bg-color: var(--color-brand-1);
  /*
    @desc circle-node-font-color
    @semantic 字体颜色(circle 模式)
    @namespace style/finish
   */
  --step-circle-finish-font-color: var(--color-text1-1);
  /*
    @desc node-wait-border-color
    @semantic 边框颜色(dot 模式)
    @namespace style/finish
   */
  --step-dot-wait-border-color: var(--color-text1-1);
  /*
    @desc circle-node-font-color
    @semantic 节点内部字体颜色(circle 模式)
    @namespace style/process
   */
  --step-circle-process-font-color: var(--color-white);
  /*
    @desc arrow-bg-color
    @semantic 未完成背景颜色(arrow 模式)
    @namespace style/wait
   */
  --step-arrow-wait-color: var(--color-fill1-2);
  /*
    @desc arrow-bg-color
    @semantic 禁用背景颜色(arrow 模式)
    @namespace style/disabled
   */
  --step-arrow-disabled-bg-color: var(--color-fill1-1);
  /*
    @desc line-color
    @semantic 连接线颜色
    @namespace style/disabled
   */
  --step-horn-disabled-color: var(--color-line1-1);
  /*
    @desc node-border-color
    @semantic 节点颜色
    @namespace style/disabled
   */
  --step-node-disabled-border-color: var(--color-line1-4);
  /*
    @desc text-color
    @semantic 标题、描述字体颜色(禁用)
    @namespace style/disabled
   */
  --step-disabled-font-color: var(--color-text1-1);
}

@keyframes mt-step-blink {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.mt-step {
  justify-content: center;
}
.mt-step--scroll {
  justify-content: flex-start;
}
.mt-step--wechat-dot {
  max-height: 15.466666666666667vw;
}
.mt-step--wechat-circle {
  max-height: 18.666666666666668vw;
}
.mt-step--wechat-arrow {
  max-height: 7.2vw;
}
.mt-step-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-step-container--scroll {
  justify-content: flex-start;
}
.mt-step-container--ver {
  flex-direction: column;
}
.mt-step-item {
  position: relative;
  display: flex;
  flex-direction: column;
}
.mt-step-item-indicator {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-step-item-node {
  position: relative;
  border-radius: var(--corner-circle);
  border-style: solid;
  margin-left: var(--step-spacing);
  margin-right: var(--step-spacing);
  box-sizing: border-box;
  border-width: var(--line-1);
}
.mt-step-item-node--percent {
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  background-color: var(--color-white);
}
.mt-step-item-body {
  display: flex;
  flex-direction: column;
  margin-top: var(--step-spacing);
  width: 26.666666666666668vw;
  text-align: center;
}
.mt-step-item-title {
  display: inline;
  min-height: var(--step-title-font-size);
  color: var(--step-body-font-color);
  font-size: var(--step-title-font-size);
  line-height: 1;
}
.mt-step-item--process .mt-step-item-title {
  color: var(--step-title-process-color);
}
.mt-step-item-content {
  display: inline;
  min-height: var(--step-content-font-size);
  margin-top: var(--box-small-spacing);
  padding: 0 var(--box-small-spacing);
  color: var(--step-body-font-color);
  font-size: var(--step-content-font-size);
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
}
.mt-step-item-horn {
  border: 0 solid transparent;
  border-top-width: var(--step-horn-line-width);
  border-left-width: var(--step-horn-line-width);
  border-top-color: var(--step-active-color);
  border-left-color: var(--step-active-color);
  flex: 1;
}
.mt-step-item-horn--hide {
  visibility: hidden;
}
.mt-step-item--process .mt-step-item-horn--right, .mt-step-item--wait .mt-step-item-horn {
  border-top-color: var(--step-wait-line-color);
  border-left-color: var(--step-wait-line-color);
}
.mt-step-item--process .mt-step-item-node {
  background-color: var(--step-active-color);
  border: none;
  color: var(--step-circle-process-font-color);
}
.mt-step-item--process .mt-step-item-node--percent {
  background-color: var(--color-white);
}
.mt-step-item--wait .mt-step-item-node {
  background-color: var(--step-node-bg-color);
  color: var(--step-circle-finish-font-color);
}
.mt-step-item--wait .mt-step-item-node:after {
  border-color: var(--step-dot-wait-border-color);
}
.mt-step-item--finish .mt-step-item-node {
  background-color: var(--step-node-bg-color);
  color: var(--step-active-color);
}
.mt-step-item--finish .mt-step-item-node:after {
  border-color: var(--step-active-color);
}
.mt-step-item--dot .mt-step-item-node {
  width: var(--step-dot-size);
  height: var(--step-dot-size);
}
.mt-step-item--dot.mt-step-item--process .mt-step-item-node, .mt-step-item--circle.mt-step-item--process .mt-step-item-node {
  animation: mt-step-blink var(--motion-time-2) var(--motion-type-ease);
  transition: all var(--motion-time-1) var(--motion-type-linear);
}
.mt-step-item--circle .mt-step-item-node {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: var(--step-circle-size);
  height: var(--step-circle-size);
  font-size: var(--step-circle-inner-font-size);
}
.mt-step-item--arrow {
  margin-right: 0.26666666666666666vw;
}
.mt-step-item--arrow .mt-step-item-horn {
  flex: none;
  position: absolute;
  top: 0;
}
.mt-step-item--arrow .mt-step-item-horn--left {
  left: 0;
  z-index: var(--elevation-1);
  border-width: calc(var(--step-arrow-size) / 2);
  border-style: solid;
  border-color: var(--step-arrow-finish-bg-color);
  border-left-color: transparent;
  background-color: #fff;
}
.mt-step-item--arrow .mt-step-item-horn--right {
  right: calc(-1 * var(--step-arrow-size));
  z-index: calc(var(--elevation-1) + 1);
  border-width: calc(var(--step-arrow-size) / 2);
  border-style: solid;
  border-color: transparent;
  border-left-color: var(--step-active-color);
}
.mt-step-item--arrow .mt-step-item-node {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  height: var(--step-arrow-size);
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--step-arrow-size);
  padding-right: calc(var(--step-arrow-size) / 2);
  border-radius: var(--corner-zero);
  border: none;
  background-color: var(--step-active-color);
  font-size: var(--p-body-2-font-size);
  text-align: center;
}
.mt-step-item--arrow .mt-step-item-node:after {
  border: none;
}
.mt-step-item-process .mt-step-item-horn--right {
  border-color: var(--step-active-color);
}
.mt-step-item--arrow.mt-step-item--finish .mt-step-item-node {
  background-color: var(--step-arrow-finish-bg-color);
}
.mt-step-item--arrow.mt-step-item--finish .mt-step-item-horn--left {
  border-color: var(--step-arrow-finish-bg-color);
  border-left-color: transparent;
}
.mt-step-item--arrow.mt-step-item--finish .mt-step-item-horn--right {
  border-left-color: var(--step-arrow-finish-bg-color);
}
.mt-step-item--arrow.mt-step-item--process .mt-step-item-horn--left {
  border-color: var(--step-active-color);
  border-left-color: transparent;
}
.mt-step-item--arrow.mt-step-item--process .mt-step-item-horn--right {
  border-left-color: var(--step-active-color);
}
.mt-step-item--arrow.mt-step-item--wait .mt-step-item-node {
  background-color: var(--step-arrow-wait-color);
}
.mt-step-item--arrow.mt-step-item--wait .mt-step-item-horn--left {
  border-color: var(--step-arrow-wait-color);
  border-left-color: transparent;
}
.mt-step-item--arrow.mt-step-item--wait .mt-step-item-horn--right {
  border-left-color: var(--step-arrow-wait-color);
}
.mt-step-item--arrow.mt-step-item--first .mt-step-item-node {
  margin-left: 0;
}
.mt-step-item--ver {
  flex-direction: row;
  width: 100%;
}
.mt-step-item--ver .mt-step-item-indicator {
  flex-direction: column;
  justify-content: flex-start;
}
.mt-step-item--ver .mt-step-item-node {
  margin: var(--step-spacing) 0;
}
.mt-step-item--ver .mt-step-item-horn--hide, .mt-step-item--ver .mt-step-item-horn--left {
  display: none;
}
.mt-step-item--ver .mt-step-item-body {
  flex: 1;
  width: auto;
  min-height: 16vw;
  margin: 0 var(--step-vertical-spacing);
}
.mt-step-item--ver .mt-step-item-title {
  line-height: 1;
  margin-top: var(--step-spacing);
}
.mt-step-item--ver .mt-step-item-content {
  padding: 0;
}
.mt-step-item--ver .mt-step-item-title, .mt-step-item--ver .mt-step-item-content {
  text-align: left;
}
.mt-step-item--ver.mt-step-item--circle .mt-step-item-title {
  margin-top: calc((var(--step-circle-size) - var(--step-title-font-size)) / 2 + var(--step-spacing));
}
.mt-step-item--ver.mt-step-item--circle.mt-step-item--first .mt-step-item-title {
  margin-top: calc((var(--step-circle-size) - var(--step-title-font-size)) / 2);
}
.mt-step-item--ver.mt-step-item--first .mt-step-item-title, .mt-step-item--ver.mt-step-item--first .mt-step-item-node {
  margin-top: 0;
}
.mt-step-item--disabled.mt-step-item--circle .mt-step-item-node, .mt-step-item--disabled.mt-step-item--dot .mt-step-item-node {
  border-style: solid;
  background-color: var(--color-fill1-4);
  border-color: var(--color-fill1-4);
  color: var(--step-disabled-font-color);
}
.mt-step-item--disabled.mt-step-item--circle .mt-step-item-node:after, .mt-step-item--disabled.mt-step-item--dot .mt-step-item-node:after {
  border-color: var(--step-node-disabled-border-color);
}
.mt-step-item--disabled.mt-step-item--arrow .mt-step-item-node {
  background-color: var(--step-arrow-disabled-bg-color);
  color: var(--step-disabled-font-color);
}
.mt-step-item--pre-disabled.mt-step-item--circle .mt-step-item-horn--left, .mt-step-item--pre-disabled.mt-step-item--dot .mt-step-item-horn--left, .mt-step-item--disabled.mt-step-item--circle .mt-step-item-horn--right, .mt-step-item--disabled.mt-step-item--dot .mt-step-item-horn--right {
  border-color: var(--step-horn-disabled-color);
}
.mt-step-item--disabled.mt-step-item--arrow .mt-step-item-horn--right {
  border-left-color: var(--step-arrow-disabled-bg-color);
}
.mt-step-item--disabled.mt-step-item--arrow .mt-step-item-horn--left {
  border-color: var(--step-arrow-disabled-bg-color);
  border-left-color: transparent;
}
.mt-step-item--disabled .mt-step-item-title, .mt-step-item--disabled .mt-step-item-content {
  color: var(--step-disabled-font-color);
  border-color: var(--step-disabled-font-color);
}
.mt-step-item--disabled .mt-step-item-node:after {
  border-color: var(--step-disabled-font-color);
}
.mt-step-item-addon {
  margin-right: var(--step-spacing);
  margin-top: var(--step-spacing);
  max-width: 50vw;
}
.mt-step-item-addon--first {
  margin-top: 0;
}