mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-05-29 18:54:03 +03:00
Code Activity

Added assets inspired by creative-tim bs wizard

Browse Source
This commit is contained in:
cristijora
2017-04-16 12:58:51 +03:00
parent 80bdc83a0e
commit e0184b3cb1
12 changed files with 640 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+2 -1
View File
@@ -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
src/assets/tab-wizard/_buttons.scss
+173
View File
@@ -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;
}
}
src/assets/tab-wizard/_mixins.scss
+3
View File
@@ -0,0 +1,3 @@
@import "mixins/buttons";
@import "mixins/vendor-prefixes";
@import "mixins/transparency";
src/assets/tab-wizard/_navs-pagination.scss
+85
View File
@@ -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);
}
}
}
src/assets/tab-wizard/_variables.scss
+83
View File
@@ -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;
src/assets/tab-wizard/_wizard-card.scss
+93
View File
@@ -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;
}
}
}
}
src/assets/tab-wizard/mixins/_buttons.scss
+88
View File
@@ -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;
}
}
src/assets/tab-wizard/mixins/_transparency.scss
+6
View File
@@ -0,0 +1,6 @@
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: #{alpha(opacity=$opacity-ie)};
}
src/assets/tab-wizard/mixins/_vendor-prefixes.scss
+51
View File
@@ -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;
}
}
}
src/assets/wizard.scss
+5
View File
@@ -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";
src/components/TabContent.vue
+6 -2
View File
@@ -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>
src/components/TabWizard.vue
+45 -28
View File
@@ -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>