libs/bootstrap/less/dropdowns.less

   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 }