From: clyates <chris@clyates.plus.com>
Date: Thu, 10 Apr 2014 14:25:06 +0000 (+0100)
Subject: Update _top-bar.scss
X-Git-Tag: v5.2.3~57^2~3^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F4946%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Update _top-bar.scss

Fix to three issues:

Removing the background from .top-bar-section ul (line 286) prevents bleed through of dropdown background colour onto the top level if ul elements have had padding declared elsewhere

Adding padding: 0; to .dropdown (line 385) ensures that dropdown menus align the the top menu item and sit alongside each other whether or not ul elements have had padding declared elsewhere

Changes to line heights (lines 484, 491, and 549)  make top level links the same height as the Top Bar removing the "overhang" at the bottom, while keeping the line height for dropdown links
---

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 5b04856ed..ce2c61a85 100644
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -283,7 +283,6 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         width: 100%;
         height: auto;
         display: block;
-        background: $topbar-dropdown-bg;
         font-size: $rem-base;
         margin: 0;
       }
@@ -383,6 +382,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
       // Styling elements inside of dropdowns
       .dropdown {
+        padding: 0;
         position: absolute;
         #{$default-float}: 100%;
         top: 0;
@@ -480,7 +480,6 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           &:not(.has-form) {
             a:not(.button) {
               padding: 0 $topbar-link-padding;
-              line-height: $topbar-height;
               background: $topbar-link-bg;
               &:hover { background: $topbar-link-bg-hover; }
             }
@@ -488,7 +487,6 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           &.active:not(.has-form) {
             a:not(.button) {
               padding: 0 $topbar-link-padding;
-              line-height: $topbar-height;
               color: $topbar-link-color-active;
               background: $topbar-link-bg-active;
               &:hover { background: $topbar-link-bg-active-hover; }
@@ -547,7 +545,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           li {
             a {
               color: $topbar-dropdown-link-color;
-              line-height: 1;
+              line-height: $topbar-height;
               white-space: nowrap;
               padding: 12px $topbar-link-padding;
               background: $topbar-dropdown-link-bg;