Merge branch 'local-v4-dev' into v4-dev

Orange-OpenSource · Oct 26, 2016 · 9725591 · 9725591
2 parents d5d4d7b + ec62854
commit 9725591
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/docs-orange/components/navbar-orange.md b/docs-orange/components/navbar-orange.md
@@ -30,7 +30,7 @@ Orange navbar is the main navigation of project website. It should always be inc
                 <li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
                 <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
             </ul>
-            <ul class="nav navbar-nav float-md-right">
+            <ul class="nav navbar-nav float-xs-right">
                 <li class="nav-item">
                     <a href="#" class="nav-link icon">
                         <span class="sr-only">open basket</span>
@@ -137,6 +137,20 @@ A supra bar should never be used on its own and always be included in header and
                 <li class="nav-item"><a href="#" class="nav-link">My Orange</a></li>
                 <li class="nav-item"><a href="#" class="nav-link">Help</a></li>
             </ul>
+            <ul class="nav navbar-nav float-xs-right">
+                <li class="nav-item">
+                    <a href="#" class="nav-link icon">
+                        <span class="sr-only">open basket</span>
+                        <span class="icon-buy" aria-hidden="true"></span>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="#" class="nav-link icon">
+                        <span class="sr-only">open search bar</span>
+                        <span class="icon-search" aria-hidden="true"></span>
+                    </a>
+                </li>
+            </ul>
         </div>
     </nav>
 </header>

diff --git a/docs/components/card.md b/docs/components/card.md
@@ -599,3 +599,18 @@ Card columns can also be extended and customized with some additional code. Show
   }
 }
 {% endhighlight %}
+
+## Orange brand
+
+To get brand compliant cards simply add `.o-card` class to your card component.
+
+{% example html %}
+<div class="o-card card">
+    <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
+    <div class="card-block">
+        <h4 class="card-title">Card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="#" class="btn btn-primary btn-inverse">Button</a>
+    </div>
+</div>
+{% endexample %}
diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
@@ -20,12 +20,9 @@
     background: #000;
   }
 
-  .navbar-toggleable-xs {
-    position: static;
-    width: auto;
-
+  .nav.navbar-nav {
     @include media-breakpoint-up(sm) {
-      display: inline-block !important;
+      display: inline-block !important; // in case we use several navbar-nav in navbar
     }
   }
 
@@ -330,7 +327,7 @@
         margin-top: 0;
 
         &.icon {
-          padding: .625rem;
+          padding: .78125rem .625rem .78125rem .625rem;
           margin-top: 0;
         }
       }