Subversion Repositories Integrator Subversion

//

// Navbars

// --------------------------------------------------

// Wrapper and base class

//

// Provide a static navbar from which we expand to create full-width, fixed, and

// other navbar variations.

.navbar {

  position: relative;

  min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)

  margin-bottom: $navbar-margin-bottom;

  border: 1px solid transparent;

  // Prevent floats from breaking the navbar

  @include clearfix;

  @media (min-width: $grid-float-breakpoint) {

    border-radius: $navbar-border-radius;

  }

}

// Navbar heading

//

// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy

// styling of responsive aspects.

.navbar-header {

  @include clearfix;

  @media (min-width: $grid-float-breakpoint) {

    float: left;

  }

}

// Navbar collapse (body)

//

// Group your navbar content into this for easy collapsing and expanding across

// various device sizes. By default, this content is collapsed when <768px, but

// will expand past that for a horizontal display.

//

// To start (on mobile devices) the navbar links, forms, and buttons are stacked

// vertically and include a `max-height` to overflow in case you have too much

// content for the user's viewport.

.navbar-collapse {

  overflow-x: visible;

  padding-right: $navbar-padding-horizontal;

  padding-left:  $navbar-padding-horizontal;

  border-top: 1px solid transparent;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);

  @include clearfix;

  -webkit-overflow-scrolling: touch;

  &.in {

    overflow-y: auto;

  }

  @media (min-width: $grid-float-breakpoint) {

    width: auto;

    border-top: 0;

    box-shadow: none;

    &.collapse {

      display: block !important;

      height: auto !important;

      padding-bottom: 0; // Override default setting

      overflow: visible !important;

    }

    &.in {

      overflow-y: visible;

    }

    // Undo the collapse side padding for navbars with containers to ensure

    // alignment of right-aligned contents.

    .navbar-fixed-top &,

    .navbar-static-top &,

    .navbar-fixed-bottom & {

      padding-left: 0;

      padding-right: 0;

    }

  }

}

.navbar-fixed-top,

.navbar-fixed-bottom {

  .navbar-collapse {

    max-height: $navbar-collapse-max-height;

    @media (max-device-width: $screen-xs-min) and (orientation: landscape) {

      max-height: 200px;

    }

  }

}

// Both navbar header and collapse

//

// When a container is present, change the behavior of the header and collapse.

.container,

.container-fluid {

  > .navbar-header,

  > .navbar-collapse {

    margin-right: -$navbar-padding-horizontal;

    margin-left:  -$navbar-padding-horizontal;

    @media (min-width: $grid-float-breakpoint) {

      margin-right: 0;

      margin-left:  0;

    }

  }

}

//

// Navbar alignment options

//

// Display the navbar across the entirety of the page or fixed it to the top or

// bottom of the page.

// Static top (unfixed, but 100% wide) navbar

.navbar-static-top {

  z-index: $zindex-navbar;

  border-width: 0 0 1px;

  @media (min-width: $grid-float-breakpoint) {

    border-radius: 0;

  }

}

// Fix the top/bottom navbars when screen real estate supports it

.navbar-fixed-top,

.navbar-fixed-bottom {

  position: fixed;

  right: 0;

  left: 0;

  z-index: $zindex-navbar-fixed;

  // Undo the rounded corners

  @media (min-width: $grid-float-breakpoint) {

    border-radius: 0;

  }

}

.navbar-fixed-top {

  top: 0;

  border-width: 0 0 1px;

}

.navbar-fixed-bottom {

  bottom: 0;

  margin-bottom: 0; // override .navbar defaults

  border-width: 1px 0 0;

}

// Brand/project name

.navbar-brand {

  float: left;

  padding: $navbar-padding-vertical $navbar-padding-horizontal;

  font-size: $font-size-large;

  line-height: $line-height-computed;

  height: $navbar-height;

  &:hover,

  &:focus {

    text-decoration: none;

  }

  > img {

    display: block;

  }

  @media (min-width: $grid-float-breakpoint) {

    .navbar > .container &,

    .navbar > .container-fluid & {

      margin-left: -$navbar-padding-horizontal;

    }

  }

}

// Navbar toggle

//

// Custom button for toggling the `.navbar-collapse`, powered by the collapse

// JavaScript plugin.

.navbar-toggle {

  position: relative;

  float: right;

  margin-right: $navbar-padding-horizontal;

  padding: 9px 10px;

  @include navbar-vertical-align(34px);

  background-color: transparent;

  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

  border: 1px solid transparent;

  border-radius: $border-radius-base;

  // We remove the `outline` here, but later compensate by attaching `:hover`

  // styles to `:focus`.

  &:focus {

    outline: 0;

  }

  // Bars

  .icon-bar {

    display: block;

    width: 22px;

    height: 2px;

    border-radius: 1px;

  }

  .icon-bar + .icon-bar {

    margin-top: 4px;

  }

  @media (min-width: $grid-float-breakpoint) {

    display: none;

  }

}

