_dropdowns.scss in bootstrap-sass-2.2.1.0

- old
+ new

@@ -53,11 +53,11 @@
   border: 1px solid #ccc; // Fallback for IE7-8
   border: 1px solid $dropdownBorder;
   *border-right-width: 2px;
   *border-bottom-width: 2px;
   @include border-radius(6px);
-  @include box-shadow(#{0 5px 10px rgba(0,0,0,.2)});
+  @include box-shadow(0 5px 10px rgba(0,0,0,.2));
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
 
   // Aligns the dropdown menu to right
@@ -70,11 +70,11 @@
   .divider {
     @include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
   }
 
   // Links within the dropdown menu
-  a {
+  li > a {
     display: block;
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: $baseLineHeight;
@@ -88,22 +88,20 @@
 .dropdown-menu li > a:hover,
 .dropdown-menu li > a:focus,
 .dropdown-submenu:hover > a {
   text-decoration: none;
   color: $dropdownLinkColorHover;
-  background-color: $dropdownLinkBackgroundHover;
   @include gradient-vertical($dropdownLinkBackgroundHover, darken($dropdownLinkBackgroundHover, 5%));
 }
 
 // Active state
 // ------------
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
-  color: $dropdownLinkColorHover;
+  color: $dropdownLinkColorActive;
   text-decoration: none;
   outline: 0;
-  background-color: $dropdownLinkBackgroundActive;
   @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
 }
 
 // Disabled state
 // --------------
@@ -114,10 +112,11 @@
 }
 // Nuke hover effects
 .dropdown-menu .disabled > a:hover {
   text-decoration: none;
   background-color: transparent;
+  background-image: none; // Remove CSS gradient
   cursor: default;
 }
 
 // Open state for the dropdown
 // ---------------------------
@@ -161,23 +160,36 @@
 // Sub menus
 // ---------------------------
 .dropdown-submenu {
   position: relative;
 }
+// Default dropdowns
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -6px;
   margin-left: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
      -moz-border-radius: 0 6px 6px 6px;
           border-radius: 0 6px 6px 6px;
 }
-.dropdown-submenu:hover .dropdown-menu {
+.dropdown-submenu:hover > .dropdown-menu {
   display: block;
 }
 
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  -webkit-border-radius: 5px 5px 5px 0;
+     -moz-border-radius: 5px 5px 5px 0;
+          border-radius: 5px 5px 5px 0;
+}
+
+// Caret to indicate there is a submenu
 .dropdown-submenu > a:after {
   display: block;
   content: " ";
   float: right;
   width: 0;
@@ -191,11 +203,26 @@
 }
 .dropdown-submenu:hover > a:after {
   border-left-color: $dropdownLinkColorHover;
 }
 
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  // Undo the float
+  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
+  float: none;
 
+  // Positioning the submenu
+  > .dropdown-menu {
+    left: -100%;
+    margin-left: 10px;
+    -webkit-border-radius: 6px 0 6px 6px;
+       -moz-border-radius: 6px 0 6px 6px;
+            border-radius: 6px 0 6px 6px;
+  }
+}
+
 // Tweak nav headers
 // -----------------
 // Increase padding from 15px to 20px on sides
 .dropdown .dropdown-menu .nav-header {
   padding-left: 20px;
@@ -204,7 +231,7 @@
 
 // Typeahead
 // ---------
 .typeahead {
   margin-top: 2px; // give it some space to breathe
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
 }