From e0184b3cb12f12ef1bbee1cb111e173a2f8a37cb Mon Sep 17 00:00:00 2001
From: cristijora <cristian.jora@corebuild.eu>
Date: Sun, 16 Apr 2017 12:58:51 +0300
Subject: [PATCH] Added assets inspired by creative-tim bs wizard

---
 src/App.vue                                   |   3 +-
 src/assets/tab-wizard/_buttons.scss           | 173 ++++++++++++++++++
 src/assets/tab-wizard/_mixins.scss            |   3 +
 src/assets/tab-wizard/_navs-pagination.scss   |  85 +++++++++
 src/assets/tab-wizard/_variables.scss         |  83 +++++++++
 src/assets/tab-wizard/_wizard-card.scss       |  93 ++++++++++
 src/assets/tab-wizard/mixins/_buttons.scss    |  88 +++++++++
 .../tab-wizard/mixins/_transparency.scss      |   6 +
 .../tab-wizard/mixins/_vendor-prefixes.scss   |  51 ++++++
 src/assets/wizard.scss                        |   5 +
 src/components/TabContent.vue                 |   8 +-
 src/components/TabWizard.vue                  |  73 +++++---
 12 files changed, 640 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/tab-wizard/_buttons.scss
 create mode 100644 src/assets/tab-wizard/_mixins.scss
 create mode 100644 src/assets/tab-wizard/_navs-pagination.scss
 create mode 100644 src/assets/tab-wizard/_variables.scss
 create mode 100644 src/assets/tab-wizard/_wizard-card.scss
 create mode 100644 src/assets/tab-wizard/mixins/_buttons.scss
 create mode 100644 src/assets/tab-wizard/mixins/_transparency.scss
 create mode 100644 src/assets/tab-wizard/mixins/_vendor-prefixes.scss
 create mode 100644 src/assets/wizard.scss

diff --git a/src/App.vue b/src/App.vue
index f79b261..7159134 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="app">
+  <div class="col-xs-8 col-xs-offset-2">
+
     <tab-wizard>
       <tab-content title="Personal details">
         My first tab content
