diff options
Diffstat (limited to 'Back/jinwei.me/mobile/css/navbar.less')
-rw-r--r-- | Back/jinwei.me/mobile/css/navbar.less | 616 |
1 files changed, 616 insertions, 0 deletions
diff --git a/Back/jinwei.me/mobile/css/navbar.less b/Back/jinwei.me/mobile/css/navbar.less new file mode 100644 index 0000000..8c4c210 --- /dev/null +++ b/Back/jinwei.me/mobile/css/navbar.less | |||
@@ -0,0 +1,616 @@ | |||
1 | // | ||
2 | // Navbars | ||
3 | // -------------------------------------------------- | ||
4 | |||
5 | |||
6 | // Wrapper and base class | ||
7 | // | ||
8 | // Provide a static navbar from which we expand to create full-width, fixed, and | ||
9 | // other navbar variations. | ||
10 | |||
11 | .navbar { | ||
12 | position: relative; | ||
13 | min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) | ||
14 | margin-bottom: @navbar-margin-bottom; | ||
15 | border: 1px solid transparent; | ||
16 | |||
17 | // Prevent floats from breaking the navbar | ||
18 | &:extend(.clearfix all); | ||
19 | |||
20 | @media (min-width: @grid-float-breakpoint) { | ||
21 | border-radius: @navbar-border-radius; | ||
22 | } | ||
23 | } | ||
24 | |||
25 | |||
26 | // Navbar heading | ||
27 | // | ||
28 | // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy | ||
29 | // styling of responsive aspects. | ||
30 | |||
31 | .navbar-header { | ||
32 | &:extend(.clearfix all); | ||
33 | |||
34 | @media (min-width: @grid-float-breakpoint) { | ||
35 | float: left; | ||
36 | } | ||
37 | } | ||
38 | |||
39 | |||
40 | // Navbar collapse (body) | ||
41 | // | ||
42 | // Group your navbar content into this for easy collapsing and expanding across | ||
43 | // various device sizes. By default, this content is collapsed when <768px, but | ||
44 | // will expand past that for a horizontal display. | ||
45 | // | ||
46 | // To start (on mobile devices) the navbar links, forms, and buttons are stacked | ||
47 | // vertically and include a `max-height` to overflow in case you have too much | ||
48 | // content for the user's viewport. | ||
49 | |||
50 | .navbar-collapse { | ||
51 | max-height: @navbar-collapse-max-height; | ||
52 | overflow-x: visible; | ||
53 | padding-right: @navbar-padding-horizontal; | ||
54 | padding-left: @navbar-padding-horizontal; | ||
55 | border-top: 1px solid transparent; | ||
56 | box-shadow: inset 0 1px 0 rgba(255,255,255,.1); | ||
57 | &:extend(.clearfix all); | ||
58 | -webkit-overflow-scrolling: touch; | ||
59 | |||
60 | &.in { | ||
61 | overflow-y: auto; | ||
62 | } | ||
63 | |||
64 | @media (min-width: @grid-float-breakpoint) { | ||
65 | width: auto; | ||
66 | border-top: 0; | ||
67 | box-shadow: none; | ||
68 | |||
69 | &.collapse { | ||
70 | display: block !important; | ||
71 | height: auto !important; | ||
72 | padding-bottom: 0; // Override default setting | ||
73 | overflow: visible !important; | ||
74 | } | ||
75 | |||
76 | &.in { | ||
77 | overflow-y: visible; | ||
78 | } | ||
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, | ||
97 | .container-fluid { | ||
98 | > .navbar-header, | ||
99 | > .navbar-collapse { | ||
100 | margin-right: -@navbar-padding-horizontal; | ||
101 | margin-left: -@navbar-padding-horizontal; | ||
102 | |||
103 | @media (min-width: @grid-float-breakpoint) { | ||
104 | margin-right: 0; | ||
105 | margin-left: 0; | ||
106 | } | ||
107 | } | ||
108 | } | ||
109 | |||
110 | |||
111 | // | ||
112 | // Navbar alignment options | ||
113 | // | ||
114 | // Display the navbar across the entirety of the page or fixed it to the top or | ||
115 | // bottom of the page. | ||
116 | |||
117 | // Static top (unfixed, but 100% wide) navbar | ||
118 | .navbar-static-top { | ||
119 | z-index: @zindex-navbar; | ||
120 | border-width: 0 0 1px; | ||
121 | |||
122 | @media (min-width: @grid-float-breakpoint) { | ||
123 | border-radius: 0; | ||
124 | } | ||
125 | } | ||
126 | |||
127 | // Fix the top/bottom navbars when screen real estate supports it | ||
128 | .navbar-fixed-top, | ||
129 | .navbar-fixed-bottom { | ||
130 | position: fixed; | ||
131 | right: 0; | ||
132 | left: 0; | ||
133 | z-index: @zindex-navbar-fixed; | ||
134 | |||
135 | // Undo the rounded corners | ||
136 | @media (min-width: @grid-float-breakpoint) { | ||
137 | border-radius: 0; | ||
138 | } | ||
139 | } | ||
140 | .navbar-fixed-top { | ||
141 | top: 0; | ||
142 | border-width: 0 0 1px; | ||
143 | } | ||
144 | .navbar-fixed-bottom { | ||
145 | bottom: 0; | ||
146 | margin-bottom: 0; // override .navbar defaults | ||
147 | border-width: 1px 0 0; | ||
148 | } | ||
149 | |||
150 | |||
151 | // Brand/project name | ||
152 | |||
153 | .navbar-brand { | ||
154 | float: left; | ||
155 | padding: @navbar-padding-vertical @navbar-padding-horizontal; | ||
156 | font-size: @font-size-large; | ||
157 | line-height: @line-height-computed; | ||
158 | height: @navbar-height; | ||
159 | |||
160 | &:hover, | ||
161 | &:focus { | ||
162 | text-decoration: none; | ||
163 | } | ||
164 | |||
165 | @media (min-width: @grid-float-breakpoint) { | ||
166 | .navbar > .container &, | ||
167 | .navbar > .container-fluid & { | ||
168 | margin-left: -@navbar-padding-horizontal; | ||
169 | } | ||
170 | } | ||
171 | } | ||
172 | |||
173 | |||
174 | // Navbar toggle | ||
175 | // | ||
176 | // Custom button for toggling the `.navbar-collapse`, powered by the collapse | ||
177 | // JavaScript plugin. | ||
178 | |||
179 | .navbar-toggle { | ||
180 | position: relative; | ||
181 | float: right; | ||
182 | margin-right: @navbar-padding-horizontal; | ||
183 | padding: 9px 10px; | ||
184 | .navbar-vertical-align(34px); | ||
185 | background-color: transparent; | ||
186 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 | ||
187 | border: 1px solid transparent; | ||
188 | border-radius: @border-radius-base; | ||
189 | |||
190 | // We remove the `outline` here, but later compensate by attaching `:hover` | ||
191 | // styles to `:focus`. | ||
192 | &:focus { | ||
193 | outline: none; | ||
194 | } | ||
195 | |||
196 | // Bars | ||
197 | .icon-bar { | ||
198 | display: block; | ||
199 | width: 22px; | ||
200 | height: 2px; | ||
201 | border-radius: 1px; | ||
202 | } | ||
203 | .icon-bar + .icon-bar { | ||
204 | margin-top: 4px; | ||
205 | } | ||
206 | |||
207 | @media (min-width: @grid-float-breakpoint) { | ||
208 | display: none; | ||
209 | } | ||
210 | } | ||
211 | |||
212 | |||
213 | // Navbar nav links | ||
214 | // | ||
215 | // Builds on top of the `.nav` components with its own modifier class to make | ||
216 | // the nav the full height of the horizontal nav (above 768px). | ||
217 | |||
218 | .navbar-nav { | ||
219 | margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; | ||
220 | |||
221 | > li > a { | ||
222 | padding-top: 10px; | ||
223 | padding-bottom: 10px; | ||
224 | line-height: @line-height-computed; | ||
225 | } | ||
226 | |||
227 | @media (max-width: @grid-float-breakpoint-max) { | ||
228 | // Dropdowns get custom display when collapsed | ||
229 | .open .dropdown-menu { | ||
230 | position: static; | ||
231 | float: none; | ||
232 | width: auto; | ||
233 | margin-top: 0; | ||
234 | background-color: transparent; | ||
235 | border: 0; | ||
236 | box-shadow: none; | ||
237 | > li > a, | ||
238 | .dropdown-header { | ||
239 | padding: 5px 15px 5px 25px; | ||
240 | } | ||
241 | > li > a { | ||
242 | line-height: @line-height-computed; | ||
243 | &:hover, | ||
244 | &:focus { | ||
245 | background-image: none; | ||
246 | } | ||
247 | } | ||
248 | } | ||
249 | } | ||
250 | |||
251 | // Uncollapse the nav | ||
252 | @media (min-width: @grid-float-breakpoint) { | ||
253 | float: left; | ||
254 | margin: 0; | ||
255 | |||
256 | > li { | ||
257 | float: left; | ||
258 | > a { | ||
259 | padding-top: @navbar-padding-vertical; | ||
260 | padding-bottom: @navbar-padding-vertical; | ||
261 | } | ||
262 | } | ||
263 | |||
264 | &.navbar-right:last-child { | ||
265 | margin-right: -@navbar-padding-horizontal; | ||
266 | } | ||
267 | } | ||
268 | } | ||
269 | |||
270 | |||
271 | // Component alignment | ||
272 | // | ||
273 | // Repurpose the pull utilities as their own navbar utilities to avoid specificity | ||
274 | // issues with parents and chaining. Only do this when the navbar is uncollapsed | ||
275 | // though so that navbar contents properly stack and align in mobile. | ||
276 | |||
277 | @media (min-width: @grid-float-breakpoint) { | ||
278 | .navbar-left { .pull-left(); } | ||
279 | .navbar-right { .pull-right(); } | ||
280 | } | ||
281 | |||
282 | |||
283 | // Navbar form | ||
284 | // | ||
285 | // Extension of the `.form-inline` with some extra flavor for optimum display in | ||
286 | // our navbars. | ||
287 | |||
288 | .navbar-form { | ||
289 | margin-left: -@navbar-padding-horizontal; | ||
290 | margin-right: -@navbar-padding-horizontal; | ||
291 | padding: 10px @navbar-padding-horizontal; | ||
292 | border-top: 1px solid transparent; | ||
293 | border-bottom: 1px solid transparent; | ||
294 | @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); | ||
295 | .box-shadow(@shadow); | ||
296 | |||
297 | // Mixin behavior for optimum display | ||
298 | .form-inline(); | ||
299 | |||
300 | .form-group { | ||
301 | @media (max-width: @grid-float-breakpoint-max) { | ||
302 | margin-bottom: 5px; | ||
303 | } | ||
304 | } | ||
305 | |||
306 | // Vertically center in expanded, horizontal navbar | ||
307 | .navbar-vertical-align(@input-height-base); | ||
308 | |||
309 | // Undo 100% width for pull classes | ||
310 | @media (min-width: @grid-float-breakpoint) { | ||
311 | width: auto; | ||
312 | border: 0; | ||
313 | margin-left: 0; | ||
314 | margin-right: 0; | ||
315 | padding-top: 0; | ||
316 | padding-bottom: 0; | ||
317 | .box-shadow(none); | ||
318 | |||
319 | // Outdent the form if last child to line up with content down the page | ||
320 | &.navbar-right:last-child { | ||
321 | margin-right: -@navbar-padding-horizontal; | ||
322 | } | ||
323 | } | ||
324 | } | ||
325 | |||
326 | |||
327 | // Dropdown menus | ||
328 | |||
329 | // Menu position and menu carets | ||
330 | .navbar-nav > li > .dropdown-menu { | ||
331 | margin-top: 0; | ||
332 | .border-top-radius(0); | ||
333 | } | ||
334 | // Menu position and menu caret support for dropups via extra dropup class | ||
335 | .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { | ||
336 | .border-bottom-radius(0); | ||
337 | } | ||
338 | |||
339 | |||
340 | // Buttons in navbars | ||
341 | // | ||
342 | // Vertically center a button within a navbar (when *not* in a form). | ||
343 | |||
344 | .navbar-btn { | ||
345 | .navbar-vertical-align(@input-height-base); | ||
346 | |||
347 | &.btn-sm { | ||
348 | .navbar-vertical-align(@input-height-small); | ||
349 | } | ||
350 | &.btn-xs { | ||
351 | .navbar-vertical-align(22); | ||
352 | } | ||
353 | } | ||
354 | |||
355 | |||
356 | // Text in navbars | ||
357 | // | ||
358 | // Add a class to make any element properly align itself vertically within the navbars. | ||
359 | |||
360 | .navbar-text { | ||
361 | .navbar-vertical-align(@line-height-computed); | ||
362 | |||
363 | @media (min-width: @grid-float-breakpoint) { | ||
364 | float: left; | ||
365 | margin-left: @navbar-padding-horizontal; | ||
366 | margin-right: @navbar-padding-horizontal; | ||
367 | |||
368 | // Outdent the form if last child to line up with content down the page | ||
369 | &.navbar-right:last-child { | ||
370 | margin-right: 0; | ||
371 | } | ||
372 | } | ||
373 | } | ||
374 | |||
375 | // Alternate navbars | ||
376 | // -------------------------------------------------- | ||
377 | |||
378 | // Default navbar | ||
379 | .navbar-default { | ||
380 | background-color: @navbar-default-bg; | ||
381 | border-color: @navbar-default-border; | ||
382 | |||
383 | .navbar-brand { | ||
384 | color: @navbar-default-brand-color; | ||
385 | &:hover, | ||
386 | &:focus { | ||
387 | color: @navbar-default-brand-hover-color; | ||
388 | background-color: @navbar-default-brand-hover-bg; | ||
389 | } | ||
390 | } | ||
391 | |||
392 | .navbar-text { | ||
393 | color: @navbar-default-color; | ||
394 | } | ||
395 | |||
396 | .navbar-nav { | ||
397 | > li > a { | ||
398 | color: @navbar-default-link-color; | ||
399 | |||
400 | &:hover, | ||
401 | &:focus { | ||
402 | color: @navbar-default-link-hover-color; | ||
403 | background-color: @navbar-default-link-hover-bg; | ||
404 | } | ||
405 | } | ||
406 | > .active > a { | ||
407 | &, | ||
408 | &:hover, | ||
409 | &:focus { | ||
410 | color: @navbar-default-link-active-color; | ||
411 | background-color: @navbar-default-link-active-bg; | ||
412 | } | ||
413 | } | ||
414 | > .disabled > a { | ||
415 | &, | ||
416 | &:hover, | ||
417 | &:focus { | ||
418 | color: @navbar-default-link-disabled-color; | ||
419 | background-color: @navbar-default-link-disabled-bg; | ||
420 | } | ||
421 | } | ||
422 | } | ||
423 | |||
424 | .navbar-toggle { | ||
425 | border-color: @navbar-default-toggle-border-color; | ||
426 | &:hover, | ||
427 | &:focus { | ||
428 | background-color: @navbar-default-toggle-hover-bg; | ||
429 | } | ||
430 | .icon-bar { | ||
431 | background-color: @navbar-default-toggle-icon-bar-bg; | ||
432 | } | ||
433 | } | ||
434 | |||
435 | .navbar-collapse, | ||
436 | .navbar-form { | ||
437 | border-color: @navbar-default-border; | ||
438 | } | ||
439 | |||
440 | // Dropdown menu items | ||
441 | .navbar-nav { | ||
442 | // Remove background color from open dropdown | ||
443 | > .open > a { | ||
444 | &, | ||
445 | &:hover, | ||
446 | &:focus { | ||
447 | background-color: @navbar-default-link-active-bg; | ||
448 | color: @navbar-default-link-active-color; | ||
449 | } | ||
450 | } | ||
451 | |||
452 | @media (max-width: @grid-float-breakpoint-max) { | ||
453 | // Dropdowns get custom display when collapsed | ||
454 | .open .dropdown-menu { | ||
455 | > li > a { | ||
456 | color: @navbar-default-link-color; | ||
457 | &:hover, | ||
458 | &:focus { | ||
459 | color: @navbar-default-link-hover-color; | ||
460 | background-color: @navbar-default-link-hover-bg; | ||
461 | } | ||
462 | } | ||
463 | > .active > a { | ||
464 | &, | ||
465 | &:hover, | ||
466 | &:focus { | ||
467 | color: @navbar-default-link-active-color; | ||
468 | background-color: @navbar-default-link-active-bg; | ||
469 | } | ||
470 | } | ||
471 | > .disabled > a { | ||
472 | &, | ||
473 | &:hover, | ||
474 | &:focus { | ||
475 | color: @navbar-default-link-disabled-color; | ||
476 | background-color: @navbar-default-link-disabled-bg; | ||
477 | } | ||
478 | } | ||
479 | } | ||
480 | } | ||
481 | } | ||
482 | |||
483 | |||
484 | // Links in navbars | ||
485 | // | ||
486 | // Add a class to ensure links outside the navbar nav are colored correctly. | ||
487 | |||
488 | .navbar-link { | ||
489 | color: @navbar-default-link-color; | ||
490 | &:hover { | ||
491 | color: @navbar-default-link-hover-color; | ||
492 | } | ||
493 | } | ||
494 | |||
495 | } | ||
496 | |||
497 | // Inverse navbar | ||
498 | |||
499 | .navbar-inverse { | ||
500 | background-color: @navbar-inverse-bg; | ||
501 | border-color: @navbar-inverse-border; | ||
502 | |||
503 | .navbar-brand { | ||
504 | color: @navbar-inverse-brand-color; | ||
505 | &:hover, | ||
506 | &:focus { | ||
507 | color: @navbar-inverse-brand-hover-color; | ||
508 | background-color: @navbar-inverse-brand-hover-bg; | ||
509 | } | ||
510 | } | ||
511 | |||
512 | .navbar-text { | ||
513 | color: @navbar-inverse-color; | ||
514 | } | ||
515 | |||
516 | .navbar-nav { | ||
517 | > li > a { | ||
518 | color: @navbar-inverse-link-color; | ||
519 | |||
520 | &:hover, | ||
521 | &:focus { | ||
522 | color: @navbar-inverse-link-hover-color; | ||
523 | background-color: @navbar-inverse-link-hover-bg; | ||
524 | } | ||
525 | } | ||
526 | > .active > a { | ||
527 | &, | ||
528 | &:hover, | ||
529 | &:focus { | ||
530 | color: @navbar-inverse-link-active-color; | ||
531 | background-color: @navbar-inverse-link-active-bg; | ||
532 | } | ||
533 | } | ||
534 | > .disabled > a { | ||
535 | &, | ||
536 | &:hover, | ||
537 | &:focus { | ||
538 | color: @navbar-inverse-link-disabled-color; | ||
539 | background-color: @navbar-inverse-link-disabled-bg; | ||
540 | } | ||
541 | } | ||
542 | } | ||
543 | |||
544 | // Darken the responsive nav toggle | ||
545 | .navbar-toggle { | ||
546 | border-color: @navbar-inverse-toggle-border-color; | ||
547 | &:hover, | ||
548 | &:focus { | ||
549 | background-color: @navbar-inverse-toggle-hover-bg; | ||
550 | } | ||
551 | .icon-bar { | ||
552 | background-color: @navbar-inverse-toggle-icon-bar-bg; | ||
553 | } | ||
554 | } | ||
555 | |||
556 | .navbar-collapse, | ||
557 | .navbar-form { | ||
558 | border-color: darken(@navbar-inverse-bg, 7%); | ||
559 | } | ||
560 | |||
561 | // Dropdowns | ||
562 | .navbar-nav { | ||
563 | > .open > a { | ||
564 | &, | ||
565 | &:hover, | ||
566 | &:focus { | ||
567 | background-color: @navbar-inverse-link-active-bg; | ||
568 | color: @navbar-inverse-link-active-color; | ||
569 | } | ||
570 | } | ||
571 | |||
572 | @media (max-width: @grid-float-breakpoint-max) { | ||
573 | // Dropdowns get custom display | ||
574 | .open .dropdown-menu { | ||
575 | > .dropdown-header { | ||
576 | border-color: @navbar-inverse-border; | ||
577 | } | ||
578 | .divider { | ||
579 | background-color: @navbar-inverse-border; | ||
580 | } | ||
581 | > li > a { | ||
582 | color: @navbar-inverse-link-color; | ||
583 | &:hover, | ||
584 | &:focus { | ||
585 | color: @navbar-inverse-link-hover-color; | ||
586 | background-color: @navbar-inverse-link-hover-bg; | ||
587 | } | ||
588 | } | ||
589 | > .active > a { | ||
590 | &, | ||
591 | &:hover, | ||
592 | &:focus { | ||
593 | color: @navbar-inverse-link-active-color; | ||
594 | background-color: @navbar-inverse-link-active-bg; | ||
595 | } | ||
596 | } | ||
597 | > .disabled > a { | ||
598 | &, | ||
599 | &:hover, | ||
600 | &:focus { | ||
601 | color: @navbar-inverse-link-disabled-color; | ||
602 | background-color: @navbar-inverse-link-disabled-bg; | ||
603 | } | ||
604 | } | ||
605 | } | ||
606 | } | ||
607 | } | ||
608 | |||
609 | .navbar-link { | ||
610 | color: @navbar-inverse-link-color; | ||
611 | &:hover { | ||
612 | color: @navbar-inverse-link-hover-color; | ||
613 | } | ||
614 | } | ||
615 | |||
616 | } | ||