mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-18 13:30:32 +03:00
Code Activity

Full color customization

Browse Source 
Css cleanup (reduce css size in half)
This commit is contained in:
cristijora
2017-04-16 18:18:15 +03:00
parent 25b2c548a6
commit 57c0c7fbb6
9 changed files with 160 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/vue-tab-wizard.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/vue-tab-wizard.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/App.vue
+43 -1
View File
@@ -1,6 +1,9 @@
<template>
<div class="col-xs-8 col-xs-offset-2">
<tab-wizard @on-complete="onComplete">
<tab-wizard @on-complete="onComplete"
class="card"
:startIndex="2"
color="#27ae60">
<tab-content title="Personal details"
icon="ti-user">
My first tab content
@@ -8,11 +11,23 @@
<tab-content title="Additional Info"
icon="ti-settings">
My second tab content
My second tab content
My second tab content
My second tab content
My second tab content
My second tab content
</tab-content>
<tab-content title="Last step"
icon="ti-check">
Yuhuuu! This seems pretty damn simple
</tab-content>
<button slot="prev" class="btn btn-default">
Go back
</button>
<button slot="next" class="btn btn-default">
Go to next step
</button>
</tab-wizard>
</div>
</template>
@@ -28,3 +43,30 @@
}
}
</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/tab-wizard/_buttons.scss
-88
View File
@@ -1,6 +1,5 @@
.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;
@@ -48,55 +47,7 @@
// 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,
@@ -115,36 +66,6 @@
}
.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;
@@ -162,12 +83,3 @@
margin-top: -1px;
right: 8px;
}
.btn-tooltip{
white-space: nowrap;
}
.buttons-with-margin{
.btn {
margin-bottom: 5px;
}
}
src/assets/tab-wizard/_navs-pagination.scss
+3 -34
View File
@@ -26,20 +26,6 @@
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;
@@ -49,36 +35,19 @@
}
}
> 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;
display:flex;
align-items:center;
justify-content: center;
@include transition(.2s, linear);
}
}
src/assets/tab-wizard/_wizard-card.scss
+14 -32
View File
@@ -1,57 +1,39 @@
.vue-tab-wizard{
padding-bottom:20px;
.icon-circle{
font-size: 20px;
font-size: 18px;
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;
display:flex;
justify-content: center;
align-content: center;
top: -2px;
.icon-container{
display:flex;
justify-content: center;
flex:1;
}
[class*="ti-"]{
position: absolute;
z-index: 1;
left: 1px;
right: 0px;
top: 23px;
display:flex;
align-items: center;
justify-content: center;
}
}
&[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: 30px 20px 10px;
}
.wizard-footer{
padding: 0 15px 5px;
.card-footer{
padding: 0 20px;
}
.wizard-header{
padding: 15px 15px 15px 15px;
position: relative;
src/assets/tab-wizard/mixins/_vendor-prefixes.scss
-31
View File
@@ -18,34 +18,3 @@
-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;
}
}
}
src/components/TabContent.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="show" class="tab-container">
<div v-show="show" class="tab-container">
<slot>
</slot>
</div>
src/components/TabWizard.vue
+97 -18
View File
@@ -1,5 +1,5 @@
<template>
<div class="vue-tab-wizard" data-color="orange">
<div class="vue-tab-wizard">
<div class="wizard-header">
<slot name="title" class="wizard-title">
<h4 class="wizard-title">{{title}}</h4>
@@ -8,16 +8,25 @@
</div>
<div class="wizard-navigation">
<div class="progress-with-circle">
<div class="progress-bar" role="progressbar"
:style="progressStyle"></div>
<div class="progress-bar"
:style="progressBarStyle"></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 v-if="tab.icon" :class="tab.icon"></i>
<div class="icon-circle" :class="{checked:isChecked(index)}"
:style="isChecked(index)? stepCheckedStyle : {}">
<transition :name="transition" mode="out-in">
<div v-if="tab.active" class="icon-container" :style="tab.active ? iconActiveStyle: {}">
<i v-if="tab.icon" :class="tab.icon"></i>
</div>
<i v-if="!tab.active && tab.icon" :class="tab.icon"></i>
</transition>
</div>
{{tab.title}}
<span class="stepTitle" :style="tab.active ? stepTitleStyle : {}">
{{tab.title}}
</span>
</a>
</li>
</ul>
@@ -28,16 +37,36 @@
</div>
<div class="card-footer">
<button v-if="displayPrevButton" type="button" class="btn btn-previous btn-default btn-wd"
@click="prevTab">
{{backButtonText}}
</button>
<button v-if="isLastStep" type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="finish">
{{finishButtonText}}
</button>
<button v-else type="button" class="btn btn-info btn-fill btn-wd btn-next pull-right" @click="nextTab">
{{nextButtonText}}
</button>
<template>
<span @click="prevTab" v-if="displayPrevButton">
<slot name="prev">
<button type="button" class="btn btn-default btn-wd">
{{backButtonText}}
</button>
</slot>
</span>
</template>
<template>
<span @click="finish" class="pull-right" v-if="isLastStep">
<slot name="finish">
<button type="button" class="btn btn-fill btn-wd btn-next pull-right">
{{finishButtonText}}
</button>
</slot>
</span>
</template>
<template>
<span @click="nextTab" class="pull-right" v-if="!isLastStep">
<slot name="next">
<button type="button" class="btn btn-fill btn-wd btn-next">
{{nextButtonText}}
</button>
</slot>
</span>
</template>
<div class="clearfix"></div>
</div>
</div>
@@ -64,6 +93,18 @@
finishButtonText: {
type: String,
default: 'Finish'
},
color: {
type: String,
default: '#e74c3c'
},
transition: {
type: String,
default: ''
},
startIndex: {
type: Number,
default: 0
}
},
data () {
@@ -84,7 +125,30 @@
stepPercentage () {
return 1 / (this.tabCount * 2) * 100
},
progressStyle () {
progressBarStyle () {
return {
backgroundColor: this.color,
width: `${this.progress}%`,
color: this.color
}
},
iconActiveStyle () {
return {
backgroundColor: this.color,
borderRadius: '40%'
}
},
stepCheckedStyle () {
return {
borderColor: this.color
}
},
stepTitleStyle () {
return {
color: this.color
}
},
progress () {
let percentage = 0
if (this.activeTabIndex > 0) {
let stepsToAdd = (this.activeTabIndex % 2 === 0) ? 3 : 2
@@ -92,7 +156,7 @@
} else {
percentage = this.stepPercentage
}
return `width: ${percentage}%;`
return percentage
}
},
methods: {
@@ -170,6 +234,12 @@
firstTab.show = true
firstTab.active = true
}
if (this.startIndex < this.tabs.length) {
this.activeTabIndex = this.startIndex
this.maxStep = this.startIndex
} else {
console.warn(`Prop startIndex set to ${this.startIndex} is greater than the number of tabs - ${this.tabs.length}. Make sure that the starting index is less than the number of tabs registered`)
}
},
watch: {
activeTabIndex: function (newVal, oldVal) {
@@ -182,4 +252,13 @@
</script>
<style lang="scss">
@import "./../assets/wizard";
.fade-enter-active, .fade-leave-active {
transition: opacity .15s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */
{
opacity: 0
}
</style>