diff --git a/src/assets/tab-wizard/_buttons.scss b/src/assets/tab-wizard/_buttons.scss
new file mode 100644
index 0000000..49d1beb
--- /dev/null
+++ b/src/assets/tab-wizard/_buttons.scss
@@ -0,0 +1,173 @@
+.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;
+    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-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,
+     &[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-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;
+}
+
+.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;
+}
+.btn-tooltip{
+    white-space: nowrap;
+}
+
+.buttons-with-margin{
+    .btn {
+        margin-bottom: 5px;
+    }
+}
diff --git a/src/assets/tab-wizard/_mixins.scss b/src/assets/tab-wizard/_mixins.scss
new file mode 100644
index 0000000..3ef25a3
--- /dev/null
+++ b/src/assets/tab-wizard/_mixins.scss
@@ -0,0 +1,3 @@
+@import "mixins/buttons";
+@import "mixins/vendor-prefixes";
+@import "mixins/transparency";
diff --git a/src/assets/tab-wizard/_navs-pagination.scss b/src/assets/tab-wizard/_navs-pagination.scss
new file mode 100644
index 0000000..b073227
--- /dev/null
+++ b/src/assets/tab-wizard/_navs-pagination.scss
@@ -0,0 +1,85 @@
+
+.nav-pills {
+    position: relative;
+    top: 40px;
+    text-align: center;
+    display:flex;
+    flex-wrap:wrap;
+    li,a{
+      flex:1;
+      align-items: center;
+      flex-wrap:wrap;
+      flex-grow: 1;
+    }
+    a{
+      display:flex;
+    }
+    > li + li {
+        margin-left: 0;
+    }
+    > li > a {
+        padding: 0;
+        max-width: 78px;
+        margin: 0 auto;
+        color: $form-placeholder-color;
+        border-radius: 50%;
+        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;
+            color: $form-placeholder-color;
+            outline: 0 !important;
+            cursor: pointer;
+        }
+    }
+
+    > 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;
+            @include transition(.2s, linear);
+        }
+    }
+}
diff --git a/src/assets/tab-wizard/_variables.scss b/src/assets/tab-wizard/_variables.scss
new file mode 100644
index 0000000..92ef34d
--- /dev/null
+++ b/src/assets/tab-wizard/_variables.scss
@@ -0,0 +1,83 @@
+
+$gray-input-bg:              #F3F2EE !default;
+$font-size-base:               14px !default;
+$border-radius-large:           6px !default;
+$success-color:              #7AC29A !default;
+$danger-color:               #EB5E28 !default;
+$padding-large-vertical:       11px !default;
+$padding-large-horizontal:     30px !default;
+$white-color:                #FFFFFF !default;
+
+$form-placeholder-color:     rgba(0,0,0,.2) !default;
+$padding-base-vertical:         7px !default;
+$padding-base-horizontal:       18px !default;
+$height-base:                  40px !default;
+$padding-round-vertical:        9px !default;
+$padding-round-horizontal:     18px !default;
+$padding-small-vertical:        4px !default;
+$padding-small-horizontal:     10px !default;
+$padding-xs-vertical:           2px !default;
+$padding-xs-horizontal:         5px !default;
+$font-weight-normal:         400 !default;
+$margin-large-vertical:        30px !default;
+$margin-base-vertical:         15px !default;
+
+$border-radius-btn-small:      26px !default;
+$border-radius-btn-base:       20px !default;
+$border-radius-btn-large:      50px !default;
+$border-radius-extreme:        6px !default;
+$card-black-color:          #252422 !default;
+$border-radius-none:            0px !default;
+$border-radius-small:           3px !default;
+$border-radius-none-top:      $border-radius-none $border-radius-none 0 0 !default;
+$border-radius-small-top:     $border-radius-small $border-radius-small 0 0 !default;
+
+$border-thick:               2px !default;
+$transparent-bg:             transparent !default;
+$default-color:              #66615B !default;
+$default-states-color:       darken($default-color,11%) !default;
+$fill-font-color:            rgba(255, 255, 255, 0.85);
+
+$fast-transition-time:           150ms !default;
+
+$primary-color:              #7A9E9F !default;
+$primary-states-color:       darken($primary-color,11%) !default;
+
+$success-states-color:       darken($success-color,11%) !default;
+
+$info-color:                 #68B3C8 !default;
+$info-states-color:          darken($info-color,11%) !default;
+
+$warning-color:              #F3BB45 !default;
+$warning-states-color:       darken($warning-color,11%) !default;
+
+$danger-states-color:        darken($danger-color,11%) !default;
+
+$none:                       0   !default;
+
+$font-size-large:              18px !default;
+$font-size-h1:                 3.2em   !default;
+$font-size-h2:                 2.6em     !default;
+$font-size-h3:                 1.825em !default;
+$font-size-h4:                 1.5em   !default;
+$font-size-h5:                 1.25em  !default;
+$font-size-h6:                 0.9em   !default;
+$font-paragraph:               16px    !default;
+$font-size-navbar:             16px    !default;
+$font-size-small:              12px    !default;
+$font-size-xs:                 12px !default;
+
+$font-weight-light:          300 !default;
+$font-weight-normal:         400 !default;
+$font-weight-semi:           500 !default;
+$font-weight-bold:           600 !default;
+
+$line-height-general:          1.4em !default;
+$line-height-small:            20px !default;
+
+
+$color-azure:                #23CCEF;
+$color-red:                  #FB404B;
+$color-green:                #7AC29A;
+$color-orange:               #FFA534;
+$color-blue:                 #447DF7;
diff --git a/src/assets/tab-wizard/_wizard-card.scss b/src/assets/tab-wizard/_wizard-card.scss
new file mode 100644
index 0000000..2f2b71a
--- /dev/null
+++ b/src/assets/tab-wizard/_wizard-card.scss
@@ -0,0 +1,93 @@
+.vue-tab-wizard{
+    padding-bottom:20px;
+    .icon-circle{
+        font-size: 20px;
+        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;
+        top: -2px;
+
+        [class*="ti-"]{
+            position: absolute;
+            z-index: 1;
+            left: 1px;
+            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: 105px 20px 10px;
+    }
+
+    .wizard-footer{
+        padding: 0 15px 5px;
+    }
+
+
+    .wizard-header{
+        padding: 15px 15px 15px 15px;
+        position: relative;
+        border-radius: 3px 3px 0 0;
+        z-index: 3;
+        text-align: center;
+    }
+
+    .wizard-title{
+        color: $card-black-color;
+        font-weight: $font-weight-light;
+        margin: 0;
+        text-align:center;
+    }
+
+    .category{
+        font-size: 14px;
+        font-weight: 400;
+        color: #9A9A9A;
+        margin-bottom: 0px;
+        text-align: center;
+    }
+
+    .wizard-navigation{
+        .progress-with-circle{
+            position: relative;
+            top: 40px;
+            z-index: 50;
+            height: 4px;
+
+            .progress-bar{
+                box-shadow: none;
+                -webkit-transition: width .3s ease;
+                -o-transition: width .3s ease;
+                transition: width .3s ease;
+            }
+        }
+    }
+}
diff --git a/src/assets/tab-wizard/mixins/_buttons.scss b/src/assets/tab-wizard/mixins/_buttons.scss
new file mode 100644
index 0000000..69e7b6a
--- /dev/null
+++ b/src/assets/tab-wizard/mixins/_buttons.scss
@@ -0,0 +1,88 @@
+@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;
+   }
+
+}
diff --git a/src/assets/tab-wizard/mixins/_transparency.scss b/src/assets/tab-wizard/mixins/_transparency.scss
new file mode 100644
index 0000000..bf0ebd9
--- /dev/null
+++ b/src/assets/tab-wizard/mixins/_transparency.scss
@@ -0,0 +1,6 @@
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: #{alpha(opacity=$opacity-ie)};
+}
diff --git a/src/assets/tab-wizard/mixins/_vendor-prefixes.scss b/src/assets/tab-wizard/mixins/_vendor-prefixes.scss
new file mode 100644
index 0000000..da5a27c
--- /dev/null
+++ b/src/assets/tab-wizard/mixins/_vendor-prefixes.scss
@@ -0,0 +1,51 @@
+@mixin box-shadow($shadow...) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+          box-shadow: $shadow;
+}
+
+@mixin transition($time, $type){
+    -webkit-transition: all $time $type;
+    -moz-transition: all $time $type;
+    -o-transition: all $time $type;
+    -ms-transition: all $time $type;
+    transition: all $time $type;
+}
+
+@mixin transition-font-size($time, $type) {
+    -webkit-transition: font-size $time $type;
+    -moz-transition: font-size $time $type;
+    -o-transition: font-size $time $type;
+    -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;
+        }
+    }
+}
diff --git a/src/assets/wizard.scss b/src/assets/wizard.scss
new file mode 100644
index 0000000..71d1a20
--- /dev/null
+++ b/src/assets/wizard.scss
@@ -0,0 +1,5 @@
+@import "tab-wizard/variables";
+@import "tab-wizard/mixins";
+@import "tab-wizard/buttons";
+@import "tab-wizard/navs-pagination";
+@import "tab-wizard/wizard-card";
diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index 6fe8934..a649a80 100644
--- a/src/components/TabContent.vue
+++ b/src/components/TabContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show">
+  <div v-if="show" class="tab-container">
     <slot>
     </slot>
   </div>
