Theme update and cosmetics on steps demo

public/themes/luna-amber/theme.css

@@ -23,6 +23,10 @@
   color: #cd3a3a;
 }
 
+.p-text-secondary {
+  color: #888888;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/luna-green/theme.css

@@ -23,6 +23,10 @@
   color: #cd3a3a;
 }
 
+.p-text-secondary {
+  color: #888888;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/luna-pink/theme.css

@@ -23,6 +23,10 @@
   color: #cd3a3a;
 }
 
+.p-text-secondary {
+  color: #888888;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/nova-colored/theme.css

@@ -23,6 +23,10 @@
   color: #a80000;
 }
 
+.p-text-secondary {
+  color: #848484;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/nova-dark/theme.css

@@ -23,6 +23,10 @@
   color: #a80000;
 }
 
+.p-text-secondary {
+  color: #848484;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/nova-light/theme.css

@@ -23,6 +23,10 @@
   color: #a80000;
 }
 
+.p-text-secondary {
+  color: #848484;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/nova-vue/theme.css

@@ -23,6 +23,10 @@
   color: #a80000;
 }
 
+.p-text-secondary {
+  color: #848484;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/rhea/theme.css

@@ -23,6 +23,10 @@
   color: e7a3a3;
 }
 
+.p-text-secondary {
+  color: #a6a6a6;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-blue/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-cyan/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-deeppurple/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-green/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-indigo/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-orange/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-purple/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/saga-teal/theme.css

@@ -23,6 +23,10 @@
   color: #f44336;
 }
 
+.p-text-secondary {
+  color: #6c757d;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-blue/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-cyan/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-deeppurple/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-green/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-indigo/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-orange/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-purple/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

public/themes/vela-teal/theme.css

@@ -23,6 +23,10 @@
   color: #e57373;
 }
 
+.p-text-secondary {
+  color: #AEB6BF;
+}
+
 .pi {
   font-size: 1rem;
 }

src/views/steps/ConfirmationDemo.vue

@@ -44,7 +44,7 @@
             </template>
             <template slot="footer">
                 <div class="p-grid p-nogutter p-justify-between">
-                    <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>
                 </div>
             </template>

src/views/steps/PaymentDemo.vue

@@ -5,6 +5,7 @@
                 Payment Information
             </template>
             <template slot="content">
+                <p class="p-text-secondary">Enter your card details</p>
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12">
                         <label for="class">Class</label>
@@ -30,7 +31,7 @@
             </template>
             <template slot="footer">
                 <div class="p-grid p-nogutter p-justify-between">
-                    <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
             </template>

src/views/steps/PersonalDemo.vue

@@ -5,6 +5,7 @@
                 Personal Information
             </template>
             <template slot="content">
+                <p class="p-text-secondary">Enter your information</p>
                 <div class="p-fluid">
                     <div class="p-field">
                         <label for="firstname">Firstname</label>
@@ -25,7 +26,7 @@
             </template>
             <template slot="footer">
                 <div class="p-grid p-nogutter p-justify-between">
-                    <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                    <i></i>
                     <Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
                 </div>
             </template>

src/views/steps/SeatDemo.vue

@@ -5,6 +5,7 @@
                 Seat Information
             </template>
             <template slot="content">
+                <p class="p-text-secondary">Choose your seat</p>
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12 p-md-6">
                         <label for="class">Class</label>
@@ -22,7 +23,7 @@
             </template>
             <template slot="footer">
                 <div class="p-grid p-nogutter p-justify-between">
-                    <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
             </template>

src/views/steps/StepsDoc.vue

@@ -186,6 +186,7 @@ export default {
             Personal Information
         </template>
         <template slot="content">
+            <p class="p-text-secondary">Enter your information</p>
             <div class="p-fluid">
                 <div class="p-field">
                     <label for="firstname">Firstname</label>
@@ -206,7 +207,7 @@ export default {
         </template>
         <template slot="footer">
             <div class="p-grid p-nogutter p-justify-between">
-                <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                <i></i>
                 <Button label="Next" @click="nextPage(!$v.$invalid)" icon="pi pi-angle-right" iconPos="right" />
             </div>
         </template>
@@ -261,6 +262,7 @@ export default {
                 Seat Information
             </template>
             <template slot="content">
+                <p class="p-text-secondary">Choose your seat</p>
                 <div class="p-fluid p-formgrid p-grid">
                     <div class="p-field p-col-12 p-md-6">
                         <label for="class">Class</label>
@@ -278,7 +280,7 @@ export default {
             </template>
             <template slot="footer">
                 <div class="p-grid p-nogutter p-justify-between">
-                    <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                    <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
             </template>
@@ -340,6 +342,7 @@ export default {
             Payment Information
         </template>
         <template slot="content">
+            <p class="p-text-secondary">Enter your card details</p>
             <div class="p-fluid p-formgrid p-grid">
                 <div class="p-field p-col-12">
                     <label for="class">Class</label>
@@ -365,7 +368,7 @@ export default {
         </template>
         <template slot="footer">
             <div class="p-grid p-nogutter p-justify-between">
-                <Button label="Back" :disabled="true" class="disabled-button" icon="pi pi-angle-left" />
+                <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                 <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
             </div>
         </template>
@@ -444,7 +447,7 @@ export default {
         </template>
         <template slot="footer">
             <div class="p-grid p-nogutter p-justify-between">
-                <Button label="Back" class="disabled-button" @click="prevPage()" icon="pi pi-angle-left" />
+                <Button label="Back" @click="prevPage()"  icon="pi pi-angle-left" />
                 <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>
             </div>
         </template>