pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
navbar.less
(13814B)
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 .clearfix();
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 .clearfix();
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: 340px;
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 .clearfix();
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 > .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
115 .navbar-static-top {
116 z-index: @zindex-navbar;
117 border-width: 0 0 1px;
118
119 @media (min-width: @grid-float-breakpoint) {
120 border-radius: 0;
121 }
122 }
123
124 // Fix the top/bottom navbars when screen real estate supports it
125 .navbar-fixed-top,
126 .navbar-fixed-bottom {
127 position: fixed;
128 right: 0;
129 left: 0;
130 z-index: @zindex-navbar-fixed;
131
132 // Undo the rounded corners
133 @media (min-width: @grid-float-breakpoint) {
134 border-radius: 0;
135 }
136 }
137 .navbar-fixed-top {
138 top: 0;
139 border-width: 0 0 1px;
140 }
141 .navbar-fixed-bottom {
142 bottom: 0;
143 margin-bottom: 0; // override .navbar defaults
144 border-width: 1px 0 0;
145 }
146
147
148 // Brand/project name
149
150 .navbar-brand {
151 float: left;
152 padding: @navbar-padding-vertical @navbar-padding-horizontal;
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 {
175 position: relative;
176 float: right;
177 margin-right: @navbar-padding-horizontal;
178 padding: 9px 10px;
179 .navbar-vertical-align(34px);
180 background-color: transparent;
181 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
182 border: 1px solid transparent;
183 border-radius: @border-radius-base;
184
185 // Bars
186 .icon-bar {
187 display: block;
188 width: 22px;
189 height: 2px;
190 border-radius: 1px;
191 }
192 .icon-bar + .icon-bar {
193 margin-top: 4px;
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 }
314
315
316 // Dropdown menus
317
318 // Menu position and menu carets
319 .navbar-nav > li > .dropdown-menu {
320 margin-top: 0;
321 .border-top-radius(0);
322 }
323 // Menu position and menu caret support for dropups via extra dropup class
324 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
325 .border-bottom-radius(0);
326 }
327
328 // Right aligned menus need alt position
329 .navbar-nav.pull-right > li > .dropdown-menu,
330 .navbar-nav > li > .dropdown-menu.pull-right {
331 left: auto;
332 right: 0;
333 }
334
335
336 // Buttons in navbars
337 //
338 // Vertically center a button within a navbar (when *not* in a form).
339
340 .navbar-btn {
341 .navbar-vertical-align(@input-height-base);
342
343 &.btn-sm {
344 .navbar-vertical-align(@input-height-small);
345 }
346 &.btn-xs {
347 .navbar-vertical-align(22);
348 }
349 }
350
351
352 // Text in navbars
353 //
354 // Add a class to make any element properly align itself vertically within the navbars.
355
356 .navbar-text {
357 .navbar-vertical-align(@line-height-computed);
358
359 @media (min-width: @grid-float-breakpoint) {
360 float: left;
361 margin-left: @navbar-padding-horizontal;
362 margin-right: @navbar-padding-horizontal;
363
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;
381 &:hover,
382 &:focus {
383 color: @navbar-default-brand-hover-color;
384 background-color: @navbar-default-brand-hover-bg;
385 }
386 }
387
388 .navbar-text {
389 color: @navbar-default-color;
390 }
391
392 .navbar-nav {
393 > li > a {
394 color: @navbar-default-link-color;
395
396 &:hover,
397 &:focus {
398 color: @navbar-default-link-hover-color;
399 background-color: @navbar-default-link-hover-bg;
400 }
401 }
402 > .active > a {
403 &,
404 &:hover,
405 &:focus {
406 color: @navbar-default-link-active-color;
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;
422 &:hover,
423 &:focus {
424 background-color: @navbar-default-toggle-hover-bg;
425 }
426 .icon-bar {
427 background-color: @navbar-default-toggle-icon-bar-bg;
428 }
429 }
430
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%);
555 }
556
557 // Dropdowns
558 .navbar-nav {
559 > .open > a {
560 &,
561 &:hover,
562 &:focus {
563 background-color: @navbar-inverse-link-active-bg;
564 color: @navbar-inverse-link-active-color;
565 }
566 }
567
568 @media (max-width: @grid-float-breakpoint-max) {
569 // Dropdowns get custom display
570 .open .dropdown-menu {
571 > .dropdown-header {
572 border-color: @navbar-inverse-border;
573 }
574 .divider {
575 background-color: @navbar-inverse-border;
576 }
577 > li > a {
578 color: @navbar-inverse-link-color;
579 &:hover,
580 &:focus {
581 color: @navbar-inverse-link-hover-color;
582 background-color: @navbar-inverse-link-hover-bg;
583 }
584 }
585 > .active > a {
586 &,
587 &:hover,
588 &:focus {
589 color: @navbar-inverse-link-active-color;
590 background-color: @navbar-inverse-link-active-bg;
591 }
592 }
593 > .disabled > a {
594 &,
595 &:hover,
596 &:focus {
597 color: @navbar-inverse-link-disabled-color;
598 background-color: @navbar-inverse-link-disabled-bg;
599 }
600 }
601 }
602 }
603 }
604
605 .navbar-link {
606 color: @navbar-inverse-link-color;
607 &:hover {
608 color: @navbar-inverse-link-hover-color;
609 }
610 }
611
612 }