fix(component): stepbar

mobile xs view with arrows
Orange-OpenSource · Jun 8, 2016 · c9ccdc8 · c9ccdc8
1 parent 7807a98
commit c9ccdc8
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 47 deletions.
diff --git a/docs-orange/_includes/boostwatch/stepbar.html b/docs-orange/_includes/boostwatch/stepbar.html
@@ -4,7 +4,6 @@ <h2 id="stepbar">Stepbar</h2>
 <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">
@@ -44,7 +43,6 @@ <h2 id="stepbar">Stepbar</h2>
 
     <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 : sign in">
@@ -84,7 +82,6 @@ <h2 id="stepbar">Stepbar</h2>
 
     <div class="row">
         <nav class="o-stepbar">
-            <span class="hidden-md-up stepbar-header">Step</span>
             <ol>
                 <li class="stepbar-item done">
                     <a class="stepbar-link" href="#" title="Step 1 : sign in">

diff --git a/docs-orange/components/orange-stepbar.md b/docs-orange/components/orange-stepbar.md
@@ -16,7 +16,6 @@ Be carful to choose short labels when using 5 steps process, otherwise label wil
 
 {% 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">

diff --git a/docs-orange/examples/orange-form/index.html b/docs-orange/examples/orange-form/index.html
@@ -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">

diff --git a/scss/_o-step_bar.scss b/scss/_o-step_bar.scss
@@ -73,6 +73,10 @@ $arrow-orange: "%23f16e00";
       .stepbar-link {
         color: #fff;
       }
+
+      &:last-child::after {
+        display: none;
+      }
     }
 
     .stepbar-link {
@@ -114,12 +118,6 @@ $arrow-orange: "%23f16e00";
           display: none;
         }
 
-        .stepbar-link .stepbar-header {
-          margin-right: .625rem;
-          font-weight: bold;
-          vertical-align: middle;
-        }
-
         &:first-child .stepbar-link .step-number,
         &:last-child .stepbar-link .step-number {
           margin-left: 0;
@@ -133,50 +131,39 @@ $arrow-orange: "%23f16e00";
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(xs) {
   .o-stepbar {
-    .stepbar-header {
-      margin-right: .625rem;
-      font-weight: bold;
-      vertical-align: middle;
-    }
-  }
 
-  .o-stepbar .stepbar-item {
-    &.done,
-    &.current,
-    &.next {
-      width: 2.5rem;
-      padding: .75rem 0;
-      margin-right: .0625rem;
-      line-height: 1;
-      text-align: center;
-
-      .stepbar-link .step-number {
-        margin-left: 0;
-      }
+    .stepbar-item {
+      &.current {
+        width: 3.5rem;
+        padding: .75rem 0;
+        margin-right: .125rem;
+        line-height: $font-size-base;
+        text-align: center;
 
-      &:last-child {
-        width: 2.5rem;
-      }
-    }
+        .stepbar-link .step-number {
+          margin-left: 1rem;
+        }
 
-    &::after,
-    &.done::after,
-    &.current::after,
-    &.next::after {
-      display: none;
-    }
+        .stepbar-link .step-number::after {
+          display: none;
+        }
 
-    &.current .stepbar-link {
+        .stepbar-link .step-title {
+          display: none;
+        }
 
-      .step-number::after,
-      .step-title {
-        display: none;
+        &:first-child .stepbar-link .step-number,
+        &:last-child .stepbar-link .step-number {
+          margin-left: 0;
+        }
+
+        &:last-child {
+          width: 4.5rem;
+        }
       }
     }
-
-
   }
 }