@@ -24,4 +24,8 @@
     }
   }
 </script>
-
+<style>
+  .tab-container{
+    margin-top:20px;
+  }
+</style>
diff --git a/src/components/TabWizard.vue b/src/components/TabWizard.vue
index d1d32a3..6c2e1ac 100644
--- a/src/components/TabWizard.vue
+++ b/src/components/TabWizard.vue
@@ -1,24 +1,34 @@
 <template>
-  <div>
-    <div class="header text-center">
-      <h4 class="title">{{title}}</h4>
-      <p class="category">{{subtitle}}</p>
+  <div class="vue-tab-wizard" data-color="orange">
+    <div class="wizard-header">
+      <slot name="title" class="wizard-title">
+        <h4 class="wizard-title">{{title}}</h4>
+        <p class="category">{{subtitle}}</p>
+      </slot>
     </div>
-    <div class="content">
-      <div>
-        <ul class="nav nav-pills">
-          <li v-for="(tab, index) in tabs" :class="tab.active ? 'active' : ''">
-            <a href="" @click.prevent="navigateToTab(index)">{{tab.title}}</a>
-          </li>
-        </ul>
-        <div class="tab-content">
-          <slot>
-          </slot>
-        </div>
+    <div class="wizard-navigation">
+      <div class="progress-with-circle">
+        <div class="progress-bar" role="progressbar"
+             :style="progressStyle"></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)}">
+              <i class="ti-user"></i>
+            </div>
+            {{tab.title}}
+          </a>
+        </li>
+      </ul>
+      <div class="tab-content">
+        <slot>
+        </slot>
       </div>
     </div>
+
     <div class="card-footer">
-      <button v-if="displayPrevButton" type="button" class="btn btn-default btn-fill btn-wd btn-back pull-left"
+      <button v-if="displayPrevButton" type="button" class="btn btn-previous btn-default btn-wd"
               @click="prevTab">
         {{backButtonText}}
       </button>
@@ -70,9 +80,25 @@
       },
       displayPrevButton () {
         return this.activeTabIndex !== 0
+      },
+      stepPercentage () {
+        return 1 / (this.tabCount * 2) * 100
+      },
+      progressStyle () {
+        let percentage = 0
+        if (this.activeTabIndex > 0) {
+          let stepsToAdd = (this.activeTabIndex % 2 === 0) ? 3 : 2
+          percentage = this.stepPercentage * (this.activeTabIndex + stepsToAdd)
+        } else {
+          percentage = this.stepPercentage
+        }
+        return `width: ${percentage}%;`
       }
     },
     methods: {
+      isChecked (index) {
+        return index <= this.maxStep
+      },
       navigateToTab (index) {
         if (index <= this.maxStep && this.beforeTabChange(this.activeTabIndex)) {
           this.changeTab(this.activeTabIndex, index)
@@ -149,17 +175,8 @@
         }
       }
     }
-}
+  }
 </script>
-<style>
-  .card-wizard .nav-pills {
-    display: flex;
-  }
-
-  .card-wizard .nav-pills li,
-  .card-wizard .nav-pills a {
-    display: flex;
-    justify-content: center;
-    flex: 1;
-  }
+<style lang="scss">
+  @import "./../assets/wizard";
 </style>