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 5b04856ed7b8f7cf2d1482275b26bfe29d744b61..ce2c61a85c4722449fe038e1034a8dd22e61d0a9 100644 (file)
--- 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;