Full color customization

Css cleanup (reduce css size in half)

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="col-xs-8 col-xs-offset-2">
-    <tab-wizard @on-complete="onComplete">
+    <tab-wizard @on-complete="onComplete"
+                class="card"
+                :startIndex="2"
+                color="#27ae60">
       <tab-content title="Personal details"
                    icon="ti-user">
         My first tab content
@@ -8,11 +11,23 @@
       <tab-content title="Additional Info"
                    icon="ti-settings">
         My second tab content
+        My second tab content
+        My second tab content
+        My second tab content
+        My second tab content
+        My second tab content
       </tab-content>
       <tab-content title="Last step"
                    icon="ti-check">
         Yuhuuu! This seems pretty damn simple
       </tab-content>
+
+      <button slot="prev" class="btn btn-default">
+        Go back
+      </button>
+      <button slot="next" class="btn btn-default">
+        Go to next step
+      </button>
     </tab-wizard>
   </div>
 </template>
@@ -28,3 +43,30 @@
     }
   }
 </script>
+<style lang="scss">
+  $border-radius-extreme:        6px !default;
+  $white-color: white;
+  $gray-input-bg:              #F3F2EE !default;
+  $card-black-color:          #252422 !default;
+
+  body {
+    margin-top:20px;
+    background-color:#ecf0f1;
+  }
+
+  .card-footer{
+    padding:0px 20px;
+  }
+
+  .card{
+    border-radius: $border-radius-extreme;
+    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+    background-color: $white-color;
+    color: $card-black-color;
+    padding: 10px 0;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+  }
+
+</style>

src/assets/tab-wizard/_buttons.scss

@@ -1,6 +1,5 @@
 .btn,
 .navbar .navbar-nav > li > a.btn{
-    border-radius: $border-radius-btn-base;
     box-sizing: border-box;
     border-width: $border-thick;
     background-color: $transparent-bg;
@@ -48,55 +47,7 @@
 // Apply the mixin to the buttons
 //.btn-default { @include btn-styles($default-color, $default-states-color); }
 .navbar .navbar-nav > li > a.btn.btn-primary, .btn-primary { @include btn-styles($primary-color, $primary-states-color); }
-.navbar .navbar-nav > li > a.btn.btn-success, .btn-success { @include btn-styles($success-color, $success-states-color); }
 .navbar .navbar-nav > li > a.btn.btn-info, .btn-info    { @include btn-styles($info-color, $info-states-color); }
-.navbar .navbar-nav > li > a.btn.btn-warning, .btn-warning { @include btn-styles($warning-color, $warning-states-color); }
-.navbar .navbar-nav > li > a.btn.btn-danger, .btn-danger  { @include btn-styles($danger-color, $danger-states-color); }
-
-.btn-neutral {
-    @include btn-styles($white-color, $white-color);
-
-    &:hover,
-    &:focus{
-        color: $default-color;
-        i{
-            color: $default-color;
-            opacity: 1;
-        }
-    }
-
-    &:active,
-    &.active,
-    .open > &.dropdown-toggle{
-        background-color: $white-color;
-        color: $default-color;
-        i{
-            color: $default-color;
-            opacity: 1;
-        }
-    }
-
-    &.btn-fill{
-        color: $default-color;
-        i{
-            color: $default-color;
-            opacity: 1;
-        }
-    }
-    &.btn-fill:hover,
-    &.btn-fill:focus{
-        color: $default-states-color;
-        i{
-            color: $default-states-color;
-            opacity: 1;
-        }
-    }
-
-    &.btn-simple:active,
-    &.btn-simple.active{
-        background-color: transparent;
-    }
-}
 
 .btn{
      &:disabled,
@@ -115,36 +66,6 @@
 
 }
 
-.navbar .navbar-nav > li > a.btn.btn-lg,
-.btn-lg{
-   @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-btn-large, $line-height-small);
-   font-weight: $font-weight-normal;
-    &.btn-icon{
-        border-radius: 30px;
-        padding: 9px 16px;
-    }
-}
-.navbar .navbar-nav > li > a.btn.btn-sm,
-.btn-sm{
-    @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-btn-small, $line-height-small);
-    &.btn-icon{
-        padding: 3px 6px;
-        .fa{
-            line-height: 1.6;
-            width: 15px;
-        }
-    }
-}
-.navbar .navbar-nav > li > a.btn.btn-xs,
-.btn-xs{
-    @include btn-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $border-radius-btn-small, $line-height-small);
-    &.btn-icon{
-        padding: 1px 5px;
-        .fa{
-            width: 10px;
-        }
-    }
-}
 .navbar .navbar-nav > li > a.btn.btn-wd,
 .btn-wd{
     min-width: 140px;
@@ -162,12 +83,3 @@
     margin-top: -1px;
     right: 8px;
 }
