zarm-web/lib/steps/style/index.css

基于 React 的桌面端UI库

.zw-steps {
  display: flex;
  box-sizing: border-box;
  width: 100%;
}
.zw-steps--horizontal .zw-steps-item {
  padding-left: calc(var(--steps-content-width) / 2);
}
.zw-steps--horizontal .zw-steps-item .zw-steps-item__tail {
  left: calc((var(--steps-icon-size) + 12px) + (var(--steps-content-width) / 2));
}

.zw-steps--horizontal .zw-steps-item .zw-steps-item__content {
  margin-top: 8px;
  width: var(--steps-content-width);
  margin-left: calc(var(--steps-content-width) / -2 + var(--steps-icon-size) / 2);
  text-align: center;
}

.zw-steps--vertical {
  flex-direction: column;
}
.zw-steps--vertical .zw-steps-item {
  min-height: 64px;
}
.zw-steps--vertical .zw-steps-item .zw-steps-item__tail {
  width: 1px;
  height: 100%;
  left: calc(var(--steps-icon-size) / 2);
  padding: calc(var(--steps-icon-size) / 2 + 8px) 0;
  background: transparent;
}
.zw-steps--vertical .zw-steps-item .zw-steps-item__tail::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--steps-border-color);
}

.zw-steps--vertical .zw-steps-item .zw-steps-item__icon {
  float: left;
}

.zw-steps--vertical .zw-steps-item .zw-steps-item__content {
  min-height: calc(var(--steps-icon-size) * 2);
  margin-left: calc(var(--steps-icon-size) + 12px);
  padding-bottom: 10px;
  line-height: 1.5;
}

.zw-steps--vertical .zw-steps-item .zw-steps-item__title {
  margin-top: calc(var(--steps-icon-size) / 2 - var(--steps-title-font-size) / 1.5);
}

.zw-steps-item {
  display: inline-block;
  position: relative;
  flex: 1;
}
.zw-steps-item[role=button] {
  cursor: pointer;
}
.zw-steps-item__icon {
  border: solid 1px var(--steps-border-color);
  box-sizing: border-box;
  display: flex;
  width: var(--steps-icon-size);
  height: var(--steps-icon-size);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--steps-icon-size) / 2);
  color: var(--steps-status-wait);
}
.zw-steps-item__icon .zw-icon {
  font-size: calc(var(--steps-icon-size) / 2);
}

.zw-steps-item__tail {
  position: absolute;
  top: calc(var(--steps-icon-size) / 2);
  width: calc(100% - (var(--steps-icon-size) + 24px));
  height: 1px;
  background: var(--steps-border-color);
  left: calc(var(--steps-icon-size) + 12px);
}

.zw-steps-item__title {
  font-size: var(--steps-title-font-size);
  color: var(--steps-title-color);
  font-weight: 500;
}

.zw-steps-item__desc {
  font-size: var(--steps-desc-font-size);
  color: var(--steps-desc-color);
}

.zw-steps-item--finish .zw-steps-item__icon {
  border-color: var(--steps-status-process);
}

.zw-steps-item--finish .zw-steps-item__tail {
  background: var(--steps-status-process);
}
.zw-steps-item--finish .zw-steps-item__tail::after {
  background: var(--steps-status-process) !important;
}

.zw-steps-item--error .zw-steps-item__icon {
  color: var(--steps-status-error);
  border-color: var(--steps-status-error);
}

.zw-steps-item--error .zw-steps-item__title {
  color: var(--steps-status-error);
}

.zw-steps-item--error .zw-steps-item__desc {
  color: var(--steps-status-error);
}

.zw-steps-item--process .zw-steps-item__icon {
  border-color: var(--steps-status-process);
  background: var(--steps-status-process);
  color: #fff;
}

.zw-steps-item--process .zw-steps-item__title {
  color: var(--steps-status-process);
}

.zw-steps-item--process .zw-steps-item__desc {
  color: var(--steps-status-process);
}

.zw-steps-item--disabled {
  cursor: not-allowed !important;
}