_dropdowns.scss in bootstrap-sass-rails-rtl-2.2.2.0

- old
+ new

@@ -1,8 +1,11 @@
-// DROPDOWN MENUS
-// --------------
+/* Partial: twitter/bootstrap/_dropdowns.scss */
+//
+// Dropdown menus
+// --------------------------------------------------
 
+
 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
 .dropup,
 .dropdown {
   position: relative;
 }
@@ -24,21 +27,16 @@
   vertical-align: top;
   border-top:   4px solid $black;
   border-left: 4px solid transparent;
   border-right:  4px solid transparent;
   content: "";
-  @include opacity(30);
 }
 // Place the caret
 .dropdown .caret {
   margin-top: 8px;
   margin-right: 2px;
 }
-.dropdown:hover .caret,
-.open .caret {
-  @include opacity(100);
-}
 
 // The dropdown menu (ul)
 // ----------------------
 .dropdown-menu {
   position: absolute;
@@ -46,19 +44,19 @@
   right: 0;
   z-index: $zindexDropdown;
   display: none; // none by default, but block on "open" of the menu
   float: right;
   min-width: 160px;
-  padding: 4px 0;
-  margin: 1px 0 0; // override default ul
+  padding: 5px 0;
+  margin: 2px 0 0; // override default ul
   list-style: none;
   background-color: $dropdownBackground;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0,0,0,.2);
+  border: 1px solid #ccc; // Fallback for IE7-8
+  border: 1px solid $dropdownBorder;
   *border-left-width: 2px;
   *border-bottom-width: 2px;
-  @include border-radius(5px);
+  @include border-radius(6px);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
 
@@ -72,13 +70,13 @@
   .divider {
     @include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
   }
 
   // Links within the dropdown menu
-  a {
+  li > a {
     display: block;
-    padding: 3px 15px;
+    padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: $baseLineHeight;
     color: $dropdownLinkColor;
     white-space: nowrap;
@@ -86,17 +84,43 @@
 }
 
 // Hover state
 // -----------
 .dropdown-menu li > a:hover,
+.dropdown-menu li > a:focus,
+.dropdown-submenu:hover > a {
+  text-decoration: none;
+  color: $dropdownLinkColorHover;
+  @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;
-  background-color: $dropdownLinkBackgroundHover;
+  outline: 0;
+  @include gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
 }
 
+// Disabled state
+// --------------
+// Gray out text and ensure the hover state remains gray
+.dropdown-menu .disabled > a,
+.dropdown-menu .disabled > a:hover {
+  color: $grayLight;
+}
+// Nuke hover effects
+.dropdown-menu .disabled > a:hover {
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none; // Remove CSS gradient
+  @include reset-filter();
+  cursor: default;
+}
+
 // Open state for the 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
@@ -122,21 +146,88 @@
 .navbar-fixed-bottom .dropdown {
   // Reverse the caret
   .caret {
     border-top: 0;
     border-bottom: 4px solid $black;
-    content: "\2191";
+    content: "";
   }
   // Different positioning for bottom up menu
   .dropdown-menu {
     top: auto;
     bottom: 100%;
     margin-bottom: 1px;
   }
 }
 
+// Sub menus
+// ---------------------------
+.dropdown-submenu {
+  position: relative;
+}
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  right: 100%;
+  margin-top: -6px;
+  margin-right: -1px;
+  @include 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;
+  @include border-radius(5px 5px 5px 0);
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: left;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-right-color: darken($dropdownBackground, 20%);
+  margin-top: 5px;
+  margin-left: -10px;
+}
+.dropdown-submenu:hover > a:after {
+  border-right-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 {
+    right: -100%;
+    margin-right: 10px;
+    @include border-radius(6px 0 6px 6px);
+  }
+}
+
+// Tweak nav headers
+// -----------------
+// Increase padding from 15px to 20px on sides
+.dropdown .dropdown-menu .nav-header {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
 // Typeahead
 // ---------
 .typeahead {
+  z-index: 1051;
   margin-top: 2px; // give it some space to breathe
-  @include border-radius(4px);
+  @include border-radius($baseBorderRadius);
 }