Update _top-bar.scss

Previous Pull request introduces a problem with the JavaScript generated Back links - this fixes that issue.

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 5b04856ed7b8f7cf2d1482275b26bfe29d744b61..7b3d249637951127bdf640c84c6eef29e43daffc 100644 (file)
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -73,7 +73,7 @@ $topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px
 $topbar-media-query: $medium-up !default;
 
 // Divider Styles
-$topbar-divider-border-bottom: solid 1px  scale-color($topbar-bg-color, $lightness: 13%) !default;
+$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
 $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;
 
 // Sticky Class
@@ -280,10 +280,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
       @include single-transition($default-float, $topbar-transition-speed);
 
       ul {
+        padding: 0;
         width: 100%;
         height: auto;
         display: block;
-        background: $topbar-dropdown-bg;
         font-size: $rem-base;
         margin: 0;
       }
@@ -297,6 +297,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
       }
 
       ul li {
+        background: $topbar-dropdown-bg;
         & > a {
           display: block;
           width: 100%;
@@ -307,7 +308,6 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           font-size: $topbar-link-font-size;
           font-weight: $topbar-link-weight;
           text-transform: $topbar-link-text-transform;
-          background: $topbar-dropdown-bg;
 
 
           &.button {
@@ -317,8 +317,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             @include button-style($bg:$primary-color);
           }
           &.button.secondary { @include button-style($bg:$secondary-color); }
-          &.button.success   { @include button-style($bg:$success-color); }
-          &.button.alert     { @include button-style($bg:$alert-color); }
+          &.button.success { @include button-style($bg:$success-color); }
+          &.button.alert { @include button-style($bg:$alert-color); }
         }
 
         > button {
@@ -328,8 +328,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           @include button-style($bg:$primary-color);
 
           &.secondary { @include button-style($bg:$secondary-color); }
-          &.success   { @include button-style($bg:$success-color); }
-          &.alert     { @include button-style($bg:$alert-color); }
+          &.success { @include button-style($bg:$success-color); }
+          &.alert { @include button-style($bg:$alert-color); }
         }
 
         // Apply the hover link color when it has that class
@@ -383,6 +383,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;
@@ -401,7 +402,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             }
           }
 
-          &.title h5 { margin-bottom: 0;
+          &.title h5 {
+            margin-bottom: 0;
+            margin-top: 0;
             a {
               color: $topbar-link-color;
               line-height: $topbar-height / 2;
@@ -480,7 +483,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 +490,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 +548,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;
@@ -555,7 +556,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
             &:not(.has-form) a:not(.button) {
               color: $topbar-dropdown-link-color;
-              background: $topbar-dropdown-link-bg;   
+              background: $topbar-dropdown-link-bg;
             }
             &:not(.has-form):hover > a:not(.button) {
               color: $topbar-link-color-hover;