From: Edgar Gonzalez <edggonzalezg@gmail.com>
Date: Fri, 15 Aug 2014 18:57:16 +0000 (-0400)
Subject: Add .active class for topbar dropdown items
X-Git-Tag: v5.4~12^2~6^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F5622%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add .active class for topbar dropdown items

Previously, the `.active` class was being overriden by the `.dropdown`
selectors in the `.top-bar-section`, thus not allowing active dropdown
items to be highlighted.

This commit adds another pseudo-selector to ensure the `.active`
dropdown items get the correct highlight colors. It also works in
dropdowns within dropdowns within dropdowns.
---

diff --git a/doc/includes/topbar/examples_topbar_default.html b/doc/includes/topbar/examples_topbar_default.html
index e30c82a4d..882f4c8ec 100755
--- a/doc/includes/topbar/examples_topbar_default.html
+++ b/doc/includes/topbar/examples_topbar_default.html
@@ -15,6 +15,7 @@
         <a href="#">Right Button Dropdown</a>
         <ul class="dropdown">
           <li><a href="#">First link in dropdown</a></li>
+          <li class="active"><a href="#">Active link in dropdown</a></li>
         </ul>
       </li>
     </ul>
diff --git a/doc/pages/components/topbar.html b/doc/pages/components/topbar.html
index 5ad2cb2f9..30771df51 100755
--- a/doc/pages/components/topbar.html
+++ b/doc/pages/components/topbar.html
@@ -91,6 +91,7 @@ The top bar is a pretty complex piece of magical UI goodness. We rely on many pr
             <a href="#">Right Button Dropdown</a>
             <ul class="dropdown">
               <li><a href="#">First link in dropdown</a></li>
+              <li class="active"><a href="#">Active link in dropdown</a></li>
             </ul>
           </li>
         </ul>
@@ -101,6 +102,7 @@ The top bar is a pretty complex piece of magical UI goodness. We rely on many pr
             <a href="#">Right Dropdown</a>
             <ul class="dropdown">
               <li><a href="#">First link in dropdown</a></li>
+              <li class="active"><a href="#">Active link in dropdown</a></li>
             </ul>
           </li>
         </ul>
diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index c55c7d2c9..41a788885 100755
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -567,15 +567,18 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               background: $topbar-dropdown-link-bg;
             }
 
-            &:not(.has-form) a:not(.button) {
-              color: $topbar-dropdown-link-color;
-              background: $topbar-dropdown-link-bg;
-            }
-            &:not(.has-form):hover > a:not(.button) {
-              color: $topbar-link-color-hover;
-              background-color: $topbar-link-bg-color-hover;
-              @if ($topbar-link-bg-hover) {
-                background: $topbar-link-bg-hover;
+            &:not(.has-form):not(.active) {
+              & > a:not(.button) {
+                color: $topbar-dropdown-link-color;
+                background: $topbar-dropdown-link-bg;
+              }
+
+              &:hover > a:not(.button) {
+                color: $topbar-link-color-hover;
+                background-color: $topbar-link-bg-color-hover;
+                @if ($topbar-link-bg-hover) {
+                  background: $topbar-link-bg-hover;
+                }
               }
             }