#9, #11 Change css to contain more specific class names

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"

src/assets/form-wizard/_buttons.scss

@@ -1,5 +1,5 @@
-.vue-form-wizard .btn,
+.vue-form-wizard .wizard-btn,
-.vue-form-wizard .navbar .navbar-nav > li > a.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,
+  .navbar .navbar-nav > li > a.wizard-btn.wizard-btn-wd,
-  .btn-wd {
+  .wizard-btn-wd {
     min-width: 140px;
   }
 }

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;

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;
     }

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;

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;

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%;

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;

src/components/FormWizard.vue

@@ -7,19 +7,19 @@
       </slot>
     </div>
     <div class="wizard-navigation">
-      <div class="progress-with-circle">
+      <div class="wizard-progress-with-circle">
-        <div class="progress-bar"
+        <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>