.

Orange-OpenSource · Oct 1, 2021 · 7ab0658 · 7ab0658
1 parent 0b0c7f3
commit 7ab0658
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 394 deletions.
diff --git a/scss/_orange-navbar.scss b/scss/_orange-navbar.scss
@@ -6,29 +6,57 @@
 // Supra bar
 //
 // Brand exclusive thin navbar that can be used with orange navbar
-
 .supra {
   display: none;
   padding-top: 0;
-  padding-bottom: $navbar-supra-padding-bottom;
-  line-height: 1;
+  padding-bottom: 0;
   border-bottom: 1px solid $gray-700;
 
   @include media-breakpoint-up(md) {
     display: flex;
     .container {
-      padding-left: 0;
+      padding-right: .125rem;
+      padding-left: .125rem;
+    }
+  }
+
+  .nav-item:last-of-type {
+    .nav-icon {
+      padding-right: $navbar-supra-padding-x !important; // stylelint-disable-line declaration-no-important
     }
   }
 
   .nav-link {
+    padding: .75rem $navbar-supra-padding-x #{map-get($spacers, 2) + $navbar-supra-padding-y} !important; // stylelint-disable-line declaration-no-important
     font-size: $font-size-sm;
-  }
+    line-height: 1;
 
-  a {
-    margin-right: .438rem;
-  }
-  a::before {
-    bottom: -.438rem;
+    &.active::before {
+      right: $navbar-supra-padding-x !important; // stylelint-disable-line declaration-no-important
+      bottom: -1px !important; // stylelint-disable-line declaration-no-important
+      left: $navbar-supra-padding-x !important; // stylelint-disable-line declaration-no-important
+    }
+
+    &.nav-icon {
+      padding: divide($spacer, 2) $spacer .25rem !important; // stylelint-disable-line declaration-no-important
+
+      svg,
+      img {
+        width: $navbar-supra-icon-size;
+        height: $navbar-supra-icon-size;
+      }
+    }
+
+    .badge {
+      @extend .position-absolute;
+      @extend .top-0;
+      @extend .bg-info;
+      @extend .text-white;
+      @extend .translate-middle;
+      @extend .rounded-pill;
+      padding: .125rem .375rem;
+      margin-top: .1875rem;
+      font-size: $font-size-base;
+    }
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1236,13 +1236,15 @@ $navbar-nav-link-padding-x:         $nav-link-padding-x * .5 !default;
 $navbar-icon-size:                     $spacer * 1.5 !default;
 $navbar-brand-logo-height:             add($spacer * 1.5, $spacer) !default;
 $navbar-brand-logo-minimized-height:   $spacer * 1.5 !default;
+$navbar-supra-padding-y:               map-get($spacers, 4) * .1 !default;
+$navbar-supra-padding-x:               map-get($spacers, 1) * 1.5 !default;
+$navbar-supra-icon-size:               1.5625rem !default;
 $navbar-transition-duration:           $transition-duration !default;
 $navbar-transition-timing-function:    $transition-timing !default;
 $navbar-transition:                    padding-top $navbar-transition-duration $navbar-transition-timing-function, padding-bottom $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default;
 $navbar-brand-transition:              margin $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default;
 $navbar-brand-logo-transition:         width $navbar-transition-duration $navbar-transition-timing-function, height $navbar-transition-duration $navbar-transition-timing-function !default;
 $navbar-active-transition:             bottom $navbar-transition-duration $navbar-transition-timing-function !default;
-$navbar-supra-padding-bottom:          .375rem !default;
 // End mod
 
 $navbar-brand-font-size:            $font-size-base !default;

diff --git a/site/content/docs/5.1/components/orange-navbar.md b/site/content/docs/5.1/components/orange-navbar.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Orange Navbar
-description: Documentation and examples for Boosted's exclusive Brand responsive navbars. Includes support for branding, navigation, and more, including support for our collapse plugin.
+description: Documentation and examples for Boosted's exclusive Brand responsive navbars.
 group: components
 toc: true
 ---
@@ -11,53 +11,24 @@ toc: true
 Orange navbar is based on the [navbar]({{<docsref "/components/navbar">}}) component. It adds some display management and introduces the supra bar component.
 You may refer to its documentation in order to properly create and use navbars.
 
-### Supra Bar
+## Example
 
-A simple navigation that can be added on top of orange navbar, it is called supra bar. Simply add the `.supra` class in your navbar declaration.
+### Supra bar
+
+A simple navigation can be added on top of Orange navbar, it is called supra bar. Simply add the `.supra` class in your navbar declaration.
 
 {{< callout warning >}}
-Supra bars are visible only in desktop view.
+This navbar is visible only on desktop view. 
 {{< /callout >}}
 
 {{< example >}}
-<nav class="navbar supra navbar-dark bg-dark navbar-expand-md">
-  <div class="container">
-    <div class="navbar-nav d-flex flex-row">
-      <a href="#" class="nav-link active pb-1" aria-current="page">Personal</a>
-      <a class="nav-link pb-1" href="#">Business</a>
-    </div>
+{{< orange-supra >}}
     <ul class="navbar-nav ml-auto">
-      <li class="nav-item">
-        <a href="#" class="nav-link nav-icon pt-1 pb-0">
-          <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-            <use xlink:href="/docs/5.1/assets/img/boosted-sprite.svg#search"/>
-          </svg>
-          <span class="visually-hidden">Search</span>
-        </a>
-      </li> 
-      <li class="nav-item">
-        <a href="#" class="nav-link nav-icon pt-1 pb-0 position-relative">
-          <span class="position-relative">
-            <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
-              <use xlink:href="/docs/5.1/assets/img/boosted-sprite.svg#buy"/>
-            </svg>
-            <span class="visually-hidden">Basket</span>
-            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info text-white mt-1">
-              1
-              <span class="visually-hidden">shopping basket items</span>
-            </span>
-          </span>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a href="#" class="nav-link nav-icon pt-1 pb-0">
-          <img src="/docs/5.1/assets/img/navbar-contact.png" width="25" height="25" role="img" alt="User" loading="lazy">
-        <span class="visually-hidden">My account</span>
-        </a>
-      </li>
+      <li class="nav-item"><a class="nav-link active" href="#" aria-label="English version">EN</a></li>
+      <li class="nav-item"><a class="nav-link" href="#" aria-label="Version française" lang="fr" hreflang="fr">FR</a></li>
+      <li class="nav-item"><a class="nav-link" href="#" aria-label="Version en español" lang="es" hreflang="es">ES</a></li>
     </ul>
-  </div>
-</nav>
+{{< /orange-supra >}}
 {{< /example >}}
 
 You can have a complete overview of how to use supra bars in the dedicated [Design Guidelines page]({{<docsref "/guidelines/global-headers">}})