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}
238