bk-magic-vue/lib/ui/steps.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

@-webkit-keyframes loadingCircle{
  100%{
    -webkit-transform:rotate(360deg);
            transform:rotate(360deg);
  }
}

@keyframes loadingCircle{
  100%{
    -webkit-transform:rotate(360deg);
            transform:rotate(360deg);
  }
}

.bk-steps{
  display:table;
  width:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  font-size:0;
}

.bk-steps .bk-icon{
    font-size:24px;
    line-height:24px
  }

.bk-steps .bk-icon.icon-loading{
      display:inline-block;
      -webkit-animation:loadingCircle 1s infinite linear;
              animation:loadingCircle 1s infinite linear;
      font-size:14px;
    }

.bk-steps .bk-step.done{
    }

.bk-steps .bk-step.done .bk-step-number,
      .bk-steps .bk-step.done .bk-step-icon{
        border-color:#3a84ff;
        color:#3a84ff;
      }

.bk-steps .bk-step.done .bk-step-title::after, .bk-steps .bk-step.done .bk-step-indicator::after{
          background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #3a84ff), color-stop(0%, transparent));
          background-image:linear-gradient(to right, #3a84ff 50%, transparent 0%);
        }

.bk-steps .bk-step.done::after{
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #3a84ff), color-stop(0%, transparent));
        background-image:linear-gradient(#3a84ff 50%, transparent 0%);
      }

.bk-steps .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-title::after, .bk-steps .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps .bk-step.done:has(+ .current.bk-step-error) .bk-step-title::after, .bk-steps .bk-step.done:has(+ .current.bk-step-error) .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)]::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps .bk-step.done:has(+ .current.bk-step-error)::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps .bk-step.current .bk-step-number,
      .bk-steps .bk-step.current .bk-step-icon,
      .bk-steps .bk-step.current .bk-step-text{
        background-color:#3a84ff;
        border-color:#3a84ff;
        color:#fff;
      }

.bk-steps .bk-step{
    -webkit-box-flex:1;
        -ms-flex:1;
            flex:1;
    position:relative;
    overflow:hidden;
    white-space:nowrap;
    margin-right:16px;
  }

.bk-steps .bk-step .bk-step-indicator{
      display:-webkit-inline-box;
      display:-ms-inline-flexbox;
      display:inline-flex;
      -webkit-box-align:center;
          -ms-flex-align:center;
              align-items:center;
      -webkit-box-pack:center;
          -ms-flex-pack:center;
              justify-content:center;
      width:24px;
      height:24px;
      padding:0;
      margin-right:8px;
      border:1px solid #979ba5;
      border-radius:50%;
      line-height:24px;
      color:#979ba5;
      text-align:center;
      background-color:#fff;
      z-index:1;
      vertical-align:top;
    }

.bk-steps .bk-step .bk-step-number{
      font-size:14px;
      font-family:arial;
    }

.bk-steps .bk-step .bk-step-content{
      display:inline-block;
      vertical-align:top;
    }

.bk-steps .bk-step .bk-step-title{
      display:inline-block;
      position:relative;
      color:#63656e;
      font-size:14px;
      word-break:break-all;
      padding-right:16px;
      line-height:24px;
    }

.bk-steps .bk-step .bk-step-title::after{
    content:'';
    position:absolute;
    left:100%;
    top:12px;
    width:99999px;
    height:1px;
    background-color:transparent;
  }

