[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  // Backdrop to catch body clicks on mobile, etc.
 139  // ---------------------------
 140  .dropdown-backdrop {
 141    position: fixed;
 142    left: 0;
 143    right: 0;
 144    bottom: 0;
 145    top: 0;
 146    z-index: @zindexDropdown - 10;
 147  }
 148  
 149  // Right aligned dropdowns
 150  // ---------------------------
 151  .pull-right > .dropdown-menu {
 152    right: 0;
 153    left: auto;
 154  }
 155  
 156  // Allow for dropdowns to go bottom up (aka, dropup-menu)
 157  // ------------------------------------------------------
 158  // Just add .dropup after the standard .dropdown class and you're set, bro.
 159  // TODO: abstract this so that the navbar fixed styles are not placed here?
 160  .dropup,
 161  .navbar-fixed-bottom .dropdown {
 162    // Reverse the caret
 163    .caret {
 164      border-top: 0;
 165      border-bottom: 4px solid @black;
 166      content: "";
 167    }
 168    // Different positioning for bottom up menu
 169    .dropdown-menu {
 170      top: auto;
 171      bottom: 100%;
 172      margin-bottom: 1px;
 173    }
 174  }
 175  
 176  // Sub menus
 177  // ---------------------------
 178  .dropdown-submenu {
 179    position: relative;
 180  }
 181  // Default dropdowns
 182  .dropdown-submenu > .dropdown-menu {
 183    top: 0;
 184    left: 100%;
 185    margin-top: -6px;
 186    margin-left: -1px;
 187    .border-radius(0 6px 6px 6px);
 188  }
 189  .dropdown-submenu:hover > .dropdown-menu {
 190    display: block;
 191  }
 192  
 193  // Dropups
 194  .dropup .dropdown-submenu > .dropdown-menu {
 195    top: auto;
 196    bottom: 0;
 197    margin-top: 0;
 198    margin-bottom: -2px;
 199    .border-radius(5px 5px 5px 0);
 200  }
 201  
 202  // Caret to indicate there is a submenu
 203  .dropdown-submenu > a:after {
 204    display: block;
 205    content: " ";
 206    float: right;
 207    width: 0;
 208    height: 0;
 209    border-color: transparent;
 210    border-style: solid;
 211    border-width: 5px 0 5px 5px;
 212    border-left-color: darken(@dropdownBackground, 20%);
 213    margin-top: 5px;
 214    margin-right: -10px;
 215  }
 216  .dropdown-submenu:hover > a:after {
 217    border-left-color: @dropdownLinkColorHover;
 218  }
 219  
 220  // Left aligned submenus
 221  .dropdown-submenu.pull-left {
 222    // Undo the float
 223    // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
 224    float: none;
 225  
 226    // Positioning the submenu
 227    > .dropdown-menu {
 228      left: -100%;
 229      margin-left: 10px;
 230      .border-radius(6px 0 6px 6px);
 231    }
 232  }
 233  
 234  // Tweak nav headers
 235  // -----------------
 236  // Increase padding from 15px to 20px on sides
 237  .dropdown .dropdown-menu .nav-header {
 238    padding-left: 20px;
 239    padding-right: 20px;
 240  }
 241  
 242  // Typeahead
 243  // ---------
 244  .typeahead {
 245    z-index: 1051;
 246    margin-top: 2px; // give it some space to breathe
 247    .border-radius(@baseBorderRadius);
 248  }