Skip to content

Commit

Permalink
Added assets inspired by creative-tim bs wizard
Browse files Browse the repository at this point in the history
  • Loading branch information
cristijora committed Apr 16, 2017
1 parent 80bdc83 commit e0184b3
Show file tree
Hide file tree
Showing 12 changed files with 640 additions and 31 deletions.
3 changes: 2 additions & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down
173 changes: 173 additions & 0 deletions src/assets/tab-wizard/_buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
3 changes: 3 additions & 0 deletions src/assets/tab-wizard/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "mixins/buttons";
@import "mixins/vendor-prefixes";
@import "mixins/transparency";
85 changes: 85 additions & 0 deletions src/assets/tab-wizard/_navs-pagination.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
83 changes: 83 additions & 0 deletions src/assets/tab-wizard/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit e0184b3

Please sign in to comment.