git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/navbar.less

   1 //
   2 // Navbars
   3 // --------------------------------------------------
   4
   5 // Wrapper and base class
   6 .navbar {
   7   position: relative;
   8   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
   9   margin-bottom: 20px;
  10   padding-left: @navbar-padding-horizontal;
  11   padding-right: @navbar-padding-horizontal;
  12   background-color: @navbar-bg;
  13   border-radius: @border-radius-base;
  14
  15   // Prevent floats from breaking the navbar
  16   .clearfix();
  17 }
  18
  19 // Navbar nav links
  20 // -------------------------
  21
  22 .navbar-nav {
  23   // Space out from .navbar .brand and .btn-navbar when stacked in mobile views
  24   margin-top: 10px;
  25   margin-bottom: 15px;
  26
  27   > li > a {
  28     padding-top: ((@navbar-height - @line-height-computed) / 2);
  29     padding-bottom: ((@navbar-height - @line-height-computed) / 2);
  30     color: @navbar-link-color;
  31     line-height: 20px;
  32     border-radius: @border-radius-base;
  33     &:hover,
  34     &:focus {
  35       color: @navbar-link-hover-color;
  36       background-color: @navbar-link-hover-bg;
  37     }
  38   }
  39   > .active > a {
  40     &,
  41     &:hover,
  42     &:focus {
  43       color: @navbar-link-active-color;
  44       background-color: @navbar-link-active-bg;
  45     }
  46   }
  47   > .disabled > a {
  48     &,
  49     &:hover,
  50     &:focus {
  51       color: @navbar-link-disabled-color;
  52       background-color: @navbar-link-disabled-bg;
  53     }
  54   }
  55
  56   // Right aligned contents
  57   // Make them full width first so that they align properly on mobile
  58   &.pull-right {
  59     width: 100%;
  60   }
  61 }
  62
  63
  64
  65 //
  66 // Navbar alignment options
  67 // --------------------------------------------------
  68
  69 // Static navbar
  70 .navbar-static-top {
  71   border-radius: 0;
  72 }
  73
  74 // Fix the top/bottom navbars when screen real estate supports it
  75 .navbar-fixed-top,
  76 .navbar-fixed-bottom {
  77   position: fixed;
  78   right: 0;
  79   left: 0;
  80   z-index: @zindex-navbar-fixed;
  81   border-radius: 0;
  82 }
  83 .navbar-fixed-top {
  84   top: 0;
  85 }
  86 .navbar-fixed-bottom {
  87   bottom: 0;
  88   margin-bottom: 0; // override .navbar defaults
  89 }
  90
  91
  92
  93 //
  94 // Navbar optional components
  95 // --------------------------------------------------
  96
  97 // Brand/project name
  98 .navbar-brand {
  99   display: block;
 100   max-width: 200px;
 101   margin-left: auto;
 102   margin-right: auto;
 103   padding: @navbar-padding-vertical @navbar-padding-horizontal;
 104   font-size: @font-size-large;
 105   font-weight: 500;
 106   line-height: @line-height-computed;
 107   color: @navbar-brand-color;
 108   text-align: center;
 109   &:hover,
 110   &:focus {
 111     color: @navbar-brand-hover-color;
 112     text-decoration: none;
 113     background-color: @navbar-brand-hover-bg;
 114   }
 115 }
 116
 117 // Collapsible navbar toggle
 118 .navbar-toggle {
 119   position: absolute;
 120   top: floor((@navbar-height - 32) / 2);
 121   right: 10px;
 122   width: 48px;
 123   height: 32px;
 124   padding: 8px 12px;
 125   background-color: transparent;
 126   border: 1px solid @navbar-toggle-border-color;
 127   border-radius: @border-radius-base;
 128
 129   &:hover,
 130   &:focus {
 131     background-color: @navbar-toggle-hover-bg;
 132   }
 133
 134   // Bars
 135   .icon-bar {
 136     display: block;
 137     width: 22px;
 138     height: 2px;
 139     background-color: @navbar-toggle-icon-bar-bg;
 140     border-radius: 1px;
 141   }
 142   .icon-bar + .icon-bar {
 143     margin-top: 4px;
 144   }
 145 }
 146
 147 // Navbar form
 148 .navbar-form {
 149   .form-inline();
 150   .navbar-vertical-align(@input-height-base); // Vertically center in navbar
 151 }
 152
 153 // Dropdown menus
 154
 155 // Menu position and menu carets
 156 .navbar-nav > li > .dropdown-menu {
 157   margin-top: 0;
 158   border-top-left-radius: 0;
 159   border-top-right-radius: 0;
 160 }
 161 // Menu position and menu caret support for dropups via extra dropup class
 162 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
 163   border-bottom-left-radius: 0;
 164   border-bottom-right-radius: 0;
 165 }
 166
 167 // Dropdown menu items and carets
 168 .navbar-nav {
 169   // Caret should match text color on hover
 170   > .dropdown > a:hover .caret,
 171   > .dropdown > a:focus .caret {
 172     border-top-color: @navbar-link-hover-color;
 173     border-bottom-color: @navbar-link-hover-color;
 174   }
 175
 176   // Remove background color from open dropdown
 177   > .open > a {
 178     &,
 179     &:hover,
 180     &:focus {
 181       background-color: @navbar-link-active-bg;
 182       color: @navbar-link-active-color;
 183       .caret {
 184         border-top-color: @navbar-link-active-color;
 185         border-bottom-color: @navbar-link-active-color;
 186       }
 187     }
 188   }
 189   > .dropdown > a .caret {
 190     border-top-color: @navbar-link-color;
 191     border-bottom-color: @navbar-link-color;
 192   }
 193 }
 194
 195 // Right aligned menus need alt position
 196 .navbar-nav.pull-right > li > .dropdown-menu,
 197 .navbar-nav > li > .dropdown-menu.pull-right {
 198   left: auto;
 199   right: 0;
 200 }
 201
 202
 203
 204 // Inverse navbar
 205 // --------------------------------------------------
 206
 207 .navbar-inverse {
 208   background-color: @navbar-inverse-bg;
 209
 210   .navbar-brand {
 211     color: @navbar-inverse-brand-color;
 212     &:hover,
 213     &:focus {
 214       color: @navbar-inverse-brand-hover-color;
 215       background-color: @navbar-inverse-brand-hover-bg;
 216     }
 217   }
 218
 219   .navbar-text {
 220     color: @navbar-inverse-color;
 221   }
 222
 223   .navbar-nav {
 224     > li > a {
 225       color: @navbar-inverse-link-color;
 226
 227       &:hover,
 228       &:focus {
 229         color: @navbar-inverse-link-hover-color;
 230         background-color: @navbar-inverse-link-hover-bg;
 231       }
 232     }
 233     > .active > a {
 234       &,
 235       &:hover,
 236       &:focus {
 237         color: @navbar-inverse-link-active-color;
 238         background-color: @navbar-inverse-link-active-bg;
 239       }
 240     }
 241     > .disabled > a {
 242       &,
 243       &:hover,
 244       &:focus {
 245         color: @navbar-inverse-link-disabled-color;
 246         background-color: @navbar-inverse-link-disabled-bg;
 247       }
 248     }
 249   }
 250
 251   // Darken the responsive nav toggle
 252   .navbar-toggle {
 253     border-color: @navbar-inverse-toggle-border-color;
 254     &:hover,
 255     &:focus {
 256       background-color: @navbar-inverse-toggle-hover-bg;
 257     }
 258     .icon-bar {
 259       background-color: @navbar-inverse-toggle-icon-bar-bg;
 260     }
 261   }
 262
 263   // Dropdowns
 264   .navbar-nav {
 265     > .open > a {
 266       &,
 267       &:hover,
 268       &:focus {
 269         background-color: @navbar-inverse-link-active-bg;
 270         color: @navbar-inverse-link-active-color;
 271       }
 272     }
 273     > .dropdown > a:hover .caret {
 274       border-top-color: @navbar-inverse-link-hover-color;
 275       border-bottom-color: @navbar-inverse-link-hover-color;
 276     }
 277     > .dropdown > a .caret {
 278       border-top-color: @navbar-inverse-link-color;
 279       border-bottom-color: @navbar-inverse-link-color;
 280     }
 281     > .open > a {
 282       &,
 283       &:hover,
 284       &:focus {
 285         .caret {
 286           border-top-color: @navbar-inverse-link-active-color;
 287           border-bottom-color: @navbar-inverse-link-active-color;
 288         }
 289       }
 290     }
 291   }
 292 }
 293
 294
 295
 296 // Responsive navbar
 297 // --------------------------------------------------
 298
 299 @media screen and (min-width: @grid-float-breakpoint) {
 300
 301   .navbar-brand {
 302     float: left;
 303     margin-left: -(@navbar-padding-horizontal);
 304     margin-right: 5px;
 305   }
 306   .navbar-nav {
 307     float: left;
 308     // undo margin to make nav extend full height of navbar
 309     margin-top: 0;
 310     margin-bottom: 0;
 311
 312     > li {
 313       float: left;
 314       > a {
 315         border-radius: 0;
 316       }
 317     }
 318
 319     &.pull-right {
 320       float: right;
 321       width: auto;
 322     }
 323   }
 324
 325   // Required to make the collapsing navbar work on regular desktops
 326   .navbar-toggle {
 327     position: relative;
 328     top: auto;
 329     left: auto;
 330     display: none;
 331   }
 332   .nav-collapse.collapse {
 333     display: block !important;
 334     height: auto !important;
 335     overflow: visible !important;
 336   }
 337
 338 }
 339
 340
 341
 342 // Buttons in navbars
 343 //
 344 // Vertically center a button within a navbar (when *not* in a form).
 345
 346 .navbar-btn {
 347   margin-top: ((@navbar-height - @input-height-base) / 2);
 348 }
 349
 350
 351
 352 // Text in navbars
 353 //
 354 // Add a class to make any element properly align itself vertically within the navbars.
 355
 356 .navbar-text {
 357   .navbar-vertical-align(@line-height-computed);
 358 }
 359
 360
 361
 362 // Links in navbars
 363 //
 364 // Add a class to ensure links outside the navbar nav are colored correctly.
 365
 366 // Default navbar variables
 367 .navbar-link {
 368   color: @navbar-link-color;
 369   &:hover {
 370     color: @navbar-link-hover-color;
 371   }
 372 }
 373
 374 // Use the inverse navbar variables
 375 .navbar-inverse .navbar-link {
 376   color: @navbar-inverse-link-color;
 377   &:hover {
 378     color: @navbar-inverse-link-hover-color;
 379   }
 380 }