.bk-steps .bk-step .bk-step-description{
      font-size:12px;
      color:#979ba5;
      max-width:140px;
      white-space:normal;
      display:block;
      max-width:140px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

.bk-steps .bk-step.bk-step-no-content .bk-step-indicator{
        margin-right:0
      }

.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after{
    content:'';
    position:absolute;
    left:100%;
    top:12px;
    width:99999px;
    height:1px;
    background-color:transparent;
  }

.bk-steps .bk-step.bk-step-no-content .bk-step-indicator::after{
          left:32px;
          top:10px;
        }

.bk-steps .bk-step:last-child{
      -webkit-box-flex:0;
          -ms-flex:none;
              flex:none;
      margin-right:0;
    }

.bk-steps .bk-step:last-child .bk-step-title{
        padding-right:0
      }

.bk-steps .bk-step:last-child .bk-step-title::after{
          display:none;
        }

.bk-steps .bk-step.done .bk-step-title{
        color:#63656e;
      }

.bk-steps .bk-step.done .bk-step-description{
        color:#979ba5;
      }

.bk-steps .bk-step.current .bk-step-number,
      .bk-steps .bk-step.current .bk-step-icon,
      .bk-steps .bk-step.current .bk-step-text{
        border-width:2px;
      }

.bk-steps .bk-step.current .bk-step-title,
      .bk-steps .bk-step.current .bk-step-description{
        color:#63656e;
      }

.bk-steps .bk-step.current.bk-step-error .bk-step-indicator{
          background-color:#ff5656;
          border-color:#ff5656;
        }

.bk-steps .bk-step.current.bk-step-error .bk-step-title,
        .bk-steps .bk-step.current.bk-step-error .bk-step-description{
          color:#ff5656;
        }

.bk-steps-info .bk-step.done{
    }

.bk-steps-info .bk-step.done .bk-step-number,
      .bk-steps-info .bk-step.done .bk-step-icon{
        border-color:#88c3ff;
        color:#88c3ff;
      }

.bk-steps-info .bk-step.done .bk-step-title::after, .bk-steps-info .bk-step.done .bk-step-indicator::after{
          background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #88c3ff), color-stop(0%, transparent));
          background-image:linear-gradient(to right, #88c3ff 50%, transparent 0%);
        }

.bk-steps-info .bk-step.done::after{
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #88c3ff), color-stop(0%, transparent));
        background-image:linear-gradient(#88c3ff 50%, transparent 0%);
      }

.bk-steps-info .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-title::after, .bk-steps-info .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-info .bk-step.done:has(+ .current.bk-step-error) .bk-step-title::after, .bk-steps-info .bk-step.done:has(+ .current.bk-step-error) .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-info .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)]::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-info .bk-step.done:has(+ .current.bk-step-error)::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-info .bk-step.current .bk-step-number,
      .bk-steps-info .bk-step.current .bk-step-icon,
      .bk-steps-info .bk-step.current .bk-step-text{
        background-color:#88c3ff;
        border-color:#88c3ff;
        color:#fff;
      }

.bk-steps-success .bk-step.done{
    }

.bk-steps-success .bk-step.done .bk-step-number,
      .bk-steps-success .bk-step.done .bk-step-icon{
        border-color:#2dcb56;
        color:#2dcb56;
      }

.bk-steps-success .bk-step.done .bk-step-title::after, .bk-steps-success .bk-step.done .bk-step-indicator::after{
          background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #2dcb56), color-stop(0%, transparent));
          background-image:linear-gradient(to right, #2dcb56 50%, transparent 0%);
        }

.bk-steps-success .bk-step.done::after{
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #2dcb56), color-stop(0%, transparent));
        background-image:linear-gradient(#2dcb56 50%, transparent 0%);
      }

.bk-steps-success .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-title::after, .bk-steps-success .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-success .bk-step.done:has(+ .current.bk-step-error) .bk-step-title::after, .bk-steps-success .bk-step.done:has(+ .current.bk-step-error) .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-success .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)]::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-success .bk-step.done:has(+ .current.bk-step-error)::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-success .bk-step.current .bk-step-number,
      .bk-steps-success .bk-step.current .bk-step-icon,
      .bk-steps-success .bk-step.current .bk-step-text{
        background-color:#2dcb56;
        border-color:#2dcb56;
        color:#fff;
      }

.bk-steps-warning .bk-step.done{
    }

.bk-steps-warning .bk-step.done .bk-step-number,
      .bk-steps-warning .bk-step.done .bk-step-icon{
        border-color:#ff9c01;
        color:#ff9c01;
      }

.bk-steps-warning .bk-step.done .bk-step-title::after, .bk-steps-warning .bk-step.done .bk-step-indicator::after{
          background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ff9c01), color-stop(0%, transparent));
          background-image:linear-gradient(to right, #ff9c01 50%, transparent 0%);
        }

.bk-steps-warning .bk-step.done::after{
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ff9c01), color-stop(0%, transparent));
        background-image:linear-gradient(#ff9c01 50%, transparent 0%);
      }

