Add custom bootstrap build with buttons, progress bar and nav

src/assets/tab-wizard/bs_button.scss

@@ -0,0 +1,61 @@
+@import "bs_variables";
+@import "mixins";
+
+.vue-tab-wizard .btn {
+  display: inline-block;
+  margin-bottom: 0; // For input.btn
+  font-weight: $btn-font-weight;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid transparent;
+  white-space: nowrap;
+  @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
+  @include user-select(none);
+
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      @include tab-focus;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    color: $btn-default-color;
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: $cursor-disabled;
+    @include opacity(.65);
+    @include box-shadow(none);
+  }
+
+  // [converter] extracted a& to a.btn
+
+  a.btn {
+    &.disabled,
+    fieldset[disabled] & {
+      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+    }
+  }
+}
+
+
+
+

src/assets/tab-wizard/mixins/_buttons.scss

@@ -86,3 +86,21 @@
    }
 
 }
+
+// Button sizes
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  line-height: $line-height;
+  border-radius: $border-radius;
+}
+
+// WebKit-style focus
+
+@mixin tab-focus() {
+  // WebKit-specific. Other browsers will keep their default outline style.
+  // (Initially tried to also force default via `outline: initial`,
+  // but that seems to erroneously remove the outline in Firefox altogether.)
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}

src/assets/wizard.scss

@@ -1,5 +1,6 @@
-@import "tab-wizard/bs_nav_pills";
-@import "tab-wizard/bs_progress_bar";
+//@import "tab-wizard/bs_button";
+//@import "tab-wizard/bs_nav_pills";
+//@import "tab-wizard/bs_progress_bar";
 @import "tab-wizard/variables";
 @import "tab-wizard/mixins";
 @import "tab-wizard/buttons";

src/components/TabWizard.vue

@@ -127,6 +127,7 @@
       return {
         activeTabIndex: 0,
         isLastStep: false,
+        currentPercentage: 0,
         maxStep: 0,
         tabs: []
       }
@@ -271,6 +272,9 @@
     }
   }
 </script>
+<style>
+  @import "./../assets/tab-wizard/bootstrap.min.css";
+</style>
 <style lang="scss">
   @import "./../assets/wizard";