From adca06caeea9fc6f4ac7654eb60569ffe85a4751 Mon Sep 17 00:00:00 2001 From: schonarth Date: Fri, 12 Sep 2014 11:42:25 -0300 Subject: [PATCH 1/2] Set wizard-specific variables for all values Replaced all hard-coded values and direct Bootstrap dependencies with wizard-specific variables, allowing for easy overriding when needed. If the variables aren't touched, the output remains the same. Also added a border property, none by default, which can also be overridden if necessary. --- bootstrap-nav-wizard.less | 67 +++++++++++++++++++++++---------------- 1 file changed, 39 insertions(+), 28 deletions(-) diff --git a/bootstrap-nav-wizard.less b/bootstrap-nav-wizard.less index 831f6e2..a075a7c 100644 --- a/bootstrap-nav-wizard.less +++ b/bootstrap-nav-wizard.less @@ -2,6 +2,15 @@ @arrow-size: 20px; @arrow-sep: 6px; +@wizard-border: #fff; +@wizard-background: @nav-link-hover-bg; +@wizard-active-background: @nav-pills-active-link-hover-bg; +@wizard-active-color: @nav-pills-active-link-hover-color; +@wizard-hover-background: darken(@wizard-background, 10%); +@wizard-done-background: darken(@wizard-background, 5%); +@wizard-border-radius: @nav-pills-border-radius; +@wizard-disabled-color: @nav-disabled-link-color; +@wizard-padding: @nav-link-padding; .arrow(@color) { width: 0px; @@ -18,16 +27,18 @@ // From github.com/acornejo/bootstrap-nav-wizard // ------------------------- .nav-wizard { + border: @wizard-border; + > li { float: left; > a { position: relative; - background-color: @nav-link-hover-bg; + background-color: @wizard-background; .badge { margin-left: 3px; - color: @nav-link-hover-bg; + color: @wizard-background; background-color: @badge-active-color; } } @@ -35,7 +46,7 @@ padding-left: 2*@arrow-size - @arrow-sep; &:before { - .arrow(#fff); + .arrow(@wizard-border); left: 0; } } @@ -43,38 +54,38 @@ margin-right: @arrow-sep; &:after { - .arrow(@nav-link-hover-bg); + .arrow(@wizard-background); right: -@arrow-size; z-index: 2; } } &:first-child > a { - border-top-left-radius: @nav-pills-border-radius; - border-bottom-left-radius: @nav-pills-border-radius; + border-top-left-radius: @wizard-border-radius; + border-bottom-left-radius: @wizard-border-radius; } &:last-child > a { - border-top-right-radius: @nav-pills-border-radius; - border-bottom-right-radius: @nav-pills-border-radius; + border-top-right-radius: @wizard-border-radius; + border-bottom-right-radius: @wizard-border-radius; } &.done:hover > a, &:hover > a { - background-color: darken(@nav-link-hover-bg, 10%); + background-color: @wizard-hover-background; &:before { - border-right-color: darken(@nav-link-hover-bg, 10%); + border-right-color: @wizard-hover-background; } &:after { - border-left-color: darken(@nav-link-hover-bg, 10%); + border-left-color: @wizard-hover-background; } } &.done > a { - background-color: darken(@nav-link-hover-bg, 5%); + background-color: @wizard-done-background; &:before { - border-right-color: darken(@nav-link-hover-bg, 5%); + border-right-color: @wizard-done-background; } &:after { - border-left-color: darken(@nav-link-hover-bg, 5%); + border-left-color: @wizard-done-background; } } @@ -82,12 +93,12 @@ &, &:hover, &:focus { - color: @nav-pills-active-link-hover-color; - background-color: @nav-pills-active-link-hover-bg; + color: @wizard-active-color; + background-color: @wizard-active-background; } &:after { - border-left-color: @nav-pills-active-link-hover-bg; + border-left-color: @wizard-active-background; } .badge { @@ -97,25 +108,25 @@ } &.disabled > a { - color: @nav-disabled-link-color; + color: @wizard-disabled-color; &:hover, &:focus { - color: @nav-disabled-link-color; + color: @wizard-disabled-color; text-decoration: none; - background-color: @nav-link-hover-bg; + background-color: @wizard-background; cursor: default; } &:before { - border-right-color: @nav-link-hover-bg; + border-right-color: @wizard-background; } &:after { - border-left-color: @nav-link-hover-bg; + border-left-color: @wizard-background; } } // &.active ~ li > a { - // color: @nav-disabled-link-color; + // color: @wizard-disabled-color; // &:hover, // &:focus { // color: @nav-disabled-link-hover-color; @@ -123,12 +134,12 @@ // background-color: transparent; // cursor: not-allowed; // } - // // background-color: darken(@nav-link-hover-bg, 20%); + // // background-color: darken(@wizard-background, 20%); // // &:before { - // // border-right-color: darken(@nav-link-hover-bg, 20%); + // // border-right-color: darken(@wizard-background, 20%); // // } // // &:after { - // // border-left-color: darken(@nav-link-hover-bg, 20%); + // // border-left-color: darken(@wizard-background, 20%); // // } // } } @@ -139,14 +150,14 @@ float: none; > a { - padding: @nav-link-padding; + padding: @wizard-padding; } } // Small screens size, remove the "arrows" and just show it like stacked pills. @media (max-width: @screen-sm-min) { > li > a { - border-radius: @nav-pills-border-radius; + border-radius: @wizard-border-radius; margin-right: 0; &:before, From 4e6e1949cb532ac6bb7fa56981bff583d4600740 Mon Sep 17 00:00:00 2001 From: schonarth Date: Fri, 12 Sep 2014 11:48:24 -0300 Subject: [PATCH 2/2] Fixed @wizard-border Separated border and border-color properties. --- bootstrap-nav-wizard.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/bootstrap-nav-wizard.less b/bootstrap-nav-wizard.less index a075a7c..894cda5 100644 --- a/bootstrap-nav-wizard.less +++ b/bootstrap-nav-wizard.less @@ -2,7 +2,8 @@ @arrow-size: 20px; @arrow-sep: 6px; -@wizard-border: #fff; +@wizard-border: solid 0px @wizard-border-color; +@wizard-border-color: #fff; @wizard-background: @nav-link-hover-bg; @wizard-active-background: @nav-pills-active-link-hover-bg; @wizard-active-color: @nav-pills-active-link-hover-color; @@ -46,7 +47,7 @@ padding-left: 2*@arrow-size - @arrow-sep; &:before { - .arrow(@wizard-border); + .arrow(@wizard-border-color); left: 0; } }