kupshop/admin/static/bootstrap/scss/_navbar.scss

//
// Navbars
// --------------------------------------------------


// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.navbar {
   background-color: $navbar-default-bg;
   position: relative;

   // Prevent floats from breaking the navbar
   @include clearfix;


   @media screen and (min-width: 1030px) {
      min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   }
}


// 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 $navbar-default-border;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
   -webkit-overflow-scrolling: touch;
   @include clearfix;

   &.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;
      }
   }
}

// Brand/project name
.navbar-brand {
   float: left;
   font-size: $font-size-large;
   height: 56px; // $navbar-height;
   line-height: 56px; // $line-height-computed;
   padding: 0 28px;

   &:hover,
   &:focus {
      text-decoration: none;
   }

   @media (max-width: 1200px) {
      display: none;
   }
}


// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
   background-color: #003d98;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 0;
   border-radius: $border-radius-base;
   float: right;
   margin: 8px $navbar-padding-horizontal;
   padding: 9px 10px;

   .icon-bar {
      background-color: $white;
      display: block;
      width: 22px;
      height: 2px;

      + .icon-bar {
         margin-top: 4px;
      }
   }

   &:hover,
   &:focus {
      border-color: $navbar-default-toggle-hover-bg;
      background-color: $navbar-default-toggle-hover-bg;
      outline: 0;
   }

   @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 {
      color: $navbar-default-link-color;
      line-height: $line-height-computed;
      padding: 18px;
      transition: .25s;

      &:hover,
      &:focus {
         color: $navbar-default-link-hover-color;
         background-color: $primary-dark;
      }

      @media screen and (max-width: 1600px) {
         padding: 18px 8px 18px 12px;
      }

      @media screen and (min-width: 1030px) and (max-width: 1179px) {
         padding: 18px 9px;
      }

      @media screen and (max-width: 1029px) {
         padding: 10px 5px;
         font-size: 12px;

         .caret {
            margin-left: 0;
         }
      }
   }

   .dropdown-submenu > a::after {
      border-color: transparent transparent transparent $primary-dark;
   }

   .dropdown-menu > .open > a,
   .dropdown-menu > .open > a:hover,
   .dropdown-menu > .open > a:focus {
      background-color: $primary;
      color: $white;

      &::after {
         border-color: transparent transparent transparent $white;
      }
   }

   // Remove background color from open dropdown
   > .open > a {
      &,
      &:hover,
      &:focus {
         background-color: $primary-dark;
         color: $navbar-default-link-active-color;
      }
   }

   @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;
            color: $navbar-default-link-color;

            &:hover,
            &:focus {
               background-image: none;
               color: $navbar-default-link-hover-color;
               background-color: $navbar-default-link-hover-bg;
            }
         }
      }
   }

   // Uncollapse the nav
   @media (min-width: $grid-float-breakpoint) {
      float: left;
      margin: 0;

      > li {
         float: left;
      }
   }
}


// 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.

.navbar-right {
   float: right !important;
   margin-right: -$navbar-padding-horizontal;

   @media screen and (max-width: 1029px) {
      display: none;
   }
}