diff --git a/docs/_includes/boostwatch/stepbar.html b/docs/_includes/boostwatch/stepbar.html index 016dffbf2a..d44833646b 100644 --- a/docs/_includes/boostwatch/stepbar.html +++ b/docs/_includes/boostwatch/stepbar.html @@ -8,36 +8,36 @@

Default stepbar

diff --git a/scss/_o-step_bar.scss b/scss/_o-step_bar.scss index 7e342abee0..1804534993 100644 --- a/scss/_o-step_bar.scss +++ b/scss/_o-step_bar.scss @@ -1,11 +1,11 @@ -/********************************************************/ -/****************** wizard step bar *********************/ -/********************************************************/ -@mixin arrow-wizard-next($arrow-width, $arrow-color-right) -{ +// +// wizard step bar +// + +@mixin arrow-wizard-next($arrow-width, $arrow-color-right) { li.on + li.next > .arrow { &, - &:after { + &::after { position: absolute; display: block; width: 0; @@ -14,28 +14,28 @@ border-style: solid; } } + li.on + li.next > .arrow { - border-width: $arrow-width ($arrow-width/2); + border-width: $arrow-width ($arrow-width / 2); } - li.on + li.next > .arrow:after { - border-width: $arrow-width ($arrow-width/2); - content: ""; + + li.on + li.next > .arrow::after { + border-width: $arrow-width ($arrow-width / 2); + content: ''; } } -@mixin arrow-right-next($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-color-right, $arrow-color-left) -{ +@mixin arrow-right-next($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-color-right, $arrow-color-left) { @include arrow-wizard-next($arrow-width, $arrow-color-right); - li.on + li.next > .arrow{ - top: 50%; - //left: -$arrow-outer-width; + + li.on + li.next > .arrow { margin-left: -$arrow-outer-width; top: $arrow-outer-height; border-left-width: 0; border-right-color: $arrow-color-right; - &:after { - content: " "; - //left: 1px; + + &::after { + content: ' '; bottom: -$arrow-width; border-right-width: 0; border-left-color: $arrow-color-left; @@ -43,11 +43,10 @@ } } -@mixin arrow-wizard($arrow-width, $arrow-color-right) -{ +@mixin arrow-wizard($arrow-width, $arrow-color-right) { li.on > .arrow { &, - &:after { + &::after { position: absolute; display: block; width: 0; @@ -56,28 +55,28 @@ border-style: solid; } } + li.on > .arrow { - border-width: $arrow-width ($arrow-width/2); + border-width: $arrow-width ($arrow-width / 2); } - li.on > .arrow:after { - border-width: $arrow-width ($arrow-width/2); - content: ""; + + li.on > .arrow::after { + border-width: $arrow-width ($arrow-width / 2); + content: ''; } } -@mixin arrow-right($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-color-right, $arrow-color-left) -{ +@mixin arrow-right($arrow-outer-width, $arrow-outer-height, $arrow-width, $arrow-color-right, $arrow-color-left) { @include arrow-wizard($arrow-width, $arrow-color-right); - li.on > .arrow{ - top: 50%; - //left: -$arrow-outer-width; + + li.on > .arrow { margin-left: -$arrow-outer-width; top: $arrow-outer-height; border-left-width: 0; border-right-color: $arrow-color-right; - &:after { - content: " "; - //left: 1px; + + &::after { + content: ' '; bottom: -$arrow-width; border-right-width: 0; border-left-color: $arrow-color-left; @@ -85,48 +84,60 @@ } } -/* visited = black */ -/* on (current step) = orange */ -/* Default = next = $gray-light-plus (#ddd) */ -//@include arrow-right($o-wizard-step-bar-arrow-outer-width;0;$o-wizard-step-bar-arrow-width;$o-wizard-step-bar-arrow-height;$o-wizard-step-bar-arrow-color-right;$o-wizard-step-bar-arrow-color;$o-wizard-step-bar-arrow-color); +// visited = black +// on (current step) = orange +// Default = next = $gray-light-plus (#ddd) + ul.o-wizard-step-bar { - clear:both; - margin:1em; - padding:0; + @include arrow-right($o-wizard-step-bar-arrow-outer-width, 0, $o-wizard-step-bar-arrow-width, $brand-orange, $brand-orange-black); + @include arrow-right-next($o-wizard-step-bar-arrow-outer-width, 0, $o-wizard-step-bar-arrow-width, $gray-light-plus, $brand-orange); + + clear: both; + margin: 1em; + padding: 0; + li { background-color: $gray-light-plus; color: $brand-orange-black; - font-weight:bold; - position:relative; + font-weight: bold; + position: relative; padding: $padding-base-vertical $padding-base-horizontal; - float:left; - list-style:none; + float: left; + list-style: none; } + li.visited *, - li.on{ - color: $brand-orange-white; - cursor:pointer; + li.on { + color: $brand-orange-white; + cursor: pointer; } - li.visited{ + + li.visited { background-color: $brand-orange-black; } - li.on{ + + li.on { background-color: $brand-orange; } - @include arrow-right($o-wizard-step-bar-arrow-outer-width, 0, $o-wizard-step-bar-arrow-width, $brand-orange, $brand-orange-black); - - @include arrow-right-next($o-wizard-step-bar-arrow-outer-width, 0, $o-wizard-step-bar-arrow-width, $gray-light-plus, $brand-orange); - + @media (max-width: $screen-sm-max) { @include arrow-right($o-wizard-step-bar-arrow-outer-width-small, 0, $o-wizard-step-bar-arrow-width-small, $brand-orange, $brand-orange-black); - @include arrow-right-next($o-wizard-step-bar-arrow-outer-width-small, 0, $o-wizard-step-bar-arrow-width-small, $gray-light-plus, $brand-orange); - } - - } -ul.o-wizard-step-bar[data-steps="2"] li { width: 50%; } -ul.o-wizard-step-bar[data-steps="3"] li { width: 33%; } -ul.o-wizard-step-bar[data-steps="4"] li { width: 25%; } -ul.o-wizard-step-bar[data-steps="5"] li { width: 20%; } \ No newline at end of file + +ul.o-wizard-step-bar[data-steps='2'] li { + width: 50%; +} + +ul.o-wizard-step-bar[data-steps='3'] li { + width: 33%; +} + +ul.o-wizard-step-bar[data-steps='4'] li { + width: 25%; +} + +ul.o-wizard-step-bar[data-steps='5'] li { + width: 20%; +}