yu.css.ui/css/component/steps.css

纯CSS通用UI模块和组件

.yu-steps-item {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  position: relative;
  font-size: 0;
  color: #909399;
  display: inline-block;
  z-index: 100; }
  .yu-steps-item > .line {
    position: absolute;
    top: 13px;
    width: 100%;
    z-index: -1; }
    .yu-steps-item > .line > i {
      background: #f5f5f9;
      display: block;
      height: 1px;
      border-radius: 1px;
      width: 100%; }
      .yu-steps-item > .line > i::after {
        top: 0;
        width: 0;
        height: 0;
        background: #409EFF;
        position: absolute;
        content: "";
        display: block; }
  .yu-steps-item > .head {
    background: #fff;
    display: inline-block;
    font-size: 14px; }
    .yu-steps-item > .head > .inner {
      box-sizing: content-box;
      display: inline-block;
      height: 26px;
      width: 26px;
      border-radius: 26px;
      border: 1px solid #E4E7ED;
      line-height: 26px;
      text-align: center;
      color: #909399;
      transition: background-color .4s linear; }
  .yu-steps-item > .main {
    padding: 0 14px;
    font-size: 14px;
    background: #fff;
    display: inline-block;
    line-height: 26px;
    vertical-align: top; }
    .yu-steps-item > .main > .title {
      font-size: 14px;
      font-weight: normal;
      margin: 0;
      padding: 0;
      border: none; }
    .yu-steps-item > .main > .description {
      font-size: 12px;
      margin: 0; }
  .yu-steps-item.active > .head > .inner {
    background-color: #409EFF;
    color: #fff;
    border-color: #409EFF; }
  .yu-steps-item.active > .main {
    color: #303133; }
  .yu-steps-item.finished > .line > i::after {
    width: 100%;
    height: 1px;
    transition: width 1s ease; }
  .yu-steps-item.finished > .head > .inner {
    border-color: #409EFF;
    color: #409EFF; }
  .yu-steps-item.small > .line {
    top: 9px; }
  .yu-steps-item.small > .head > .inner {
    height: 18px;
    width: 18px;
    border-radius: 18px;
    line-height: 18px;
    font-size: 12px; }
    .yu-steps-item.small > .head > .inner i {
      font-size: 12px; }
  .yu-steps-item.small > .main {
    padding: 0 14px;
    font-size: 12px;
    background: #fff;
    display: inline-block;
    line-height: 18px;
    vertical-align: top; }
    .yu-steps-item.small > .main > .description {
      font-size: 10px; }

.yu-steps.vertical > .yu-steps-item {
  display: block;
  height: 60px; }
  .yu-steps.vertical > .yu-steps-item > .head {
    padding-bottom: 4px; }
    .yu-steps.vertical > .yu-steps-item > .head:nth-child(n+2) {
      padding-left: 0; }
    .yu-steps.vertical > .yu-steps-item > .head > .inner {
      transition: background-color .4s linear; }
  .yu-steps.vertical > .yu-steps-item > .line {
    top: 26px;
    left: 13px;
    height: 30px; }
    .yu-steps.vertical > .yu-steps-item > .line > i {
      width: 1px;
      height: 100%; }
      .yu-steps.vertical > .yu-steps-item > .line > i::after {
        width: 0;
        height: 0; }
  .yu-steps.vertical > .yu-steps-item.small > .line {
    left: 9px; }
  .yu-steps.vertical > .yu-steps-item.finished > .line > i::after {
    width: 1px;
    height: 100%;
    transition: height 0.4s ease; }

.yu-steps > .yu-steps-item:nth-child(n+2) > .head {
  padding-left: 14px; }

.yu-steps > .yu-steps-item:last-child > .line {
  display: none; }