Added top buttons for better user experience if wanted. Styling improvements.

Author: hazzo

README.md

@@ -22,6 +22,7 @@ npm install vue-stepper --save
 | :---------------      | :-------  | :--------- |
 |  `steps`           | Array of Objects  | Each object is a step that will be included in the stepper |
 |  `locale`           | String  | Default: `en`. Current options: `en`, `es`. |
+|  `top-buttons`           | Boolean  | Default: `false`. If `true` buttons on the header, at the start and the end of the steps, will be shown for better user experience. |
 
 
 ### Steps object properties

demo/App.vue

@@ -41,7 +41,7 @@
             <div class="container">
                 <div class="columns">
                     <div class="column is-8 is-offset-2">
-                        <horizontal-stepper :steps="demoSteps" @completed-step="completeStep"
+                        <horizontal-stepper :steps="demoSteps" @completed-step="completeStep" :top-buttons="true"
                                             @active-step="isStepActive" @stepper-finished="alert"></horizontal-stepper>
                     </div>
                 </div>

dist/build.js

@@ -33,6 +33,30 @@
   @include shadow(1);
   min-height: 200px;
   .top {
+    .stepper-button-top {
+      z-index: 20;
+      padding: .4rem;
+      border-radius: 100rem;
+      cursor: pointer;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      &.next {
+        border: 2px solid #3383c8;
+        color: #3383c8;
+        right: 1%;
+        &.deactivated {
+          border: 2px solid #cccccc !important;
+          color: #cccccc;
+          cursor: not-allowed !important;
+        }
+      }
+      &.previous {
+        color: #333333;
+        left: 1%;
+      }
+    }
     display: flex;
     align-items: center;
     position: relative;
@@ -63,6 +87,9 @@
         flex-direction: column;
         align-items: center;
         text-align: center;
+        @include breakpoint(xs) {
+          width: 100% !important;
+        }
         &.deactivated {
           @include breakpoint(xs) {
             display: none;
@@ -72,6 +99,9 @@
               background-color: #bbbbbb !important;
             }
           }
+          .step-title {
+            opacity: .35;
+          }
         }
         .circle {
           margin-bottom: 1rem;

dist/build.js.map

@@ -2,9 +2,14 @@
     <div class="stepper-box">
         <div class="top">
             <div class="divider-line"
-                :style="{width: `${(100/(steps.length) * (steps.length - 1)) - 10}%`}"
+                 :style="{width: `${(100/(steps.length) * (steps.length - 1)) - 10}%`}"
             ></div>
             <div class="steps-wrapper">
+                <template v-if="topButtons">
+                    <div v-if="currentStep.index > 0" class="stepper-button-top previous" @click="backStep()">
+                        <i class="material-icons">keyboard_arrow_left</i>
+                    </div>
+                </template>
                 <template v-for="(step, index) in steps">
                     <div :class="['step', isStepActive(index, step)]"
                          :style="{width: `${100 / steps.length}%`}"
@@ -20,6 +25,9 @@
                         </div>
                     </div>
                 </template>
+                <div v-if="topButtons" :class="['stepper-button-top next', !canContinue ? 'deactivated' : '']" @click="nextStep()">
+                    <i class="material-icons">keyboard_arrow_right</i>
+                </div>
             </div>
         </div>
         <div class="content">
@@ -61,6 +69,10 @@
                 type: String,
                 default: 'en'
             },
+            topButtons: {
+                type: Boolean,
+                default: false
+            },
             steps: {
                 type: Array,
                 default: function () {