themes/default/less/dropdowns.less

   1 // DROPDOWN MENUS
   2 // --------------
   3
   4 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
   5 .dropdown {
   6   position: relative;
   7 }
   8 .dropdown-toggle {
   9   // The caret makes the toggle a bit too tall in IE7
  10   *margin-bottom: -3px;
  11 }
  12 .dropdown-toggle:active,
  13 .open .dropdown-toggle {
  14   outline: 0;
  15 }
  16 // Dropdown arrow/caret
  17 .caret {
  18   display: inline-block;
  19   width: 0;
  20   height: 0;
  21   text-indent: -99999px;
  22   // IE7 won't do the border trick if there's a text indent, but it doesn't
  23   // do the content that text-indent is hiding, either, so we're ok.
  24   *text-indent: 0;
  25   vertical-align: top;
  26   border-left:  4px solid transparent;
  27   border-right: 4px solid transparent;
  28   border-top:   4px solid @black;
  29   .opacity(30);
  30   content: "\2193";
  31 }
  32 .dropdown .caret {
  33   margin-top: 8px;
  34   margin-left: 4px;
  35 }
  36 .dropdown:hover .caret,
  37 .open.dropdown .caret {
  38   .opacity(100);
  39 }
  40 // The dropdown menu (ul)
  41 .dropdown-menu {
  42   position: absolute;
  43   top: 100%;
  44   left: 0;
  45   z-index: @zindexDropdown;
  46   float: left;
  47   display: none; // none by default, but block on "open" of the menu
  48   min-width: 160px;
  49   _width: 160px;
  50   padding: 4px 0;
  51   margin: 0; // override default ul
  52   list-style: none;
  53   background-color: @white;
  54   border-color: #ccc;
  55   border-color: rgba(0,0,0,.2);
  56   border-style: solid;
  57   border-width: 1px;
  58   .border-radius(0 0 5px 5px);
  59   .box-shadow(0 5px 10px rgba(0,0,0,.2));
  60   -webkit-background-clip: padding-box;
  61      -moz-background-clip: padding;
  62           background-clip: padding-box;
  63   *border-right-width: 2px;
  64   *border-bottom-width: 2px;
  65
  66   // Allow for dropdowns to go bottom up (aka, dropup-menu)
  67   &.bottom-up {
  68     top: auto;
  69     bottom: 100%;
  70     margin-bottom: 2px;
  71   }
  72
  73   // Dividers (basically an hr) within the dropdown
  74   .divider {
  75     height: 1px;
  76     margin: 5px 1px;
  77     overflow: hide;
  78     background-color: #e5e5e5;
  79     border-bottom: 1px solid @white;
  80
  81     // IE7 needs a set width since we gave a height. Restricting just
  82     // to IE7 to keep the 1px left/right space in other browsers.
  83     // It is unclear where IE is getting the extra space that we need
  84     // to negative-margin away, but so it goes.
  85     *width: 100%;
  86     *margin: -5px 0 5px;
  87   }
  88
  89   // Links within the dropdown menu
  90   a {
  91     display: block;
  92     padding: 3px 15px;
  93     clear: both;
  94     font-weight: normal;
  95     line-height: @baseLineHeight;
  96     color: @gray;
  97     white-space: nowrap;
  98   }
  99 }
 100
 101 // Hover state
 102 .dropdown-menu li > a:hover,
 103 .dropdown-menu .active > a,
 104 .dropdown-menu .active > a:hover {
 105   color: @white;
 106   text-decoration: none;
 107   background-color: @linkColor;
 108 }
 109
 110 // Open state for the dropdown
 111 .dropdown.open {
 112   // IE7's z-index only goes to the nearest positioned ancestor, which would
 113   // make the menu appear below buttons that appeared later on the page
 114   *z-index: @zindexDropdown;
 115
 116   .dropdown-toggle {
 117     color: @white;
 118     background: #ccc;
 119     background: rgba(0,0,0,.3);
 120   }
 121   .dropdown-menu {
 122     display: block;
 123   }
 124 }
 125
 126 // Typeahead
 127 .typeahead {
 128   margin-top: 2px; // give it some space to breathe
 129   .border-radius(4px);
 130 }