From 66c38f79007578926e12322a32ef48f02f1de2ea Mon Sep 17 00:00:00 2001
From: cristijora <joracristi@gmail.com>
Date: Thu, 25 May 2017 09:13:25 +0300
Subject: [PATCH] #9, #11 Change css to contain more specific class names

---
 dev-example/App.vue                          |  2 +-
 dist/vue-form-wizard.js                      |  2 +-
 dist/vue-form-wizard.min.css                 |  2 +-
 src/assets/form-wizard/_buttons.scss         |  8 +-
 src/assets/form-wizard/_navs-pagination.scss |  2 +-
 src/assets/form-wizard/_wizard-card.scss     | 17 ++--
 src/assets/form-wizard/bs_button.scss        |  2 +-
 src/assets/form-wizard/bs_nav_pills.scss     |  2 +-
 src/assets/form-wizard/bs_progress_bar.scss  |  2 +-
 src/assets/form-wizard/mixins/_buttons.scss  | 89 --------------------
 src/components/FormWizard.vue                | 24 +++---
 11 files changed, 30 insertions(+), 122 deletions(-)

diff --git a/dev-example/App.vue b/dev-example/App.vue
index 7e46f3e..7ad0049 100644
--- a/dev-example/App.vue
+++ b/dev-example/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <form-wizard @on-complete="onComplete"
-                 shape="square"
+                 shape="circle"
                  color="gray"
                  @on-loading="setLoading"
                  @on-error="setError"
