Skip to content

Commit

Permalink
fix(component): stepbar
Browse files Browse the repository at this point in the history 
1px arrow border
parametric color svg
new mobile view
  • Loading branch information
@ygatesoupe
ygatesoupe committed Jun 3, 2016
1 parent 8082ea7 commit 7b6162c
Show file tree
Hide file tree
Showing 6 changed files with 140 additions and 62 deletions.
80 changes: 78 additions & 2 deletions docs-orange/_includes/boostwatch/stepbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,48 @@
<h2 id="stepbar">Stepbar</h2>
<p class="lead">Indicate the current step within a sequential navigation.</p>
<h3 id="stepbar-default">Default stepbar</h3>

<div data-example-id="default-stepbar">
<div class="row">
<nav class="o-stepbar">
<span class="hidden-md-up stepbar-header">Step</span>
<ol>
<li class="stepbar-item current">
<a class="stepbar-link" href="#" title="Step 1 : sign in">
<span class="step-number">1</span>
<span class="step-title">Sign in</span>
</a>
</li>
<li class="stepbar-item next">
<a class="stepbar-link" href="#" title="Step 2 : Review">
<span class="step-number">2</span>
<span class="step-title">Review</span>
</a>
</li>
<li class="stepbar-item next">
<a class="stepbar-link" href="#" title="Step 3 : Delivery">
<span class="step-number">3</span>
<span class="step-title">Delivery</span>
</a>
</li>
<li class="stepbar-item next">
<a class="stepbar-link" href="#" title="Step 4 : Payment">
<span class="step-number">4</span>
<span class="step-title">Payment</span>
</a>
</li>
<li class="stepbar-item next">
<a class="stepbar-link" href="#" title="Step 5 : Place order">
<span class="step-number">5</span>
<span class="step-title">Place order</span>
</a>
</li>
</ol>
</nav>
</div><!-- row -->

<div style="margin-bottom: 1rem;"></div>

<div class="row">
<nav class="o-stepbar">
<ol>
<li class="done stepbar-item">
<a class="stepbar-link" href="#" title="Step 1 : sign in">
Expand Down Expand Up @@ -40,4 +77,43 @@ <h3 id="stepbar-default">Default stepbar</h3>
</ol>
</nav>
</div><!-- row -->

<div style="margin-bottom: 1rem;"></div>

<div class="row">
<nav class="o-stepbar">
<ol>
<li class="stepbar-item done">
<a class="stepbar-link" href="#" title="Step 1 : sign in">
<span class="step-number">1</span>
<span class="step-title">Sign in</span>
</a>
</li>
<li class="stepbar-item done">
<a class="stepbar-link" href="#" title="Step 2 : Review">
<span class="step-number">2</span>
<span class="step-title">Review</span>
</a>
</li>
<li class="stepbar-item done">
<a class="stepbar-link" href="#" title="Step 3 : Delivery">
<span class="step-number">3</span>
<span class="step-title">Delivery</span>
</a>
</li>
<li class="stepbar-item done">
<a class="stepbar-link" href="#" title="Step 4 : Payment">
<span class="step-number">4</span>
<span class="step-title">Payment</span>
</a>
</li>
<li class="stepbar-item current">
<a class="stepbar-link" href="#" title="Step 5 : Place order">
<span class="step-number">5</span>
<span class="step-title">Place order</span>
</a>
</li>
</ol>
</nav>
</div><!-- row -->
</div>
3 changes: 0 additions & 3 deletions docs-orange/components/orange-stepbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,10 @@ Declare a `.o-stepbar` nav tag contaning the stepbar. Within a `<ol>`ordered lis

Use `.done` and `.current` classes in correct order. There is only one `.current` item. Fill a correct description on each `.stepbar-link` `title`attributes.

In mobile view a `.stepbar-header` is needed before the list, Orange brand labels it "Step".

Be carful to choose short labels when using 5 steps process, otherwise label will be cut to preserve inline layout. More information can be carried on the `title`attributle of the `<a>`link.