-.btn-tooltip{
-    white-space: nowrap;
-}
-
-.buttons-with-margin{
-    .btn {
-        margin-bottom: 5px;
-    }
-}

src/assets/tab-wizard/_navs-pagination.scss

@@ -26,20 +26,6 @@
         position: relative;
         top: -32px;
         z-index: 100;
-
-        &:after{
-            content: '';
-            width: 70px;
-            height: 70px;
-            border-radius: 50%;
-            display: inline-block;
-            position: absolute;
-            right: -1px;
-            top: -4px;
-            transform: scale(0);
-            transition: .2s all linear;
-        }
-
         &:hover,
         &:focus{
             background-color: transparent;
@@ -49,36 +35,19 @@
         }
     }
 
-    > li.active > a{
-
-        &:after{
-            content: '';
-            width: 70px;
-            height: 70px;
-            border-radius: 50%;
-            display: inline-block;
-            position: absolute;
-            right: 5px;
-            top: -2px;
-            @include scale(1);
-            @include transition(.2s, linear);
-        }
-
-
-    }
-
     > li.active > a,
     > li.active > a:hover,
     > li.active > a:focus {
         background-color: transparent;
-        font-size: 15px;
         @include transition-font-size(.2s, linear);
 
 
         [class*="ti-"]{
             color: $white-color;
             font-size: 24px;
-            top: 21px;
+            display:flex;
+            align-items:center;
+            justify-content: center;
             @include transition(.2s, linear);
         }
     }

src/assets/tab-wizard/_wizard-card.scss

