fix(o-footer): prevent o-footer .nav-link styles from leaking to tabs…

Orange-OpenSource · Nov 4, 2019 · 463b8bd · 463b8bd
1 parent a9ccab6
commit 463b8bd
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 40 deletions.
diff --git a/scss/_o-footer.scss b/scss/_o-footer.scss
@@ -10,6 +10,7 @@
   background-color: $black;
 
   .nav-link {
+    padding: $nav-link-padding-y;
     font-size: $font-size-sm;
 
     &:not(:hover),

diff --git a/scss/_o-nav.scss b/scss/_o-nav.scss
@@ -1,19 +1,3 @@
-// Base nav
-.nav {
-  .nav-item:first-child {
-    margin-left: - map-get($spacers, 2);
-  }
-
-  &.flex-column .nav-item:first-child {
-    margin-left: 0;
-  }
-
-  .nav-link {
-    padding: $nav-link-padding-y ($nav-link-padding-x * .5);
-    line-height: 1.25rem;
-  }
-}
-
 // Boosted mod
 .o-nav-light {
   padding-left: inherit;

diff --git a/site/docs/4.3/components/orange-footer.md b/site/docs/4.3/components/orange-footer.md
@@ -19,14 +19,16 @@ According to the brand, Orange footer has black background and white text color.
 <footer class="o-footer" role="contentinfo">
     <h1 class="sr-only">footer - site map & informations</h1>
     <div class="o-footer-top">
-        <div class="container-fluid">
-            <ul class="nav">
-                <li class="nav-item"><span class="nav-link">Follow us</span></li>
-            </ul>
+        <div class="container">
+            <div class="row mb-0">
+                <ul class="nav">
+                    <li class="nav-item"><span class="nav-link">Follow us</span></li>
+                </ul>
+            </div>
         </div>
     </div>
     <div class="o-footer-body">
-        <div class="container-fluid">
+        <div class="container">
             <div class="row">
                 <div class="col-md-3 col-sm-6">
                     <h2>Discover</h2>
@@ -64,28 +66,32 @@ According to the brand, Orange footer has black background and white text color.
                     </ul>
                 </div>
             </div>
-            <ul class="nav">
-                <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Locate a store</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Coverage map</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Business</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Child protection</a></li>
-            </ul>
+            <div class="row mb-0">
+                <ul class="nav">
+                    <li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Locate a store</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Coverage map</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Business</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Child protection</a></li>
+                </ul>
+            </div>
         </div>
     </div>
     <div class="o-footer-bottom">
-        <div class="container-fluid">
-            <ul class="nav">
-                <li class="nav-item"><span class="nav-link">© Orange 2018-2019</span></li>
-                <li class="nav-item"><a class="nav-link" href="#">Jobs</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Advertise</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Terms & Conditions</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Privacy</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Cookies</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Access for all</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Safety online</a></li>
-            </ul>
+        <div class="container">
+            <div class="row mb-0">
+                <ul class="nav">
+                    <li class="nav-item"><span class="nav-link">© Orange 2018-2019</span></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Jobs</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Advertise</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Terms & Conditions</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Privacy</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Cookies</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Access for all</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#">Safety online</a></li>
+                </ul>
+            </div>
         </div>
     </div>
 </footer>
-{% endcapture %} {% include example.html content=example %}
+{% endcapture %} {% include example.html content=example %}