_top-bar.scss in zurb-foundation-4.3.0

- old
+ new

@@ -6,18 +6,18 @@
 // Background color for the top bar
 $topbar-bg: #111 !default;
 
 // Height and margin
 $topbar-height: 45px !default;
-$topbar-margin-bottom: emCalc(30px) !default;
+$topbar-margin-bottom: emCalc(30) !default;
 
 // Control Input height for top bar
 $topbar-input-height: 2.45em !default;
 
 // Controlling the styles for the title in the top bar
 $topbar-title-weight: bold !default;
-$topbar-title-font-size: emCalc(17px) !default;
+$topbar-title-font-size: emCalc(17) !default;
 
 // Style the top bar dropdown elements
 $topbar-dropdown-bg: #222 !default;
 $topbar-dropdown-link-color: #fff !default;
 $topbar-dropdown-link-bg: lighten($topbar-bg, 5%) !default;
@@ -28,32 +28,32 @@
 // Set the link colors and styles for top-level nav
 $topbar-link-color: #fff !default;
 $topbar-link-color-hover: #fff !default;
 $topbar-link-color-active: #fff !default;
 $topbar-link-weight: bold !default;
-$topbar-link-font-size: emCalc(13px) !default;
+$topbar-link-font-size: emCalc(13) !default;
 $topbar-link-hover-lightness: -30% !default; // Darken by 30%
 $topbar-link-bg-hover: darken($topbar-bg, 3%) !default;
 $topbar-link-bg-active: darken($topbar-bg, 3%) !default;
 
 $topbar-dropdown-label-color: #555 !default;
 $topbar-dropdown-label-text-transform: uppercase !default;
 $topbar-dropdown-label-font-weight: bold !default;
-$topbar-dropdown-label-font-size: emCalc(10px) !default;
+$topbar-dropdown-label-font-size: emCalc(10) !default;
 
 // Top menu icon styles
 $topbar-menu-link-transform: uppercase !default;
-$topbar-menu-link-font-size: emCalc(13px) !default;
+$topbar-menu-link-font-size: emCalc(13) !default;
 $topbar-menu-link-weight: bold !default;
 $topbar-menu-link-color: #fff !default;
 $topbar-menu-icon-color: #fff !default;
 $topbar-menu-link-color-toggled: #888 !default;
 $topbar-menu-icon-color-toggled: #888 !default;
 
 // Transitions and breakpoint styles
 $topbar-transition-speed: 300ms !default;
-$topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
+$topbar-breakpoint: emCalc(940) !default; // Change to 9999px for always mobile layout
 $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;
 
 // Divider Styles
 $topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%) !default;
 $topbar-divider-border-top: solid 1px darken($topbar-bg, 10%) !default;
@@ -66,11 +66,11 @@
   /* Wrapped around .top-bar to contain to grid width */
   .contain-to-grid {
     width: 100%;
     background: $topbar-bg;
 
-    .top-bar { margin-bottom: 0; }
+    .top-bar { margin-bottom: $topbar-margin-bottom; }
   }
 
   // Wrapped around .top-bar to make it stick to the top
   .fixed {
     width: 100%;
@@ -322,10 +322,13 @@
         height: auto;
 
         a {
           font-weight: normal;
           padding: 8px $topbar-height / 3;
+          &.parent-link {
+            font-weight: $topbar-link-weight;
+          }
         }
 
         &.title h5 { margin-bottom: 0;
           a {
             color: $topbar-link-color;
@@ -367,11 +370,11 @@
       .name h1 a { width: auto; }
 
       input,
       .button {
         line-height: 2em;
-        font-size: emCalc(14px);
+        font-size: emCalc(14);
         height: 2em;
         padding: 0 10px;
         position: relative;
         top: 8px;
       }
@@ -380,10 +383,11 @@
     }
 
     .contain-to-grid .top-bar {
       max-width: $row-width;
       margin: 0 auto;
+      margin-bottom: $topbar-margin-bottom;
     }
 
     .top-bar-section {
       @include single-transition(none,0,0);
       #{$default-float}: 0 !important;
@@ -421,11 +425,11 @@
 
         &.moved { position: relative;
           & > .dropdown { visibility: hidden; }
         }
 
-        &.hover {
+        &.hover, &.not-click:hover {
           & > .dropdown {
             visibility: visible;
           }
         }
 
@@ -499,10 +503,10 @@
     }
     
     // Degrade gracefully when Javascript is disabled. Displays dropdown and changes 
     // background & text color on hover.
     .no-js .top-bar-section {
-	  ul li {    
+	  ul li {
         // Apply the hover link color when it has that class
         &:hover > a {
           background: $topbar-link-bg-hover;
           color: $topbar-link-color-hover;
         }