{% example html %}
<nav class="o-stepbar">
<span class="hidden-md-up stepbar-header">Step</span>
<ol>
<li class="done stepbar-item">
<a class="stepbar-link" href="#" title="Step 1 : Voluptatem">
Expand Down
3 changes: 1 addition & 2 deletions docs-orange/examples/orange-form/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
<span class="hidden-xs hidden-sm">&nbsp;hello
<span class="orange">admin</span>&nbsp;
</span><b class="caret" aria-hidden="true"></b>

</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">logout</a></li>
Expand All @@ -83,7 +83,6 @@
<main id="content" class="container">
<div class="row">
<nav class="o-stepbar">
<span class="hidden-md-up stepbar-header">Step</span>
<ol>
<li class="done stepbar-item">
<a class="stepbar-link" href="#" title="Step 1 : Voluptatem">
Expand Down
1 change: 1 addition & 0 deletions scss/_custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -969,6 +969,7 @@ $o-wizard-step-bar-arrow-outer-width-small: ($o-wizard-step-bar-arrow-
$o-wizard-step-bar-arrow-outer-width: ($o-wizard-step-bar-arrow-width);

$o-stepbar-height: 2.5rem;
$o-stepbar-arrow-width: 1rem;
$o-stepbar-arrow-ratio: 3 / 8;

// Pagination
Expand Down
2 changes: 1 addition & 1 deletion scss/_o-footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
.o-footer {
color: #fff;
background-color: #000;

* {
font-weight: bold;
}
Expand Down
113 changes: 59 additions & 54 deletions scss/_o-step_bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,29 @@
// Orange stepbar
//

// inline svgs

$arrow-black-svg: "%3Csvg%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%20%20%20width%3D%22450%22%0A%20%20%20height%3D%221200%22%0A%20%20%20viewBox%3D%220%200%20450%201200%22%3E%0A%20%20%20%3Cpath%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23000000%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%0A%20%20%20%20%20%20%20d%3D%22M%200%2C1200%20337.49996%2C600.86279%200%2C0%20M%200%2C1200%200%2C599.13714%20M%200%2C600.86279%200%2C0%22%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A0%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%0A%20%20%20%20%20%20%20d%3D%22M%200%2C0%20112.50002%2C0%20450%2C600.86279%20112.50002%2C1200%200%2C1200%20337.49998%2C600.86279%200%2C0%22%2F%3E%0A%3C%2Fsvg%3E";

$arrow-orange-svg: "%3Csvg%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%20%20%20width%3D%22450%22%0A%20%20%20height%3D%221200%22%0A%20%20%20viewBox%3D%220%200%20450%201200%22%3E%0A%20%20%20%3Cpath%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23f16e00%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%0A%20%20%20%20%20%20%20d%3D%22M%200%2C1200%20337.49996%2C600.86279%200%2C0%20M%200%2C1200%200%2C599.13714%20M%200%2C600.86279%200%2C0%22%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A0%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%0A%20%20%20%20%20%20%20d%3D%22M%200%2C0%20112.50002%2C0%20450%2C600.86279%20112.50002%2C1200%200%2C1200%20337.49998%2C600.86279%200%2C0%22%2F%3E%0A%3C%2Fsvg%3E";

$arrow-grey-svg: "%3Csvg%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%20%20%20width%3D%22450%22%0A%20%20%20height%3D%221200%22%0A%20%20%20viewBox%3D%220%200%20450%201200%22%3E%0A%20%20%20%3Cpath%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23dddddd%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A1px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%0A%20%20%20%20%20%20%20d%3D%22M%200%2C1200%20337.49996%2C600.86279%200%2C0%20M%200%2C1200%200%2C599.13714%20M%200%2C600.86279%200%2C0%22%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20style%3D%22fill%3A%23ffffff%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%3Bstroke-width%3A0%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%0A%20%20%20%20%20%20%20d%3D%22M%200%2C0%20112.50002%2C0%20450%2C600.86279%20112.50002%2C1200%200%2C1200%20337.49998%2C600.86279%200%2C0%22%2F%3E%0A%3C%2Fsvg%3E";
// url encoded colors
$arrow-black: "%23000000";
$arrow-gray: "%23dddddd";
$arrow-orange: "%23f16e00";

// generate url encoded svg with color
@function arrow-svg ($color) {
@return "%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20width%3D%2216%22%20height%3D%2240%22%20viewBox%3D%220%200%2016%2040%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20id%3D%22path4690%22%20d%3D%22M%200%200%20L%2015%2020%20L%200%2040%20Z%22%20style%3D%22fill%3A#{$color}%3B%22%2F%3E%0A%20%20%3Cpath%20id%3D%22path4700%22%20d%3D%22M%201%200%20L%200%200%20L%2015%2020%20L%200%2040%20L%201%2040%20L%2016%2020%20Z%22%20style%3D%22fill%3A%23ffffff%3B%22%2F%3E%0A%3C%2Fsvg%3E";
}

@mixin stepbar-arrow ($svg) {
@mixin stepbar-arrow ($color) {
&::after {
position: absolute;
top: 0;
right: -.9375rem;
right: -$o-stepbar-arrow-width;
z-index: 500;
display: block;
width: calc(#{$o-stepbar-height} * #{$o-stepbar-arrow-ratio});
width: $o-stepbar-arrow-width;
height: $o-stepbar-height;
content: "";
background-image: url("data:image/svg+xml,#{$svg}");
background-size: calc(#{$o-stepbar-height} * #{$o-stepbar-arrow-ratio}) $o-stepbar-height;
$arrow-svg: arrow-svg($color);
background-image: url("data:image/svg+xml,#{$arrow-svg}");
background-size: $o-stepbar-arrow-width $o-stepbar-height;
}
}

Expand All @@ -35,11 +38,11 @@ $arrow-grey-svg: "%3Csvg%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F
}

.stepbar-item {
@include stepbar-arrow($arrow-grey-svg);
@include stepbar-arrow($arrow-gray);
position: relative;
float: left;
padding: $padding-base-vertical $padding-base-horizontal;
padding-left: calc(#{$o-stepbar-height} * #{$o-stepbar-arrow-ratio} + #{$padding-base-horizontal});
padding-left: 2rem;
font-weight: bold;
color: #000;
white-space: nowrap;
Expand All @@ -57,75 +60,77 @@ $arrow-grey-svg: "%3Csvg%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2F
}

&.done {
@include stepbar-arrow($arrow-black-svg);
@include stepbar-arrow($arrow-black);
background-color: #000;
.stepbar-link {
color: #fff;
}
}

&.current {
@include stepbar-arrow($arrow-orange-svg);
@include stepbar-arrow($arrow-orange);
background-color: $brand-primary;
.stepbar-link {
color: #fff;
}
}

@include media-breakpoint-down(sm) {
&::after,
&.done::after,
&.current::after {
display: none;
}
}

.stepbar-link {
text-decoration: none;

.step-number::after {
content: ".";
}
}
}
}

.step-number::after {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
.o-stepbar {
ol,
ul {
display: inline-block;
vertical-align: middle;
}

.stepbar-item {
&.done,
&.next {
width: 3.5rem;
padding: .75rem 0;
margin-right: .125rem;
line-height: $font-size-base;
text-align: center;

.stepbar-link .step-number {
margin-left: 1rem;
}

.stepbar-link .step-number::after {
display: none;
}
}

.step-title {
@include media-breakpoint-down(sm) {
.stepbar-link .step-title {
display: none;
}
}
}

@include media-breakpoint-down(sm) {
&,
&:first-child {
padding: calc((#{$pagination-width} - #{$font-size-base}) / 2) 0;
}
.stepbar-link .stepbar-header {
margin-right: .625rem;
font-weight: bold;
vertical-align: middle;
}

width: $pagination-width;
margin-right: .125rem;
line-height: $font-size-base;
text-align: center;
}
}
&:first-child .stepbar-link .step-number,
&:last-child .stepbar-link .step-number {
margin-left: 0;
}

&:last-child {
width: 4.5rem;
}
}

@include media-breakpoint-down(sm) {
.stepbar-header {
margin-right: .625rem;
font-weight: bold;
vertical-align: middle;
}

ol,
ul {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
}
}
}
Expand Down

0 comments on commit 7b6162c

Please sign in to comment.