1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
// DROPDOWN MENUS
// --------------
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropdown {
position: relative;
}
.dropdown-toggle {
// The caret makes the toggle a bit too tall in IE7
*margin-bottom: -3px;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
// Dropdown arrow/caret
.caret {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
// IE7 won't do the border trick if there's a text indent, but it doesn't
// do the content that text-indent is hiding, either, so we're ok.
*text-indent: 0;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid $black;
@include opacity(30);
content: "\2193";
}
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
}
.dropdown:hover .caret,
.open.dropdown .caret {
@include opacity(100);
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: $zindexDropdown;
float: left;
display: none; // none by default, but block on "open" of the menu
min-width: 160px;
_width: 160px;
padding: 4px 0;
margin: 0; // override default ul
list-style: none;
background-color: $white;
border-color: #ccc;
border-color: rgba(0,0,0,.2);
border-style: solid;
border-width: 1px;
@include border-radius(0 0 5px 5px);
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
// Allow for dropdowns to go bottom up (aka, dropup-menu)
&.bottom-up {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
// Dividers (basically an hr) within the dropdown
.divider {
height: 1px;
margin: 5px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid $white;
// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
// to negative-margin away, but so it goes.
*width: 100%;
*margin: -5px 0 5px;
}
// Links within the dropdown menu
a {
display: block;
padding: 3px 15px;
clear: both;
font-weight: normal;
line-height: $baseLineHeight;
color: $gray;
white-space: nowrap;
}
}
// Hover state
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: $white;
text-decoration: none;
background-color: $linkColor;
}
// Open state for the dropdown
.dropdown.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
*z-index: $zindexDropdown;
.dropdown-toggle {
color: $white;
background: #ccc;
background: rgba(0,0,0,.3);
}
.dropdown-menu {
display: block;
}
}
// Typeahead
.typeahead {
margin-top: 2px; // give it some space to breathe
@include border-radius(4px);
}
|
