info@53: //
info@53: // Navbars
info@53: // --------------------------------------------------
info@53: 
info@53: 
info@53: // Wrapper and base class
info@53: //
info@53: // Provide a static navbar from which we expand to create full-width, fixed, and
info@53: // other navbar variations.
info@53: 
info@53: .navbar {
info@53:   position: relative;
info@53:   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
info@53:   margin-bottom: @navbar-margin-bottom;
info@53:   border: 1px solid transparent;
info@53: 
info@53:   // Prevent floats from breaking the navbar
info@53:   .clearfix();
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     border-radius: @navbar-border-radius;
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Navbar heading
info@53: //
info@53: // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
info@53: // styling of responsive aspects.
info@53: 
info@53: .navbar-header {
info@53:   .clearfix();
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     float: left;
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Navbar collapse (body)
info@53: //
info@53: // Group your navbar content into this for easy collapsing and expanding across
info@53: // various device sizes. By default, this content is collapsed when <768px, but
info@53: // will expand past that for a horizontal display.
info@53: //
info@53: // To start (on mobile devices) the navbar links, forms, and buttons are stacked
info@53: // vertically and include a `max-height` to overflow in case you have too much
info@53: // content for the user's viewport.
info@53: 
info@53: .navbar-collapse {
info@53:   max-height: 340px;
info@53:   overflow-x: visible;
info@53:   padding-right: @navbar-padding-horizontal;
info@53:   padding-left:  @navbar-padding-horizontal;
info@53:   border-top: 1px solid transparent;
info@53:   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
info@53:   .clearfix();
info@53:   -webkit-overflow-scrolling: touch;
info@53: 
info@53:   &.in {
info@53:     overflow-y: auto;
info@53:   }
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     width: auto;
info@53:     border-top: 0;
info@53:     box-shadow: none;
info@53: 
info@53:     &.collapse {
info@53:       display: block !important;
info@53:       height: auto !important;
info@53:       padding-bottom: 0; // Override default setting
info@53:       overflow: visible !important;
info@53:     }
info@53: 
info@53:     &.in {
info@53:       overflow-y: visible;
info@53:     }
info@53: 
info@53:     // Undo the collapse side padding for navbars with containers to ensure
info@53:     // alignment of right-aligned contents.
info@53:     .navbar-fixed-top &,
info@53:     .navbar-static-top &,
info@53:     .navbar-fixed-bottom & {
info@53:       padding-left: 0;
info@53:       padding-right: 0;
info@53:     }
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Both navbar header and collapse
info@53: //
info@53: // When a container is present, change the behavior of the header and collapse.
info@53: 
info@53: .container > .navbar-header,
info@53: .container > .navbar-collapse {
info@53:   margin-right: -@navbar-padding-horizontal;
info@53:   margin-left:  -@navbar-padding-horizontal;
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     margin-right: 0;
info@53:     margin-left:  0;
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: //
info@53: // Navbar alignment options
info@53: //
info@53: // Display the navbar across the entirety of the page or fixed it to the top or
info@53: // bottom of the page.
info@53: 
info@53: // Static top (unfixed, but 100% wide) navbar
info@53: .navbar-static-top {
info@53:   z-index: @zindex-navbar;
info@53:   border-width: 0 0 1px;
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     border-radius: 0;
info@53:   }
info@53: }
info@53: 
info@53: // Fix the top/bottom navbars when screen real estate supports it
info@53: .navbar-fixed-top,
info@53: .navbar-fixed-bottom {
info@53:   position: fixed;
info@53:   right: 0;
info@53:   left: 0;
info@53:   z-index: @zindex-navbar-fixed;
info@53: 
info@53:   // Undo the rounded corners
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     border-radius: 0;
info@53:   }
info@53: }
info@53: .navbar-fixed-top {
info@53:   top: 0;
info@53:   border-width: 0 0 1px;
info@53: }
info@53: .navbar-fixed-bottom {
info@53:   bottom: 0;
info@53:   margin-bottom: 0; // override .navbar defaults
info@53:   border-width: 1px 0 0;
info@53: }
info@53: 
info@53: 
info@53: // Brand/project name
info@53: 
info@53: .navbar-brand {
info@53:   float: left;
info@53:   padding: @navbar-padding-vertical @navbar-padding-horizontal;
info@53:   font-size: @font-size-large;
info@53:   line-height: @line-height-computed;
info@53: 
info@53:   &:hover,
info@53:   &:focus {
info@53:     text-decoration: none;
info@53:   }
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     .navbar > .container & {
info@53:       margin-left: -@navbar-padding-horizontal;
info@53:     }
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Navbar toggle
info@53: //
info@53: // Custom button for toggling the `.navbar-collapse`, powered by the collapse
info@53: // JavaScript plugin.
info@53: 
info@53: .navbar-toggle {
info@53:   position: relative;
info@53:   float: right;
info@53:   margin-right: @navbar-padding-horizontal;
info@53:   padding: 9px 10px;
info@53:   .navbar-vertical-align(34px);
info@53:   background-color: transparent;
info@53:   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
info@53:   border: 1px solid transparent;
info@53:   border-radius: @border-radius-base;
info@53: 
info@53:   // Bars
info@53:   .icon-bar {
info@53:     display: block;
info@53:     width: 22px;
info@53:     height: 2px;
info@53:     border-radius: 1px;
info@53:   }
info@53:   .icon-bar + .icon-bar {
info@53:     margin-top: 4px;
info@53:   }
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     display: none;
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Navbar nav links
info@53: //
info@53: // Builds on top of the `.nav` components with it's own modifier class to make
info@53: // the nav the full height of the horizontal nav (above 768px).
info@53: 
info@53: .navbar-nav {
info@53:   margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
info@53: 
info@53:   > li > a {
info@53:     padding-top:    10px;
info@53:     padding-bottom: 10px;
info@53:     line-height: @line-height-computed;
info@53:   }
info@53: 
info@53:   @media (max-width: @grid-float-breakpoint-max) {
info@53:     // Dropdowns get custom display when collapsed
info@53:     .open .dropdown-menu {
info@53:       position: static;
info@53:       float: none;
info@53:       width: auto;
info@53:       margin-top: 0;
info@53:       background-color: transparent;
info@53:       border: 0;
info@53:       box-shadow: none;
info@53:       > li > a,
info@53:       .dropdown-header {
info@53:         padding: 5px 15px 5px 25px;
info@53:       }
info@53:       > li > a {
info@53:         line-height: @line-height-computed;
info@53:         &:hover,
info@53:         &:focus {
info@53:           background-image: none;
info@53:         }
info@53:       }
info@53:     }
info@53:   }
info@53: 
info@53:   // Uncollapse the nav
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     float: left;
info@53:     margin: 0;
info@53: 
info@53:     > li {
info@53:       float: left;
info@53:       > a {
info@53:         padding-top:    @navbar-padding-vertical;
info@53:         padding-bottom: @navbar-padding-vertical;
info@53:       }
info@53:     }
info@53: 
info@53:     &.navbar-right:last-child {
info@53:       margin-right: -@navbar-padding-horizontal;
info@53:     }
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Component alignment
info@53: //
info@53: // Repurpose the pull utilities as their own navbar utilities to avoid specificity
info@53: // issues with parents and chaining. Only do this when the navbar is uncollapsed
info@53: // though so that navbar contents properly stack and align in mobile.
info@53: 
info@53: @media (min-width: @grid-float-breakpoint) {
info@53:   .navbar-left  { .pull-left(); }
info@53:   .navbar-right { .pull-right(); }
info@53: }
info@53: 
info@53: 
info@53: // Navbar form
info@53: //
info@53: // Extension of the `.form-inline` with some extra flavor for optimum display in
info@53: // our navbars.
info@53: 
info@53: .navbar-form {
info@53:   margin-left: -@navbar-padding-horizontal;
info@53:   margin-right: -@navbar-padding-horizontal;
info@53:   padding: 10px @navbar-padding-horizontal;
info@53:   border-top: 1px solid transparent;
info@53:   border-bottom: 1px solid transparent;
info@53:   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
info@53:   .box-shadow(@shadow);
info@53: 
info@53:   // Mixin behavior for optimum display
info@53:   .form-inline();
info@53: 
info@53:   .form-group {
info@53:     @media (max-width: @grid-float-breakpoint-max) {
info@53:       margin-bottom: 5px;
info@53:     }
info@53:   }
info@53: 
info@53:   // Vertically center in expanded, horizontal navbar
info@53:   .navbar-vertical-align(@input-height-base);
info@53: 
info@53:   // Undo 100% width for pull classes
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     width: auto;
info@53:     border: 0;
info@53:     margin-left: 0;
info@53:     margin-right: 0;
info@53:     padding-top: 0;
info@53:     padding-bottom: 0;
info@53:     .box-shadow(none);
info@53: 
info@53:     // Outdent the form if last child to line up with content down the page
info@53:     &.navbar-right:last-child {
info@53:       margin-right: -@navbar-padding-horizontal;
info@53:     }
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Dropdown menus
info@53: 
info@53: // Menu position and menu carets
info@53: .navbar-nav > li > .dropdown-menu {
info@53:   margin-top: 0;
info@53:   .border-top-radius(0);
info@53: }
info@53: // Menu position and menu caret support for dropups via extra dropup class
info@53: .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
info@53:   .border-bottom-radius(0);
info@53: }
info@53: 
info@53: // Right aligned menus need alt position
info@53: .navbar-nav.pull-right > li > .dropdown-menu,
info@53: .navbar-nav > li > .dropdown-menu.pull-right {
info@53:   left: auto;
info@53:   right: 0;
info@53: }
info@53: 
info@53: 
info@53: // Buttons in navbars
info@53: //
info@53: // Vertically center a button within a navbar (when *not* in a form).
info@53: 
info@53: .navbar-btn {
info@53:   .navbar-vertical-align(@input-height-base);
info@53: 
info@53:   &.btn-sm {
info@53:     .navbar-vertical-align(@input-height-small);
info@53:   }
info@53:   &.btn-xs {
info@53:     .navbar-vertical-align(22);
info@53:   }
info@53: }
info@53: 
info@53: 
info@53: // Text in navbars
info@53: //
info@53: // Add a class to make any element properly align itself vertically within the navbars.
info@53: 
info@53: .navbar-text {
info@53:   .navbar-vertical-align(@line-height-computed);
info@53: 
info@53:   @media (min-width: @grid-float-breakpoint) {
info@53:     float: left;
info@53:     margin-left: @navbar-padding-horizontal;
info@53:     margin-right: @navbar-padding-horizontal;
info@53: 
info@53:     // Outdent the form if last child to line up with content down the page
info@53:     &.navbar-right:last-child {
info@53:       margin-right: 0;
info@53:     }
info@53:   }
info@53: }
info@53: 
info@53: // Alternate navbars
info@53: // --------------------------------------------------
info@53: 
info@53: // Default navbar
info@53: .navbar-default {
info@53:   background-color: @navbar-default-bg;
info@53:   border-color: @navbar-default-border;
info@53: 
info@53:   .navbar-brand {
info@53:     color: @navbar-default-brand-color;
info@53:     &:hover,
info@53:     &:focus {
info@53:       color: @navbar-default-brand-hover-color;
info@53:       background-color: @navbar-default-brand-hover-bg;
info@53:     }
info@53:   }
info@53: 
info@53:   .navbar-text {
info@53:     color: @navbar-default-color;
info@53:   }
info@53: 
info@53:   .navbar-nav {
info@53:     > li > a {
info@53:       color: @navbar-default-link-color;
info@53: 
info@53:       &:hover,
info@53:       &:focus {
info@53:         color: @navbar-default-link-hover-color;
info@53:         background-color: @navbar-default-link-hover-bg;
info@53:       }
info@53:     }
info@53:     > .active > a {
info@53:       &,
info@53:       &:hover,
info@53:       &:focus {
info@53:         color: @navbar-default-link-active-color;
info@53:         background-color: @navbar-default-link-active-bg;
info@53:       }
info@53:     }
info@53:     > .disabled > a {
info@53:       &,
info@53:       &:hover,
info@53:       &:focus {
info@53:         color: @navbar-default-link-disabled-color;
info@53:         background-color: @navbar-default-link-disabled-bg;
info@53:       }
info@53:     }
info@53:   }
info@53: 
info@53:   .navbar-toggle {
info@53:     border-color: @navbar-default-toggle-border-color;
info@53:     &:hover,
info@53:     &:focus {
info@53:       background-color: @navbar-default-toggle-hover-bg;
info@53:     }
info@53:     .icon-bar {
info@53:       background-color: @navbar-default-toggle-icon-bar-bg;
info@53:     }
info@53:   }
info@53: 
info@53:   .navbar-collapse,
info@53:   .navbar-form {
info@53:     border-color: @navbar-default-border;
info@53:   }
info@53: 
info@53:   // Dropdown menu items
info@53:   .navbar-nav {
info@53:     // Remove background color from open dropdown
info@53:     > .open > a {
info@53:       &,
info@53:       &:hover,
info@53:       &:focus {
info@53:         background-color: @navbar-default-link-active-bg;
info@53:         color: @navbar-default-link-active-color;
info@53:       }
info@53:     }
info@53: 
info@53:     @media (max-width: @grid-float-breakpoint-max) {
info@53:       // Dropdowns get custom display when collapsed
info@53:       .open .dropdown-menu {
info@53:         > li > a {
info@53:           color: @navbar-default-link-color;
info@53:           &:hover,
info@53:           &:focus {
info@53:             color: @navbar-default-link-hover-color;
info@53:             background-color: @navbar-default-link-hover-bg;
info@53:           }
info@53:         }
info@53:         > .active > a {
info@53:           &,
info@53:           &:hover,
info@53:           &:focus {
info@53:             color: @navbar-default-link-active-color;
info@53:             background-color: @navbar-default-link-active-bg;
info@53:           }
info@53:         }
info@53:         > .disabled > a {
info@53:           &,
info@53:           &:hover,
info@53:           &:focus {
info@53:             color: @navbar-default-link-disabled-color;
info@53:             background-color: @navbar-default-link-disabled-bg;
info@53:           }
info@53:         }
info@53:       }
info@53:     }
info@53:   }
info@53: 
info@53: 
info@53:   // Links in navbars
info@53:   //
info@53:   // Add a class to ensure links outside the navbar nav are colored correctly.
info@53: 
info@53:   .navbar-link {
info@53:     color: @navbar-default-link-color;
info@53:     &:hover {
info@53:       color: @navbar-default-link-hover-color;
info@53:     }
info@53:   }
info@53: 
info@53: }
info@53: 
info@53: // Inverse navbar
info@53: 
info@53: .navbar-inverse {
info@53:   background-color: @navbar-inverse-bg;
info@53:   border-color: @navbar-inverse-border;
info@53: 
info@53:   .navbar-brand {
info@53:     color: @navbar-inverse-brand-color;
info@53:     &:hover,
info@53:     &:focus {
info@53:       color: @navbar-inverse-brand-hover-color;
info@53:       background-color: @navbar-inverse-brand-hover-bg;
info@53:     }
info@53:   }
info@53: 
info@53:   .navbar-text {
info@53:     color: @navbar-inverse-color;
info@53:   }
info@53: 
info@53:   .navbar-nav {
info@53:     > li > a {
info@53:       color: @navbar-inverse-link-color;
info@53: 
info@53:       &:hover,
info@53:       &:focus {
info@53:         color: @navbar-inverse-link-hover-color;
info@53:         background-color: @navbar-inverse-link-hover-bg;
info@53:       }
info@53:     }
info@53:     > .active > a {
info@53:       &,
info@53:       &:hover,
info@53:       &:focus {
info@53:         color: @navbar-inverse-link-active-color;
info@53:         background-color: @navbar-inverse-link-active-bg;
info@53:       }
info@53:     }
info@53:     > .disabled > a {
info@53:       &,
info@53:       &:hover,
info@53:       &:focus {
info@53:         color: @navbar-inverse-link-disabled-color;
info@53:         background-color: @navbar-inverse-link-disabled-bg;
info@53:       }
info@53:     }
info@53:   }
info@53: 
info@53:   // Darken the responsive nav toggle
info@53:   .navbar-toggle {
info@53:     border-color: @navbar-inverse-toggle-border-color;
info@53:     &:hover,
info@53:     &:focus {
info@53:       background-color: @navbar-inverse-toggle-hover-bg;
info@53:     }
info@53:     .icon-bar {
info@53:       background-color: @navbar-inverse-toggle-icon-bar-bg;
info@53:     }
info@53:   }
info@53: 
info@53:   .navbar-collapse,
info@53:   .navbar-form {
info@53:     border-color: darken(@navbar-inverse-bg, 7%);
info@53:   }
info@53: 
info@53:   // Dropdowns
info@53:   .navbar-nav {
info@53:     > .open > a {
info@53:       &,
info@53:       &:hover,
info@53:       &:focus {
info@53:         background-color: @navbar-inverse-link-active-bg;
info@53:         color: @navbar-inverse-link-active-color;
info@53:       }
info@53:     }
info@53: 
info@53:     @media (max-width: @grid-float-breakpoint-max) {
info@53:       // Dropdowns get custom display
info@53:       .open .dropdown-menu {
info@53:         > .dropdown-header {
info@53:           border-color: @navbar-inverse-border;
info@53:         }
info@53:         .divider {
info@53:           background-color: @navbar-inverse-border;
info@53:         }
info@53:         > li > a {
info@53:           color: @navbar-inverse-link-color;
info@53:           &:hover,
info@53:           &:focus {
info@53:             color: @navbar-inverse-link-hover-color;
info@53:             background-color: @navbar-inverse-link-hover-bg;
info@53:           }
info@53:         }
info@53:         > .active > a {
info@53:           &,
info@53:           &:hover,
info@53:           &:focus {
info@53:             color: @navbar-inverse-link-active-color;
info@53:             background-color: @navbar-inverse-link-active-bg;
info@53:           }
info@53:         }
info@53:         > .disabled > a {
info@53:           &,
info@53:           &:hover,
info@53:           &:focus {
info@53:             color: @navbar-inverse-link-disabled-color;
info@53:             background-color: @navbar-inverse-link-disabled-bg;
info@53:           }
info@53:         }
info@53:       }
info@53:     }
info@53:   }
info@53: 
info@53:   .navbar-link {
info@53:     color: @navbar-inverse-link-color;
info@53:     &:hover {
info@53:       color: @navbar-inverse-link-hover-color;
info@53:     }
info@53:   }
info@53: 
info@53: }