zurb-foundation 3.2.3 → 3.2.4.rc1

data/CHANGELOG.md

@@ -3,6 +3,25 @@ We'll keep you up to date with what we've released so you at least have a gist o
 
 ---
 
+### 3.2.4- January 14, 2013
+This path includes bug fixes and a few style improvements for small UI elements. This patch includes:
+* Bumped Joyride to version 2.0.3
+* Added centered pagination style
+* Fixed bug with Orbit captions
+* Fixed bugs with clicking on accordion element
+* Added styling for buttons inside dropdowns
+* We're now using max-width instead of width on tooltips
+* Added class, .tip-centered-top and .top-centered-bottom for positioning tooltips
+* Added functionality to create a stick top bar that enables it to be down the page in the markup and stick when it hits the browser edge.
+* Fixes to the semantic grid mixin
+* Added better :focus styles for error inputs
+* Added settings for Top Bar Toggle color
+* Updated Modular Scale to version 1.0.6
+* Fixed bug with printing styles
+
+### 3.2.3
+This patch fixed some quick bug fixes.
+
 ### 3.2.2- November 10, 2012
 This patch fixes a typo found in the tabs plugin.
 

data/README.md

@@ -35,6 +35,7 @@ WordPress
 * [Reverie](http://themefortress.com/reverie/) by Zhen
 * [WP-Foundation](http://320press.com/wp-foundation/features/) by 320press
 * [Yeti](https://github.com/modlearning/Yeti) by Modular Learning
+* [Foundation Base](https://github.com/petskratt/foundation-base/) by Peeter Marvet
 
 Joomla
 

data/foundation.gemspec

@@ -17,6 +17,6 @@ Gem::Specification.new do |gem|
 
   gem.add_dependency "compass", [">= 0.12.2"]
   gem.add_dependency "sass", [">= 3.2.0"]
-  gem.add_dependency "modular-scale", [">= 1.0.2"]
+  gem.add_dependency "modular-scale", ["= 1.0.6"]
   gem.add_dependency "rake"
 end

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "3.2.3"
+  VERSION = "3.2.4.rc1"
 end

data/scss/foundation/_settings.scss

@@ -23,7 +23,7 @@ $darkEdge: rgba(#000, .2) !default;
 
 // Font Settings
 
-$fontSmoothing: antialiased;
+$fontSmoothing: antialiased !default;
 $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $headerFontWeight: bold !default;
 $headerFontStyle: normal !default;
@@ -118,8 +118,12 @@ $topBarDropToggleSize: 5px !default;
 $topBarDropToggleColor: #fff !default;
 $topBarDropToggleAlpha: 0.5 !default;
 $topBarSearchWidth: 200px !default;
+$topBarLoginWidth: 300px !default;
+$topBarLoginButtonWidth: 60px !default;
+$topBarLoginInputWidth: ($topBarLoginWidth - $topBarLoginButtonWidth) / 2 !default;
 $topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
 $topBarNavToggleSize: 8px !default;
+$topBarNavToggleColor: #fff !default;
 
 // UI Settings
 
@@ -130,6 +134,7 @@ $progBarBorderSize: 1px !default;
 $progBarPad: 2px !default;
 $linkListBottomMargin: 17px -22px !default;
 $tableBorderRadius: 3px !default;
+$alertBorderRadius: 3px !default;
 
 // Tooltip Settings
 
@@ -143,10 +148,10 @@ $tooltipBackgroundOpacity: 0.85 !default;
 $tooltipFontSize: 12px !default;
 $tooltipFontWeight: bold !default;
 $tooltipFontColor: #fff !default;
-$tapToCloseFontSize: 10 !default;
+$tapToCloseFontSize: 10px !default;
 $tapToCloseFontWeight: normal !default;
 $tapToCloseFontColor: #888 !default;
-$tooltipFontSizeScreenSm: 14 !default;
+$tooltipFontSizeScreenSm: 14px !default;
 $tooltipBgOpacityScreenSm: 0.85 !default;
 $tooltipBorderRadius: 4px !default;
 

data/scss/foundation/common/_forms.scss

@@ -40,18 +40,16 @@
   select { width: 100%; }
 
   /* Fieldsets */
-  fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px 12px 0; margin: 18px 0;
+  fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px; margin: 18px 0;
 
     legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
   }
 
   /* Errors */
-  .error input, input.error, .error textarea, textarea.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
+  .error input, input.error, .error textarea, textarea.error, .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
+  .error input:focus, input.error:focus, .error textarea:focus, textarea.error:focus { outline-color: lighten($alertColor, 30%); }
   .error label, label.error { color: $alertColor; }
-  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; font-size: ms(0) - 2; font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }
-  .error textarea, textarea.error {
-    &:focus { background: darken($white, 2%); border-color: darken($white, 30%); }
-  }
+  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; font-size: ms(0) - 2; font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, $inputBorderRadius); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }
   /* Custom Forms ---------------------- */
 
   form.custom {
@@ -114,6 +112,6 @@
 
   /* Correct FF custom dropdown height */
   @-moz-document url-prefix() {
-    form.custom div.custom.dropdown a.selector { height: 30px; }
+    form.custom div.custom.dropdown a.selector { height: 28px; }
   }
-  .lt-ie9 form.custom div.custom.dropdown a.selector { height: 30px; }
+  .lt-ie9 form.custom div.custom.dropdown a.selector { height: 28px; }

data/scss/foundation/components/_grid.scss

@@ -43,8 +43,8 @@
     .pull-#{convert-number-to-word($i)} { #{$defaultOpposite}: gridCalc($i, $totalColumns); }
   }
 
-  img, object, embed { max-width: 100%; height: auto; }
-  object, embed { height: 100%; }
+  img { height: auto; }
+  img, object, embed { max-width: 100%; }
   img { -ms-interpolation-mode: bicubic; }
   #map_canvas img, .map_canvas img {max-width: none!important;}
 
@@ -71,16 +71,16 @@ that IE7/8 do not support :nth-child.
     @for $i from 1 through $blockGridElements {
       &.#{convert-number-to-word($i)}-up {
         @if $i == 1 { margin: 0; }
-        @if $i == 2 { margin: 0 -15px; }
-        @if $i == 3 { margin: 0 -12px; }
-        @if $i == 4 { margin: 0 -10px; }
+        @else if $i == 2 { margin: 0 -15px; }
+        @else if $i == 3 { margin: 0 -12px; }
+        @else if $i == 4 { margin: 0 -10px; }
         @else { margin: 0 -8px; }
         &>li {
           width: 100%/$i;
           @if $i == 1 { padding: 0 0 15px; }
-          @if $i == 2 { padding: 0 15px 15px; }
-          @if $i == 3 { padding: 0 12px 12px; }
-          @if $i == 4 { padding: 0 10px 10px; }
+          @else if $i == 2 { padding: 0 15px 15px; }
+          @else if $i == 3 { padding: 0 12px 12px; }
+          @else if $i == 4 { padding: 0 10px 10px; }
           @else { padding: 0 8px 8px; }
           @if $i > 1 { &:nth-child(#{$i}n+1) { clear: both; } }
         }

data/scss/foundation/components/modules/_buttons.scss

@@ -37,7 +37,7 @@
 
 		/* Disabled ---------- */
     &.disabled, &[disabled] { opacity: 0.6; cursor: default; background: $mainColor; @include box-shadow(none);
-      :hover { background: $mainColor; }
+      &:hover { background: $mainColor; }
 
       &.success { background-color: $successColor;
         &:hover, &:focus { background-color: $successColor; outline: none; }
@@ -82,7 +82,8 @@
     &>ul { @include box-sizing(content-box); display: none; position: absolute; #{$defaultFloat}: -1px; background: #fff; background: rgba(#fff,0.95); list-style: none; margin: 0; padding: 0; border: 1px solid darken($white, 20%); border-top: none; min-width: 100%; z-index: 40;
 
       li { width: 100%; cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
-        a { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: $defaultFloat; }
+        a, button { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: $defaultFloat; }
+        button { width: 100%; border: inherit; background: inherit; font-family: inherit; margin: inherit; -webkit-font-smoothing: $fontSmoothing; }
         &:hover, &:focus { background-color: lighten($mainColor, 45%); color: #222; }
         &.divider { min-height: 0; padding: 0; height: 1px; margin: 4px 0; background: darken($white, 7%); }
       }
@@ -108,7 +109,7 @@
 
       /* Sizes */
       &>a { color: $white; display: block; padding: $btnBase (($btnBase * 2.5) * 2) ($btnBase + 1) ($btnBase * 2); padding-#{$defaultFloat}: $btnBase * 2; padding-#{$defaultOpposite}: ($btnBase * 2.5) * 2; @include single-transition(background-color, .15s, ease-in-out);
-        &:hover, &:focus { background-color: darken($mainColor, 10%); }
+        &:hover, &:focus { background-color: darken($mainColor, 10%); @include box-shadow(0 1px 0 $shinyEdge inset); }
       }
       &.large>a { padding: $largeBtnBase (($largeBtnBase * 2.5) * 2) ($largeBtnBase + 1) ($largeBtnBase * 2); padding-#{$defaultFloat}: $largeBtnBase * 2; padding-#{$defaultOpposite}: ($largeBtnBase * 2.5) * 2; }
       &.small>a { padding: $smallBtnBase (($smallBtnBase * 2.5) * 2) ($smallBtnBase + 1) ($smallBtnBase * 2); padding-#{$defaultFloat}: $smallBtnBase * 2; padding-#{$defaultOpposite}: ($smallBtnBase * 2.5) * 2; }
@@ -150,16 +151,14 @@
     }
 
     &.radius li {
-      a, input[type="submit"] {
-        &.button, &.button.radius, &.button-rounded { @include border-radius(0px); }
-      }
-      &:first-child a, &:first-child input[type="submit"] {
-        &.button, &.button.radius { @include border-corner-radius(top, $defaultFloat, $buttonRadius); @include border-corner-radius(bottom, $defaultFloat, $buttonRadius); }
-        &.button.rounded { @include border-corner-radius(top, $defaultFloat, 1000px); @include border-corner-radius(bottom, $defaultFloat, 1000px); }
+      .button, .button.radius, .button-rounded { @include border-radius(0px); }
+      &:first-child {
+        .button, .button.radius { @include border-corner-radius(top, $defaultFloat, $buttonRadius); @include border-corner-radius(bottom, $defaultFloat, $buttonRadius); }
+        .button.rounded { @include border-corner-radius(top, $defaultFloat, 1000px); @include border-corner-radius(bottom, $defaultFloat, 1000px); }
       }
-      &:last-child a, &:last-child input[type="submit"] {
-        &.button, &.button.radius { @include border-corner-radius(top, $defaultOpposite, $buttonRadius); @include border-corner-radius(bottom, $defaultOpposite, $buttonRadius); }
-        &.button.rounded { @include border-corner-radius(top, $defaultOpposite, 1000px); @include border-corner-radius(bottom, $defaultOpposite, 1000px); }
+      &:last-child {
+        .button, .button.radius { @include border-corner-radius(top, $defaultOpposite, $buttonRadius); @include border-corner-radius(bottom, $defaultOpposite, $buttonRadius); }
+        .button.rounded { @include border-corner-radius(top, $defaultOpposite, 1000px); @include border-corner-radius(bottom, $defaultOpposite, 1000px); }
       }
     }
 

data/scss/foundation/components/modules/_clearing.scss

@@ -21,7 +21,7 @@
 .clearing-main-left { left: 10px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,right); }
 .clearing-main-right { right: 10px; @include cssTriangle($clearingArrowSize,$clearingArrowColor,left); }
 
-.block-grid.three-up > li:nth-child(3n+1) { clear: none; }
+ul[data-clearing].block-grid.three-up > li:nth-child(3n+1) { clear: none; }
 
 ul[data-clearing] li { cursor: pointer; display: block;
   &.clearing-feature ~ li { display: none; }

data/scss/foundation/components/modules/_mqueries.scss

@@ -218,7 +218,7 @@
     }
 
     .block-grid {
-      &>li { clear: none !important; }
+      &>li { clear: none; }
       @for $i from 1 through $blockGridElements {
         &.mobile-#{convert-number-to-word($i)}-up>li {
           width: 100%/$i;
@@ -259,7 +259,7 @@
 
     /* Basic overrides */
     .button { display: block; }
-    button.button, input[type="submit"].button { width: 100%; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
+    button.button, input[type="submit"].button, input[type="reset"].button { width: 100%; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
     /* Button Groups */
     .button-group {
       button.button, input[type="submit"].button { width: auto; padding: $btnBase ($btnBase * 2) ($btnBase + 1);
@@ -319,9 +319,9 @@
       dt, li, dd { float: none; height: auto; }
       dd a, li a { font-size: ms(0) + 1; display: block; width: auto; height: auto; padding: 18px 20px; margin: 0; color: #555; line-height: 1; border: none; border-#{$defaultFloat}: none; border-#{$defaultOpposite}: none; border-top: 1px solid #ccc; background: #fff; }
       dd a.active, li a.active { border: none; background: $mainColor; color: #fff; margin: 0; position: static; top: 0; height: auto; }
-      dd:first-child, li:first-child { padding-left: 20px !important; }
       dd:first-child a.active, li:first-child a.active { margin: 0; }
-      &+.tabs-content.contained { margin-left:-15px; margin-right:-15px; }
+      &+.tabs-content.contained { margin-#{$defaultFloat}:-15px; margin-#{$defaultOpposite}:-15px; }
+      .section-title { padding-#{$defaultFloat}: 20px !important; }
     }
 
     .contained.mobile { margin-bottom: 0; }
@@ -358,7 +358,7 @@
       .contain-to-grid & { width: auto; }
 
       /* Setting up the sliding area */
-      section { left: 0; position: relative; width: auto; @include single-transition(left, 300ms); }
+      section { left: 0; position: relative; width: auto; @include single-transition(left,300ms,0); }
       ul { width: 100%; height: 100%; margin-bottom: 0; display: block;
         &>li { float: none;
           &.active, &:hover { background: darken($topBarDropBgColor, 5%); }
@@ -373,7 +373,7 @@
 
           /* Dropdown Toggle */
           &.toggle-topbar { cursor: pointer; display: block; height: $topBarHeightMobile; position: absolute; right: 0; top: 0; width: 50%;
-            a { @include cssTriangle($topBarNavToggleSize, #fff, top); padding: 0; position: absolute; top: 50%; right: $topBarHeightMobile / 2; margin-top: -($topBarNavToggleSize / 2); }
+            a { @include cssTriangle($topBarNavToggleSize, $topBarNavToggleColor, top); padding: 0; position: absolute; top: 50%; right: $topBarHeightMobile / 2; margin-top: -($topBarNavToggleSize / 2); }
             @if $topBarBreakPoint == 9999px { a { right: ($topBarHeight / 2) + ($columnGutter / 2);} }
             &:hover { background: inherit; }
           }
@@ -386,7 +386,7 @@
           &.search { padding: 0 $topBarHeight / 2;
             form { width: 100%;
               input[type=text] { width: 75%; }
-              .button { top: 0; width: 25%; }
+              .button { top: -1px; width: 25%; }
             }
           }
 
@@ -447,7 +447,7 @@
 
       /* When the Small Nav is Showing */
       &.expanded { height: 100%;
-        ul li.toggle-topbar a { @include cssTriangle($topBarNavToggleSize, rgba(255,255,255,0.5), bottom); top: auto; bottom: 50%; margin-bottom: -($topBarNavToggleSize / 2); }
+        ul li.toggle-topbar a { @include cssTriangle($topBarNavToggleSize, darken($topBarNavToggleColor, 20%), bottom); top: auto; bottom: 50%; margin-bottom: -($topBarNavToggleSize / 2); }
       }
     }
     .top-bar ul li.has-button { padding: 5px $topBarHeightMobile / 3; }
@@ -455,4 +455,4 @@
     .top-bar ul > li.has-button {
       a.button { margin: 0; }
     }
-  }
+  }

data/scss/foundation/components/modules/_orbit.scss

@@ -21,8 +21,8 @@
 
   /* Timer ---------------------- */
 
-  div.orbit-wrapper  {
-    div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; #{$defaultOpposite}: 10px; opacity: .6; cursor: pointer; z-index: 31; }
+  .orbit-wrapper  {
+    .timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; #{$defaultOpposite}: 10px; opacity: .6; cursor: pointer; z-index: 31; }
     span.rotator { display: block; width: 40px; height: 40px; position: absolute; top: 0; #{$defaultFloat}: -20px; background: image-url("foundation/orbit/rotator-black.png") no-repeat; z-index: 3;
       &.move { #{$defaultFloat}: 0 }
     }
@@ -32,7 +32,7 @@
     span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; #{$defaultFloat}: 0; background: image-url("foundation/orbit/pause-black.png") no-repeat; z-index: 4; opacity: 0;
       &.active { background: image-url("foundation/orbit/pause-black.png") no-repeat 0 -40px; }
     }
-    div.timer:hover span.pause, div.timer:focus span.pause, span.pause.active { opacity: 1 }
+    .timer:hover span.pause, .timer:focus span.pause, span.pause.active { opacity: 1 }
   }
 
   /* Captions ---------------------- */
@@ -42,17 +42,17 @@
 
   /* Directional Nav ---------------------- */
 
-  div.orbit-wrapper {
-    div.slider-nav { display: block; }
-    div.slider-nav span { width: 39px; height: 50px; text-indent: -9999px; position: absolute; z-index: 30; top: 50%; margin-top: -25px; cursor: pointer; }
-    div.slider-nav span.#{$defaultOpposite} { background: image-url("foundation/orbit/#{$defaultOpposite}-arrow.png"); background-size: 100%; #{$defaultOpposite}: 0; }
-    div.slider-nav span.#{$defaultFloat} { background: image-url("foundation/orbit/#{$defaultFloat}-arrow.png"); background-size: 100%; #{$defaultFloat}: 0; }
+  .orbit-wrapper {
+    .slider-nav { display: block; }
+    .slider-nav span { width: 39px; height: 50px; text-indent: -9999px; position: absolute; z-index: 30; top: 50%; margin-top: -25px; cursor: pointer; }
+    .slider-nav span.#{$defaultOpposite} { background: image-url("foundation/orbit/#{$defaultOpposite}-arrow.png"); background-size: 100%; #{$defaultOpposite}: 0; }
+    .slider-nav span.#{$defaultFloat} { background: image-url("foundation/orbit/#{$defaultFloat}-arrow.png"); background-size: 100%; #{$defaultFloat}: 0; }
   }
 
   .lt-ie9 {
-    div.orbit-wrapper {
-      div.slider-nav span.#{$defaultOpposite} { background: image-url("foundation/orbit/#{$defaultOpposite}-arrow-small.png"); }
-      div.slider-nav span.#{$defaultFloat} { background: image-url("foundation/orbit/#{$defaultFloat}-arrow-small.png"); }
+    .orbit-wrapper {
+      .slider-nav span.#{$defaultOpposite} { background: image-url("foundation/orbit/#{$defaultOpposite}-arrow-small.png"); }
+      .slider-nav span.#{$defaultFloat} { background: image-url("foundation/orbit/#{$defaultFloat}-arrow-small.png"); }
     }
   }
 
@@ -71,19 +71,19 @@
 
   /* Fluid Layout ---------------------- */
 
-  div.orbit img.fluid-placeholder { visibility: hidden; position: static; display: block; width: 100%; }
-  div.orbit, div.orbit-wrapper { width: 100% !important; }
+  .orbit img.fluid-placeholder { visibility: hidden; position: static; display: block; width: 100%; }
+  .orbit, .orbit-wrapper { width: 100% !important; }
 
   /* Correct timer in IE */
   .lt-ie9 .timer { display: none !important; }
-  .lt-ie9 div.orbit-caption { background: $orbitCaptionBgColorOldBrowser; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
+  .lt-ie9 .orbit-caption { background: $orbitCaptionBgColorOldBrowser; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
 
 // Allow slides to be stacked on mobile devices
 @media only screen and (max-width: $screenSmall - 1) {
-  div.orbit.orbit-stack-on-small img.fluid-placeholder {
+  .orbit.orbit-stack-on-small img.fluid-placeholder {
     visibility:visible;
   }
-  div.orbit.orbit-stack-on-small .orbit-slide {
+  .orbit.orbit-stack-on-small .orbit-slide {
     position:static;
     margin-bottom:10px;
   }

data/scss/foundation/components/modules/_reveal.scss

@@ -9,7 +9,7 @@
   .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; background: rgba(#000, .45); z-index: 40; display: none; top: 0; #{$defaultFloat}: 0; }
 
   .reveal-modal { background: #fff; visibility: hidden; display: none; top: 100px; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -260px; width: 520px; position: absolute; z-index: 41; padding: 30px; @include box-shadow(0 0 10px rgba(#000,.4));
-    .close-reveal-modal {
+    .close-reveal-modal:not(.button) {
       @include font-size(22);
       line-height: .5;
       position: absolute;
@@ -30,6 +30,5 @@
     > :last-child { margin-bottom: 0; }
   }
   @media print {
-    div:not(.reveal-modal) { display: none; }
     .reveal-modal { border: solid 1px #000; background: #fff; }
   }

data/scss/foundation/components/modules/_tabs.scss

@@ -49,9 +49,9 @@
       dt a, dd a, li a { padding: 0 ms(1); text-align: center; overflow: hidden; }
     }
     &.two-up dt, &.two-up dd, &.two-up li      { width: 50%; }
-    &.three-up dt, &.three-up dd, &.two-up li  { width: 33.33%; }
-    &.four-up dt, &.four-up dd, &.two-up li    { width: 25%; }
-    &.five-up dt, &.five-up dd, &.two-up li    { width: 20%; }
+    &.three-up dt, &.three-up dd, &.three-up li  { width: 33.33%; }
+    &.four-up dt, &.four-up dd, &.four-up li    { width: 25%; }
+    &.five-up dt, &.five-up dd, &.five-up li    { width: 20%; }
   }
 
   ul.tabs-content { display: block; margin: 0 0 20px; padding: 0;

data/scss/foundation/components/modules/_topbar.scss

@@ -21,8 +21,13 @@
   /* Wrapped around .top-bar to make it fixed at the top */
   .fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }
 
+  /* Add .sticky class for using top bar as a sticky navigation when scrolling passed it. Add the class .sticky to a top bar using .contain-to-grid but leave off .fixed, javascript will take care of that */
+  .sticky { float: left; overflow: hidden;
+    &.fixed { float: none; }
+  }
+
   /* <nav> */
-  .top-bar { background: $topBarBgColor; height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin; padding: 0; width: 100%; position: relative;
+  .top-bar { background: $topBarBgColor; min-height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin 0; padding: 0; width: 100%; position: relative;
 
     /* Contain width to .row width */
     .contain-to-grid & { max-width: $rowWidth; margin: 0 auto; }
@@ -64,7 +69,8 @@
         /* Put a search bar or text input in the bar */
         &.search { padding: 0 $topBarHeight / 3;
           form { display: inline-block; margin-bottom: 0; vertical-align: middle; width: $topBarSearchWidth;
-            input[type=text] { @include border-right-radius(0); float: left; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; //28px margin-bottom: 0; width: $topBarSearchWidth - 70px;
+            input[type=text] { @include border-right-radius(0); float: left; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; //28px
+                              margin-bottom: 0; width: $topBarSearchWidth - 70px;
               &+.button { border-left: none; @include border-left-radius(0); float: left; font-size: ms(0) - 2; margin-top: -1px; padding: 5px 12px 4px; }
             }
             input[type=search] { font-size: 16px; margin-bottom: 0; }
@@ -72,6 +78,18 @@
           &:hover, &:focus { background: $topBarBgColor; }
         }
 
+        /* Put login bar in the top bar */
+        &.login {padding: 0 $topBarHeight / 3;
+          form {display: inline-block; margin-bottom: 0; vertical-align: middle; width: $topBarLoginWidth;
+            input{float: left; width: auto; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; margin-bottom: 0; }
+            input[type=text]{ @include border-right-radius(0); width: $topBarLoginInputWidth;}
+            input[type=password] { margin-bottom: 0; @include border-left-radius(0); width: $topBarLoginInputWidth;
+              &+.button {border-left: none; @include border-left-radius(0); @include border-right-radius(2px); float: left; font-size: ms(0) - 2; margin-top: -1px; padding: 5px 12px 4px; width: $topBarLoginButtonWidth;}
+            }
+          }
+          &:hover, &:focus { background: $topBarBgColor; }
+        }
+
         /* Hide the triangle for breakpoint menu */
         &.toggle-topbar { display: none; }
 
@@ -113,7 +131,7 @@
       /* Right Side <ul> */
       &.right { float: right; width: auto; margin-bottom: 0;
         /* Dropdown Right Side Alignment */
-        .has-dropdown .dropdown { left: auto; right: -1px;
+        .has-dropdown .dropdown { left: auto; right: 0px;
           li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; }
         }
       }
@@ -131,9 +149,17 @@
   /* IE8 Fixes */
   .lt-ie9 .top-bar ul li a { color: $topBarLinkColor; display: block; font-weight: $topBarLinkWeight; font-size: $topBarLinkSize; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3;
     &.button { height: auto; line-height: 30px; margin-top: 7px; }
-    &:hover, &:focus { color: darken($topBarLinkColor, 20%); }
     img { margin-top: -5px; vertical-align: middle; }
-    &.active { background: darken($topBarBgColor, 5%); color: darken($topBarLinkColor, 15%); }
+  }
+  .lt-ie9 .top-bar section > ul > li
+  {
+   a
+    {
+  &:hover, &:focus {color: darken($topBarLinkColor, 20%); }
+	}
+    &:hover, &:focus { background: darken($topBarBgColor, 15%) }
+	&.search:hover,&.search:focus,&.has-button:hover,&.has-button:focus { background: none }
+    &.active { background: darken($topBarBgColor, 15%); color: darken($topBarLinkColor, 15%); }
   }
   .lt-ie9 .top-bar ul li.has-dropdown {
     padding-right: $topBarHeight * .75;