_dropdowns.sass in sass-rails-bootstrap-2.2.1

- old
+ new

@@ -66,11 +66,11 @@
   // Dividers (basically an hr) within the dropdown
   .divider
     +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
@@ -80,22 +80,21 @@
 // Hover state
 // -----------
 .dropdown-menu li > a:hover,
 .dropdown-menu li > a:focus,
 .dropdown-submenu:hover > a
-  text-decoration: none
   color: $dropdownLinkColorHover
-  background-color: $dropdownLinkBackgroundHover
+  text-decoration: none
+  +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
   +gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%))
 
 // Disabled state
 // --------------
 // Gray out text and ensure the hover state remains gray
@@ -105,10 +104,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
 // ---------------------------
 .open
@@ -144,10 +144,11 @@
 // Sub menus
 // ---------------------------
 .dropdown-submenu
   position: relative
 
+// Default dropdowns
 .dropdown-submenu > .dropdown-menu
   top: 0
   left: 100%
   margin-top: -6px
   margin-left: -1px
@@ -156,10 +157,21 @@
   border-radius: 0 6px 6px 6px
 
 .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
@@ -172,10 +184,25 @@
   margin-right: -10px
 .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
@@ -184,6 +211,6 @@
 
 // Typeahead
 // ---------
 .typeahead
   margin-top: 2px  // give it some space to breathe
-  +border-radius(4px)
+  +border-radius($baseBorderRadius)