[Summary view] [Print] [Text view]

   1  //
   2  // Responsive: Navbar
   3  // --------------------------------------------------
   4  
   5  
   6  // TABLETS AND BELOW
   7  // -----------------
   8  @media (max-width: @navbarCollapseWidth) {
   9  
  10    // UNFIX THE TOPBAR
  11    // ----------------
  12    // Remove any padding from the body
  13    body {
  14      padding-top: 0;
  15    }
  16    // Unfix the navbars
  17    .navbar-fixed-top,
  18    .navbar-fixed-bottom {
  19      position: static;
  20    }
  21    .navbar-fixed-top {
  22      margin-bottom: @baseLineHeight;
  23    }
  24    .navbar-fixed-bottom {
  25      margin-top: @baseLineHeight;
  26    }
  27    .navbar-fixed-top .navbar-inner,
  28    .navbar-fixed-bottom .navbar-inner {
  29      padding: 5px;
  30    }
  31    .navbar .container {
  32      width: auto;
  33      padding: 0;
  34    }
  35    // Account for brand name
  36    .navbar .brand {
  37      padding-left: 10px;
  38      padding-right: 10px;
  39      margin: 0 0 0 -5px;
  40    }
  41  
  42    // COLLAPSIBLE NAVBAR
  43    // ------------------
  44    // Nav collapse clears brand
  45    .nav-collapse {
  46      clear: both;
  47    }
  48    // Block-level the nav
  49    .nav-collapse .nav {
  50      float: none;
  51      margin: 0 0 (@baseLineHeight / 2);
  52    }
  53    .nav-collapse .nav > li {
  54      float: none;
  55    }
  56    .nav-collapse .nav > li > a {
  57      margin-bottom: 2px;
  58    }
  59    .nav-collapse .nav > .divider-vertical {
  60      display: none;
  61    }
  62    .nav-collapse .nav .nav-header {
  63      color: @navbarText;
  64      text-shadow: none;
  65    }
  66    // Nav and dropdown links in navbar
  67    .nav-collapse .nav > li > a,
  68    .nav-collapse .dropdown-menu a {
  69      padding: 9px 15px;
  70      font-weight: bold;
  71      color: @navbarLinkColor;
  72      .border-radius(3px);
  73    }
  74    // Buttons
  75    .nav-collapse .btn {
  76      padding: 4px 10px 4px;
  77      font-weight: normal;
  78      .border-radius(@baseBorderRadius);
  79    }
  80    .nav-collapse .dropdown-menu li + li a {
  81      margin-bottom: 2px;
  82    }
  83    .nav-collapse .nav > li > a:hover,
  84    .nav-collapse .nav > li > a:focus,
  85    .nav-collapse .dropdown-menu a:hover,
  86    .nav-collapse .dropdown-menu a:focus {
  87      background-color: @navbarBackground;
  88    }
  89    .navbar-inverse .nav-collapse .nav > li > a,
  90    .navbar-inverse .nav-collapse .dropdown-menu a {
  91      color: @navbarInverseLinkColor;
  92    }
  93    .navbar-inverse .nav-collapse .nav > li > a:hover,
  94    .navbar-inverse .nav-collapse .nav > li > a:focus,
  95    .navbar-inverse .nav-collapse .dropdown-menu a:hover,
  96    .navbar-inverse .nav-collapse .dropdown-menu a:focus {
  97      background-color: @navbarInverseBackground;
  98    }
  99    // Buttons in the navbar
 100    .nav-collapse.in .btn-group {
 101      margin-top: 5px;
 102      padding: 0;
 103    }
 104    // Dropdowns in the navbar
 105    .nav-collapse .dropdown-menu {
 106      position: static;
 107      top: auto;
 108      left: auto;
 109      float: none;
 110      display: none;
 111      max-width: none;
 112      margin: 0 15px;
 113      padding: 0;
 114      background-color: transparent;
 115      border: none;
 116      .border-radius(0);
 117      .box-shadow(none);
 118    }
 119    .nav-collapse .open > .dropdown-menu { 
 120      display: block; 
 121    }
 122  
 123    .nav-collapse .dropdown-menu:before,
 124    .nav-collapse .dropdown-menu:after {
 125      display: none;
 126    }
 127    .nav-collapse .dropdown-menu .divider {
 128      display: none;
 129    }
 130    .nav-collapse .nav > li > .dropdown-menu {
 131      &:before,
 132      &:after {
 133        display: none;
 134      }
 135    }
 136    // Forms in navbar
 137    .nav-collapse .navbar-form,
 138    .nav-collapse .navbar-search {
 139      float: none;
 140      padding: (@baseLineHeight / 2) 15px;
 141      margin: (@baseLineHeight / 2) 0;
 142      border-top: 1px solid @navbarBackground;
 143      border-bottom: 1px solid @navbarBackground;
 144      .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
 145    }
 146    .navbar-inverse .nav-collapse .navbar-form,
 147    .navbar-inverse .nav-collapse .navbar-search {
 148      border-top-color: @navbarInverseBackground;
 149      border-bottom-color: @navbarInverseBackground;
 150    }
 151    // Pull right (secondary) nav content
 152    .navbar .nav-collapse .nav.pull-right {
 153      float: none;
 154      margin-left: 0;
 155    }
 156    // Hide everything in the navbar save .brand and toggle button */
 157    .nav-collapse,
 158    .nav-collapse.collapse {
 159      overflow: hidden;
 160      height: 0;
 161    }
 162    // Navbar button
 163    .navbar .btn-navbar {
 164      display: block;
 165    }
 166  
 167    // STATIC NAVBAR
 168    // -------------
 169    .navbar-static .navbar-inner {
 170      padding-left:  10px;
 171      padding-right: 10px;
 172    }
 173  
 174  
 175  }
 176  
 177  
 178  // DEFAULT DESKTOP
 179  // ---------------
 180  
 181  @media (min-width: @navbarCollapseDesktopWidth) {
 182  
 183    // Required to make the collapsing navbar work on regular desktops
 184    .nav-collapse.collapse {
 185      height: auto !important;
 186      overflow: visible !important;
 187    }
 188  
 189  }