dropdowns.less 4.63 KB
Newer Older
1
2
3
4
//
// Dropdown menus
// --------------------------------------------------

5

6
7
// Dropdown arrow/caret
.caret {
8
9
  display: inline-block;
  width: 0;
10
  height: 0;
11
12
  margin-left: 2px;
  vertical-align: middle;
13
  border-top:   @caret-width-base solid;
14
15
  border-right: @caret-width-base solid transparent;
  border-left:  @caret-width-base solid transparent;
16
}
17

Guillermo González de Agüero's avatar
Guillermo González de Agüero committed
18
19
20
21
22
// The dropdown wrapper (div)
.dropdown {
  position: relative;
}

Mark Otto's avatar
Mark Otto committed
23
24
25
26
27
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
  outline: 0;
}

28
29
30
// The dropdown menu (ul)
.dropdown-menu {
  position: absolute;
31
  top: 100%;
32
  left: 0;
33
  z-index: @zindex-dropdown;
34
  display: none; // none by default, but block on "open" of the menu
Jacob Thornton's avatar
Jacob Thornton committed
35
  float: left;
36
  min-width: 160px;
Mark Otto's avatar
Mark Otto committed
37
  padding: 5px 0;
Mark Otto's avatar
Mark Otto committed
38
  margin: 2px 0 0; // override default ul
39
  list-style: none;
40
  font-size: @font-size-base;
41
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
Mark Otto's avatar
Mark Otto committed
42
  background-color: @dropdown-bg;
43
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
Mark Otto's avatar
Mark Otto committed
44
  border: 1px solid @dropdown-border;
45
  border-radius: @border-radius-base;
46
  .box-shadow(0 6px 12px rgba(0,0,0,.175));
47
  background-clip: padding-box;
48

49
  // Aligns the dropdown menu to right
50
  //
Chris Rebert's avatar
Chris Rebert committed
51
  // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
52
53
54
  &.pull-right {
    right: 0;
    left: auto;
55
56
  }

57
58
  // Dividers (basically an hr) within the dropdown
  .divider {
Mark Otto's avatar
Mark Otto committed
59
    .nav-divider(@dropdown-divider-bg);
60
61
62
  }

  // Links within the dropdown menu
63
  > li > a {
64
    display: block;
65
    padding: 3px 20px;
66
67
    clear: both;
    font-weight: normal;
68
    line-height: @line-height-base;
Mark Otto's avatar
Mark Otto committed
69
    color: @dropdown-link-color;
70
    white-space: nowrap; // prevent links from randomly breaking onto new lines
71
  }
72
}
73

74
// Hover/Focus state
75
76
77
78
79
.dropdown-menu > li > a {
  &:hover,
  &:focus {
    text-decoration: none;
    color: @dropdown-link-hover-color;
80
    background-color: @dropdown-link-hover-bg;
81
  }
82
83
84
}

// Active state
85
86
87
88
89
90
91
.dropdown-menu > .active > a {
  &,
  &:hover,
  &:focus {
    color: @dropdown-link-active-color;
    text-decoration: none;
    outline: 0;
92
    background-color: @dropdown-link-active-bg;
93
  }
94
95
}

96
// Disabled state
97
//
98
// Gray out text and ensure the hover/focus state remains gray
99

100
101
102
103
.dropdown-menu > .disabled > a {
  &,
  &:hover,
  &:focus {
104
    color: @dropdown-link-disabled-color;
105
  }
106
}
107
// Nuke hover/focus effects
108
109
110
111
112
113
114
.dropdown-menu > .disabled > a {
  &:hover,
  &:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none; // Remove CSS gradient
    .reset-filter();
115
    cursor: not-allowed;
116
  }
117
118
}

119
// Open state for the dropdown
Mark Otto's avatar
Mark Otto committed
120
.open {
121
122
  // Show the menu
  > .dropdown-menu {
123
124
    display: block;
  }
125
126
127
128
129

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
130
}
131

132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
  left: auto; // Reset the default from `.dropdown-menu`
  right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
  left: 0;
  right: auto;
}

151
152
153
154
155
156
// Dropdown section headers
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: @font-size-small;
  line-height: @line-height-base;
157
  color: @dropdown-header-color;
158
159
}

160
161
162
163
164
165
166
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
167
  z-index: (@zindex-dropdown - 10);
168
169
}

Mark Otto's avatar
Mark Otto committed
170
// Right aligned dropdowns
171
.pull-right > .dropdown-menu {
Mark Otto's avatar
Mark Otto committed
172
  right: 0;
Jacob Thornton's avatar
Jacob Thornton committed
173
  left: auto;
Mark Otto's avatar
Mark Otto committed
174
175
}

176
// Allow for dropdowns to go bottom up (aka, dropup-menu)
177
//
178
// Just add .dropup after the standard .dropdown class and you're set, bro.
179
// TODO: abstract this so that the navbar fixed styles are not placed here?
180

181
182
.dropup,
.navbar-fixed-bottom .dropdown {
183
184
  // Reverse the caret
  .caret {
185
    border-top: 0;
186
    border-bottom: @caret-width-base solid;
187
    content: "";
188
189
190
191
192
193
194
195
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}
196
197
198
199
200
201
202
203
204


// Component alignment
//
// Reiterate per navbar.less and the modified component alignment there.

@media (min-width: @grid-float-breakpoint) {
  .navbar-right {
    .dropdown-menu {
205
206
207
208
209
210
      .dropdown-menu-right();
    }
    // Necessary for overrides of the default right aligned menu.
    // Will remove come v4 in all likelihood.
    .dropdown-menu-left {
      .dropdown-menu-left();
211
212
213
214
    }
  }
}