dropdowns.less in twitter-bootstrap-rails-2.0.0

- old
+ new

@@ -3,36 +3,47 @@
 
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
 .dropdown {
   position: relative;
 }
+.dropdown-toggle {
+  // The caret makes the toggle a bit too tall in IE7
+  *margin-bottom: -3px;
+}
+.dropdown-toggle:active,
+.open .dropdown-toggle {
+  outline: 0;
+}
 // Dropdown arrow/caret
 .caret {
   display: inline-block;
   width: 0;
   height: 0;
   text-indent: -99999px;
+  // IE7 won't do the border trick if there's a text indent, but it doesn't
+  // do the content that text-indent is hiding, either, so we're ok.
+  *text-indent: 0;
   vertical-align: top;
   border-left:  4px solid transparent;
   border-right: 4px solid transparent;
   border-top:   4px solid @black;
   .opacity(30);
   content: "\2193";
 }
 .dropdown .caret {
   margin-top: 8px;
   margin-left: 2px;
-  *margin-top: 7px;
 }
 .dropdown:hover .caret,
 .open.dropdown .caret {
   .opacity(100);
 }
 // The dropdown menu (ul)
 .dropdown-menu {
   position: absolute;
   top: 100%;
+  left: 0;
   z-index: @zindexDropdown;
   float: left;
   display: none; // none by default, but block on "open" of the menu
   min-width: 160px;
   max-width: 220px;
@@ -48,11 +59,10 @@
   .border-radius(0 0 5px 5px);
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
-  zoom: 1; // do we need this?
   *border-right-width: 2px;
   *border-bottom-width: 2px;
 
   // Allow for dropdowns to go bottom up (aka, dropup-menu)
   &.bottom-up {
@@ -66,10 +76,17 @@
     height: 1px;
     margin: 5px 1px;
     overflow: hidden;
     background-color: #e5e5e5;
     border-bottom: 1px solid @white;
+
+    // IE7 needs a set width since we gave a height. Restricting just
+    // to IE7 to keep the 1px left/right space in other browsers.
+    // It is unclear where IE is getting the extra space that we need
+    // to negative-margin away, but so it goes.
+    *width: 100%;
+    *margin: -5px 0 5px;
   }
 
   // Links within the dropdown menu
   a {
     display: block;
@@ -91,9 +108,13 @@
   background-color: @linkColor;
 }
 
 // Open state for the dropdown
 .dropdown.open {
+  // IE7's z-index only goes to the nearest positioned ancestor, which would
+  // make the menu appear below buttons that appeared later on the page
+  *z-index: @zindexDropdown;
+
   .dropdown-toggle {
     color: @white;
     background: #ccc;
     background: rgba(0,0,0,.3);
   }