Skip to content

Commit

Permalink
fix(components): boostwatch
Browse files Browse the repository at this point in the history 
stepbar
  • Loading branch information
@ygatesoupe
ygatesoupe committed Dec 15, 2015
1 parent 02efafb commit ede0c4c
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 71 deletions.
20 changes: 10 additions & 10 deletions docs/_includes/boostwatch/stepbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,36 @@ <h3 id="stepbar-default">Default stepbar</h3>
<ul class="o-wizard-step-bar" data-steps="5">
<li class="visited">
<div>
<div><span class="hidden-xs">Step&nbsp;</span> 1</div>
<div><a href="#" title="Step 1&nbsp;: Voluptatem" class="hidden-xs hidden-sm">Voluptatem</a></div>
<div><span class="hidden-sm-down">Step&nbsp;</span> 1</div>
<div><a href="#" title="Step 1&nbsp;: Voluptatem" class="hidden-sm-down hidden-md-down">Voluptatem</a></div>
</div>
</li>
<li class="visited">
<div class="arrow" aria-hidden="true"></div>
<div>
<div><span class="hidden-xs">Step&nbsp;</span> 2</div>
<div><a href="#" title="Step 2&nbsp;: Aperiam" class="hidden-xs hidden-sm">Aperiam</a></div>
<div><span class="hidden-sm-down">Step&nbsp;</span> 2</div>
<div><a href="#" title="Step 2&nbsp;: Aperiam" class="hidden-sm-down hidden-md-down">Aperiam</a></div>
</div>
</li>
<li class="on">
<div class="arrow" aria-hidden="true"></div>
<div>
<div><span class="hidden-xs">Step&nbsp;</span> 3</div>
<div><span class="hidden-xs hidden-sm">Accusantinum</span></div>
<div><span class="hidden-sm-down">Step&nbsp;</span> 3</div>
<div><span class="hidden-sm-down hidden-md-down">Accusantinum</span></div>
</div>
</li>
<li class="next">
<div class="arrow" aria-hidden="true"></div>
<div>
<div><span class="hidden-xs">Step&nbsp;</span> 4</div>
<div><span class="hidden-xs hidden-sm">Ipsam</span></div>
<div><span class="hidden-sm-down">Step&nbsp;</span> 4</div>
<div><span class="hidden-sm-down hidden-md-down">Ipsam</span></div>
</div>
</li>
<li class="next">
<div class="arrow" aria-hidden="true"></div>
<div>
<div><span class="hidden-xs">Step&nbsp;</span> 5</div>
<div><span class="hidden-xs hidden-sm">Aspernatur</span></div>
<div><span class="hidden-sm-down">Step&nbsp;</span> 5</div>
<div><span class="hidden-sm-down hidden-md-down">Aspernatur</span></div>
</div>
</li>
</ul>
Expand Down
133 changes: 72 additions & 61 deletions scss/_o-step_bar.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -14,40 +14,39 @@
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;
}
}
}

@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;
Expand All @@ -56,77 +55,89 @@
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;
}
}
}

/* 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%; }

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%;
}

0 comments on commit ede0c4c

Please sign in to comment.