libs/bootstrap/less/responsive-navbar.less

   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 }