bk-magic-vue 2.5.9-beta.2 → 2.5.9-beta.21

package/lib/ui/steps.css

@@ -1,399 +1,497 @@
 @-webkit-keyframes loadingCircle{
-    100%{
-        -webkit-transform:rotate(360deg);
-                transform:rotate(360deg);
-    }
+  100%{
+    -webkit-transform:rotate(360deg);
+            transform:rotate(360deg);
+  }
 }
 
 @keyframes loadingCircle{
-    100%{
-        -webkit-transform:rotate(360deg);
-                transform:rotate(360deg);
-    }
+  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;
+  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
-    }
+    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;
-        }
+      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,
-            .bk-steps .bk-step.done .bk-step-text{
-                border-color:#3a84ff;
-                color:#3a84ff;
-            }
+      .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%);
-                }
+          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%);
-            }
+        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.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:8px;
-    }
+    -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;
-        }
+      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;
-        }
+      font-size:14px;
+      font-family:arial;
+    }
 
 .bk-steps .bk-step .bk-step-content{
-            display:inline-block;
-            vertical-align:top;
-        }
+      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:8px;
-            line-height:24px;
-        }
+      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;
-    }
+    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;
-        }
+      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
-            }
+        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;
-    }
+    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;
-                }
+          left:32px;
+          top:10px;
+        }
 
 .bk-steps .bk-step:last-child{
-            -webkit-box-flex:0;
-                -ms-flex:none;
-                    flex:none;
-            margin-right:0;
-        }
+      -webkit-box-flex:0;
+          -ms-flex:none;
+              flex:none;
+      margin-right:0;
+    }
 
 .bk-steps .bk-step:last-child .bk-step-title{
-                padding-right:0
-            }
+        padding-right:0
+      }
 
 .bk-steps .bk-step:last-child .bk-step-title::after{
-                    display:none;
-                }
+          display:none;
+        }
 
-.bk-steps .bk-step.done .bk-step-title,
-            .bk-steps .bk-step.done .bk-step-description{
-                color:#63656e;
-            }
+.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-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-description{
+        color:#63656e;
+      }
 
 .bk-steps .bk-step.current.bk-step-error .bk-step-indicator{
-                    background-color:#ff5656;
-                    border-color:#ff5656;
-                }
+          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 .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,
-            .bk-steps-info .bk-step.done .bk-step-text{
-                border-color:#88c3ff;
-                color:#88c3ff;
-            }
+      .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%);
-                }
+          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%);
-            }
+        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-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,
-            .bk-steps-success .bk-step.done .bk-step-text{
-                border-color:#2dcb56;
-                color:#2dcb56;
-            }
+      .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%);
-                }
+          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%);
-            }
+        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-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,
-            .bk-steps-warning .bk-step.done .bk-step-text{
-                border-color:#ff9c01;
-                color:#ff9c01;
-            }
+      .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%);
-                }
+          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%);
-            }
+        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-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,
-            .bk-steps-danger .bk-step.done .bk-step-text{
-                border-color:#ea3636;
-                color:#ea3636;
-            }
+      .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%);
-                }
+          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%);
-            }
+        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-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;
-                }
+          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;
-                }
+          background-color:#c4c6cc;
+        }
 
 .bk-steps-vertical{
-        -webkit-box-orient:vertical;
-        -webkit-box-direction:normal;
-            -ms-flex-direction:column;
-                flex-direction:column;
-        height:100%;
-    }
+    -webkit-box-orient:vertical;
+    -webkit-box-direction:normal;
+        -ms-flex-direction:column;
+            flex-direction:column;
+    height:100%;
+  }
 
 .bk-steps-vertical .bk-step{
-            margin-bottom:8px;
-            margin-right:0;
-        }
+      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;
-                }
+          display:none;
+        }
 
 .bk-steps-vertical .bk-step::after{
-                content:"";
-                position:absolute;
-                left:12px;
-                top:32px;
-                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;
-            }
+        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;
-            }
+        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;
-            }
+        width:20px;
+        height:20px;
+        line-height:20px;
+      }
 
 .bk-steps-small .bk-step .bk-step-title{
-                font-size:12px;
-                line-height:20px;
-            }
+        font-size:12px;
+        line-height:20px;
+      }
 
 .bk-steps-small .bk-step .bk-step-number{
-                font-size:12px;
-            }
+        font-size:12px;
+      }
 
 .bk-steps-small .bk-step .bk-icon{
-                font-size:12px;
-                line-height:20px;
-            }
+        font-size:12px;
+        line-height:20px;
+      }
 
 .bk-steps-small .bk-step::after{
-                left:10px;
-                top:28px;
-            }
+        left:10px;
+        top:28px;
+      }
 
 .bk-steps-small .bk-step .bk-step-title::after{
-                    top:10px;
-                }
+          top:10px;
+        }
 
 .bk-steps-small .bk-step.bk-step-no-content .bk-step-indicator::after{
-                        left:28px;
-                        top:8px;
-                    }
+            left:28px;
+            top:8px;
+          }