mindcoding-template/less/navbar.less

   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: auto;
  78     }
  79
  80     // Account for first and last children spacing
  81     .navbar-nav.navbar-left:first-child {
  82       margin-left: -@navbar-padding-horizontal;
  83     }
  84     .navbar-nav.navbar-right:last-child {
  85       margin-right: -@navbar-padding-horizontal;
  86     }
  87     .navbar-text:last-child {
  88       margin-right: 0;
  89     }
  90   }
  91 }
  92
  93
  94 // Both navbar header and collapse
  95 //
  96 // When a container is present, change the behavior of the header and collapse.
  97
  98 .container > .navbar-header,
  99 .container > .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 // Navbar alignment options
 112 //
 113 // Display the navbar across the entirety of the page or fixed it to the top or
 114 // bottom of the page.
 115
 116 // Static top (unfixed, but 100% wide) navbar
 117 .navbar-static-top {
 118   z-index: @zindex-navbar;
 119   border-width: 0 0 1px;
 120
 121   @media (min-width: @grid-float-breakpoint) {
 122     border-radius: 0;
 123   }
 124 }
 125
 126 // Fix the top/bottom navbars when screen real estate supports it
 127 .navbar-fixed-top,
 128 .navbar-fixed-bottom {
 129   position: fixed;
 130   right: 0;
 131   left: 0;
 132   z-index: @zindex-navbar-fixed;
 133
 134   // Undo the rounded corners
 135   @media (min-width: @grid-float-breakpoint) {
 136     border-radius: 0;
 137   }
 138 }
 139 .navbar-fixed-top {
 140   top: 0;
 141   border-width: 0 0 1px;
 142 }
 143 .navbar-fixed-bottom {
 144   bottom: 0;
 145   margin-bottom: 0; // override .navbar defaults
 146   border-width: 1px 0 0;
 147 }
 148
 149
 150 // Brand/project name
 151
 152 .navbar-brand {
 153   float: left;
 154   padding: @navbar-padding-vertical @navbar-padding-horizontal;
 155   font-size: @font-size-large;
 156   line-height: @line-height-computed;
 157
 158   &:hover,
 159   &:focus {
 160     text-decoration: none;
 161   }
 162
 163   @media (min-width: @grid-float-breakpoint) {
 164     .navbar > .container & {
 165       margin-left: -@navbar-padding-horizontal;
 166     }
 167   }
 168 }
 169
 170
 171 // Navbar toggle
 172 //
 173 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
 174 // JavaScript plugin.
 175
 176 .navbar-toggle {
 177   position: relative;
 178   float: right;
 179   margin-right: @navbar-padding-horizontal;
 180   padding: 9px 10px;
 181   .navbar-vertical-align(34px);
 182   background-color: transparent;
 183   border: 1px solid transparent;
 184   border-radius: @border-radius-base;
 185
 186   // Bars
 187   .icon-bar {
 188     display: block;
 189     width: 22px;
 190     height: 2px;
 191     border-radius: 1px;
 192   }
 193   .icon-bar + .icon-bar {
 194     margin-top: 4px;
 195   }
 196
 197   @media (min-width: @grid-float-breakpoint) {
 198     display: none;
 199   }
 200 }
 201
 202
 203 // Navbar nav links
 204 //
 205 // Builds on top of the `.nav` components with it's own modifier class to make
 206 // the nav the full height of the horizontal nav (above 768px).
 207
 208 .navbar-nav {
 209   margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
 210
 211   > li > a {
 212     padding-top:    10px;
 213     padding-bottom: 10px;
 214     line-height: @line-height-computed;
 215   }
 216
 217   @media (max-width: @screen-xs-max) {
 218     // Dropdowns get custom display when collapsed
 219     .open .dropdown-menu {
 220       position: static;
 221       float: none;
 222       width: auto;
 223       margin-top: 0;
 224       background-color: transparent;
 225       border: 0;
 226       box-shadow: none;
 227       > li > a,
 228       .dropdown-header {
 229         padding: 5px 15px 5px 25px;
 230       }
 231       > li > a {
 232         line-height: @line-height-computed;
 233         &:hover,
 234         &:focus {
 235           background-image: none;
 236         }
 237       }
 238     }
 239   }
 240
 241   // Uncollapse the nav
 242   @media (min-width: @grid-float-breakpoint) {
 243     float: left;
 244     margin: 0;
 245
 246     > li {
 247       float: left;
 248       > a {
 249         padding-top: ((@navbar-height - @line-height-computed) / 2);
 250         padding-bottom: ((@navbar-height - @line-height-computed) / 2);
 251       }
 252     }
 253   }
 254
 255 }
 256
 257
 258 // Component alignment
 259 //
 260 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
 261 // issues with parents and chaining. Only do this when the navbar is uncollapsed
 262 // though so that navbar contents properly stack and align in mobile.
 263
 264 @media (min-width: @grid-float-breakpoint) {
 265   .navbar-left  { .pull-left(); }
 266   .navbar-right { .pull-right(); }
 267 }
 268
 269
 270 // Navbar form
 271 //
 272 // Extension of the `.form-inline` with some extra flavor for optimum display in
 273 // our navbars.
 274
 275 .navbar-form {
 276   margin-left: -@navbar-padding-horizontal;
 277   margin-right: -@navbar-padding-horizontal;
 278   padding: 10px @navbar-padding-horizontal;
 279   border-top: 1px solid transparent;
 280   border-bottom: 1px solid transparent;
 281   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
 282   .box-shadow(@shadow);
 283
 284   // Mixin behavior for optimum display
 285   .form-inline();
 286
 287   .form-group {
 288     @media (max-width: @screen-xs-max) {
 289       margin-bottom: 5px;
 290     }
 291   }
 292
 293   // Vertically center in expanded, horizontal navbar
 294   .navbar-vertical-align(@input-height-base);
 295
 296   // Undo 100% width for pull classes
 297   @media (min-width: @grid-float-breakpoint) {
 298     width: auto;
 299     border: 0;
 300     margin-left: 0;
 301     margin-right: 0;
 302     padding-top: 0;
 303     padding-bottom: 0;
 304     .box-shadow(none);
 305   }
 306 }
 307
 308
 309 // Dropdown menus
 310
 311 // Menu position and menu carets
 312 .navbar-nav > li > .dropdown-menu {
 313   margin-top: 0;
 314   .border-top-radius(0);
 315 }
 316 // Menu position and menu caret support for dropups via extra dropup class
 317 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
 318   .border-bottom-radius(0);
 319 }
 320
 321 // Right aligned menus need alt position
 322 .navbar-nav.pull-right > li > .dropdown-menu,
 323 .navbar-nav > li > .dropdown-menu.pull-right {
 324   left: auto;
 325   right: 0;
 326 }
 327
 328
 329 // Buttons in navbars
 330 //
 331 // Vertically center a button within a navbar (when *not* in a form).
 332
 333 .navbar-btn {
 334   .navbar-vertical-align(@input-height-base);
 335 }
 336
 337
 338 // Text in navbars
 339 //
 340 // Add a class to make any element properly align itself vertically within the navbars.
 341
 342 .navbar-text {
 343   float: left;
 344   .navbar-vertical-align(@line-height-computed);
 345
 346   @media (min-width: @grid-float-breakpoint) {
 347     margin-left: @navbar-padding-horizontal;
 348     margin-right: @navbar-padding-horizontal;
 349   }
 350 }
 351
 352 // Alternate navbars
 353 // --------------------------------------------------
 354
 355 // Default navbar
 356 .navbar-default {
 357   background-color: @navbar-default-bg;
 358   border-color: @navbar-default-border;
 359
 360   .navbar-brand {
 361     color: @navbar-default-brand-color;
 362     &:hover,
 363     &:focus {
 364       color: @navbar-default-brand-hover-color;
 365       background-color: @navbar-default-brand-hover-bg;
 366     }
 367   }
 368
 369   .navbar-text {
 370     color: @navbar-default-color;
 371   }
 372
 373   .navbar-nav {
 374     > li > a {
 375       color: @navbar-default-link-color;
 376
 377       &:hover,
 378       &:focus {
 379         color: @navbar-default-link-hover-color;
 380         background-color: @navbar-default-link-hover-bg;
 381       }
 382     }
 383     > .active > a {
 384       &,
 385       &:hover,
 386       &:focus {
 387         color: @navbar-default-link-active-color;
 388         background-color: @navbar-default-link-active-bg;
 389       }
 390     }
 391     > .disabled > a {
 392       &,
 393       &:hover,
 394       &:focus {
 395         color: @navbar-default-link-disabled-color;
 396         background-color: @navbar-default-link-disabled-bg;
 397       }
 398     }
 399   }
 400
 401   .navbar-toggle {
 402     border-color: @navbar-default-toggle-border-color;
 403     &:hover,
 404     &:focus {
 405       background-color: @navbar-default-toggle-hover-bg;
 406     }
 407     .icon-bar {
 408       background-color: @navbar-default-toggle-icon-bar-bg;
 409     }
 410   }
 411
 412   .navbar-collapse,
 413   .navbar-form {
 414     border-color: @navbar-default-border;
 415   }
 416
 417   // Dropdown menu items and carets
 418   .navbar-nav {
 419     // Caret should match text color on hover
 420     > .dropdown > a:hover .caret,
 421     > .dropdown > a:focus .caret {
 422       border-top-color: @navbar-default-link-hover-color;
 423       border-bottom-color: @navbar-default-link-hover-color;
 424     }
 425
 426     // Remove background color from open dropdown
 427     > .open > a {
 428       &,
 429       &:hover,
 430       &:focus {
 431         background-color: @navbar-default-link-active-bg;
 432         color: @navbar-default-link-active-color;
 433         .caret {
 434           border-top-color: @navbar-default-link-active-color;
 435           border-bottom-color: @navbar-default-link-active-color;
 436         }
 437       }
 438     }
 439     > .dropdown > a .caret {
 440       border-top-color: @navbar-default-link-color;
 441       border-bottom-color: @navbar-default-link-color;
 442     }
 443
 444
 445     @media (max-width: @screen-xs-max) {
 446       // Dropdowns get custom display when collapsed
 447       .open .dropdown-menu {
 448         > li > a {
 449           color: @navbar-default-link-color;
 450           &:hover,
 451           &:focus {
 452             color: @navbar-default-link-hover-color;
 453             background-color: @navbar-default-link-hover-bg;
 454           }
 455         }
 456         > .active > a {
 457           &,
 458           &:hover,
 459           &:focus {
 460             color: @navbar-default-link-active-color;
 461             background-color: @navbar-default-link-active-bg;
 462           }
 463         }
 464         > .disabled > a {
 465           &,
 466           &:hover,
 467           &:focus {
 468             color: @navbar-default-link-disabled-color;
 469             background-color: @navbar-default-link-disabled-bg;
 470           }
 471         }
 472       }
 473     }
 474   }
 475
 476
 477   // Links in navbars
 478   //
 479   // Add a class to ensure links outside the navbar nav are colored correctly.
 480
 481   .navbar-link {
 482     color: @navbar-default-link-color;
 483     &:hover {
 484       color: @navbar-default-link-hover-color;
 485     }
 486   }
 487
 488 }
 489
 490 // Inverse navbar
 491
 492 .navbar-inverse {
 493   background-color: @navbar-inverse-bg;
 494   border-color: @navbar-inverse-border;
 495
 496   .navbar-brand {
 497     color: @navbar-inverse-brand-color;
 498     &:hover,
 499     &:focus {
 500       color: @navbar-inverse-brand-hover-color;
 501       background-color: @navbar-inverse-brand-hover-bg;
 502     }
 503   }
 504
 505   .navbar-text {
 506     color: @navbar-inverse-color;
 507   }
 508
 509   .navbar-nav {
 510     > li > a {
 511       color: @navbar-inverse-link-color;
 512
 513       &:hover,
 514       &:focus {
 515         color: @navbar-inverse-link-hover-color;
 516         background-color: @navbar-inverse-link-hover-bg;
 517       }
 518     }
 519     > .active > a {
 520       &,
 521       &:hover,
 522       &:focus {
 523         color: @navbar-inverse-link-active-color;
 524         background-color: @navbar-inverse-link-active-bg;
 525       }
 526     }
 527     > .disabled > a {
 528       &,
 529       &:hover,
 530       &:focus {
 531         color: @navbar-inverse-link-disabled-color;
 532         background-color: @navbar-inverse-link-disabled-bg;
 533       }
 534     }
 535   }
 536
 537   // Darken the responsive nav toggle
 538   .navbar-toggle {
 539     border-color: @navbar-inverse-toggle-border-color;
 540     &:hover,
 541     &:focus {
 542       background-color: @navbar-inverse-toggle-hover-bg;
 543     }
 544     .icon-bar {
 545       background-color: @navbar-inverse-toggle-icon-bar-bg;
 546     }
 547   }
 548
 549   .navbar-collapse,
 550   .navbar-form {
 551     border-color: darken(@navbar-inverse-bg, 7%);
 552   }
 553
 554   // Dropdowns
 555   .navbar-nav {
 556     > .open > a {
 557       &,
 558       &:hover,
 559       &:focus {
 560         background-color: @navbar-inverse-link-active-bg;
 561         color: @navbar-inverse-link-active-color;
 562       }
 563     }
 564     > .dropdown > a:hover .caret {
 565       border-top-color: @navbar-inverse-link-hover-color;
 566       border-bottom-color: @navbar-inverse-link-hover-color;
 567     }
 568     > .dropdown > a .caret {
 569       border-top-color: @navbar-inverse-link-color;
 570       border-bottom-color: @navbar-inverse-link-color;
 571     }
 572     > .open > a {
 573       &,
 574       &:hover,
 575       &:focus {
 576         .caret {
 577           border-top-color: @navbar-inverse-link-active-color;
 578           border-bottom-color: @navbar-inverse-link-active-color;
 579         }
 580       }
 581     }
 582
 583     @media (max-width: @screen-xs-max) {
 584       // Dropdowns get custom display
 585       .open .dropdown-menu {
 586         > .dropdown-header {
 587           border-color: @navbar-inverse-border;
 588         }
 589         > li > a {
 590           color: @navbar-inverse-link-color;
 591           &:hover,
 592           &:focus {
 593             color: @navbar-inverse-link-hover-color;
 594             background-color: @navbar-inverse-link-hover-bg;
 595           }
 596         }
 597         > .active > a {
 598           &,
 599           &:hover,
 600           &:focus {
 601             color: @navbar-inverse-link-active-color;
 602             background-color: @navbar-inverse-link-active-bg;
 603           }
 604         }
 605         > .disabled > a {
 606           &,
 607           &:hover,
 608           &:focus {
 609             color: @navbar-inverse-link-disabled-color;
 610             background-color: @navbar-inverse-link-disabled-bg;
 611           }
 612         }
 613       }
 614     }
 615   }
 616
 617   .navbar-link {
 618     color: @navbar-inverse-link-color;
 619     &:hover {
 620       color: @navbar-inverse-link-hover-color;
 621     }
 622   }
 623
 624 }