// Navbar nav links

//

// Builds on top of the `.nav` components with its own modifier class to make

// the nav the full height of the horizontal nav (above 768px).

.navbar-nav {

  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);

  > li > a {

    padding-top:    10px;

    padding-bottom: 10px;

    line-height: $line-height-computed;

  }

  @media (max-width: $grid-float-breakpoint-max) {

    // Dropdowns get custom display when collapsed

    .open .dropdown-menu {

      position: static;

      float: none;

      width: auto;

      margin-top: 0;

      background-color: transparent;

      border: 0;

      box-shadow: none;

      > li > a,

      .dropdown-header {

        padding: 5px 15px 5px 25px;

      }

      > li > a {

        line-height: $line-height-computed;

        &:hover,

        &:focus {

          background-image: none;

        }

      }

    }

  }

  // Uncollapse the nav

  @media (min-width: $grid-float-breakpoint) {

    float: left;

    margin: 0;

    > li {

      float: left;

      > a {

        padding-top:    $navbar-padding-vertical;

        padding-bottom: $navbar-padding-vertical;

      }

    }

  }

}

// Navbar form

//

// Extension of the `.form-inline` with some extra flavor for optimum display in

// our navbars.

.navbar-form {

  margin-left: -$navbar-padding-horizontal;

  margin-right: -$navbar-padding-horizontal;

  padding: 10px $navbar-padding-horizontal;

  border-top: 1px solid transparent;

  border-bottom: 1px solid transparent;

  $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);

  @include box-shadow($shadow);

  // Mixin behavior for optimum display

  @include form-inline;

  .form-group {

    @media (max-width: $grid-float-breakpoint-max) {

      margin-bottom: 5px;

      &:last-child {

        margin-bottom: 0;

      }

    }

  }

  // Vertically center in expanded, horizontal navbar

  @include navbar-vertical-align($input-height-base);

  // Undo 100% width for pull classes

  @media (min-width: $grid-float-breakpoint) {

    width: auto;

    border: 0;

    margin-left: 0;

    margin-right: 0;

    padding-top: 0;

    padding-bottom: 0;

    @include box-shadow(none);

  }

}

// Dropdown menus

// Menu position and menu carets

.navbar-nav > li > .dropdown-menu {

  margin-top: 0;

  @include border-top-radius(0);

}

// Menu position and menu caret support for dropups via extra dropup class

.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {

  margin-bottom: 0;

  @include border-top-radius($navbar-border-radius);

  @include border-bottom-radius(0);

}

// Buttons in navbars

//

// Vertically center a button within a navbar (when *not* in a form).

.navbar-btn {

  @include navbar-vertical-align($input-height-base);

  &.btn-sm {

    @include navbar-vertical-align($input-height-small);

  }

  &.btn-xs {

    @include navbar-vertical-align(22);

  }

}

// Text in navbars

//

// Add a class to make any element properly align itself vertically within the navbars.

.navbar-text {

  @include navbar-vertical-align($line-height-computed);

  @media (min-width: $grid-float-breakpoint) {

    float: left;

    margin-left: $navbar-padding-horizontal;

    margin-right: $navbar-padding-horizontal;

  }

}

// Component alignment

//

// Repurpose the pull utilities as their own navbar utilities to avoid specificity

// issues with parents and chaining. Only do this when the navbar is uncollapsed

// though so that navbar contents properly stack and align in mobile.

//

// Declared after the navbar components to ensure more specificity on the margins.

@media (min-width: $grid-float-breakpoint) {

  .navbar-left {

    float: left !important;

  }

  .navbar-right {

    float: right !important;

  margin-right: -$navbar-padding-horizontal;

    ~ .navbar-right {

      margin-right: 0;

    }

  }

}

// Alternate navbars

// --------------------------------------------------

// Default navbar

