]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
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 dashed; | |
14 | border-right: @caret-width-base solid transparent; | |
15 | border-left: @caret-width-base solid transparent; | |
16 | } | |
17 | ||
18 | // The dropdown wrapper (div) | |
19 | .dropup, | |
20 | .dropdown { | |
21 | position: relative; | |
22 | } | |
23 | ||
24 | // Prevent the focus on the dropdown toggle when closing dropdowns | |
25 | .dropdown-toggle:focus { | |
26 | outline: 0; | |
27 | } | |
28 | ||
29 | // The dropdown menu (ul) | |
30 | .dropdown-menu { | |
31 | position: absolute; | |
32 | top: 100%; | |
33 | left: 0; | |
34 | z-index: @zindex-dropdown; | |
35 | display: none; // none by default, but block on "open" of the menu | |
36 | float: left; | |
37 | min-width: 160px; | |
38 | padding: 5px 0; | |
39 | margin: 2px 0 0; // override default ul | |
40 | list-style: none; | |
41 | font-size: @font-size-base; | |
42 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) | |
43 | background-color: @dropdown-bg; | |
44 | border: 1px solid @dropdown-fallback-border; // IE8 fallback | |
45 | border: 1px solid @dropdown-border; | |
46 | border-radius: @border-radius-base; | |
47 | .box-shadow(0 6px 12px rgba(0,0,0,.175)); | |
48 | background-clip: padding-box; | |
49 | ||
50 | // Aligns the dropdown menu to right | |
51 | // | |
52 | // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` | |
53 | &.pull-right { | |
54 | right: 0; | |
55 | left: auto; | |
56 | } | |
57 | ||
58 | // Dividers (basically an hr) within the dropdown | |
59 | .divider { | |
60 | .nav-divider(@dropdown-divider-bg); | |
61 | } | |
62 | ||
63 | // Links within the dropdown menu | |
64 | > li > a { | |
65 | display: block; | |
66 | padding: 3px 20px; | |
67 | clear: both; | |
68 | font-weight: normal; | |
69 | line-height: @line-height-base; | |
70 | color: @dropdown-link-color; | |
71 | white-space: nowrap; // prevent links from randomly breaking onto new lines | |
72 | } | |
73 | } | |
74 | ||
75 | // Hover/Focus state | |
76 | .dropdown-menu > li > a { | |
77 | &:hover, | |
78 | &:focus { | |
79 | text-decoration: none; | |
80 | color: @dropdown-link-hover-color; | |
81 | background-color: @dropdown-link-hover-bg; | |
82 | } | |
83 | } | |
84 | ||
85 | // Active state | |
86 | .dropdown-menu > .active > a { | |
87 | &, | |
88 | &:hover, | |
89 | &:focus { | |
90 | color: @dropdown-link-active-color; | |
91 | text-decoration: none; | |
92 | outline: 0; | |
93 | background-color: @dropdown-link-active-bg; | |
94 | } | |
95 | } | |
96 | ||
97 | // Disabled state | |
98 | // | |
99 | // Gray out text and ensure the hover/focus state remains gray | |
100 | ||
101 | .dropdown-menu > .disabled > a { | |
102 | &, | |
103 | &:hover, | |
104 | &:focus { | |
105 | color: @dropdown-link-disabled-color; | |
106 | } | |
107 | ||
108 | // Nuke hover/focus effects | |
109 | &:hover, | |
110 | &:focus { | |
111 | text-decoration: none; | |
112 | background-color: transparent; | |
113 | background-image: none; // Remove CSS gradient | |
114 | .reset-filter(); | |
115 | cursor: @cursor-disabled; | |
116 | } | |
117 | } | |
118 | ||
119 | // Open state for the dropdown | |
120 | .open { | |
121 | // Show the menu | |
122 | > .dropdown-menu { | |
123 | display: block; | |
124 | } | |
125 | ||
126 | // Remove the outline when :focus is triggered | |
127 | > a { | |
128 | outline: 0; | |
129 | } | |
130 | } | |
131 | ||
132 | // Menu positioning | |
133 | // | |
134 | // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown | |
135 | // menu with the parent. | |
136 | .dropdown-menu-right { | |
137 | left: auto; // Reset the default from `.dropdown-menu` | |
138 | right: 0; | |
139 | } | |
140 | // With v3, we enabled auto-flipping if you have a dropdown within a right | |
141 | // aligned nav component. To enable the undoing of that, we provide an override | |
142 | // to restore the default dropdown menu alignment. | |
143 | // | |
144 | // This is only for left-aligning a dropdown menu within a `.navbar-right` or | |
145 | // `.pull-right` nav component. | |
146 | .dropdown-menu-left { | |
147 | left: 0; | |
148 | right: auto; | |
149 | } | |
150 | ||
151 | // Dropdown section headers | |
152 | .dropdown-header { | |
153 | display: block; | |
154 | padding: 3px 20px; | |
155 | font-size: @font-size-small; | |
156 | line-height: @line-height-base; | |
157 | color: @dropdown-header-color; | |
158 | white-space: nowrap; // as with > li > a | |
159 | } | |
160 | ||
161 | // Backdrop to catch body clicks on mobile, etc. | |
162 | .dropdown-backdrop { | |
163 | position: fixed; | |
164 | left: 0; | |
165 | right: 0; | |
166 | bottom: 0; | |
167 | top: 0; | |
168 | z-index: (@zindex-dropdown - 10); | |
169 | } | |
170 | ||
171 | // Right aligned dropdowns | |
172 | .pull-right > .dropdown-menu { | |
173 | right: 0; | |
174 | left: auto; | |
175 | } | |
176 | ||
177 | // Allow for dropdowns to go bottom up (aka, dropup-menu) | |
178 | // | |
179 | // Just add .dropup after the standard .dropdown class and you're set, bro. | |
180 | // TODO: abstract this so that the navbar fixed styles are not placed here? | |
181 | ||
182 | .dropup, | |
183 | .navbar-fixed-bottom .dropdown { | |
184 | // Reverse the caret | |
185 | .caret { | |
186 | border-top: 0; | |
187 | border-bottom: @caret-width-base solid; | |
188 | content: ""; | |
189 | } | |
190 | // Different positioning for bottom up menu | |
191 | .dropdown-menu { | |
192 | top: auto; | |
193 | bottom: 100%; | |
194 | margin-bottom: 2px; | |
195 | } | |
196 | } | |
197 | ||
198 | ||
199 | // Component alignment | |
200 | // | |
201 | // Reiterate per navbar.less and the modified component alignment there. | |
202 | ||
203 | @media (min-width: @grid-float-breakpoint) { | |
204 | .navbar-right { | |
205 | .dropdown-menu { | |
206 | .dropdown-menu-right(); | |
207 | } | |
208 | // Necessary for overrides of the default right aligned menu. | |
209 | // Will remove come v4 in all likelihood. | |
210 | .dropdown-menu-left { | |
211 | .dropdown-menu-left(); | |
212 | } | |
213 | } | |
214 | } |