1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/static/less/navbar.less Fri Dec 20 22:30:44 2013 +0100
1.3 @@ -0,0 +1,612 @@
1.4 +//
1.5 +// Navbars
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +// Wrapper and base class
1.10 +//
1.11 +// Provide a static navbar from which we expand to create full-width, fixed, and
1.12 +// other navbar variations.
1.13 +
1.14 +.navbar {
1.15 + position: relative;
1.16 + min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
1.17 + margin-bottom: @navbar-margin-bottom;
1.18 + border: 1px solid transparent;
1.19 +
1.20 + // Prevent floats from breaking the navbar
1.21 + .clearfix();
1.22 +
1.23 + @media (min-width: @grid-float-breakpoint) {
1.24 + border-radius: @navbar-border-radius;
1.25 + }
1.26 +}
1.27 +
1.28 +
1.29 +// Navbar heading
1.30 +//
1.31 +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
1.32 +// styling of responsive aspects.
1.33 +
1.34 +.navbar-header {
1.35 + .clearfix();
1.36 +
1.37 + @media (min-width: @grid-float-breakpoint) {
1.38 + float: left;
1.39 + }
1.40 +}
1.41 +
1.42 +
1.43 +// Navbar collapse (body)
1.44 +//
1.45 +// Group your navbar content into this for easy collapsing and expanding across
1.46 +// various device sizes. By default, this content is collapsed when <768px, but
1.47 +// will expand past that for a horizontal display.
1.48 +//
1.49 +// To start (on mobile devices) the navbar links, forms, and buttons are stacked
1.50 +// vertically and include a `max-height` to overflow in case you have too much
1.51 +// content for the user's viewport.
1.52 +
1.53 +.navbar-collapse {
1.54 + max-height: 340px;
1.55 + overflow-x: visible;
1.56 + padding-right: @navbar-padding-horizontal;
1.57 + padding-left: @navbar-padding-horizontal;
1.58 + border-top: 1px solid transparent;
1.59 + box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
1.60 + .clearfix();
1.61 + -webkit-overflow-scrolling: touch;
1.62 +
1.63 + &.in {
1.64 + overflow-y: auto;
1.65 + }
1.66 +
1.67 + @media (min-width: @grid-float-breakpoint) {
1.68 + width: auto;
1.69 + border-top: 0;
1.70 + box-shadow: none;
1.71 +
1.72 + &.collapse {
1.73 + display: block !important;
1.74 + height: auto !important;
1.75 + padding-bottom: 0; // Override default setting
1.76 + overflow: visible !important;
1.77 + }
1.78 +
1.79 + &.in {
1.80 + overflow-y: visible;
1.81 + }
1.82 +
1.83 + // Undo the collapse side padding for navbars with containers to ensure
1.84 + // alignment of right-aligned contents.
1.85 + .navbar-fixed-top &,
1.86 + .navbar-static-top &,
1.87 + .navbar-fixed-bottom & {
1.88 + padding-left: 0;
1.89 + padding-right: 0;
1.90 + }
1.91 + }
1.92 +}
1.93 +
1.94 +
1.95 +// Both navbar header and collapse
1.96 +//
1.97 +// When a container is present, change the behavior of the header and collapse.
1.98 +
1.99 +.container > .navbar-header,
1.100 +.container > .navbar-collapse {
1.101 + margin-right: -@navbar-padding-horizontal;
1.102 + margin-left: -@navbar-padding-horizontal;
1.103 +
1.104 + @media (min-width: @grid-float-breakpoint) {
1.105 + margin-right: 0;
1.106 + margin-left: 0;
1.107 + }
1.108 +}
1.109 +
1.110 +
1.111 +//
1.112 +// Navbar alignment options
1.113 +//
1.114 +// Display the navbar across the entirety of the page or fixed it to the top or
1.115 +// bottom of the page.
1.116 +
1.117 +// Static top (unfixed, but 100% wide) navbar
1.118 +.navbar-static-top {
1.119 + z-index: @zindex-navbar;
1.120 + border-width: 0 0 1px;
1.121 +
1.122 + @media (min-width: @grid-float-breakpoint) {
1.123 + border-radius: 0;
1.124 + }
1.125 +}
1.126 +
1.127 +// Fix the top/bottom navbars when screen real estate supports it
1.128 +.navbar-fixed-top,
1.129 +.navbar-fixed-bottom {
1.130 + position: fixed;
1.131 + right: 0;
1.132 + left: 0;
1.133 + z-index: @zindex-navbar-fixed;
1.134 +
1.135 + // Undo the rounded corners
1.136 + @media (min-width: @grid-float-breakpoint) {
1.137 + border-radius: 0;
1.138 + }
1.139 +}
1.140 +.navbar-fixed-top {
1.141 + top: 0;
1.142 + border-width: 0 0 1px;
1.143 +}
1.144 +.navbar-fixed-bottom {
1.145 + bottom: 0;
1.146 + margin-bottom: 0; // override .navbar defaults
1.147 + border-width: 1px 0 0;
1.148 +}
1.149 +
1.150 +
1.151 +// Brand/project name
1.152 +
1.153 +.navbar-brand {
1.154 + float: left;
1.155 + padding: @navbar-padding-vertical @navbar-padding-horizontal;
1.156 + font-size: @font-size-large;
1.157 + line-height: @line-height-computed;
1.158 +
1.159 + &:hover,
1.160 + &:focus {
1.161 + text-decoration: none;
1.162 + }
1.163 +
1.164 + @media (min-width: @grid-float-breakpoint) {
1.165 + .navbar > .container & {
1.166 + margin-left: -@navbar-padding-horizontal;
1.167 + }
1.168 + }
1.169 +}
1.170 +
1.171 +
1.172 +// Navbar toggle
1.173 +//
1.174 +// Custom button for toggling the `.navbar-collapse`, powered by the collapse
1.175 +// JavaScript plugin.
1.176 +
1.177 +.navbar-toggle {
1.178 + position: relative;
1.179 + float: right;
1.180 + margin-right: @navbar-padding-horizontal;
1.181 + padding: 9px 10px;
1.182 + .navbar-vertical-align(34px);
1.183 + background-color: transparent;
1.184 + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
1.185 + border: 1px solid transparent;
1.186 + border-radius: @border-radius-base;
1.187 +
1.188 + // Bars
1.189 + .icon-bar {
1.190 + display: block;
1.191 + width: 22px;
1.192 + height: 2px;
1.193 + border-radius: 1px;
1.194 + }
1.195 + .icon-bar + .icon-bar {
1.196 + margin-top: 4px;
1.197 + }
1.198 +
1.199 + @media (min-width: @grid-float-breakpoint) {
1.200 + display: none;
1.201 + }
1.202 +}
1.203 +
1.204 +
1.205 +// Navbar nav links
1.206 +//
1.207 +// Builds on top of the `.nav` components with it's own modifier class to make
1.208 +// the nav the full height of the horizontal nav (above 768px).
1.209 +
1.210 +.navbar-nav {
1.211 + margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
1.212 +
1.213 + > li > a {
1.214 + padding-top: 10px;
1.215 + padding-bottom: 10px;
1.216 + line-height: @line-height-computed;
1.217 + }
1.218 +
1.219 + @media (max-width: @grid-float-breakpoint-max) {
1.220 + // Dropdowns get custom display when collapsed
1.221 + .open .dropdown-menu {
1.222 + position: static;
1.223 + float: none;
1.224 + width: auto;
1.225 + margin-top: 0;
1.226 + background-color: transparent;
1.227 + border: 0;
1.228 + box-shadow: none;
1.229 + > li > a,
1.230 + .dropdown-header {
1.231 + padding: 5px 15px 5px 25px;
1.232 + }
1.233 + > li > a {
1.234 + line-height: @line-height-computed;
1.235 + &:hover,
1.236 + &:focus {
1.237 + background-image: none;
1.238 + }
1.239 + }
1.240 + }
1.241 + }
1.242 +
1.243 + // Uncollapse the nav
1.244 + @media (min-width: @grid-float-breakpoint) {
1.245 + float: left;
1.246 + margin: 0;
1.247 +
1.248 + > li {
1.249 + float: left;
1.250 + > a {
1.251 + padding-top: @navbar-padding-vertical;
1.252 + padding-bottom: @navbar-padding-vertical;
1.253 + }
1.254 + }
1.255 +
1.256 + &.navbar-right:last-child {
1.257 + margin-right: -@navbar-padding-horizontal;
1.258 + }
1.259 + }
1.260 +}
1.261 +
1.262 +
1.263 +// Component alignment
1.264 +//
1.265 +// Repurpose the pull utilities as their own navbar utilities to avoid specificity
1.266 +// issues with parents and chaining. Only do this when the navbar is uncollapsed
1.267 +// though so that navbar contents properly stack and align in mobile.
1.268 +
1.269 +@media (min-width: @grid-float-breakpoint) {
1.270 + .navbar-left { .pull-left(); }
1.271 + .navbar-right { .pull-right(); }
1.272 +}
1.273 +
1.274 +
1.275 +// Navbar form
1.276 +//
1.277 +// Extension of the `.form-inline` with some extra flavor for optimum display in
1.278 +// our navbars.
1.279 +
1.280 +.navbar-form {
1.281 + margin-left: -@navbar-padding-horizontal;
1.282 + margin-right: -@navbar-padding-horizontal;
1.283 + padding: 10px @navbar-padding-horizontal;
1.284 + border-top: 1px solid transparent;
1.285 + border-bottom: 1px solid transparent;
1.286 + @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
1.287 + .box-shadow(@shadow);
1.288 +
1.289 + // Mixin behavior for optimum display
1.290 + .form-inline();
1.291 +
1.292 + .form-group {
1.293 + @media (max-width: @grid-float-breakpoint-max) {
1.294 + margin-bottom: 5px;
1.295 + }
1.296 + }
1.297 +
1.298 + // Vertically center in expanded, horizontal navbar
1.299 + .navbar-vertical-align(@input-height-base);
1.300 +
1.301 + // Undo 100% width for pull classes
1.302 + @media (min-width: @grid-float-breakpoint) {
1.303 + width: auto;
1.304 + border: 0;
1.305 + margin-left: 0;
1.306 + margin-right: 0;
1.307 + padding-top: 0;
1.308 + padding-bottom: 0;
1.309 + .box-shadow(none);
1.310 +
1.311 + // Outdent the form if last child to line up with content down the page
1.312 + &.navbar-right:last-child {
1.313 + margin-right: -@navbar-padding-horizontal;
1.314 + }
1.315 + }
1.316 +}
1.317 +
1.318 +
1.319 +// Dropdown menus
1.320 +
1.321 +// Menu position and menu carets
1.322 +.navbar-nav > li > .dropdown-menu {
1.323 + margin-top: 0;
1.324 + .border-top-radius(0);
1.325 +}
1.326 +// Menu position and menu caret support for dropups via extra dropup class
1.327 +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
1.328 + .border-bottom-radius(0);
1.329 +}
1.330 +
1.331 +// Right aligned menus need alt position
1.332 +.navbar-nav.pull-right > li > .dropdown-menu,
1.333 +.navbar-nav > li > .dropdown-menu.pull-right {
1.334 + left: auto;
1.335 + right: 0;
1.336 +}
1.337 +
1.338 +
1.339 +// Buttons in navbars
1.340 +//
1.341 +// Vertically center a button within a navbar (when *not* in a form).
1.342 +
1.343 +.navbar-btn {
1.344 + .navbar-vertical-align(@input-height-base);
1.345 +
1.346 + &.btn-sm {
1.347 + .navbar-vertical-align(@input-height-small);
1.348 + }
1.349 + &.btn-xs {
1.350 + .navbar-vertical-align(22);
1.351 + }
1.352 +}
1.353 +
1.354 +
1.355 +// Text in navbars
1.356 +//
1.357 +// Add a class to make any element properly align itself vertically within the navbars.
1.358 +
1.359 +.navbar-text {
1.360 + .navbar-vertical-align(@line-height-computed);
1.361 +
1.362 + @media (min-width: @grid-float-breakpoint) {
1.363 + float: left;
1.364 + margin-left: @navbar-padding-horizontal;
1.365 + margin-right: @navbar-padding-horizontal;
1.366 +
1.367 + // Outdent the form if last child to line up with content down the page
1.368 + &.navbar-right:last-child {
1.369 + margin-right: 0;
1.370 + }
1.371 + }
1.372 +}
1.373 +
1.374 +// Alternate navbars
1.375 +// --------------------------------------------------
1.376 +
1.377 +// Default navbar
1.378 +.navbar-default {
1.379 + background-color: @navbar-default-bg;
1.380 + border-color: @navbar-default-border;
1.381 +
1.382 + .navbar-brand {
1.383 + color: @navbar-default-brand-color;
1.384 + &:hover,
1.385 + &:focus {
1.386 + color: @navbar-default-brand-hover-color;
1.387 + background-color: @navbar-default-brand-hover-bg;
1.388 + }
1.389 + }
1.390 +
1.391 + .navbar-text {
1.392 + color: @navbar-default-color;
1.393 + }
1.394 +
1.395 + .navbar-nav {
1.396 + > li > a {
1.397 + color: @navbar-default-link-color;
1.398 +
1.399 + &:hover,
1.400 + &:focus {
1.401 + color: @navbar-default-link-hover-color;
1.402 + background-color: @navbar-default-link-hover-bg;
1.403 + }
1.404 + }
1.405 + > .active > a {
1.406 + &,
1.407 + &:hover,
1.408 + &:focus {
1.409 + color: @navbar-default-link-active-color;
1.410 + background-color: @navbar-default-link-active-bg;
1.411 + }
1.412 + }
1.413 + > .disabled > a {
1.414 + &,
1.415 + &:hover,
1.416 + &:focus {
1.417 + color: @navbar-default-link-disabled-color;
1.418 + background-color: @navbar-default-link-disabled-bg;
1.419 + }
1.420 + }
1.421 + }
1.422 +
1.423 + .navbar-toggle {
1.424 + border-color: @navbar-default-toggle-border-color;
1.425 + &:hover,
1.426 + &:focus {
1.427 + background-color: @navbar-default-toggle-hover-bg;
1.428 + }
1.429 + .icon-bar {
1.430 + background-color: @navbar-default-toggle-icon-bar-bg;
1.431 + }
1.432 + }
1.433 +
1.434 + .navbar-collapse,
1.435 + .navbar-form {
1.436 + border-color: @navbar-default-border;
1.437 + }
1.438 +
1.439 + // Dropdown menu items
1.440 + .navbar-nav {
1.441 + // Remove background color from open dropdown
1.442 + > .open > a {
1.443 + &,
1.444 + &:hover,
1.445 + &:focus {
1.446 + background-color: @navbar-default-link-active-bg;
1.447 + color: @navbar-default-link-active-color;
1.448 + }
1.449 + }
1.450 +
1.451 + @media (max-width: @grid-float-breakpoint-max) {
1.452 + // Dropdowns get custom display when collapsed
1.453 + .open .dropdown-menu {
1.454 + > li > a {
1.455 + color: @navbar-default-link-color;
1.456 + &:hover,
1.457 + &:focus {
1.458 + color: @navbar-default-link-hover-color;
1.459 + background-color: @navbar-default-link-hover-bg;
1.460 + }
1.461 + }
1.462 + > .active > a {
1.463 + &,
1.464 + &:hover,
1.465 + &:focus {
1.466 + color: @navbar-default-link-active-color;
1.467 + background-color: @navbar-default-link-active-bg;
1.468 + }
1.469 + }
1.470 + > .disabled > a {
1.471 + &,
1.472 + &:hover,
1.473 + &:focus {
1.474 + color: @navbar-default-link-disabled-color;
1.475 + background-color: @navbar-default-link-disabled-bg;
1.476 + }
1.477 + }
1.478 + }
1.479 + }
1.480 + }
1.481 +
1.482 +
1.483 + // Links in navbars
1.484 + //
1.485 + // Add a class to ensure links outside the navbar nav are colored correctly.
1.486 +
1.487 + .navbar-link {
1.488 + color: @navbar-default-link-color;
1.489 + &:hover {
1.490 + color: @navbar-default-link-hover-color;
1.491 + }
1.492 + }
1.493 +
1.494 +}
1.495 +
1.496 +// Inverse navbar
1.497 +
1.498 +.navbar-inverse {
1.499 + background-color: @navbar-inverse-bg;
1.500 + border-color: @navbar-inverse-border;
1.501 +
1.502 + .navbar-brand {
1.503 + color: @navbar-inverse-brand-color;
1.504 + &:hover,
1.505 + &:focus {
1.506 + color: @navbar-inverse-brand-hover-color;
1.507 + background-color: @navbar-inverse-brand-hover-bg;
1.508 + }
1.509 + }
1.510 +
1.511 + .navbar-text {
1.512 + color: @navbar-inverse-color;
1.513 + }
1.514 +
1.515 + .navbar-nav {
1.516 + > li > a {
1.517 + color: @navbar-inverse-link-color;
1.518 +
1.519 + &:hover,
1.520 + &:focus {
1.521 + color: @navbar-inverse-link-hover-color;
1.522 + background-color: @navbar-inverse-link-hover-bg;
1.523 + }
1.524 + }
1.525 + > .active > a {
1.526 + &,
1.527 + &:hover,
1.528 + &:focus {
1.529 + color: @navbar-inverse-link-active-color;
1.530 + background-color: @navbar-inverse-link-active-bg;
1.531 + }
1.532 + }
1.533 + > .disabled > a {
1.534 + &,
1.535 + &:hover,
1.536 + &:focus {
1.537 + color: @navbar-inverse-link-disabled-color;
1.538 + background-color: @navbar-inverse-link-disabled-bg;
1.539 + }
1.540 + }
1.541 + }
1.542 +
1.543 + // Darken the responsive nav toggle
1.544 + .navbar-toggle {
1.545 + border-color: @navbar-inverse-toggle-border-color;
1.546 + &:hover,
1.547 + &:focus {
1.548 + background-color: @navbar-inverse-toggle-hover-bg;
1.549 + }
1.550 + .icon-bar {
1.551 + background-color: @navbar-inverse-toggle-icon-bar-bg;
1.552 + }
1.553 + }
1.554 +
1.555 + .navbar-collapse,
1.556 + .navbar-form {
1.557 + border-color: darken(@navbar-inverse-bg, 7%);
1.558 + }
1.559 +
1.560 + // Dropdowns
1.561 + .navbar-nav {
1.562 + > .open > a {
1.563 + &,
1.564 + &:hover,
1.565 + &:focus {
1.566 + background-color: @navbar-inverse-link-active-bg;
1.567 + color: @navbar-inverse-link-active-color;
1.568 + }
1.569 + }
1.570 +
1.571 + @media (max-width: @grid-float-breakpoint-max) {
1.572 + // Dropdowns get custom display
1.573 + .open .dropdown-menu {
1.574 + > .dropdown-header {
1.575 + border-color: @navbar-inverse-border;
1.576 + }
1.577 + .divider {
1.578 + background-color: @navbar-inverse-border;
1.579 + }
1.580 + > li > a {
1.581 + color: @navbar-inverse-link-color;
1.582 + &:hover,
1.583 + &:focus {
1.584 + color: @navbar-inverse-link-hover-color;
1.585 + background-color: @navbar-inverse-link-hover-bg;
1.586 + }
1.587 + }
1.588 + > .active > a {
1.589 + &,
1.590 + &:hover,
1.591 + &:focus {
1.592 + color: @navbar-inverse-link-active-color;
1.593 + background-color: @navbar-inverse-link-active-bg;
1.594 + }
1.595 + }
1.596 + > .disabled > a {
1.597 + &,
1.598 + &:hover,
1.599 + &:focus {
1.600 + color: @navbar-inverse-link-disabled-color;
1.601 + background-color: @navbar-inverse-link-disabled-bg;
1.602 + }
1.603 + }
1.604 + }
1.605 + }
1.606 + }
1.607 +
1.608 + .navbar-link {
1.609 + color: @navbar-inverse-link-color;
1.610 + &:hover {
1.611 + color: @navbar-inverse-link-hover-color;
1.612 + }
1.613 + }
1.614 +
1.615 +}