1.1 --- a/bootstrap-source/bootstrap-3.0.3/less/navbar.less Sat Jan 18 12:34:36 2014 +0100
1.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
1.3 @@ -1,612 +0,0 @@
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 -}