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