[Summary view] [Print] [Text view]

   1  //
   2  // Dropdown menus
   3  // --------------------------------------------------
   4  
   5  
   6  // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
   7  .dropup,
   8  .dropdown {
   9    position: relative;
  10  }
  11  .dropdown-toggle {
  12    // The caret makes the toggle a bit too tall in IE7
  13    *margin-bottom: -3px;
  14  }
  15  .dropdown-toggle:active,
  16  .open .dropdown-toggle {
  17    outline: 0;
  18  }
  19  
  20  // Dropdown arrow/caret
  21  // --------------------
  22  .caret {
  23    display: inline-block;
  24    width: 0;
  25    height: 0;
  26    vertical-align: top;
  27    border-top:   4px solid @black;
  28    border-right: 4px solid transparent;
  29    border-left:  4px solid transparent;
  30    content: "";
  31  }
  32  
  33  // Place the caret
  34  .dropdown .caret {
  35    margin-top: 8px;
  36    margin-left: 2px;
  37  }
  38  
  39  // The dropdown menu (ul)
  40  // ----------------------
  41  .dropdown-menu {
  42    position: absolute;
  43    top: 100%;
  44    left: 0;
  45    z-index: @zindexDropdown;
  46    display: none; // none by default, but block on "open" of the menu
  47    float: left;
  48    min-width: 160px;
  49    padding: 5px 0;
  50    margin: 2px 0 0; // override default ul
  51    list-style: none;
  52    background-color: @dropdownBackground;
  53    border: 1px solid #ccc; // Fallback for IE7-8
  54    border: 1px solid @dropdownBorder;
  55    *border-right-width: 2px;
  56    *border-bottom-width: 2px;
  57    .border-radius(6px);
  58    .box-shadow(0 5px 10px rgba(0,0,0,.2));
  59    -webkit-background-clip: padding-box;
  60       -moz-background-clip: padding;
  61            background-clip: padding-box;
  62  
  63    // Aligns the dropdown menu to right
  64    &.pull-right {
  65      right: 0;
  66      left: auto;
  67    }
  68  
  69    // Dividers (basically an hr) within the dropdown
  70    .divider {
  71      .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
  72    }
  73  
  74    // Links within the dropdown menu
  75    > li > a {
  76      display: block;
  77      padding: 3px 20px;
  78      clear: both;
  79      font-weight: normal;
  80      line-height: @baseLineHeight;
  81      color: @dropdownLinkColor;
  82      white-space: nowrap;
  83    }
  84  }
  85  
  86  // Hover/Focus state
  87  // -----------
  88  .dropdown-menu > li > a:hover,
  89  .dropdown-menu > li > a:focus,
  90  .dropdown-submenu:hover > a,
  91  .dropdown-submenu:focus > a {
  92    text-decoration: none;
  93    color: @dropdownLinkColorHover;
  94    #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
  95  }
  96  
  97  // Active state
  98  // ------------
  99  .dropdown-menu > .active > a,
 100  .dropdown-menu > .active > a:hover,
 101  .dropdown-menu > .active > a:focus {
 102    color: @dropdownLinkColorActive;
 103    text-decoration: none;
 104    outline: 0;
 105    #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
 106  }
 107  
 108  // Disabled state
 109  // --------------
 110  // Gray out text and ensure the hover/focus state remains gray
 111  .dropdown-menu > .disabled > a,
 112  .dropdown-menu > .disabled > a:hover,
 113  .dropdown-menu > .disabled > a:focus {
 114    color: @grayLight;
 115  }
 116  // Nuke hover/focus effects
 117  .dropdown-menu > .disabled > a:hover,
 118  .dropdown-menu > .disabled > a:focus {
 119    text-decoration: none;
 120    background-color: transparent;
 121    background-image: none; // Remove CSS gradient
 122    .reset-filter();
 123    cursor: default;
 124  }
 125  
 126  // Open state for the dropdown
 127  // ---------------------------
 128  .open {
 129    // IE7's z-index only goes to the nearest positioned ancestor, which would
 130    // make the menu appear below buttons that appeared later on the page
 131    *z-index: @zindexDropdown;
 132  
 133    & > .dropdown-menu {
 134      display: block;
 135    }
 136  }
 137  
 138  // Right aligned dropdowns
 139  // ---------------------------
 140  .pull-right > .dropdown-menu {
 141    right: 0;
 142    left: auto;
 143  }
 144  
 145  // Allow for dropdowns to go bottom up (aka, dropup-menu)
 146  // ------------------------------------------------------
 147  // Just add .dropup after the standard .dropdown class and you're set, bro.
 148  // TODO: abstract this so that the navbar fixed styles are not placed here?
 149  .dropup,
 150  .navbar-fixed-bottom .dropdown {
 151    // Reverse the caret
 152    .caret {
 153      border-top: 0;
 154      border-bottom: 4px solid @black;
 155      content: "";
 156    }
 157    // Different positioning for bottom up menu
 158    .dropdown-menu {
 159      top: auto;
 160      bottom: 100%;
 161      margin-bottom: 1px;
 162    }
 163  }
 164  
 165  // Sub menus
 166  // ---------------------------
 167  .dropdown-submenu {
 168    position: relative;
 169  }
 170  // Default dropdowns
 171  .dropdown-submenu > .dropdown-menu {
 172    top: 0;
 173    left: 100%;
 174    margin-top: -6px;
 175    margin-left: -1px;
 176    .border-radius(0 6px 6px 6px);
 177  }
 178  .dropdown-submenu:hover > .dropdown-menu {
 179    display: block;
 180  }
 181  
 182  // Dropups
 183  .dropup .dropdown-submenu > .dropdown-menu {
 184    top: auto;
 185    bottom: 0;
 186    margin-top: 0;
 187    margin-bottom: -2px;
 188    .border-radius(5px 5px 5px 0);
 189  }
 190  
 191  // Caret to indicate there is a submenu
 192  .dropdown-submenu > a:after {
 193    display: block;
 194    content: " ";
 195    float: right;
 196    width: 0;
 197    height: 0;
 198    border-color: transparent;
 199    border-style: solid;
 200    border-width: 5px 0 5px 5px;
 201    border-left-color: darken(@dropdownBackground, 20%);
 202    margin-top: 5px;
 203    margin-right: -10px;
 204  }
 205  .dropdown-submenu:hover > a:after {
 206    border-left-color: @dropdownLinkColorHover;
 207  }
 208  
 209  // Left aligned submenus
 210  .dropdown-submenu.pull-left {
 211    // Undo the float
 212    // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
 213    float: none;
 214  
 215    // Positioning the submenu
 216    > .dropdown-menu {
 217      left: -100%;
 218      margin-left: 10px;
 219      .border-radius(6px 0 6px 6px);
 220    }
 221  }
 222  
 223  // Tweak nav headers
 224  // -----------------
 225  // Increase padding from 15px to 20px on sides
 226  .dropdown .dropdown-menu .nav-header {
 227    padding-left: 20px;
 228    padding-right: 20px;
 229  }
 230  
 231  // Typeahead
 232  // ---------
 233  .typeahead {
 234    z-index: 1051;
 235    margin-top: 2px; // give it some space to breathe
 236    .border-radius(@baseBorderRadius);
 237  }