feat(o-nav-local): only declare the specific styles

Orange-OpenSource · Nov 4, 2019 · da445cf · da445cf
1 parent 112c4a2
commit da445cf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 96 deletions.
diff --git a/scss/_o-nav-local.scss b/scss/_o-nav-local.scss
@@ -7,79 +7,7 @@
   border-top: $border-width / 2 solid $gray-500;
   border-bottom: $border-width / 2 solid $gray-500;
 
-  > .container,
-  > .container-fluid {
-    display: flex;
-  }
-
-  ul + ul {
-    flex-shrink: 0;
-    margin-left: 1rem;
-  }
-
-  .nav-item + .nav-item {
-    margin-left: 1rem;
-  }
-
-  .nav.flex-column .nav-item {
-    margin-left: 0;
-  }
-
-  .nav .nav-link,
-  .nav .dropdown-toggle {
-    display: inline-block;
-    padding: 1rem ($nav-link-padding-x * .5) 1.125rem;
-    font-size: $font-size-base;
-    font-weight: $font-weight-bold;
-    line-height: 1;
-    &:focus {
-      outline: $border-width solid;
-      outline-offset: -#{$border-width};
-    }
-  }
-
-  .nav-link.active {
-    color: theme-color("primary");
-  }
-
-  .dropdown-toggle.show {
-    color: $black;
-  }
-
-  .dropdown-menu {
-    .nav-item,
-    .nav-item + .nav-item {
-      margin: 0;
-    }
-
-    .nav-link {
-      display: block;
-      padding: map-get($spacers, 2) map-get($spacers, 2) map-get($spacers, 2) $spacer;
-      &:focus {
-        outline-offset: -#{$border-width};
-      }
-      &:hover {
-        color: $white;
-        background: $black;
-      }
-    }
+  .navbar-dark & {
+    border-color: $gray-900;
   }
 }
-
-.o-nav-local.inverse {
-  background-color: $black;
-  border-top-color: $gray-900;
-  border-bottom-color: $gray-900;
-
-  .nav-link {
-    color: $white;
-    background-color: $black;
-    @include hover-focus() {
-      color: $orange-2;
-    }
-    &.active {
-      color: $orange-2;
-    }
-  }
-}
-
diff --git a/site/docs/4.3/components/local-navigation.md b/site/docs/4.3/components/local-navigation.md
@@ -8,7 +8,8 @@ toc: true
 
 ## Default local navigation
 
-Wrap your `<ul>` list in a `<nav>` tag within a `.container` block. Wrap the whole in a `.o-nav-local` block.
+Use `<ul>` element with the `.o-nav-local` class, wrapped in a `<nav>` tag with `.container` class.
+You also **need to choose a color scheme** by setting `.navbar-light` or `.navbar-dark` on your container `<nav>` element.
 
 {% capture callout %}
 #### Accessibility
@@ -17,31 +18,27 @@ In addition to the `.active` class, you must use `aria-current="page"` state to
 {% endcapture %}
 
 {% capture example %}
-<div class="o-nav-local">
-    <nav class="container">
-        <ul class="nav">
-            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">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>
-</div>
+<nav class="container navbar-light">
+    <ul class="nav o-nav-local">
+        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">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>
 {% endcapture %} {% include example.html content=example %}
 
-## Inverse local navigation
+## Dark background
 
-Simply add `.inverse` class to your `.o-nav-local` container.
+Simply switch `.navbar-light` to `.navbar-dark .bg-dark` class to your `.o-nav-local` parent `<nav>` container.
 
 {% capture example %}
-<div style="margin: 2rem 0; padding: 2rem 0;" class="bg-dark">
-    <div class="o-nav-local inverse">
-        <nav class="container">
-            <ul class="nav">
-                <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">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>
-    </div>
+<div class="bg-dark pt-3 px-3 pb-1">
+    <nav class="container navbar-dark">
+        <ul class="nav o-nav-local">
+            <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">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>
 </div>
 {% endcapture %} {% include example.html content=example %}