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 e30c82a4d4b43672c91578e7a90b1914da01dbcd..882f4c8ecce0df75594e5fad1c0d50a69f22151e 100755 (executable)
--- 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 5ad2cb2f94458c113d966ae04ced9f6c8b923341..30771df51274be85a7859b2b828bddcc4d1df009 100755 (executable)
--- 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 c55c7d2c9fdf3b52567d30d489c71ac1f79f0a69..41a788885a2cbbe5f3e9ec1a990cb6c17a427b5f 100755 (executable)
--- 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;
+                }
               }
             }