mirrors/vue-form-wizard
2
0
Fork 0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-12 16:02:24 +03:00
Code Activity

#6 Get rid of bootstrap css

Browse Source 
Nest styles under vue-form-wizard class to not affect global styles
Reduce css bundle size
This commit is contained in:
cristijora
2017-05-03 22:58:43 +03:00
parent 4b04365cbf
commit 3a535eeade
14 changed files with 49 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/vue-form-wizard.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/vue-form-wizard.min.css
Vendored
+1 -14
View File
File diff suppressed because one or more lines are too long
dist/vue-tab-wizard.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
dist/vue-tab-wizard.min.css
Vendored
-14
View File
File diff suppressed because one or more lines are too long
src/assets/form-wizard/_buttons.scss
+16 -81
View File
@@ -1,85 +1,20 @@
.btn,
.navbar .navbar-nav > li > a.btn{
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;
}
.vue-form-wizard .btn,
.vue-form-wizard .navbar .navbar-nav > li > a.btn {
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;
&:hover,
&:focus {
outline: 0 !important;
}
}
.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-info, .btn-info { @include btn-styles($info-color, $info-states-color); }
.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-wd,
.btn-wd{
.vue-form-wizard {
.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;
}
}
src/assets/form-wizard/_navs-pagination.scss
+1 -5
View File
@@ -1,5 +1,4 @@
.vue-tab-wizard .nav-pills {
.vue-form-wizard .nav-pills {
margin-top:0;
position: relative;
text-align: center;
@@ -14,9 +13,6 @@
a{
display:flex;
}
> li + li {
margin-left: 0;
}
> li > a {
display:flex;
flex-direction: column;
src/assets/form-wizard/_variables.scss
-62
View File
@@ -1,36 +1,10 @@
$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;
@@ -40,44 +14,8 @@ $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/form-wizard/_wizard-card.scss
+13 -1
View File
@@ -1,4 +1,4 @@
.vue-tab-wizard, .vue-form-wizard {
.vue-form-wizard {
padding-bottom: 20px;
.is_error {
border-color: $danger-states-color !important;
@@ -92,4 +92,16 @@
}
}
}
.card-footer{
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap:wrap;
flex-flow: row wrap;
.card-footer-left{
flex:1;
justify-self:flex-start;
}
}
}
src/assets/form-wizard/bootstrap.min.css
Vendored
-14
View File
File diff suppressed because one or more lines are too long
src/assets/form-wizard/bs_button.scss
+2 -33
View File
@@ -1,7 +1,7 @@
@import "bs_variables";
@import "mixins";
.vue-tab-wizard .btn {
.vue-form-wizard .btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: $btn-font-weight;
@@ -13,30 +13,7 @@
border: 1px solid transparent;
white-space: nowrap;
@include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
@include user-select(none);
&,
&:active,
&.active {
&:focus,
&.focus {
@include tab-focus;
}
}
&:hover,
&:focus,
&.focus {
color: $btn-default-color;
text-decoration: none;
}
&:active,
&.active {
outline: 0;
background-image: none;
@include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
}
//@include user-select(none);
&.disabled,
&[disabled],
@@ -46,14 +23,6 @@
@include box-shadow(none);
}
// [converter] extracted a& to a.btn
a.btn {
&.disabled,
fieldset[disabled] & {
pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
}
}
}
src/assets/form-wizard/bs_nav_pills.scss
+3 -22
View File
@@ -1,12 +1,12 @@
@import "bs_variables";
.vue-tab-wizard *{
.vue-form-wizard *{
box-sizing: border-box;
}
.vue-tab-wizard a{
.vue-form-wizard a{
text-decoration: none;
}
.vue-tab-wizard .nav {
.vue-form-wizard .nav {
margin-bottom: 0;
padding-left: 0; // Override default ul/ol
list-style: none;
@@ -40,23 +40,4 @@
}
}
}
// Open dropdowns
.open > a {
&,
&:hover,
&:focus {
background-color: $nav-link-hover-bg;
border-color: $link-color;
}
}
// Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
}
}
src/assets/form-wizard/bs_progress_bar.scss
+1 -1
View File
@@ -7,7 +7,7 @@
}
// Bar of progress
.vue-tab-wizard .progress-bar {
.vue-form-wizard .progress-bar {
float: left;
width: 0%;
height: 100%;
src/assets/wizard.scss
+6 -3
View File
@@ -1,8 +1,11 @@
//@import "tab-wizard/bs_button";
//@import "tab-wizard/bs_nav_pills";
//@import "tab-wizard/bs_progress_bar";
//Bootstrap imports just for general styling
@import "form-wizard/bs_button";
@import "form-wizard/bs_nav_pills";
@import "form-wizard/bs_progress_bar";
@import "form-wizard/variables";
@import "form-wizard/mixins";
//Form wizard related
@import "form-wizard/buttons";
@import "form-wizard/navs-pagination";
@import "form-wizard/wizard-card";
src/components/FormWizard.vue
+5 -9
View File
@@ -1,7 +1,7 @@
<template>
<div class="vue-tab-wizard">
<div class="vue-form-wizard">
<div class="wizard-header">
<slot name="title" class="wizard-title">
<slot name="title">
<h4 class="wizard-title">{{title}}</h4>
<p class="category">{{subtitle}}</p>
</slot>
@@ -47,7 +47,7 @@
<div class="card-footer">
<template>
<span @click="prevTab" v-if="displayPrevButton">
<span @click="prevTab" v-if="displayPrevButton" class="card-footer-left">
<slot name="prev">
<button type="button" class="btn btn-default btn-wd" :style="fillButtonStyle" :disabled="loading">
{{backButtonText}}
@@ -57,7 +57,7 @@
</template>
<template>
<span @click="finish" class="pull-right" v-if="isLastStep">
<span @click="finish" class="card-footer-right" v-if="isLastStep">
<slot name="finish">
<button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle">
{{finishButtonText}}
@@ -67,7 +67,7 @@
</template>
<template>
<span @click="nextTab" class="pull-right" v-if="!isLastStep">
<span @click="nextTab" class="card-footer-right" v-if="!isLastStep">
<slot name="next">
<button type="button" class="btn btn-fill btn-wd btn-next" :style="fillButtonStyle" :disabled="loading">
{{nextButtonText}}
@@ -76,7 +76,6 @@
</span>
</template>
<div class="clearfix"></div>
</div>
</div>
</template>
@@ -345,9 +344,6 @@
}
}
</script>
<style>
@import "../assets/form-wizard/bootstrap.min.css";
</style>
<style lang="scss">
@import "./../assets/wizard";