|
1 // |
|
2 // Dropdown menus |
|
3 // -------------------------------------------------- |
|
4 |
|
5 |
|
6 // Dropdown arrow/caret |
|
7 .caret { |
|
8 display: inline-block; |
|
9 width: 0; |
|
10 height: 0; |
|
11 margin-left: 2px; |
|
12 vertical-align: middle; |
|
13 border-top: @caret-width-base solid; |
|
14 border-right: @caret-width-base solid transparent; |
|
15 border-left: @caret-width-base solid transparent; |
|
16 } |
|
17 |
|
18 // The dropdown wrapper (div) |
|
19 .dropdown { |
|
20 position: relative; |
|
21 } |
|
22 |
|
23 // Prevent the focus on the dropdown toggle when closing dropdowns |
|
24 .dropdown-toggle:focus { |
|
25 outline: 0; |
|
26 } |
|
27 |
|
28 // The dropdown menu (ul) |
|
29 .dropdown-menu { |
|
30 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 |
|
35 float: left; |
|
36 min-width: 160px; |
|
37 padding: 5px 0; |
|
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) |
|
42 background-color: @dropdown-bg; |
|
43 border: 1px solid @dropdown-fallback-border; // IE8 fallback |
|
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 // |
|
51 // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` |
|
52 &.pull-right { |
|
53 right: 0; |
|
54 left: auto; |
|
55 } |
|
56 |
|
57 // Dividers (basically an hr) within the dropdown |
|
58 .divider { |
|
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 clear: both; |
|
67 font-weight: normal; |
|
68 line-height: @line-height-base; |
|
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 .dropdown-menu > li > a { |
|
76 &:hover, |
|
77 &:focus { |
|
78 text-decoration: none; |
|
79 color: @dropdown-link-hover-color; |
|
80 background-color: @dropdown-link-hover-bg; |
|
81 } |
|
82 } |
|
83 |
|
84 // Active state |
|
85 .dropdown-menu > .active > a { |
|
86 &, |
|
87 &:hover, |
|
88 &:focus { |
|
89 color: @dropdown-link-active-color; |
|
90 text-decoration: none; |
|
91 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 .dropdown-menu > .disabled > a { |
|
101 &, |
|
102 &:hover, |
|
103 &:focus { |
|
104 color: @dropdown-link-disabled-color; |
|
105 } |
|
106 |
|
107 // Nuke hover/focus effects |
|
108 &:hover, |
|
109 &:focus { |
|
110 text-decoration: none; |
|
111 background-color: transparent; |
|
112 background-image: none; // Remove CSS gradient |
|
113 .reset-filter(); |
|
114 cursor: @cursor-disabled; |
|
115 } |
|
116 } |
|
117 |
|
118 // Open state for the dropdown |
|
119 .open { |
|
120 // Show the menu |
|
121 > .dropdown-menu { |
|
122 display: block; |
|
123 } |
|
124 |
|
125 // Remove the outline when :focus is triggered |
|
126 > a { |
|
127 outline: 0; |
|
128 } |
|
129 } |
|
130 |
|
131 // Menu positioning |
|
132 // |
|
133 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown |
|
134 // menu with the parent. |
|
135 .dropdown-menu-right { |
|
136 left: auto; // Reset the default from `.dropdown-menu` |
|
137 right: 0; |
|
138 } |
|
139 // With v3, we enabled auto-flipping if you have a dropdown within a right |
|
140 // aligned nav component. To enable the undoing of that, we provide an override |
|
141 // to restore the default dropdown menu alignment. |
|
142 // |
|
143 // This is only for left-aligning a dropdown menu within a `.navbar-right` or |
|
144 // `.pull-right` nav component. |
|
145 .dropdown-menu-left { |
|
146 left: 0; |
|
147 right: auto; |
|
148 } |
|
149 |
|
150 // Dropdown section headers |
|
151 .dropdown-header { |
|
152 display: block; |
|
153 padding: 3px 20px; |
|
154 font-size: @font-size-small; |
|
155 line-height: @line-height-base; |
|
156 color: @dropdown-header-color; |
|
157 white-space: nowrap; // as with > li > a |
|
158 } |
|
159 |
|
160 // Backdrop to catch body clicks on mobile, etc. |
|
161 .dropdown-backdrop { |
|
162 position: fixed; |
|
163 left: 0; |
|
164 right: 0; |
|
165 bottom: 0; |
|
166 top: 0; |
|
167 z-index: (@zindex-dropdown - 10); |
|
168 } |
|
169 |
|
170 // Right aligned dropdowns |
|
171 .pull-right > .dropdown-menu { |
|
172 right: 0; |
|
173 left: auto; |
|
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 .dropup, |
|
182 .navbar-fixed-bottom .dropdown { |
|
183 // Reverse the caret |
|
184 .caret { |
|
185 border-top: 0; |
|
186 border-bottom: @caret-width-base solid; |
|
187 content: ""; |
|
188 } |
|
189 // Different positioning for bottom up menu |
|
190 .dropdown-menu { |
|
191 top: auto; |
|
192 bottom: 100%; |
|
193 margin-bottom: 1px; |
|
194 } |
|
195 } |
|
196 |
|
197 |
|
198 // Component alignment |
|
199 // |
|
200 // Reiterate per navbar.less and the modified component alignment there. |
|
201 |
|
202 @media (min-width: @grid-float-breakpoint) { |
|
203 .navbar-right { |
|
204 .dropdown-menu { |
|
205 .dropdown-menu-right(); |
|
206 } |
|
207 // Necessary for overrides of the default right aligned menu. |
|
208 // Will remove come v4 in all likelihood. |
|
209 .dropdown-menu-left { |
|
210 .dropdown-menu-left(); |
|
211 } |
|
212 } |
|
213 } |