diff --git a/dist/vue-form-wizard.js b/dist/vue-form-wizard.js
index cec7245..12d3889 100644
--- a/dist/vue-form-wizard.js
+++ b/dist/vue-form-wizard.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,i){var a,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(a=t,r=t.default);var o="function"==typeof r?r.options:r;if(e&&(o.render=e.render,o.staticRenderFns=e.staticRenderFns),n&&(o._scopeId=n),i){var c=Object.create(o.computed||null);Object.keys(i).forEach(function(t){var e=i[t];c[t]=function(){return e}}),o.computed=c}return{esModule:a,exports:r,options:o}}},function(t,e,n){n(6);var i=n(0)(n(3),n(7),"data-v-146e8f26",null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){var i=n(0)(n(4),n(8),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:function(t){return t>=0}}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},errorStyle:function(){return{borderColor:this.errorColor,backgroundColor:this.errorColor}},stepTitleStyle:function(){return{color:this.tabs[this.activeTabIndex].validationError?this.errorColor:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){var t=0;if(this.activeTabIndex>0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){var e=this;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};this.beforeTabChange(this.activeTabIndex,n)}},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},setValidationError:function(t){this.tabs[this.activeTabIndex].validationError=t,this.$emit("on-error",t)},validateBeforeChange:function(t,e){var n=this;if(this.setValidationError(null),t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){n.setLoading(!1);var i=!0===t;n.executeBeforeChange(i,e)}).catch(function(t){n.setLoading(!1),n.setValidationError(t)});else{var i=!0===t;this.executeBeforeChange(i,e)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t?e():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange:function(t,e){if(!this.loading){var n=this.tabs[t];if(n&&void 0!==n.beforeChange){var i=n.beforeChange();this.validateBeforeChange(i,e)}else e()}},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.active=!1),i&&(i.active=!0),this.activeTabIndex=e,this.checkStep(),this.tryChangeRoute(i),this.increaseMaxStep(),!0},tryChangeRoute:function(t){this.$router&&t.route&&this.$router.push(t.route)},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){var t=this,e=function(){t.activeTabIndex<t.tabCount-1?t.changeTab(t.activeTabIndex,t.activeTabIndex+1):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this,e=function(){t.activeTabIndex>0&&(t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.beforeTabChange(this.activeTabIndex,e)},finish:function(){var t=this,e=function(){t.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0&&0===this.startIndex){var t=this.tabs[this.activeTabIndex];t.active=!0,this.tryChangeRoute(t)}if(this.startIndex<this.tabs.length){var e=this.tabs[this.startIndex];this.activeTabIndex=this.startIndex,e.active=!0,this.maxStep=this.startIndex,this.tryChangeRoute(this.tabs[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")}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function},route:{type:[String,Object]}},data:function(){return{active:!1,validationError:null}}}},function(t,e,n){t.exports={FormWizard:n(1),TabContent:n(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-form-wizard"},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"progress-with-circle"},[n("div",{staticClass:"progress-bar",style:t.progressBarStyle})]),t._v(" "),n("ul",{staticClass:"nav nav-pills"},t._l(t.tabs,function(e,i){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(i)}}},[n("div",{staticClass:"icon-circle",class:{checked:t.isChecked(i),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[t.isChecked(i)?t.stepCheckedStyle:{},e.validationError?t.errorStyle:{}]},[n("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?n("div",{staticClass:"icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[e.active?t.iconActiveStyle:{},e.validationError?t.errorStyle:{}]},[e.icon?n("i",{staticClass:"icon",class:e.icon}):n("i",{staticClass:"icon"},[t._v(t._s(i+1))])]):t._e(),t._v(" "),!e.active&&e.icon?n("i",{staticClass:"icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():n("i",{staticClass:"icon"},[t._v(t._s(i+1))])])],1),t._v(" "),n("span",{staticClass:"stepTitle",class:{active:e.active,has_error:e.validationError},style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"card-footer"},[[t.displayPrevButton?n("span",{staticClass:"card-footer-left",on:{click:t.prevTab}},[t._t("prev",[n("button",{staticClass:"btn btn-default btn-wd",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?n("span",{staticClass:"card-footer-right",on:{click:t.finish}},[t._t("finish",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():n("span",{staticClass:"card-footer-right",on:{click:t.nextTab}},[t._t("next",[n("button",{staticClass:"btn btn-fill btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)]],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.active?n("div",{staticClass:"tab-container"},[t._t("default")],2):t._e()},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueFormWizard=e():t.VueFormWizard=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return t[i].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}([function(t,e){t.exports=function(t,e,n,i){var a,r=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(a=t,r=t.default);var o="function"==typeof r?r.options:r;if(e&&(o.render=e.render,o.staticRenderFns=e.staticRenderFns),n&&(o._scopeId=n),i){var c=Object.create(o.computed||null);Object.keys(i).forEach(function(t){var e=i[t];c[t]=function(){return e}}),o.computed=c}return{esModule:a,exports:r,options:o}}},function(t,e,n){n(6);var i=n(0)(n(3),n(7),"data-v-146e8f26",null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\FormWizard.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] FormWizard.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){var i=n(0)(n(4),n(8),null,null);i.options.__file="C:\\work\\vue-tab-wizard\\src\\components\\TabContent.vue",i.esModule&&Object.keys(i.esModule).some(function(t){return"default"!==t&&"__esModule"!==t})&&console.error("named exports are not supported in *.vue files."),i.options.functional&&console.error("[vue-loader] TabContent.vue: functional components are not supported with templates, they should use render functions."),t.exports=i.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{title:{type:String,default:"Awesome Wizard"},subtitle:{type:String,default:"Split a complicated flow in multiple steps"},nextButtonText:{type:String,default:"Next"},backButtonText:{type:String,default:"Back"},finishButtonText:{type:String,default:"Finish"},color:{type:String,default:"#e74c3c"},errorColor:{type:String,default:"#8b0000"},shape:{type:String,default:"circle"},transition:{type:String,default:""},startIndex:{type:Number,default:0,validator:function(t){return t>=0}}},data:function(){return{activeTabIndex:0,isLastStep:!1,currentPercentage:0,maxStep:0,loading:!1,tabs:[]}},computed:{tabCount:function(){return this.tabs.length},displayPrevButton:function(){return 0!==this.activeTabIndex},stepPercentage:function(){return 1/(2*this.tabCount)*100},progressBarStyle:function(){return{backgroundColor:this.color,width:this.progress+"%",color:this.color}},iconActiveStyle:function(){return{backgroundColor:this.color}},stepCheckedStyle:function(){return{borderColor:this.color}},errorStyle:function(){return{borderColor:this.errorColor,backgroundColor:this.errorColor}},stepTitleStyle:function(){return{color:this.tabs[this.activeTabIndex].validationError?this.errorColor:this.color}},isStepSquare:function(){return"square"===this.shape},isTabShape:function(){return"tab"===this.shape},fillButtonStyle:function(){return{backgroundColor:this.color,borderColor:this.color,color:"white"}},progress:function(){var t=0;if(this.activeTabIndex>0){t=this.stepPercentage*(2*this.activeTabIndex+1)}else t=this.stepPercentage;return t}},methods:{isChecked:function(t){return t<=this.maxStep},navigateToTab:function(t){var e=this;if(t<=this.maxStep){var n=function(){e.changeTab(e.activeTabIndex,t)};this.beforeTabChange(this.activeTabIndex,n)}},setLoading:function(t){this.loading=t,this.$emit("on-loading",t)},setValidationError:function(t){this.tabs[this.activeTabIndex].validationError=t,this.$emit("on-error",t)},validateBeforeChange:function(t,e){var n=this;if(this.setValidationError(null),t.then&&"function"==typeof t.then)this.setLoading(!0),t.then(function(t){n.setLoading(!1);var i=!0===t;n.executeBeforeChange(i,e)}).catch(function(t){n.setLoading(!1),n.setValidationError(t)});else{var i=!0===t;this.executeBeforeChange(i,e)}},executeBeforeChange:function(t,e){this.$emit("on-validate",t,this.activeTabIndex),t?e():this.tabs[this.activeTabIndex].validationError="error"},beforeTabChange:function(t,e){if(!this.loading){var n=this.tabs[t];if(n&&void 0!==n.beforeChange){var i=n.beforeChange();this.validateBeforeChange(i,e)}else e()}},changeTab:function(t,e){var n=this.tabs[t],i=this.tabs[e];return n&&(n.active=!1),i&&(i.active=!0),this.activeTabIndex=e,this.checkStep(),this.tryChangeRoute(i),this.increaseMaxStep(),!0},tryChangeRoute:function(t){this.$router&&t.route&&this.$router.push(t.route)},checkStep:function(){this.activeTabIndex===this.tabCount-1?this.isLastStep=!0:this.isLastStep=!1},increaseMaxStep:function(){this.activeTabIndex>this.maxStep&&(this.maxStep=this.activeTabIndex)},nextTab:function(){var t=this,e=function(){t.activeTabIndex<t.tabCount-1?t.changeTab(t.activeTabIndex,t.activeTabIndex+1):(t.isLastStep=!0,t.$emit("finished"))};this.beforeTabChange(this.activeTabIndex,e)},prevTab:function(){var t=this,e=function(){t.activeTabIndex>0&&(t.changeTab(t.activeTabIndex,t.activeTabIndex-1),t.isLastStep=!1)};this.beforeTabChange(this.activeTabIndex,e)},finish:function(){var t=this,e=function(){t.$emit("on-complete")};this.beforeTabChange(this.activeTabIndex,e)}},mounted:function(){if(this.tabs=this.$children.filter(function(t){return"tab-content"===t.$options.name}),this.tabs.length>0&&0===this.startIndex){var t=this.tabs[this.activeTabIndex];t.active=!0,this.tryChangeRoute(t)}if(this.startIndex<this.tabs.length){var e=this.tabs[this.startIndex];this.activeTabIndex=this.startIndex,e.active=!0,this.maxStep=this.startIndex,this.tryChangeRoute(this.tabs[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")}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"tab-content",props:{title:{type:String,default:""},icon:{type:String,default:""},beforeChange:{type:Function},route:{type:[String,Object]}},data:function(){return{active:!1,validationError:null}}}},function(t,e,n){t.exports={FormWizard:n(1),TabContent:n(2),install:function(e){e.component("form-wizard",t.exports.FormWizard),e.component("tab-content",t.exports.TabContent)}}},function(t,e){},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-form-wizard"},[n("div",{staticClass:"wizard-header"},[t._t("title",[n("h4",{staticClass:"wizard-title"},[t._v(t._s(t.title))]),t._v(" "),n("p",{staticClass:"category"},[t._v(t._s(t.subtitle))])])],2),t._v(" "),n("div",{staticClass:"wizard-navigation"},[n("div",{staticClass:"wizard-progress-with-circle"},[n("div",{staticClass:"wizard-progress-bar",style:t.progressBarStyle})]),t._v(" "),n("ul",{staticClass:"wizard-nav wizard-nav-pills"},t._l(t.tabs,function(e,i){return n("li",{class:{active:e.active}},[n("a",{attrs:{href:""},on:{click:function(e){e.preventDefault(),t.navigateToTab(i)}}},[n("div",{staticClass:"wizard-icon-circle",class:{checked:t.isChecked(i),square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[t.isChecked(i)?t.stepCheckedStyle:{},e.validationError?t.errorStyle:{}]},[n("transition",{attrs:{name:t.transition,mode:"out-in"}},[e.active?n("div",{staticClass:"wizard-icon-container",class:{square_shape:t.isStepSquare,tab_shape:t.isTabShape},style:[e.active?t.iconActiveStyle:{},e.validationError?t.errorStyle:{}]},[e.icon?n("i",{staticClass:"icon",class:e.icon}):n("i",{staticClass:"icon"},[t._v(t._s(i+1))])]):t._e(),t._v(" "),!e.active&&e.icon?n("i",{staticClass:"icon",class:e.icon}):t._e(),t._v(" "),e.active||e.icon?t._e():n("i",{staticClass:"icon"},[t._v(t._s(i+1))])])],1),t._v(" "),n("span",{staticClass:"stepTitle",class:{active:e.active,has_error:e.validationError},style:e.active?t.stepTitleStyle:{}},[t._v("\n            "+t._s(e.title)+"\n          ")])])])})),t._v(" "),n("div",{staticClass:"tab-content"},[t._t("default")],2)]),t._v(" "),n("div",{staticClass:"wizard-card-footer"},[[t.displayPrevButton?n("span",{staticClass:"wizard-footer-left",on:{click:t.prevTab}},[t._t("prev",[n("button",{staticClass:"wizard-btn btn-default wizard-btn-wd",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n            "+t._s(t.backButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?n("span",{staticClass:"wizard-footer-right",on:{click:t.finish}},[t._t("finish",[n("button",{staticClass:"wizard-btn btn-fill wizard-btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button"}},[t._v("\n            "+t._s(t.finishButtonText)+"\n          ")])])],2):t._e()],t._v(" "),[t.isLastStep?t._e():n("span",{staticClass:"wizard-footer-right",on:{click:t.nextTab}},[t._t("next",[n("button",{staticClass:"wizard-btn btn-fill wizard-btn-wd btn-next",style:t.fillButtonStyle,attrs:{type:"button",disabled:t.loading}},[t._v("\n          "+t._s(t.nextButtonText)+"\n         ")])])],2)]],2)])},staticRenderFns:[]},t.exports.render._withStripped=!0},function(t,e,n){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.active?n("div",{staticClass:"tab-container"},[t._t("default")],2):t._e()},staticRenderFns:[]},t.exports.render._withStripped=!0}])});
\ No newline at end of file
diff --git a/dist/vue-form-wizard.min.css b/dist/vue-form-wizard.min.css
index 203e4ae..19cd1df 100644
--- a/dist/vue-form-wizard.min.css
+++ b/dist/vue-form-wizard.min.css
@@ -1 +1 @@
-.vue-form-wizard .btn[data-v-146e8f26]{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857;border-radius:4px}.vue-form-wizard .btn.disabled[data-v-146e8f26],.vue-form-wizard .btn[disabled][data-v-146e8f26],fieldset[disabled] .vue-form-wizard .btn[data-v-146e8f26]{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);box-shadow:none}.vue-form-wizard [data-v-146e8f26]{box-sizing:border-box}.vue-form-wizard a[data-v-146e8f26]{text-decoration:none}.vue-form-wizard .nav[data-v-146e8f26]{margin-bottom:0;padding-left:0;list-style:none}.vue-form-wizard .nav>li[data-v-146e8f26]{position:relative;display:block}.vue-form-wizard .nav>li>a[data-v-146e8f26]{position:relative;display:block;padding:10px 15px}.vue-form-wizard .nav>li>a[data-v-146e8f26]:focus,.vue-form-wizard .nav>li>a[data-v-146e8f26]:hover{text-decoration:none;background-color:#eee}.vue-form-wizard .nav>li.disabled>a[data-v-146e8f26]{color:#777}.vue-form-wizard .nav>li.disabled>a[data-v-146e8f26]:focus,.vue-form-wizard .nav>li.disabled>a[data-v-146e8f26]:hover{color:#777;text-decoration:none;background-color:transparent;cursor:not-allowed}.vue-form-wizard .progress-bar[data-v-146e8f26]{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);transition:width .6s ease}.vue-form-wizard .btn[data-v-146e8f26],.vue-form-wizard .navbar .navbar-nav>li>a.btn[data-v-146e8f26]{box-sizing:border-box;border-width:2px;background-color:transparent;font-size:14px;font-weight:600;padding:6px 12px}.vue-form-wizard .btn[data-v-146e8f26]:focus,.vue-form-wizard .btn[data-v-146e8f26]:hover,.vue-form-wizard .navbar .navbar-nav>li>a.btn[data-v-146e8f26]:focus,.vue-form-wizard .navbar .navbar-nav>li>a.btn[data-v-146e8f26]:hover{outline:0!important}.vue-form-wizard .btn-wd[data-v-146e8f26],.vue-form-wizard .navbar .navbar-nav>li>a.btn.btn-wd[data-v-146e8f26]{min-width:140px}.vue-form-wizard .nav-pills[data-v-146e8f26]{margin-top:0;position:relative;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.vue-form-wizard .nav-pills a[data-v-146e8f26],.vue-form-wizard .nav-pills li[data-v-146e8f26]{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1}.vue-form-wizard .nav-pills>li>a[data-v-146e8f26],.vue-form-wizard .nav-pills a[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-form-wizard .nav-pills>li>a[data-v-146e8f26]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0 auto;color:rgba(0,0,0,.2);position:relative;top:3px;z-index:100}.vue-form-wizard .nav-pills>li>a[data-v-146e8f26]:focus,.vue-form-wizard .nav-pills>li>a[data-v-146e8f26]:hover{background-color:transparent;color:rgba(0,0,0,.2);outline:0!important;cursor:pointer}.vue-form-wizard .nav-pills>li.active>a[data-v-146e8f26],.vue-form-wizard .nav-pills>li.active>a[data-v-146e8f26]:focus,.vue-form-wizard .nav-pills>li.active>a[data-v-146e8f26]:hover{background-color:transparent;transition:font-size .2s linear}.vue-form-wizard .nav-pills>li.active>a .icon[data-v-146e8f26],.vue-form-wizard .nav-pills>li.active>a:focus .icon[data-v-146e8f26],.vue-form-wizard .nav-pills>li.active>a:hover .icon[data-v-146e8f26]{color:#fff;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;transition:all .2s linear}.vue-form-wizard[data-v-146e8f26]{padding-bottom:20px}.vue-form-wizard .is_error[data-v-146e8f26]{border-color:#c84513!important}.vue-form-wizard .is_error .icon-container[data-v-146e8f26]{background:#c84513!important}.vue-form-wizard .icon-circle[data-v-146e8f26]{font-size:18px;border:3px solid #f3f2ee;border-radius:50%;font-weight:600;width:70px;height:70px;background-color:#fff;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}.vue-form-wizard .icon-circle.square_shape[data-v-146e8f26]{border-radius:0}.vue-form-wizard .icon-circle.tab_shape[data-v-146e8f26]{width:100%;min-width:100px;height:40px;border:none;background-color:#f3f2ee;border-radius:0}.vue-form-wizard .icon-circle .icon-container[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:40%}.vue-form-wizard .icon-circle .icon-container.square_shape[data-v-146e8f26],.vue-form-wizard .icon-circle .icon-container.tab_shape[data-v-146e8f26]{border-radius:0}.vue-form-wizard .icon-circle .icon[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vue-form-wizard .tab-content[data-v-146e8f26]{min-height:100px;padding:30px 20px 10px}.vue-form-wizard .card-footer[data-v-146e8f26]{padding:0 20px}.vue-form-wizard .wizard-header[data-v-146e8f26]{padding:15px;position:relative;border-radius:3px 3px 0 0;z-index:3;text-align:center}.vue-form-wizard .wizard-title[data-v-146e8f26]{color:#252422;font-weight:300;margin:0;text-align:center}.vue-form-wizard .category[data-v-146e8f26]{font-size:14px;font-weight:400;color:#9a9a9a;margin-bottom:0;text-align:center}.vue-form-wizard .wizard-navigation .progress-with-circle[data-v-146e8f26]{position:relative;top:40px;z-index:50;height:4px}.vue-form-wizard .wizard-navigation .progress-with-circle .progress-bar[data-v-146e8f26]{box-shadow:none;transition:width .3s ease}.vue-form-wizard .card-footer[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}.vue-form-wizard .card-footer .card-footer-left[data-v-146e8f26]{-webkit-box-flex:1;-ms-flex:1;flex:1;justify-self:flex-start}.fade-enter-active[data-v-146e8f26],.fade-leave-active[data-v-146e8f26]{transition:opacity .15s}.fade-enter[data-v-146e8f26],.fade-leave-to[data-v-146e8f26]{opacity:0}
\ No newline at end of file
+.vue-form-wizard .wizard-btn[data-v-146e8f26]{display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857;border-radius:4px}.vue-form-wizard .wizard-btn.disabled[data-v-146e8f26],.vue-form-wizard .wizard-btn[disabled][data-v-146e8f26],fieldset[disabled] .vue-form-wizard .wizard-btn[data-v-146e8f26]{cursor:not-allowed;opacity:.65;filter:alpha(opacity=65);box-shadow:none}.vue-form-wizard [data-v-146e8f26]{box-sizing:border-box}.vue-form-wizard a[data-v-146e8f26]{text-decoration:none}.vue-form-wizard .wizard-nav[data-v-146e8f26]{margin-bottom:0;padding-left:0;list-style:none}.vue-form-wizard .wizard-nav>li[data-v-146e8f26]{position:relative;display:block}.vue-form-wizard .wizard-nav>li>a[data-v-146e8f26]{position:relative;display:block;padding:10px 15px}.vue-form-wizard .wizard-nav>li>a[data-v-146e8f26]:focus,.vue-form-wizard .wizard-nav>li>a[data-v-146e8f26]:hover{text-decoration:none;background-color:#eee}.vue-form-wizard .wizard-nav>li.disabled>a[data-v-146e8f26]{color:#777}.vue-form-wizard .wizard-nav>li.disabled>a[data-v-146e8f26]:focus,.vue-form-wizard .wizard-nav>li.disabled>a[data-v-146e8f26]:hover{color:#777;text-decoration:none;background-color:transparent;cursor:not-allowed}.vue-form-wizard .wizard-progress-bar[data-v-146e8f26]{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);transition:width .6s ease}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn[data-v-146e8f26],.vue-form-wizard .wizard-btn[data-v-146e8f26]{box-sizing:border-box;border-width:2px;background-color:transparent;font-size:14px;font-weight:600;padding:6px 12px}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn[data-v-146e8f26]:focus,.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn[data-v-146e8f26]:hover,.vue-form-wizard .wizard-btn[data-v-146e8f26]:focus,.vue-form-wizard .wizard-btn[data-v-146e8f26]:hover{outline:0!important}.vue-form-wizard .navbar .navbar-nav>li>a.wizard-btn.wizard-btn-wd[data-v-146e8f26],.vue-form-wizard .wizard-btn-wd[data-v-146e8f26]{min-width:140px}.vue-form-wizard .wizard-nav-pills[data-v-146e8f26]{margin-top:0;position:relative;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.vue-form-wizard .wizard-nav-pills a[data-v-146e8f26],.vue-form-wizard .wizard-nav-pills li[data-v-146e8f26]{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-positive:1;flex-grow:1}.vue-form-wizard .wizard-nav-pills a[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-form-wizard .wizard-nav-pills>li>a[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0;margin:0 auto;color:rgba(0,0,0,.2);position:relative;top:3px;z-index:100}.vue-form-wizard .wizard-nav-pills>li>a[data-v-146e8f26]:focus,.vue-form-wizard .wizard-nav-pills>li>a[data-v-146e8f26]:hover{background-color:transparent;color:rgba(0,0,0,.2);outline:0!important;cursor:pointer}.vue-form-wizard .wizard-nav-pills>li.active>a[data-v-146e8f26],.vue-form-wizard .wizard-nav-pills>li.active>a[data-v-146e8f26]:focus,.vue-form-wizard .wizard-nav-pills>li.active>a[data-v-146e8f26]:hover{background-color:transparent;transition:font-size .2s linear}.vue-form-wizard .wizard-nav-pills>li.active>a .icon[data-v-146e8f26],.vue-form-wizard .wizard-nav-pills>li.active>a:focus .icon[data-v-146e8f26],.vue-form-wizard .wizard-nav-pills>li.active>a:hover .icon[data-v-146e8f26]{color:#fff;font-size:24px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;transition:all .2s linear}.vue-form-wizard[data-v-146e8f26]{padding-bottom:20px}.vue-form-wizard .is_error[data-v-146e8f26]{border-color:#c84513!important}.vue-form-wizard .is_error .icon-container[data-v-146e8f26]{background:#c84513!important}.vue-form-wizard .wizard-icon-circle[data-v-146e8f26]{font-size:18px;border:3px solid #f3f2ee;border-radius:50%;font-weight:600;width:70px;height:70px;background-color:#fff;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}.vue-form-wizard .wizard-icon-circle.square_shape[data-v-146e8f26]{border-radius:0}.vue-form-wizard .wizard-icon-circle.tab_shape[data-v-146e8f26]{width:100%;min-width:100px;height:40px;border:none;background-color:#f3f2ee;border-radius:0}.vue-form-wizard .wizard-icon-circle .wizard-icon-container[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:40%}.vue-form-wizard .wizard-icon-circle .wizard-icon-container.square_shape[data-v-146e8f26],.vue-form-wizard .wizard-icon-circle .wizard-icon-container.tab_shape[data-v-146e8f26]{border-radius:0}.vue-form-wizard .wizard-icon-circle .icon[data-v-146e8f26]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.vue-form-wizard .tab-content[data-v-146e8f26]{min-height:100px;padding:30px 20px 10px}.vue-form-wizard .wizard-header[data-v-146e8f26]{padding:15px;position:relative;border-radius:3px 3px 0 0;z-index:3;text-align:center}.vue-form-wizard .wizard-title[data-v-146e8f26]{color:#252422;font-weight:300;margin:0;text-align:center}.vue-form-wizard .category[data-v-146e8f26]{font-size:14px;font-weight:400;color:#9a9a9a;margin-bottom:0;text-align:center}.vue-form-wizard .wizard-navigation .wizard-progress-with-circle[data-v-146e8f26]{position:relative;top:40px;z-index:50;height:4px}.vue-form-wizard .wizard-navigation .wizard-progress-with-circle .wizard-progress-bar[data-v-146e8f26]{box-shadow:none;transition:width .3s ease}.vue-form-wizard .wizard-card-footer[data-v-146e8f26]{padding:0 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}.vue-form-wizard .wizard-card-footer .wizard-footer-left[data-v-146e8f26]{-webkit-box-flex:1;-ms-flex:1;flex:1;justify-self:flex-start}.fade-enter-active[data-v-146e8f26],.fade-leave-active[data-v-146e8f26]{transition:opacity .15s}.fade-enter[data-v-146e8f26],.fade-leave-to[data-v-146e8f26]{opacity:0}
\ No newline at end of file
diff --git a/src/assets/form-wizard/_buttons.scss b/src/assets/form-wizard/_buttons.scss
index 1b6c2b9..d15610f 100644
--- a/src/assets/form-wizard/_buttons.scss
+++ b/src/assets/form-wizard/_buttons.scss
@@ -1,5 +1,5 @@
-.vue-form-wizard .btn,
-.vue-form-wizard .navbar .navbar-nav > li > a.btn {
+.vue-form-wizard .wizard-btn,
+.vue-form-wizard .navbar .navbar-nav > li > a.wizard-btn {
   box-sizing: border-box;
   border-width: $border-thick;
   background-color: $transparent-bg;
@@ -13,8 +13,8 @@
 }
 
 .vue-form-wizard {
-  .navbar .navbar-nav > li > a.btn.btn-wd,
-  .btn-wd {
+  .navbar .navbar-nav > li > a.wizard-btn.wizard-btn-wd,
+  .wizard-btn-wd {
     min-width: 140px;
   }
 }
diff --git a/src/assets/form-wizard/_navs-pagination.scss b/src/assets/form-wizard/_navs-pagination.scss
index 996dcff..820394d 100644
--- a/src/assets/form-wizard/_navs-pagination.scss
+++ b/src/assets/form-wizard/_navs-pagination.scss
@@ -1,4 +1,4 @@
-.vue-form-wizard .nav-pills {
+.vue-form-wizard .wizard-nav-pills {
     margin-top:0;
     position: relative;
     text-align: center;
diff --git a/src/assets/form-wizard/_wizard-card.scss b/src/assets/form-wizard/_wizard-card.scss
index fc57d17..a92067c 100644
--- a/src/assets/form-wizard/_wizard-card.scss
+++ b/src/assets/form-wizard/_wizard-card.scss
@@ -6,7 +6,7 @@
       background: $danger-states-color !important;
     }
   }
-  .icon-circle {
+  .wizard-icon-circle {
     font-size: 18px;
     border: 3px solid $gray-input-bg;
     border-radius: 50%;
@@ -29,7 +29,7 @@
       background-color: $gray-input-bg;
       border-radius: 0;
     }
-    .icon-container {
+    .wizard-icon-container {
       display: flex;
       justify-content: center;
       flex: 1;
@@ -50,10 +50,6 @@
     padding: 30px 20px 10px;
   }
 
-  .card-footer {
-    padding: 0 20px;
-  }
-
   .wizard-header {
     padding: 15px 15px 15px 15px;
     position: relative;
@@ -78,13 +74,13 @@
   }
 
   .wizard-navigation {
-    .progress-with-circle {
+    .wizard-progress-with-circle {
       position: relative;
       top: 40px;
       z-index: 50;
       height: 4px;
 
-      .progress-bar {
+      .wizard-progress-bar {
         box-shadow: none;
         -webkit-transition: width .3s ease;
         -o-transition: width .3s ease;
@@ -93,13 +89,14 @@
     }
   }
 
-  .card-footer{
+  .wizard-card-footer{
+    padding: 0 20px;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     flex-wrap:wrap;
     flex-flow: row wrap;
-    .card-footer-left{
+    .wizard-footer-left{
       flex:1;
       justify-self:flex-start;
     }
diff --git a/src/assets/form-wizard/bs_button.scss b/src/assets/form-wizard/bs_button.scss
index a98767b..a2a5098 100644
--- a/src/assets/form-wizard/bs_button.scss
+++ b/src/assets/form-wizard/bs_button.scss
@@ -1,7 +1,7 @@
 @import "bs_variables";
 @import "mixins";
 
-.vue-form-wizard .btn {
+.vue-form-wizard .wizard-btn {
   display: inline-block;
   margin-bottom: 0; // For input.btn
   font-weight: $btn-font-weight;
diff --git a/src/assets/form-wizard/bs_nav_pills.scss b/src/assets/form-wizard/bs_nav_pills.scss
index 0514478..fe6ca44 100644
--- a/src/assets/form-wizard/bs_nav_pills.scss
+++ b/src/assets/form-wizard/bs_nav_pills.scss
@@ -6,7 +6,7 @@
 .vue-form-wizard a{
   text-decoration: none;
 }
-.vue-form-wizard .nav {
+.vue-form-wizard .wizard-nav {
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol
   list-style: none;
diff --git a/src/assets/form-wizard/bs_progress_bar.scss b/src/assets/form-wizard/bs_progress_bar.scss
index 6a4f9d9..c337fe3 100644
--- a/src/assets/form-wizard/bs_progress_bar.scss
+++ b/src/assets/form-wizard/bs_progress_bar.scss
@@ -7,7 +7,7 @@
 }
 
 // Bar of progress
-.vue-form-wizard .progress-bar {
+.vue-form-wizard .wizard-progress-bar {
   float: left;
   width: 0%;
   height: 100%;
diff --git a/src/assets/form-wizard/mixins/_buttons.scss b/src/assets/form-wizard/mixins/_buttons.scss
index d3e590c..b26699c 100644
--- a/src/assets/form-wizard/mixins/_buttons.scss
+++ b/src/assets/form-wizard/mixins/_buttons.scss
@@ -1,92 +1,3 @@
-@mixin btn-styles($btn-color, $btn-states-color) {
-  border-color: $btn-color;
-  color: $btn-color;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &.active,
-  &:active:focus,
-  &:active:hover,
-  .open > &.dropdown-toggle,
-  .open > &.dropdown-toggle:focus,
-  .open > &.dropdown-toggle:hover {
-      background-color: $btn-color ;
-      color: $fill-font-color ;
-      border-color: $btn-color ;
-      .caret{
-          border-top-color: $fill-font-color;
-      }
-  }
-
-  &.disabled,
-  &:disabled,
-  &[disabled],
-  fieldset[disabled] & {
-    &,
-    &:hover,
-    &:focus,
-    &.focus,
-    &:active,
-    &.active {
-      background-color: $transparent-bg;
-      border-color: $btn-color;
-    }
-  }
-
-
-  &.btn-fill {
-    color: $white-color;
-    background-color: $btn-color;
-    @include opacity(1);
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.active,
-    .open > &.dropdown-toggle{
-        background-color: $btn-states-color;
-        color: $white-color;
-        border-color: $btn-states-color;
-    }
-
-    .caret{
-        border-top-color: $white-color;
-    }
-  }
-
-  &.btn-simple {
-    &:hover,
-    &:focus,
-    &:active,
-    &.active,
-    .open > &.dropdown-toggle{
-        background-color: $transparent-bg;
-        color: $btn-states-color;
-    }
-
-    .caret{
-        border-top-color: $white-color;
-    }
-  }
-
-  .caret{
-      border-top-color: $btn-color;
-  }
-}
-
-
-@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border, $line-height){
-   font-size: $font-size;
-   border-radius: $border;
-   padding: $padding-vertical $padding-horizontal;
-
-   &.btn-simple{
-       padding: $padding-vertical + 2 $padding-horizontal;
-   }
-
-}
-
 // Button sizes
 @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
   padding: $padding-vertical $padding-horizontal;
diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index c2267a9..2707570 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -7,19 +7,19 @@
       </slot>
     </div>
     <div class="wizard-navigation">
-      <div class="progress-with-circle">
-        <div class="progress-bar"
+      <div class="wizard-progress-with-circle">
+        <div class="wizard-progress-bar"
              :style="progressBarStyle"></div>
       </div>
-      <ul class="nav nav-pills">
+      <ul class="wizard-nav wizard-nav-pills">
         <li v-for="(tab, index) in tabs" :class="{active:tab.active}">
           <a href="" @click.prevent="navigateToTab(index)">
-            <div class="icon-circle"
+            <div class="wizard-icon-circle"
                  :class="{checked:isChecked(index),square_shape:isStepSquare, tab_shape:isTabShape}"
                  :style="[isChecked(index)? stepCheckedStyle : {}, tab.validationError ? errorStyle : {}]">
 
               <transition :name="transition" mode="out-in">
-                <div v-if="tab.active" class="icon-container"
+                <div v-if="tab.active" class="wizard-icon-container"
                      :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
                      :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
                   <i v-if="tab.icon" :class="tab.icon" class="icon"></i>
@@ -45,11 +45,11 @@
       </div>
     </div>
 
-    <div class="card-footer">
+    <div class="wizard-card-footer">
       <template>
-        <span @click="prevTab" v-if="displayPrevButton" class="card-footer-left">
+        <span @click="prevTab" v-if="displayPrevButton" class="wizard-footer-left">
           <slot name="prev">
-            <button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle" :disabled="loading">
+            <button type="button" class="wizard-btn btn-default wizard-btn-wd" :style="fillButtonStyle" :disabled="loading">
               {{backButtonText}}
             </button>
           </slot>
@@ -57,9 +57,9 @@
       </template>
 
       <template>
-         <span @click="finish" class="card-footer-right" v-if="isLastStep">
+         <span @click="finish" class="wizard-footer-right" v-if="isLastStep">
            <slot name="finish">
-             <button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle">
+             <button type="button" class="wizard-btn btn-fill wizard-btn-wd btn-next" :style="fillButtonStyle">
               {{finishButtonText}}
             </button>
           </slot>
@@ -67,9 +67,9 @@
       </template>
 
       <template>
-        <span @click="nextTab" class="card-footer-right" v-if="!isLastStep">
+        <span @click="nextTab" class="wizard-footer-right" v-if="!isLastStep">
          <slot name="next">
-           <button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle" :disabled="loading">
+           <button type="button" class="wizard-btn btn-fill wizard-btn-wd btn-next" :style="fillButtonStyle" :disabled="loading">
             {{nextButtonText}}
            </button>
          </slot>