Reduce css size in half

Move dev example to dev folder

build/webpack.base.conf.js

@@ -9,7 +9,7 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './dev/main.js'
   },
   output: {
     path: config.build.assetsRoot,

dev/App.vue

@@ -1,22 +1,61 @@
 <template>
-  <div id="app">
+  <div>
-    <tab-wizard>
+    <form-wizard @on-complete="onComplete"
-      <tab-content title="Personal details">
+                shape="circle"
+                color="#e74c3c"
+                class="card">
+      <tab-content title="Personal details"
+                   icon="ti-user">
         My first tab content
       </tab-content>
-      <tab-content title="Additional Info">
+      <tab-content title="Additional Info"
+                   icon="ti-settings">
         My second tab content
       </tab-content>
-      <tab-content title="Last step">
+      <tab-content title="Last step"
+                   icon="ti-check">
         Yuhuuu! This seems pretty damn simple
       </tab-content>
-    </tab-wizard>
+
+    </form-wizard>
   </div>
 </template>
 
 <script>
 
-export default {
+  export default {
-  name: 'app',
+    name: 'app',
-}
+    methods: {
+      onComplete () {
+        alert('Yay!')
+      }
+    }
+  }
 </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>

dev/main.js

@@ -1,9 +1,7 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App.vue'
-import TabWizard from './../src/index';
+import FormWizard from './../src/index'
-Vue.use(TabWizard);
+Vue.use(FormWizard)
 
 Vue.config.productionTip = false
 
@@ -11,5 +9,5 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   template: '<App/>',
-  components: { App }
+  components: {App}
-});
+})

src/App.vue

@@ -1,61 +0,0 @@
-<template>
-  <div>
-    <form-wizard @on-complete="onComplete"
-                shape="circle"
-                color="#e74c3c"
-                class="card">
-      <tab-content title="Personal details"
-                   icon="ti-user">
-        My first tab content
-      </tab-content>
-      <tab-content title="Additional Info"
-                   icon="ti-settings">
-        My second tab content
-      </tab-content>
-      <tab-content title="Last step"
-                   icon="ti-check">
-        Yuhuuu! This seems pretty damn simple
-      </tab-content>
-
-    </form-wizard>
-  </div>
-</template>
-
-<script>
-
-  export default {
-    name: 'app',
-    methods: {
-      onComplete () {
-        alert('Yay!')
-      }
-    }
-  }
-</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/form-wizard/_buttons.scss

@@ -0,0 +1,39 @@
+.btn,
+.navbar .navbar-nav > li > a.btn{
+    box-sizing: border-box;
+    border-width: $border-thick;
+    background-color: $transparent-bg;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
+
+    padding: $padding-base-vertical $padding-base-horizontal;
+
+    &:hover,
+    &:focus{
+        outline: 0 !important;
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+         @include box-shadow(none);
+         outline: 0 !important;
+    }
+
+    &.btn-icon{
+        border-radius: 25px;
+        padding: 7px 10px;
+        i{
+          margin-right: 0px;
+        }
+    }
+}
+
+
+.btn-disabled{
+    cursor: default;
+}
+
+.navbar .navbar-nav > li > a.btn.btn-wd,
+.btn-wd{
+    min-width: 140px;
+}

src/assets/form-wizard/bs_button.scss

@@ -13,7 +13,7 @@
   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);
+  //@include user-select(none);
 
   &,
   &:active,

src/assets/tab-wizard/_buttons.scss

@@ -1,85 +0,0 @@
-.btn,
-.navbar .navbar-nav > li > a.btn{
-    box-sizing: border-box;
-    border-width: $border-thick;
-    background-color: $transparent-bg;
-    font-size: $font-size-base;
-    font-weight: $font-weight-bold;
-
-    padding: $padding-base-vertical $padding-base-horizontal;
-
-    @include btn-styles($default-color, $default-states-color);
-    @include transition($fast-transition-time, linear);
-
-    &:hover,
-    &:focus{
-        outline: 0 !important;
-    }
-    &:active,
-    &.active,
-    .open > &.dropdown-toggle {
-         @include box-shadow(none);
-         outline: 0 !important;
-    }
-
-    &.btn-icon{
-        border-radius: 25px;
-        padding: 7px 10px;
-        i{
-          margin-right: 0px;
-        }
-    }
-
-    [class*="ti-"]{
-        vertical-align: middle;
-    }
-
-}
-
-.btn-group .btn + .btn,
-.btn-group .btn + .btn-group,
-.btn-group .btn-group + .btn,
-.btn-group .btn-group + .btn-group{
-    margin-left: -2px;
-
-}
-
-// 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-info, .btn-info    { @include btn-styles($info-color, $info-states-color); }
-
-.btn{
-     &:disabled,
-     &[disabled],
-     &.disabled,
-     &.btn-disabled{
-        @include opacity(.5);
-    }
-}
-.btn-disabled{
-    cursor: default;
-}
-.btn-simple{
-    border: $none;
-    padding: $padding-base-vertical $padding-base-horizontal;
-
-}
-
-.navbar .navbar-nav > li > a.btn.btn-wd,
-.btn-wd{
-    min-width: 140px;
-}
-
-.btn-group.select{
-    width: 100%;
-}
-.btn-group.select .btn{
-    text-align: left;
-}
-.btn-group.select .caret{
-    position: absolute;
-    top: 50%;
-    margin-top: -1px;
-    right: 8px;
-}

src/assets/wizard.scss

@@ -1,8 +1,8 @@
-//@import "tab-wizard/bs_button";
+/*@import "form-wizard/bs_button";
-//@import "tab-wizard/bs_nav_pills";
+@import "form-wizard/bs_nav_pills";
-//@import "tab-wizard/bs_progress_bar";
+@import "form-wizard/bs_progress_bar";*/
-@import "tab-wizard/variables";
+@import "form-wizard/variables";
-@import "tab-wizard/mixins";
+@import "form-wizard/mixins";
-@import "tab-wizard/buttons";
+@import "form-wizard/buttons";
-@import "tab-wizard/navs-pagination";
+@import "form-wizard/navs-pagination";
-@import "tab-wizard/wizard-card";
+@import "form-wizard/wizard-card";

src/components/FormWizard.vue

@@ -281,7 +281,7 @@
   }
 </script>
 <style>
-  @import "./../assets/tab-wizard/bootstrap.min.css";
+  @import "../assets/form-wizard/bootstrap.min.css";
 </style>
 <style lang="scss">
   @import "./../assets/wizard";

src/main.js

@@ -1,15 +0,0 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App.vue'
-import FormWizard from './index'
-Vue.use(FormWizard)
-
-Vue.config.productionTip = false
-
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  template: '<App/>',
-  components: {App}
-})