.navbar-default {

  background-color: $navbar-default-bg;

  border-color: $navbar-default-border;

  .navbar-brand {

    color: $navbar-default-brand-color;

    &:hover,

    &:focus {

      color: $navbar-default-brand-hover-color;

      background-color: $navbar-default-brand-hover-bg;

    }

  }

  .navbar-text {

    color: $navbar-default-color;

  }

  .navbar-nav {

    > li > a {

      color: $navbar-default-link-color;

      &:hover,

      &:focus {

        color: $navbar-default-link-hover-color;

        background-color: $navbar-default-link-hover-bg;

      }

    }

    > .active > a {

      &,

      &:hover,

      &:focus {

        color: $navbar-default-link-active-color;

        background-color: $navbar-default-link-active-bg;

      }

    }

    > .disabled > a {

      &,

      &:hover,

      &:focus {

        color: $navbar-default-link-disabled-color;

        background-color: $navbar-default-link-disabled-bg;

      }

    }

  }

  .navbar-toggle {

    border-color: $navbar-default-toggle-border-color;

    &:hover,

    &:focus {

      background-color: $navbar-default-toggle-hover-bg;

    }

    .icon-bar {

      background-color: $navbar-default-toggle-icon-bar-bg;

    }

  }

  .navbar-collapse,

  .navbar-form {

    border-color: $navbar-default-border;

  }

  // Dropdown menu items

  .navbar-nav {

    // Remove background color from open dropdown

    > .open > a {

      &,

      &:hover,

      &:focus {

        background-color: $navbar-default-link-active-bg;

        color: $navbar-default-link-active-color;

      }

    }

    @media (max-width: $grid-float-breakpoint-max) {

      // Dropdowns get custom display when collapsed

      .open .dropdown-menu {

        > li > a {

          color: $navbar-default-link-color;

          &:hover,

          &:focus {

            color: $navbar-default-link-hover-color;

            background-color: $navbar-default-link-hover-bg;

          }

        }

        > .active > a {

          &,

          &:hover,

          &:focus {

            color: $navbar-default-link-active-color;

            background-color: $navbar-default-link-active-bg;

          }

        }

        > .disabled > a {

          &,

          &:hover,

          &:focus {

            color: $navbar-default-link-disabled-color;

            background-color: $navbar-default-link-disabled-bg;

          }

        }

      }

    }

  }

  // Links in navbars

  //

  // Add a class to ensure links outside the navbar nav are colored correctly.

  .navbar-link {

    color: $navbar-default-link-color;

    &:hover {

      color: $navbar-default-link-hover-color;

    }

  }

  .btn-link {

    color: $navbar-default-link-color;

    &:hover,

    &:focus {

      color: $navbar-default-link-hover-color;

    }

    &[disabled],

    fieldset[disabled] & {

      &:hover,

      &:focus {

        color: $navbar-default-link-disabled-color;

      }

    }

  }

}

// Inverse navbar

.navbar-inverse {

  background-color: $navbar-inverse-bg;

  border-color: $navbar-inverse-border;

  .navbar-brand {

    color: $navbar-inverse-brand-color;

    &:hover,

    &:focus {

      color: $navbar-inverse-brand-hover-color;

      background-color: $navbar-inverse-brand-hover-bg;

    }

  }

  .navbar-text {

    color: $navbar-inverse-color;

  }

  .navbar-nav {

    > li > a {

      color: $navbar-inverse-link-color;

      &:hover,

      &:focus {

        color: $navbar-inverse-link-hover-color;

        background-color: $navbar-inverse-link-hover-bg;

      }

    }

    > .active > a {

      &,

      &:hover,

      &:focus {

        color: $navbar-inverse-link-active-color;

        background-color: $navbar-inverse-link-active-bg;

      }

    }

    > .disabled > a {

      &,

      &:hover,

      &:focus {

        color: $navbar-inverse-link-disabled-color;

        background-color: $navbar-inverse-link-disabled-bg;

      }

    }

  }

  // Darken the responsive nav toggle

  .navbar-toggle {

    border-color: $navbar-inverse-toggle-border-color;

    &:hover,

    &:focus {

      background-color: $navbar-inverse-toggle-hover-bg;

    }

    .icon-bar {

      background-color: $navbar-inverse-toggle-icon-bar-bg;

    }

  }

  .navbar-collapse,

  .navbar-form {

    border-color: darken($navbar-inverse-bg, 7%);

  }

  // Dropdowns

  .navbar-nav {

    > .open > a {

      &,

      &:hover,

      &:focus {

        background-color: $navbar-inverse-link-active-bg;

        color: $navbar-inverse-link-active-color;

      }

    }

    @media (max-width: $grid-float-breakpoint-max) {

      // Dropdowns get custom display

      .open .dropdown-menu {

        > .dropdown-header {

          border-color: $navbar-inverse-border;

        }

        .divider {

          background-color: $navbar-inverse-border;

        }

        > li > a {

          color: $navbar-inverse-link-color;

          &:hover,

          &:focus {

            color: $navbar-inverse-link-hover-color;

            background-color: $navbar-inverse-link-hover-bg;

          }

        }

        > .active > a {

          &,

          &:hover,

          &:focus {

            color: $navbar-inverse-link-active-color;

            background-color: $navbar-inverse-link-active-bg;

          }

        }

        > .disabled > a {

          &,

          &:hover,

          &:focus {

            color: $navbar-inverse-link-disabled-color;

            background-color: $navbar-inverse-link-disabled-bg;

          }

        }

      }

    }

  }

  .navbar-link {

    color: $navbar-inverse-link-color;

    &:hover {

      color: $navbar-inverse-link-hover-color;

    }

  }

  .btn-link {

    color: $navbar-inverse-link-color;

    &:hover,

    &:focus {

      color: $navbar-inverse-link-hover-color;

    }

    &[disabled],

    fieldset[disabled] & {

      &:hover,

      &:focus {

        color: $navbar-inverse-link-disabled-color;

      }

    }

  }

}