.bk-steps-warning .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-title::after, .bk-steps-warning .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-warning .bk-step.done:has(+ .current.bk-step-error) .bk-step-title::after, .bk-steps-warning .bk-step.done:has(+ .current.bk-step-error) .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-warning .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)]::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-warning .bk-step.done:has(+ .current.bk-step-error)::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-warning .bk-step.current .bk-step-number,
      .bk-steps-warning .bk-step.current .bk-step-icon,
      .bk-steps-warning .bk-step.current .bk-step-text{
        background-color:#ff9c01;
        border-color:#ff9c01;
        color:#fff;
      }

.bk-steps-danger .bk-step.done{
    }

.bk-steps-danger .bk-step.done .bk-step-number,
      .bk-steps-danger .bk-step.done .bk-step-icon{
        border-color:#ea3636;
        color:#ea3636;
      }

.bk-steps-danger .bk-step.done .bk-step-title::after, .bk-steps-danger .bk-step.done .bk-step-indicator::after{
          background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
        }

.bk-steps-danger .bk-step.done::after{
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
        background-image:linear-gradient(#ea3636 50%, transparent 0%);
      }

.bk-steps-danger .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-title::after, .bk-steps-danger .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)] .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-danger .bk-step.done:has(+ .current.bk-step-error) .bk-step-title::after, .bk-steps-danger .bk-step.done:has(+ .current.bk-step-error) .bk-step-indicator::after{
            background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #ea3636), color-stop(0%, transparent));
            background-image:linear-gradient(to right, #ea3636 50%, transparent 0%);
          }

.bk-steps-danger .bk-step.done[\:has\(\%2B\%20.current.bk-step-error\)]::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-danger .bk-step.done:has(+ .current.bk-step-error)::after{
          background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #ea3636), color-stop(0%, transparent));
          background-image:linear-gradient(#ea3636 50%, transparent 0%);
        }

.bk-steps-danger .bk-step.current .bk-step-number,
      .bk-steps-danger .bk-step.current .bk-step-icon,
      .bk-steps-danger .bk-step.current .bk-step-text{
        background-color:#ea3636;
        border-color:#ea3636;
        color:#fff;
      }

.bk-steps-dashed .bk-step .bk-step-title::after, .bk-steps-dashed .bk-step .bk-step-indicator::after{
          background-image:-webkit-gradient(linear, left top, right top, color-stop(50%, #c4c6cc), color-stop(0%, transparent));
          background-image:linear-gradient(to right, #c4c6cc 50%, transparent 0%);
          background-position:bottom;
          background-size:6px 1px;
          background-repeat:repeat-x;
        }

.bk-steps-solid .bk-step .bk-step-title::after, .bk-steps-solid .bk-step .bk-step-indicator::after{
          background-color:#c4c6cc;
        }

.bk-steps-vertical{
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    height:100%;
  }

.bk-steps-vertical .bk-step{
      margin-bottom:16px;
      margin-right:0;
    }

.bk-steps-vertical .bk-step .bk-step-title::after, .bk-steps-vertical .bk-step .bk-step-indicator::after{
          display:none;
        }

.bk-steps-vertical .bk-step::after{
        content:'';
        position:absolute;
        left:12px;
        top:40px;
        height:100%;
        width:1px;
        background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #c4c6cc), color-stop(0%, transparent));
        background-image:linear-gradient(#c4c6cc 50%, transparent 0%);
        background-position:right;
        background-size:1px 6px;
        background-repeat:repeat-y;
      }

.bk-steps-vertical .bk-step .bk-step-title{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        height:100%;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        text-align:left;
        margin-top:0;
      }

.bk-steps-small .bk-step .bk-step-indicator{
        width:20px;
        height:20px;
        line-height:20px;
      }

.bk-steps-small .bk-step .bk-step-title{
        font-size:12px;
        line-height:20px;
      }

.bk-steps-small .bk-step .bk-step-number{
        font-size:12px;
      }

.bk-steps-small .bk-step .bk-icon{
        font-size:12px;
        line-height:20px;
      }

.bk-steps-small .bk-step::after{
        left:10px;
        top:28px;
      }

.bk-steps-small .bk-step .bk-step-title::after{
          top:10px;
        }

.bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after{
            left:28px;
            top:8px;
          }