0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/less/navbar.less
Mark Otto 43da258bd9 Merge branch '2.3.0-wip' into 3.0.0-wip
Conflicts:
	docs/assets/css/bootstrap-responsive.css
	docs/assets/css/bootstrap.css
	docs/examples/hero.html
	less/buttons.less
	less/carousel.less
	less/close.less
	less/dropdowns.less
	less/labels-badges.less
	less/mixins.less
	less/navbar.less
	less/navs.less
	less/pagination.less
	less/responsive-navbar.less
	less/scaffolding.less
	less/sprites.less
	less/thumbnails.less
	less/type.less
2013-02-05 19:53:44 -08:00

346 lines
7.9 KiB
Plaintext

//
// Navbars
// --------------------------------------------------
// Wrapper and base class
.navbar {
padding: 15px;
background-color: @navbar-bg;
border-radius: @border-radius-base;
// Prevent floats from breaking the navbar
.clear_float();
}
// Navbar nav links
// -------------------------
.navbar {
.nav {
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
}
.nav > li > a {
padding-top: (@navbar-height - @line-height-base) / 2;
padding-bottom: (@navbar-height - @line-height-base) / 2;
color: @navbar-link-color;
line-height: 20px;
}
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-link-color-hover;
background-color: @navbar-link-bg-hover;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
}
}
//
// Navbar alignment options
// --------------------------------------------------
// Static navbar
.navbar-static-top {
position: static;
border-radius: 0;
}
// Fixed navbar
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top { top: 0; }
.navbar-fixed-bottom { bottom: 0; }
//
// Navbar optional components
// --------------------------------------------------
// Brand/project name
.navbar .brand {
display: inline-block;
padding: 7px 15px;
font-size: 18px;
font-weight: 500;
line-height: @line-height-base;
color: @navbar-brand-color;
&:hover,
&:focus {
color: @navbar-brand-color-hover;
text-decoration: none;
background-color: @navbar-brand-bg-hover;
}
}
// Collapsible navbar toggle
.btn-navbar {
float: right;
padding: 10px 12px;
background-color: #ddd;
border: 0;
border-radius: 4px;
// Bars
.icon-bar {
display: block;
width: 20px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 3px;
}
}
// Dividers in navbar
.navbar .nav > .divider {
.nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
}
// Navbar form
.navbar-form {
.navbar-vertical-align(34px); // Vertically center in navbar
}
// Dropdown menus
// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
// Dropdown menu items and carets
.navbar .nav {
// Caret should match text color on hover
li.dropdown > a:hover .caret,
li.dropdown > a:focus .caret {
border-top-color: @navbar-link-color-hover;
border-bottom-color: @navbar-link-color-hover;
}
// Remove background color from open dropdown
li.dropdown.open > .dropdown-toggle,
li.dropdown.active > .dropdown-toggle,
li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-bg-active;
color: @navbar-link-color-active;
}
li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
li.dropdown.open > .dropdown-toggle .caret,
li.dropdown.active > .dropdown-toggle .caret,
li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active;
border-bottom-color: @navbar-link-color-active;
}
}
// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
// Inverse navbar
// --------------------------------------------------
.navbar-inverse {
background-color: @navbar-inverse-bg;
.brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-color-hover;
background-color: @navbar-inverse-brand-bg-hover;
}
}
.navbar-text {
color: @navbar-inverse-text;
}
.nav > li > a {
color: @navbar-inverse-link-color;
}
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-inverse-link-color-hover;
background-color: @navbar-inverse-link-bg-hover;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-inverse-link-color-active;
background-color: @navbar-inverse-link-bg-active;
}
// Darken the responsive nav toggle
.btn-navbar {
background-color: #444;
}
// Darken dividers
.nav > .divider {
background-color: darken(@navbar-inverse-bg, 5%);
border-bottom-color: lighten(@navbar-inverse-bg, 5%);
}
// Dropdowns
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-bg-active;
color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-color-hover;
border-bottom-color: @navbar-inverse-link-color-hover;
}
.nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
.nav li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
}
}
// Inverse navbar
// --------------------------------------------------
@media screen and (min-width: 768px) {
.navbar {
padding-top: 0;
padding-bottom: 0;
}
.navbar .brand {
float: left;
padding-top: (@navbar-height - @line-height-base) / 2;
padding-bottom: (@navbar-height - @line-height-base) / 2;
margin-left: -15px;
}
.navbar .nav {
float: left;
margin-top: 0; // undo top margin to make nav extend full height of navbar
.clear_float();
&.pull-right {
float: right;
}
}
.navbar .nav > li {
float: left;
}
// Dividers go vertical
// Change the height and height, disable bottom border, then add right border
.navbar .nav > .divider {
width: 1px;
height: @navbar-height * .6;
margin: (@navbar-height * .2) 9px;
border-bottom: 0;
border-right: 1px solid lighten(@navbar-bg, 5%);
}
// Since we override the border, we need to specify it again for inverted navbars
.navbar-inverse .nav > .divider {
border-right-color: lighten(@navbar-inverse-bg, 5%);
}
// Required to make the collapsing navbar work on regular desktops
.navbar .btn-navbar {
display: none;
}
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
/*
// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link {
color: @navbar-link-color;
&:hover {
color: @navbar-link-color-hover;
}
}
// Buttons in navbar
// -------------------------
.navbar .btn,
.navbar .btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it
}
// Navbar forms
// -------------------------
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 5px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
}
*/