css/bootstrap/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   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 state
  87 // -----------
  88 .dropdown-menu li > a:hover,
  89 .dropdown-menu li > a:focus,
  90 .dropdown-submenu:hover > a {
  91   text-decoration: none;
  92   color: @dropdownLinkColorHover;
  93   background-color: @dropdownLinkBackgroundHover;
  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   color: @dropdownLinkColorHover;
 102   text-decoration: none;
 103   outline: 0;
 104   background-color: @dropdownLinkBackgroundActive;
 105   #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
 106 }
 107
 108 // Disabled state
 109 // --------------
 110 // Gray out text and ensure the hover state remains gray
 111 .dropdown-menu .disabled > a,
 112 .dropdown-menu .disabled > a:hover {
 113   color: @grayLight;
 114 }
 115 // Nuke hover effects
 116 .dropdown-menu .disabled > a:hover {
 117   text-decoration: none;
 118   background-color: transparent;
 119   cursor: default;
 120 }
 121
 122 // Open state for the dropdown
 123 // ---------------------------
 124 .open {
 125   // IE7's z-index only goes to the nearest positioned ancestor, which would
 126   // make the menu appear below buttons that appeared later on the page
 127   *z-index: @zindexDropdown;
 128
 129   & > .dropdown-menu {
 130     display: block;
 131   }
 132 }
 133
 134 // Right aligned dropdowns
 135 // ---------------------------
 136 .pull-right > .dropdown-menu {
 137   right: 0;
 138   left: auto;
 139 }
 140
 141 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 142 // ------------------------------------------------------
 143 // Just add .dropup after the standard .dropdown class and you're set, bro.
 144 // TODO: abstract this so that the navbar fixed styles are not placed here?
 145 .dropup,
 146 .navbar-fixed-bottom .dropdown {
 147   // Reverse the caret
 148   .caret {
 149     border-top: 0;
 150     border-bottom: 4px solid @black;
 151     content: "";
 152   }
 153   // Different positioning for bottom up menu
 154   .dropdown-menu {
 155     top: auto;
 156     bottom: 100%;
 157     margin-bottom: 1px;
 158   }
 159 }
 160
 161 // Sub menus
 162 // ---------------------------
 163 .dropdown-submenu {
 164   position: relative;
 165 }
 166 .dropdown-submenu > .dropdown-menu {
 167   top: 0;
 168   left: 100%;
 169   margin-top: -6px;
 170   margin-left: -1px;
 171   -webkit-border-radius: 0 6px 6px 6px;
 172      -moz-border-radius: 0 6px 6px 6px;
 173           border-radius: 0 6px 6px 6px;
 174 }
 175 .dropdown-submenu:hover > .dropdown-menu {
 176   display: block;
 177 }
 178
 179 .dropdown-submenu > a:after {
 180   display: block;
 181   content: " ";
 182   float: right;
 183   width: 0;
 184   height: 0;
 185   border-color: transparent;
 186   border-style: solid;
 187   border-width: 5px 0 5px 5px;
 188   border-left-color: darken(@dropdownBackground, 20%);
 189   margin-top: 5px;
 190   margin-right: -10px;
 191 }
 192 .dropdown-submenu:hover > a:after {
 193   border-left-color: @dropdownLinkColorHover;
 194 }
 195
 196
 197 // Tweak nav headers
 198 // -----------------
 199 // Increase padding from 15px to 20px on sides
 200 .dropdown .dropdown-menu .nav-header {
 201   padding-left: 20px;
 202   padding-right: 20px;
 203 }
 204
 205 // Typeahead
 206 // ---------
 207 .typeahead {
 208   margin-top: 2px; // give it some space to breathe
 209   .border-radius(4px);
 210 }