@@ -1,57 +1,39 @@
 .vue-tab-wizard{
     padding-bottom:20px;
     .icon-circle{
-        font-size: 20px;
+        font-size: 18px;
         border: 3px solid $gray-input-bg;
-        text-align: center;
         border-radius: 50%;
-        color: $form-placeholder-color;
         font-weight: $font-weight-bold;
         width: 70px;
         height: 70px;
         background-color: $white-color;
-        margin: 0 auto;
         position: relative;
+        display:flex;
+        justify-content: center;
+        align-content: center;
         top: -2px;
-
+       .icon-container{
+         display:flex;
+         justify-content: center;
+         flex:1;
+       }
         [class*="ti-"]{
-            position: absolute;
+          display:flex;
-            z-index: 1;
+          align-items: center;
-            left: 1px;
+          justify-content: center;
-            right: 0px;
-            top: 23px;
         }
     }
 
-    &[data-color="azure"]{
-        @include set-wizard-color($primary-color);
-    }
-
-    &[data-color="green"]{
-        @include set-wizard-color($success-color);
-    }
-    &[data-color="blue"]{
-        @include set-wizard-color($info-color);
-    }
-
-    &[data-color="orange"]{
-        @include set-wizard-color($warning-color);
-    }
-
-    &[data-color="red"]{
-        @include set-wizard-color($danger-color);
-    }
-
     .tab-content{
         min-height: 200px;
         padding: 30px 20px 10px;
     }
 
-    .wizard-footer{
+    .card-footer{
-        padding: 0 15px 5px;
+        padding: 0 20px;
     }
 
-
     .wizard-header{
         padding: 15px 15px 15px 15px;
         position: relative;

src/assets/tab-wizard/mixins/_vendor-prefixes.scss

@@ -18,34 +18,3 @@
     -ms-transition: font-size $time $type;
     transition: font-size $time $type;
 }
-
-@mixin scale($value) {
-    -webkit-transform: scale($value);
-    -moz-transform: scale($value);
-    -o-transition: scale($value);
-    -ms-transform: scale($value);
-    transform: scale($value);
-}
-
-@mixin set-wizard-color($color) {
-    .nav-pills{
-        > li.active > a{
-            &:after{
-              background-color: $color;
-            }
-            color: $color;
-        }
-
-        .icon-circle{
-            &.checked{
-                border-color: $color;
-            }
-        }
-    }
-
-    .wizard-navigation{
-        .progress-bar{
-            background-color: $color;
-        }
-    }
-}

src/components/TabContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="tab-container">
+  <div v-show="show" class="tab-container">
     <slot>
     </slot>
   </div>

src/components/TabWizard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vue-tab-wizard" data-color="orange">
+  <div class="vue-tab-wizard">
     <div class="wizard-header">
       <slot name="title" class="wizard-title">
         <h4 class="wizard-title">{{title}}</h4>
@@ -8,16 +8,25 @@
     </div>
     <div class="wizard-navigation">
       <div class="progress-with-circle">
-        <div class="progress-bar" role="progressbar"
+        <div class="progress-bar"
-             :style="progressStyle"></div>
+             :style="progressBarStyle"></div>
       </div>
       <ul class="nav nav-pills">
         <li v-for="(tab, index) in tabs" :class="{active:tab.active}">
           <a href="" @click.prevent="navigateToTab(index)">
-            <div class="icon-circle" :class="{checked:isChecked(index)}">
+            <div class="icon-circle" :class="{checked:isChecked(index)}"
-              <i v-if="tab.icon" :class="tab.icon"></i>
+                 :style="isChecked(index)? stepCheckedStyle : {}">
+              <transition :name="transition" mode="out-in">
+                <div v-if="tab.active" class="icon-container" :style="tab.active ? iconActiveStyle: {}">
+                  <i v-if="tab.icon" :class="tab.icon"></i>
+                </div>
+                <i v-if="!tab.active && tab.icon" :class="tab.icon"></i>
+              </transition>
             </div>
-            {{tab.title}}
+            <span class="stepTitle" :style="tab.active ? stepTitleStyle : {}">
+              {{tab.title}}
+            </span>
+
           </a>
         </li>
       </ul>
@@ -28,16 +37,36 @@
     </div>
 
     <div class="card-footer">
-      <button v-if="displayPrevButton" type="button" class="btn btn-previous btn-default btn-wd"
+      <template>
-              @click="prevTab">
+        <span @click="prevTab" v-if="displayPrevButton">
-        {{backButtonText}}
+          <slot name="prev">
-      </button>
+            <button  type="button" class="btn btn-default btn-wd">
-      <button v-if="isLastStep" type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="finish">
+              {{backButtonText}}
-        {{finishButtonText}}
+            </button>
-      </button>
+          </slot>
-      <button v-else type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="nextTab">
+        </span>
-        {{nextButtonText}}
+      </template>
-      </button>
+
+      <template>
+         <span @click="finish" class="pull-right" v-if="isLastStep">
+           <slot name="finish">
+             <button type="button" class="btn btn-fill btn-wd btn-next pull-right">
+              {{finishButtonText}}
+            </button>
+          </slot>
+        </span>
+      </template>
+
+      <template>
+        <span @click="nextTab" class="pull-right" v-if="!isLastStep">
+         <slot name="next">
+           <button type="button" class="btn btn-fill btn-wd btn-next">
+            {{nextButtonText}}
+           </button>
+         </slot>
+       </span>
+      </template>
+
       <div class="clearfix"></div>
     </div>
   </div>
@@ -64,6 +93,18 @@
       finishButtonText: {
         type: String,
         default: 'Finish'
+      },
+      color: {
+        type: String,
+        default: '#e74c3c'
+      },
+      transition: {
+        type: String,
+        default: ''
+      },
+      startIndex: {
+        type: Number,
+        default: 0
       }
     },
     data () {
@@ -84,7 +125,30 @@
       stepPercentage () {
         return 1 / (this.tabCount * 2) * 100
       },
-      progressStyle () {
+      progressBarStyle () {
+        return {
+          backgroundColor: this.color,
+          width: `${this.progress}%`,
+          color: this.color
+        }
+      },
+      iconActiveStyle () {
+        return {
+          backgroundColor: this.color,
+          borderRadius: '40%'
+        }
+      },
+      stepCheckedStyle () {
+        return {
+          borderColor: this.color
+        }
+      },
+      stepTitleStyle () {
+        return {
+          color: this.color
+        }
+      },
+      progress () {
         let percentage = 0
         if (this.activeTabIndex > 0) {
           let stepsToAdd = (this.activeTabIndex % 2 === 0) ? 3 : 2
@@ -92,7 +156,7 @@
         } else {
           percentage = this.stepPercentage
         }
-        return `width: ${percentage}%;`
+        return percentage
       }
     },
     methods: {
@@ -170,6 +234,12 @@
         firstTab.show = true
         firstTab.active = true
       }
+      if (this.startIndex < this.tabs.length) {
+        this.activeTabIndex = this.startIndex
+        this.maxStep = this.startIndex
+      } else {
+        console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)
+      }
     },
     watch: {
       activeTabIndex: function (newVal, oldVal) {
@@ -182,4 +252,13 @@
 </script>
 <style lang="scss">
   @import "./../assets/wizard";
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .15s
+  }
+
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */
+  {
+    opacity: 0
+  }
 </style>