dropdowns.less 3.27 KB
Newer Older
1
2
3
// DROPDOWN MENUS
// --------------

4
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
Mark Otto's avatar
Mark Otto committed
5
.dropup,
6
7
8
.dropdown {
  position: relative;
}
9
.dropdown-toggle {
10
11
12
  // The caret makes the toggle a bit too tall in IE7
  *margin-bottom: -3px;
}
13
14
15
16
.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}
17

18
// Dropdown arrow/caret
19
// --------------------
20
.caret {
21
22
23
24
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
25
  border-top:   4px solid @black;
Jacob Thornton's avatar
Jacob Thornton committed
26
27
  border-right: 4px solid transparent;
  border-left:  4px solid transparent;
28
  content: "";
Jacob Thornton's avatar
Jacob Thornton committed
29
  .opacity(30);
30
}
31

32
// Place the caret
33
34
35
36
.dropdown .caret {
  margin-top: 8px;
  margin-left: 2px;
}
37
38
.dropdown a:focus .caret,
.dropdown a:hover .caret,
Mark Otto's avatar
Mark Otto committed
39
.open .caret {
40
41
  .opacity(100);
}
42

43
44
45
46
.navbar .nav .open > a {
  color: @navbarLinkColorActive;
}

47
// The dropdown menu (ul)
48
// ----------------------
49
50
.dropdown-menu {
  position: absolute;
51
  top: 100%;
52
  left: 0;
53
  z-index: @zindexDropdown;
54
  display: none; // none by default, but block on "open" of the menu
Jacob Thornton's avatar
Jacob Thornton committed
55
  float: left;
56
  min-width: 160px;
57
  padding: 4px 0;
Mark Otto's avatar
Mark Otto committed
58
  margin: 1px 0 0; // override default ul
59
  list-style: none;
Mark Otto's avatar
Mark Otto committed
60
  background-color: @dropdownBackground;
Mark Otto's avatar
Mark Otto committed
61
62
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
Jacob Thornton's avatar
Jacob Thornton committed
63
64
  *border-right-width: 2px;
  *border-bottom-width: 2px;
Mark Otto's avatar
Mark Otto committed
65
  .border-radius(5px);
66
67
68
69
  .box-shadow(0 5px 10px rgba(0,0,0,.2));
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
70

71
72
73
74
  // Aligns the dropdown menu to right
  &.pull-right {
    right: 0;
    left: auto;
75
76
  }

77
78
  // Dividers (basically an hr) within the dropdown
  .divider {
79
    .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
80
81
82
83
84
  }

  // Links within the dropdown menu
  a {
    display: block;
85
    padding: 3px 15px;
86
87
    clear: both;
    font-weight: normal;
Mark Otto's avatar
Mark Otto committed
88
    line-height: @baseLineHeight;
Mark Otto's avatar
Mark Otto committed
89
    color: @dropdownLinkColor;
90
    white-space: nowrap;
91
  }
92
}
93

94
// Hover state
95
// -----------
96
.dropdown-menu li > a:hover,
97
.dropdown-menu li > a:focus,
98
99
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
Mark Otto's avatar
Mark Otto committed
100
  color: @dropdownLinkColorHover;
101
  text-decoration: none;
Mark Otto's avatar
Mark Otto committed
102
  background-color: @dropdownLinkBackgroundHover;
103
  outline: 0;
104
105
}

106
// Open state for the dropdown
107
// ---------------------------
Mark Otto's avatar
Mark Otto committed
108
.open {
109
110
111
112
  // 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;

113
  & > .dropdown-menu {
114
115
116
    display: block;
  }
}
117

Mark Otto's avatar
Mark Otto committed
118
// Right aligned dropdowns
Mark Otto's avatar
Mark Otto committed
119
// ---------------------------
120
.pull-right > .dropdown-menu {
Mark Otto's avatar
Mark Otto committed
121
  right: 0;
Jacob Thornton's avatar
Jacob Thornton committed
122
  left: auto;
Mark Otto's avatar
Mark Otto committed
123
124
}

125
126
127
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
128
129
130
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
131
132
133
134
135
136
137
138
139
140
141
142
143
144
  // Reverse the caret
  .caret {
    border-top: 0;
    border-bottom: 4px solid @black;
    content: "\2191";
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}

145
// Typeahead
146
// ---------
147
148
149
150
.typeahead {
  margin-top: 2px; // give it some space to breathe
  .border-radius(4px);
}