Mercurial > wikked

comparison static/bootstrap/less/navbar.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Navbars (Redux) 2 // Navbars
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // COMMON STYLES 6 // Wrapper and base class
7 // ------------- 7 //
8 8 // Provide a static navbar from which we expand to create full-width, fixed, and
9 // Base class and wrapper 9 // other navbar variations.
10
10 .navbar { 11 .navbar {
11 overflow: visible; 12 position: relative;
12 margin-bottom: @baseLineHeight; 13 min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
13 14 margin-bottom: @navbar-margin-bottom;
14 // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar 15 border: 1px solid transparent;
15 *position: relative;
16 *z-index: 2;
17 }
18
19 // Inner for background effects
20 // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
21 .navbar-inner {
22 min-height: @navbarHeight;
23 padding-left: 20px;
24 padding-right: 20px;
25 #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
26 border: 1px solid @navbarBorder;
27 .border-radius(@baseBorderRadius);
28 .box-shadow(0 1px 4px rgba(0,0,0,.065));
29 16
30 // Prevent floats from breaking the navbar 17 // Prevent floats from breaking the navbar
31 .clearfix(); 18 .clearfix();
32 } 19
33 20 @media (min-width: @grid-float-breakpoint) {
34 // Set width to auto for default container 21 border-radius: @navbar-border-radius;
35 // We then reset it for fixed navbars in the #gridSystem mixin 22 }
36 .navbar .container { 23 }
37 width: auto; 24
38 } 25
39 26 // Navbar heading
40 // Override the default collapsed state 27 //
41 .nav-collapse.collapse { 28 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
42 height: auto; 29 // styling of responsive aspects.
43 overflow: visible; 30
44 } 31 .navbar-header {
45
46
47 // Brand: website or project name
48 // -------------------------
49 .navbar .brand {
50 float: left;
51 display: block;
52 // Vertically center the text given @navbarHeight
53 padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
54 margin-left: -20px; // negative indent to left-align the text down the page
55 font-size: 20px;
56 font-weight: 200;
57 color: @navbarBrandColor;
58 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
59 &:hover,
60 &:focus {
61 text-decoration: none;
62 }
63 }
64
65 // Plain text in topbar
66 // -------------------------
67 .navbar-text {
68 margin-bottom: 0;
69 line-height: @navbarHeight;
70 color: @navbarText;
71 }
72
73 // Janky solution for now to account for links outside the .nav
74 // -------------------------
75 .navbar-link {
76 color: @navbarLinkColor;
77 &:hover,
78 &:focus {
79 color: @navbarLinkColorHover;
80 }
81 }
82
83 // Dividers in navbar
84 // -------------------------
85 .navbar .divider-vertical {
86 height: @navbarHeight;
87 margin: 0 9px;
88 border-left: 1px solid @navbarBackground;
89 border-right: 1px solid @navbarBackgroundHighlight;
90 }
91
92 // Buttons in navbar
93 // -------------------------
94 .navbar .btn,
95 .navbar .btn-group {
96 .navbarVerticalAlign(30px); // Vertically center in navbar
97 }
98 .navbar .btn-group .btn,
99 .navbar .input-prepend .btn,
100 .navbar .input-append .btn,
101 .navbar .input-prepend .btn-group,
102 .navbar .input-append .btn-group {
103 margin-top: 0; // then undo the margin here so we don't accidentally double it
104 }
105
106 // Navbar forms
107 // -------------------------
108 .navbar-form {
109 margin-bottom: 0; // remove default bottom margin
110 .clearfix(); 32 .clearfix();
111 input, 33
112 select, 34 @media (min-width: @grid-float-breakpoint) {
113 .radio, 35 float: left;
114 .checkbox { 36 }
115 .navbarVerticalAlign(30px); // Vertically center in navbar 37 }
116 } 38
117 input, 39
118 select, 40 // Navbar collapse (body)
119 .btn { 41 //
120 display: inline-block; 42 // Group your navbar content into this for easy collapsing and expanding across
121 margin-bottom: 0; 43 // various device sizes. By default, this content is collapsed when <768px, but
122 } 44 // will expand past that for a horizontal display.
123 input[type="image"], 45 //
124 input[type="checkbox"], 46 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
125 input[type="radio"] { 47 // vertically and include a `max-height` to overflow in case you have too much
126 margin-top: 3px; 48 // content for the user's viewport.
127 } 49
128 .input-append, 50 .navbar-collapse {
129 .input-prepend { 51 max-height: 340px;
130 margin-top: 5px; 52 overflow-x: visible;
131 white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left 53 padding-right: @navbar-padding-horizontal;
132 input { 54 padding-left: @navbar-padding-horizontal;
133 margin-top: 0; // remove the margin on top since it's on the parent 55 border-top: 1px solid transparent;
134 } 56 box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
135 } 57 .clearfix();
136 } 58 -webkit-overflow-scrolling: touch;
137 59
138 // Navbar search 60 &.in {
139 // ------------------------- 61 overflow-y: auto;
140 .navbar-search { 62 }
141 position: relative; 63
142 float: left; 64 @media (min-width: @grid-float-breakpoint) {
143 .navbarVerticalAlign(30px); // Vertically center in navbar 65 width: auto;
144 margin-bottom: 0; 66 border-top: 0;
145 .search-query { 67 box-shadow: none;
146 margin-bottom: 0; 68
147 padding: 4px 14px; 69 &.collapse {
148 #font > .sans-serif(13px, normal, 1); 70 display: block !important;
149 .border-radius(15px); // redeclare because of specificity of the type attribute 71 height: auto !important;
150 } 72 padding-bottom: 0; // Override default setting
151 } 73 overflow: visible !important;
152 74 }
153 75
154 76 &.in {
155 // Static navbar 77 overflow-y: visible;
156 // ------------------------- 78 }
157 79
80 // Undo the collapse side padding for navbars with containers to ensure
81 // alignment of right-aligned contents.
82 .navbar-fixed-top &,
83 .navbar-static-top &,
84 .navbar-fixed-bottom & {
85 padding-left: 0;
86 padding-right: 0;
87 }
88 }
89 }
90
91
92 // Both navbar header and collapse
93 //
94 // When a container is present, change the behavior of the header and collapse.
95
96 .container > .navbar-header,
97 .container > .navbar-collapse {
98 margin-right: -@navbar-padding-horizontal;
99 margin-left: -@navbar-padding-horizontal;
100
101 @media (min-width: @grid-float-breakpoint) {
102 margin-right: 0;
103 margin-left: 0;
104 }
105 }
106
107
108 //
109 // Navbar alignment options
110 //
111 // Display the navbar across the entirety of the page or fixed it to the top or
112 // bottom of the page.
113
114 // Static top (unfixed, but 100% wide) navbar
158 .navbar-static-top { 115 .navbar-static-top {
159 position: static; 116 z-index: @zindex-navbar;
160 margin-bottom: 0; // remove 18px margin for default navbar 117 border-width: 0 0 1px;
161 .navbar-inner { 118
162 .border-radius(0); 119 @media (min-width: @grid-float-breakpoint) {
163 } 120 border-radius: 0;
164 } 121 }
165 122 }
166 123
167 124 // Fix the top/bottom navbars when screen real estate supports it
168 // Fixed navbar
169 // -------------------------
170
171 // Shared (top/bottom) styles
172 .navbar-fixed-top, 125 .navbar-fixed-top,
173 .navbar-fixed-bottom { 126 .navbar-fixed-bottom {
174 position: fixed; 127 position: fixed;
175 right: 0; 128 right: 0;
176 left: 0; 129 left: 0;
177 z-index: @zindexFixedNavbar; 130 z-index: @zindex-navbar-fixed;
178 margin-bottom: 0; // remove 18px margin for default navbar 131
179 } 132 // Undo the rounded corners
180 .navbar-fixed-top .navbar-inner, 133 @media (min-width: @grid-float-breakpoint) {
181 .navbar-static-top .navbar-inner { 134 border-radius: 0;
182 border-width: 0 0 1px; 135 }
183 } 136 }
184 .navbar-fixed-bottom .navbar-inner {
185 border-width: 1px 0 0;
186 }
187 .navbar-fixed-top .navbar-inner,
188 .navbar-fixed-bottom .navbar-inner {
189 padding-left: 0;
190 padding-right: 0;
191 .border-radius(0);
192 }
193
194 // Reset container width
195 // Required here as we reset the width earlier on and the grid mixins don't override early enough
196 .navbar-static-top .container,
197 .navbar-fixed-top .container,
198 .navbar-fixed-bottom .container {
199 #grid > .core > .span(@gridColumns);
200 }
201
202 // Fixed to top
203 .navbar-fixed-top { 137 .navbar-fixed-top {
204 top: 0; 138 top: 0;
205 } 139 border-width: 0 0 1px;
206 .navbar-fixed-top, 140 }
207 .navbar-static-top {
208 .navbar-inner {
209 .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
210 }
211 }
212
213 // Fixed to bottom
214 .navbar-fixed-bottom { 141 .navbar-fixed-bottom {
215 bottom: 0; 142 bottom: 0;
216 .navbar-inner { 143 margin-bottom: 0; // override .navbar defaults
217 .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)"); 144 border-width: 1px 0 0;
218 } 145 }
219 } 146
220 147
221 148 // Brand/project name
222 149
223 // NAVIGATION 150 .navbar-brand {
224 // ---------- 151 float: left;
225 152 padding: @navbar-padding-vertical @navbar-padding-horizontal;
226 .navbar .nav { 153 font-size: @font-size-large;
154 line-height: @line-height-computed;
155
156 &:hover,
157 &:focus {
158 text-decoration: none;
159 }
160
161 @media (min-width: @grid-float-breakpoint) {
162 .navbar > .container & {
163 margin-left: -@navbar-padding-horizontal;
164 }
165 }
166 }
167
168
169 // Navbar toggle
170 //
171 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
172 // JavaScript plugin.
173
174 .navbar-toggle {
227 position: relative; 175 position: relative;
228 left: 0;
229 display: block;
230 float: left;
231 margin: 0 10px 0 0;
232 }
233 .navbar .nav.pull-right {
234 float: right; // redeclare due to specificity
235 margin-right: 0; // remove margin on float right nav
236 }
237 .navbar .nav > li {
238 float: left;
239 }
240
241 // Links
242 .navbar .nav > li > a {
243 float: none;
244 // Vertically center the text given @navbarHeight
245 padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
246 color: @navbarLinkColor;
247 text-decoration: none;
248 text-shadow: 0 1px 0 @navbarBackgroundHighlight;
249 }
250 .navbar .nav .dropdown-toggle .caret {
251 margin-top: 8px;
252 }
253
254 // Hover/focus
255 .navbar .nav > li > a:focus,
256 .navbar .nav > li > a:hover {
257 background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
258 color: @navbarLinkColorHover;
259 text-decoration: none;
260 }
261
262 // Active nav items
263 .navbar .nav > .active > a,
264 .navbar .nav > .active > a:hover,
265 .navbar .nav > .active > a:focus {
266 color: @navbarLinkColorActive;
267 text-decoration: none;
268 background-color: @navbarLinkBackgroundActive;
269 .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
270 }
271
272 // Navbar button for toggling navbar items in responsive layouts
273 // These definitions need to come after '.navbar .btn'
274 .navbar .btn-navbar {
275 display: none;
276 float: right; 176 float: right;
277 padding: 7px 10px; 177 margin-right: @navbar-padding-horizontal;
278 margin-left: 5px; 178 padding: 9px 10px;
279 margin-right: 5px; 179 .navbar-vertical-align(34px);
280 .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); 180 background-color: transparent;
281 .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); 181 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
282 } 182 border: 1px solid transparent;
283 .navbar .btn-navbar .icon-bar { 183 border-radius: @border-radius-base;
284 display: block; 184
285 width: 18px; 185 // Bars
286 height: 2px; 186 .icon-bar {
287 background-color: #f5f5f5; 187 display: block;
288 .border-radius(1px); 188 width: 22px;
289 .box-shadow(0 1px 0 rgba(0,0,0,.25)); 189 height: 2px;
290 } 190 border-radius: 1px;
291 .btn-navbar .icon-bar + .icon-bar { 191 }
292 margin-top: 3px; 192 .icon-bar + .icon-bar {
293 } 193 margin-top: 4px;
294 194 }
195
196 @media (min-width: @grid-float-breakpoint) {
197 display: none;
198 }
199 }
200
201
202 // Navbar nav links
203 //
204 // Builds on top of the `.nav` components with it's own modifier class to make
205 // the nav the full height of the horizontal nav (above 768px).
206
207 .navbar-nav {
208 margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
209
210 > li > a {
211 padding-top: 10px;
212 padding-bottom: 10px;
213 line-height: @line-height-computed;
214 }
215
216 @media (max-width: @grid-float-breakpoint-max) {
217 // Dropdowns get custom display when collapsed
218 .open .dropdown-menu {
219 position: static;
220 float: none;
221 width: auto;
222 margin-top: 0;
223 background-color: transparent;
224 border: 0;
225 box-shadow: none;
226 > li > a,
227 .dropdown-header {
228 padding: 5px 15px 5px 25px;
229 }
230 > li > a {
231 line-height: @line-height-computed;
232 &:hover,
233 &:focus {
234 background-image: none;
235 }
236 }
237 }
238 }
239
240 // Uncollapse the nav
241 @media (min-width: @grid-float-breakpoint) {
242 float: left;
243 margin: 0;
244
245 > li {
246 float: left;
247 > a {
248 padding-top: @navbar-padding-vertical;
249 padding-bottom: @navbar-padding-vertical;
250 }
251 }
252
253 &.navbar-right:last-child {
254 margin-right: -@navbar-padding-horizontal;
255 }
256 }
257 }
258
259
260 // Component alignment
261 //
262 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
263 // issues with parents and chaining. Only do this when the navbar is uncollapsed
264 // though so that navbar contents properly stack and align in mobile.
265
266 @media (min-width: @grid-float-breakpoint) {
267 .navbar-left { .pull-left(); }
268 .navbar-right { .pull-right(); }
269 }
270
271
272 // Navbar form
273 //
274 // Extension of the `.form-inline` with some extra flavor for optimum display in
275 // our navbars.
276
277 .navbar-form {
278 margin-left: -@navbar-padding-horizontal;
279 margin-right: -@navbar-padding-horizontal;
280 padding: 10px @navbar-padding-horizontal;
281 border-top: 1px solid transparent;
282 border-bottom: 1px solid transparent;
283 @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
284 .box-shadow(@shadow);
285
286 // Mixin behavior for optimum display
287 .form-inline();
288
289 .form-group {
290 @media (max-width: @grid-float-breakpoint-max) {
291 margin-bottom: 5px;
292 }
293 }
294
295 // Vertically center in expanded, horizontal navbar
296 .navbar-vertical-align(@input-height-base);
297
298 // Undo 100% width for pull classes
299 @media (min-width: @grid-float-breakpoint) {
300 width: auto;
301 border: 0;
302 margin-left: 0;
303 margin-right: 0;
304 padding-top: 0;
305 padding-bottom: 0;
306 .box-shadow(none);
307
308 // Outdent the form if last child to line up with content down the page
309 &.navbar-right:last-child {
310 margin-right: -@navbar-padding-horizontal;
311 }
312 }
313 }
295 314
296 315
297 // Dropdown menus 316 // Dropdown menus
298 // --------------
299 317
300 // Menu position and menu carets 318 // Menu position and menu carets
301 .navbar .nav > li > .dropdown-menu { 319 .navbar-nav > li > .dropdown-menu {
302 &:before { 320 margin-top: 0;
303 content: ''; 321 .border-top-radius(0);
304 display: inline-block;
305 border-left: 7px solid transparent;
306 border-right: 7px solid transparent;
307 border-bottom: 7px solid #ccc;
308 border-bottom-color: @dropdownBorder;
309 position: absolute;
310 top: -7px;
311 left: 9px;
312 }
313 &:after {
314 content: '';
315 display: inline-block;
316 border-left: 6px solid transparent;
317 border-right: 6px solid transparent;
318 border-bottom: 6px solid @dropdownBackground;
319 position: absolute;
320 top: -6px;
321 left: 10px;
322 }
323 } 322 }
324 // Menu position and menu caret support for dropups via extra dropup class 323 // Menu position and menu caret support for dropups via extra dropup class
325 .navbar-fixed-bottom .nav > li > .dropdown-menu { 324 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
326 &:before { 325 .border-bottom-radius(0);
327 border-top: 7px solid #ccc;
328 border-top-color: @dropdownBorder;
329 border-bottom: 0;
330 bottom: -7px;
331 top: auto;
332 }
333 &:after {
334 border-top: 6px solid @dropdownBackground;
335 border-bottom: 0;
336 bottom: -6px;
337 top: auto;
338 }
339 }
340
341 // Caret should match text color on hover/focus
342 .navbar .nav li.dropdown > a:hover .caret,
343 .navbar .nav li.dropdown > a:focus .caret {
344 border-top-color: @navbarLinkColorHover;
345 border-bottom-color: @navbarLinkColorHover;
346 }
347
348 // Remove background color from open dropdown
349 .navbar .nav li.dropdown.open > .dropdown-toggle,
350 .navbar .nav li.dropdown.active > .dropdown-toggle,
351 .navbar .nav li.dropdown.open.active > .dropdown-toggle {
352 background-color: @navbarLinkBackgroundActive;
353 color: @navbarLinkColorActive;
354 }
355 .navbar .nav li.dropdown > .dropdown-toggle .caret {
356 border-top-color: @navbarLinkColor;
357 border-bottom-color: @navbarLinkColor;
358 }
359 .navbar .nav li.dropdown.open > .dropdown-toggle .caret,
360 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
361 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
362 border-top-color: @navbarLinkColorActive;
363 border-bottom-color: @navbarLinkColorActive;
364 } 326 }
365 327
366 // Right aligned menus need alt position 328 // Right aligned menus need alt position
367 .navbar .pull-right > li > .dropdown-menu, 329 .navbar-nav.pull-right > li > .dropdown-menu,
368 .navbar .nav > li > .dropdown-menu.pull-right { 330 .navbar-nav > li > .dropdown-menu.pull-right {
369 left: auto; 331 left: auto;
370 right: 0; 332 right: 0;
371 &:before { 333 }
372 left: auto; 334
373 right: 12px; 335
374 } 336 // Buttons in navbars
375 &:after { 337 //
376 left: auto; 338 // Vertically center a button within a navbar (when *not* in a form).
377 right: 13px; 339
378 } 340 .navbar-btn {
379 .dropdown-menu { 341 .navbar-vertical-align(@input-height-base);
380 left: auto; 342
381 right: 100%; 343 &.btn-sm {
382 margin-left: 0; 344 .navbar-vertical-align(@input-height-small);
383 margin-right: -1px; 345 }
384 .border-radius(6px 0 6px 6px); 346 &.btn-xs {
385 } 347 .navbar-vertical-align(22);
386 } 348 }
387 349 }
388 350
389 // Inverted navbar 351
390 // ------------------------- 352 // Text in navbars
391 353 //
392 .navbar-inverse { 354 // Add a class to make any element properly align itself vertically within the navbars.
393 355
394 .navbar-inner { 356 .navbar-text {
395 #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); 357 .navbar-vertical-align(@line-height-computed);
396 border-color: @navbarInverseBorder; 358
397 } 359 @media (min-width: @grid-float-breakpoint) {
398 360 float: left;
399 .brand, 361 margin-left: @navbar-padding-horizontal;
400 .nav > li > a { 362 margin-right: @navbar-padding-horizontal;
401 color: @navbarInverseLinkColor; 363
402 text-shadow: 0 -1px 0 rgba(0,0,0,.25); 364 // Outdent the form if last child to line up with content down the page
365 &.navbar-right:last-child {
366 margin-right: 0;
367 }
368 }
369 }
370
371 // Alternate navbars
372 // --------------------------------------------------
373
374 // Default navbar
375 .navbar-default {
376 background-color: @navbar-default-bg;
377 border-color: @navbar-default-border;
378
379 .navbar-brand {
380 color: @navbar-default-brand-color;
403 &:hover, 381 &:hover,
404 &:focus { 382 &:focus {
405 color: @navbarInverseLinkColorHover; 383 color: @navbar-default-brand-hover-color;
406 } 384 background-color: @navbar-default-brand-hover-bg;
407 } 385 }
408
409 .brand {
410 color: @navbarInverseBrandColor;
411 } 386 }
412 387
413 .navbar-text { 388 .navbar-text {
414 color: @navbarInverseText; 389 color: @navbar-default-color;
415 } 390 }
416 391
417 .nav > li > a:focus, 392 .navbar-nav {
418 .nav > li > a:hover { 393 > li > a {
419 background-color: @navbarInverseLinkBackgroundHover; 394 color: @navbar-default-link-color;
420 color: @navbarInverseLinkColorHover; 395
421 } 396 &:hover,
422 397 &:focus {
423 .nav .active > a, 398 color: @navbar-default-link-hover-color;
424 .nav .active > a:hover, 399 background-color: @navbar-default-link-hover-bg;
425 .nav .active > a:focus { 400 }
426 color: @navbarInverseLinkColorActive; 401 }
427 background-color: @navbarInverseLinkBackgroundActive; 402 > .active > a {
428 } 403 &,
429 404 &:hover,
430 // Inline text links 405 &:focus {
431 .navbar-link { 406 color: @navbar-default-link-active-color;
432 color: @navbarInverseLinkColor; 407 background-color: @navbar-default-link-active-bg;
408 }
409 }
410 > .disabled > a {
411 &,
412 &:hover,
413 &:focus {
414 color: @navbar-default-link-disabled-color;
415 background-color: @navbar-default-link-disabled-bg;
416 }
417 }
418 }
419
420 .navbar-toggle {
421 border-color: @navbar-default-toggle-border-color;
433 &:hover, 422 &:hover,
434 &:focus { 423 &:focus {
435 color: @navbarInverseLinkColorHover; 424 background-color: @navbar-default-toggle-hover-bg;
436 } 425 }
437 } 426 .icon-bar {
438 427 background-color: @navbar-default-toggle-icon-bar-bg;
439 // Dividers in navbar 428 }
440 .divider-vertical { 429 }
441 border-left-color: @navbarInverseBackground; 430
442 border-right-color: @navbarInverseBackgroundHighlight; 431 .navbar-collapse,
432 .navbar-form {
433 border-color: @navbar-default-border;
434 }
435
436 // Dropdown menu items
437 .navbar-nav {
438 // Remove background color from open dropdown
439 > .open > a {
440 &,
441 &:hover,
442 &:focus {
443 background-color: @navbar-default-link-active-bg;
444 color: @navbar-default-link-active-color;
445 }
446 }
447
448 @media (max-width: @grid-float-breakpoint-max) {
449 // Dropdowns get custom display when collapsed
450 .open .dropdown-menu {
451 > li > a {
452 color: @navbar-default-link-color;
453 &:hover,
454 &:focus {
455 color: @navbar-default-link-hover-color;
456 background-color: @navbar-default-link-hover-bg;
457 }
458 }
459 > .active > a {
460 &,
461 &:hover,
462 &:focus {
463 color: @navbar-default-link-active-color;
464 background-color: @navbar-default-link-active-bg;
465 }
466 }
467 > .disabled > a {
468 &,
469 &:hover,
470 &:focus {
471 color: @navbar-default-link-disabled-color;
472 background-color: @navbar-default-link-disabled-bg;
473 }
474 }
475 }
476 }
477 }
478
479
480 // Links in navbars
481 //
482 // Add a class to ensure links outside the navbar nav are colored correctly.
483
484 .navbar-link {
485 color: @navbar-default-link-color;
486 &:hover {
487 color: @navbar-default-link-hover-color;
488 }
489 }
490
491 }
492
493 // Inverse navbar
494
495 .navbar-inverse {
496 background-color: @navbar-inverse-bg;
497 border-color: @navbar-inverse-border;
498
499 .navbar-brand {
500 color: @navbar-inverse-brand-color;
501 &:hover,
502 &:focus {
503 color: @navbar-inverse-brand-hover-color;
504 background-color: @navbar-inverse-brand-hover-bg;
505 }
506 }
507
508 .navbar-text {
509 color: @navbar-inverse-color;
510 }
511
512 .navbar-nav {
513 > li > a {
514 color: @navbar-inverse-link-color;
515
516 &:hover,
517 &:focus {
518 color: @navbar-inverse-link-hover-color;
519 background-color: @navbar-inverse-link-hover-bg;
520 }
521 }
522 > .active > a {
523 &,
524 &:hover,
525 &:focus {
526 color: @navbar-inverse-link-active-color;
527 background-color: @navbar-inverse-link-active-bg;
528 }
529 }
530 > .disabled > a {
531 &,
532 &:hover,
533 &:focus {
534 color: @navbar-inverse-link-disabled-color;
535 background-color: @navbar-inverse-link-disabled-bg;
536 }
537 }
538 }
539
540 // Darken the responsive nav toggle
541 .navbar-toggle {
542 border-color: @navbar-inverse-toggle-border-color;
543 &:hover,
544 &:focus {
545 background-color: @navbar-inverse-toggle-hover-bg;
546 }
547 .icon-bar {
548 background-color: @navbar-inverse-toggle-icon-bar-bg;
549 }
550 }
551
552 .navbar-collapse,
553 .navbar-form {
554 border-color: darken(@navbar-inverse-bg, 7%);
443 } 555 }
444 556
445 // Dropdowns 557 // Dropdowns
446 .nav li.dropdown.open > .dropdown-toggle, 558 .navbar-nav {
447 .nav li.dropdown.active > .dropdown-toggle, 559 > .open > a {
448 .nav li.dropdown.open.active > .dropdown-toggle { 560 &,
449 background-color: @navbarInverseLinkBackgroundActive; 561 &:hover,
450 color: @navbarInverseLinkColorActive; 562 &:focus {
451 } 563 background-color: @navbar-inverse-link-active-bg;
452 .nav li.dropdown > a:hover .caret, 564 color: @navbar-inverse-link-active-color;
453 .nav li.dropdown > a:focus .caret { 565 }
454 border-top-color: @navbarInverseLinkColorActive; 566 }
455 border-bottom-color: @navbarInverseLinkColorActive; 567
456 } 568 @media (max-width: @grid-float-breakpoint-max) {
457 .nav li.dropdown > .dropdown-toggle .caret { 569 // Dropdowns get custom display
458 border-top-color: @navbarInverseLinkColor; 570 .open .dropdown-menu {
459 border-bottom-color: @navbarInverseLinkColor; 571 > .dropdown-header {
460 } 572 border-color: @navbar-inverse-border;
461 .nav li.dropdown.open > .dropdown-toggle .caret, 573 }
462 .nav li.dropdown.active > .dropdown-toggle .caret, 574 .divider {
463 .nav li.dropdown.open.active > .dropdown-toggle .caret { 575 background-color: @navbar-inverse-border;
464 border-top-color: @navbarInverseLinkColorActive; 576 }
465 border-bottom-color: @navbarInverseLinkColorActive; 577 > li > a {
466 } 578 color: @navbar-inverse-link-color;
467 579 &:hover,
468 // Navbar search 580 &:focus {
469 .navbar-search { 581 color: @navbar-inverse-link-hover-color;
470 .search-query { 582 background-color: @navbar-inverse-link-hover-bg;
471 color: @white; 583 }
472 background-color: @navbarInverseSearchBackground; 584 }
473 border-color: @navbarInverseSearchBorder; 585 > .active > a {
474 .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); 586 &,
475 .transition(none); 587 &:hover,
476 .placeholder(@navbarInverseSearchPlaceholderColor); 588 &:focus {
477 589 color: @navbar-inverse-link-active-color;
478 // Focus states (we use .focused since IE7-8 and down doesn't support :focus) 590 background-color: @navbar-inverse-link-active-bg;
479 &:focus, 591 }
480 &.focused { 592 }
481 padding: 5px 15px; 593 > .disabled > a {
482 color: @grayDark; 594 &,
483 text-shadow: 0 1px 0 @white; 595 &:hover,
484 background-color: @navbarInverseSearchBackgroundFocus; 596 &:focus {
485 border: 0; 597 color: @navbar-inverse-link-disabled-color;
486 .box-shadow(0 0 3px rgba(0,0,0,.15)); 598 background-color: @navbar-inverse-link-disabled-bg;
487 outline: 0; 599 }
488 } 600 }
489 } 601 }
490 } 602 }
491 603 }
492 // Navbar collapse button 604
493 .btn-navbar { 605 .navbar-link {
494 .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%)); 606 color: @navbar-inverse-link-color;
495 } 607 &:hover {
496 608 color: @navbar-inverse-link-hover-color;
497 } 609 }
610 }
611
612 }