Merge branch 'v4-dev' of https://github.com/Orange-OpenSource/Orange-…

…Boosted-Bootstrap into v4-dev
Orange-OpenSource · Jun 7, 2016 · c0b091d · c0b091d
2 parents 76d9f3f + 2a0785c
commit c0b091d
Show file tree

Hide file tree

Showing 10 changed files with 237 additions and 90 deletions.
diff --git a/docs-orange/_includes/boostwatch/navLocal.html b/docs-orange/_includes/boostwatch/navLocal.html
@@ -1,29 +1,27 @@
 <h2 id="local">Local navigation bar</h2>
-<p class="lead">Two types of local navigation.</p>
-<h3 id="local1">Default local navigation</h3>
-<div data-example-id="">
-    <div class="o-nav-local">
-        <hr aria-hidden="true">
-        <nav class="container">
-            <ul class="nav nav-inline">
-                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
-            </ul>
-        </nav>
-        <hr aria-hidden="true">
-    </div>
+<div class="o-nav-local">
+    <hr aria-hidden="true">
+    <nav class="container">
+        <a class="hidden-sm-up nav-link active local-select" data-toggle="collapse" href="#localNav1" aria-haspopup="true">target</a>
+        <ul class="nav nav-inline collapse" id="localNav1">
+            <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
+        </ul>
+    </nav>
+    <hr aria-hidden="true">
 </div>
-<h3 id="local2">Inversed local navigation</h3>
+
 <div data-example-id="">
     <div style="margin: 2rem 0; padding: 2rem 0; background-color: black;">
         <div class="o-nav-local inverse">
             <hr aria-hidden="true">
             <nav class="container">
-                <ul class="nav nav-inline">
-                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
-                <li class="nav-item"><a class="nav-link active" href="#">Profile</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
+                <a class="hidden-sm-up nav-link active local-select" data-toggle="collapse" href="#localNav2" aria-haspopup="true">target</a>
+                <ul class="nav nav-inline collapse" id="localNav2">
+                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
                 </ul>
             </nav>
             <hr aria-hidden="true">

diff --git a/docs-orange/_includes/boostwatch/stepbar.html b/docs-orange/_includes/boostwatch/stepbar.html
@@ -1,8 +1,47 @@
 <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">
             <span class="hidden-md-up stepbar-header">Step</span>
@@ -40,4 +79,44 @@ <h3 id="stepbar-default">Default stepbar</h3>
           </ol>
       </nav>
     </div><!-- row -->
+
+    <div style="margin-bottom: 1rem;"></div>
+
+    <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">
+                        <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>
diff --git a/docs-orange/_includes/footer.html b/docs-orange/_includes/footer.html
@@ -91,6 +91,28 @@ <h1 class="sr-only">footer - site map & informations</h1>
 				//callback:skiplinksAfterLoad
 			};
 </script>
+<script type="text/javascript">
+    $('#collapseExample a').on('click', function() {
+        $('a[href="#collapseExample"]').text($(this).text());
+        $('#collapseExample').collapse('hide');
+    });
+
+    $('#collapseExample').on('shown.bs.collapse', function(){
+        $(this).find('.nav-link').first().focus();
+    });
+
+    $('#collapseExample').on('hidden.bs.collapse', function(){
+        $('a[href="#collapseExample"]').focus();
+    });
+
+    $(document).ready(function(){
+        $('.o-nav-local .local-select').text($('.o-nav-local.inverse ul li:first-child').text());
+    });
+
+    $(document).on('click', function(){
+        $('.o-nav-local .collapse.in').collapse('hide');
+    });
+</script>
 <script>
 $(function () {
   $('[data-toggle="tooltip"]').tooltip()

diff --git a/docs-orange/components/local-navigation.md b/docs-orange/components/local-navigation.md
@@ -9,10 +9,11 @@ group: components
 Wrap your `<ul>` list in a `<nav>` tag with `.container` class. Use `<hr>` tag on top and bottom outside the de `.container`. Wrap the whole in a `.o-nav-local` container.
 
 {% example html %}
- <div class="o-nav-local">
+<div class="o-nav-local">
     <hr aria-hidden="true">
     <nav class="container">
-        <ul class="nav nav-inline">
+        <a class="hidden-sm-up nav-link active local-select" data-toggle="collapse" href="#localNav1" aria-haspopup="true">target</a>
+        <ul class="nav nav-inline collapse" id="localNav1">
             <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
             <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
             <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
@@ -31,10 +32,11 @@ Simply add `.inverse` class to your `.o-nav-local` container.
     <div class="o-nav-local inverse">
         <hr aria-hidden="true">
         <nav class="container">
-            <ul class="nav nav-inline">
-                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
-            <li class="nav-item"><a class="nav-link active" href="#">Profile</a></li>
-            <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
+            <a class="hidden-sm-up nav-link active local-select" data-toggle="collapse" href="#localNav2" aria-haspopup="true">target</a>
+            <ul class="nav nav-inline collapse" id="localNav2">
+                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
             </ul>
         </nav>
         <hr aria-hidden="true">

diff --git a/docs-orange/components/orange-stepbar.md b/docs-orange/components/orange-stepbar.md
@@ -12,8 +12,6 @@ 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 %}

diff --git a/docs-orange/examples/orange-form/index.html b/docs-orange/examples/orange-form/index.html
@@ -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>
@@ -83,7 +83,7 @@
 	<main id="content" class="container">
         <div class="row">
             <nav class="o-stepbar">
-                <span class="hidden-md-up stepbar-header">Step</span>
+				<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-news/index.html b/docs-orange/examples/orange-news/index.html
@@ -215,17 +215,6 @@ <h1>News</h1>
 				<hr aria-hidden="true">
 			</div>
 
-			<!--<select class="local-select">
-				<option>news home</option>
-				<option>entertainment</option>
-				<option>finance</option>
-				<option>technology</option>
-				<option>weather</option>
-				<option>sport</option>
-				<option>video</option>
-				<option>pictures</option>
-			</select>-->
-
 		<section class="container">
 			<div class="row">
 				<div class="col-xs-12 col-sm-12 col-md-8">

diff --git a/scss/_custom.scss b/scss/_custom.scss
@@ -975,6 +975,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

diff --git a/scss/_o-nav-local.scss b/scss/_o-nav-local.scss
@@ -45,7 +45,7 @@
 
 // Mobile
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(xs) {
   .o-nav-local {
 
     .container {
@@ -69,7 +69,9 @@
         font-size: inherit;
         color: #000;
         content: "\e93c";
-        // vertical-align: middle;
+
+
+
       }
     }
 
@@ -97,6 +99,12 @@
       }
     }
   }
+
+  .o-nav-local.inverse {
+    .local-select::after {
+      color: #fff;
+    }
+  }
 }
 
 @include media-breakpoint-up(sm) {