1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
twbs--bootstrap/less/navbar.less

407 lines
8.8 KiB
Text

//
// Navbars
// --------------------------------------------------
// Wrapper and base class
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
background-color: @navbar-bg;
border-radius: @navbar-border-radius;
// Prevent floats from breaking the navbar
.clearfix();
}
// Navbar nav links
// -------------------------
.navbar-nav {
> li > a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
color: @navbar-link-color;
line-height: @line-height-computed;
border-radius: @border-radius-base;
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
// Right aligned contents
// Make them full width first so that they align properly on mobile
&.pull-right {
width: 100%;
}
}
//
// Navbar alignment options
// --------------------------------------------------
// Static navbar
.navbar-static-top {
border-radius: 0;
}
// Fix the top/bottom navbars when screen real estate supports it
.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;
margin-bottom: 0; // override .navbar defaults
}
.nav-collapse {
// Prevent overlap of `.navbar-brand` and `.navbar-toggle`
clear: both;
// Space out collapsed contents within the mobile navbar
padding-bottom: @navbar-padding-vertical;
// Clear floated elements and prevent collapsing of padding
.clearfix();
// When there is no `.navbar-brand` present (which normally sits between the
// navbar brand and toggle), prevent the nav from overlapping the toggle.
.navbar-toggle + & {
width: 100%;
margin-top: @navbar-height;
}
}
// Scrollable navbar navigation
//
// Sometimes you might have too many links in your fixed navbar and you need to
// maintain access to all that content. To help, add `.nav-collapse-scrollable`
// to your `.nav-collapse` to prevent the the content from flowing past the max-
// height of your browser.
//
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
@media (max-width: @screen-small) {
.nav-collapse-scrollable {
margin-bottom: @navbar-padding-vertical;
max-height: 360px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
//
// Navbar optional components
// --------------------------------------------------
// Brand/project name
.navbar-brand {
float: left;
margin-right: 15px;
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
}
// Collapsible navbar toggle
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
.navbar-vertical-align(34px);
margin-right: -10px;
background-color: transparent;
border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
}
// Navbar form
.navbar-form {
.form-inline();
.navbar-vertical-align(@input-height-base); // Vertically center in navbar
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-bottom-radius(0);
}
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-link-active-bg;
color: @navbar-link-active-color;
.caret {
border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-active-color;
}
}
}
> .dropdown > a .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
}
// Right aligned menus need alt position
.navbar-nav.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;
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
color: @navbar-inverse-brand-hover-color;
background-color: @navbar-inverse-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-inverse-color;
}
.navbar-nav {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-inverse-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-inverse-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-inverse-toggle-icon-bar-bg;
}
}
// Dropdowns
.navbar-nav {
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-inverse-link-active-bg;
color: @navbar-inverse-link-active-color;
}
}
> .dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-hover-color;
}
> .dropdown > a .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
> .open > a {
&,
&:hover,
&:focus {
.caret {
border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
}
}
}
}
}
// Responsive navbar
// --------------------------------------------------
@media screen and (min-width: @grid-float-breakpoint) {
// Undo clearing to keep nav and brand horizontal
.nav-collapse {
clear: none;
}
.navbar-nav {
float: left;
// undo margin to make nav extend full height of navbar
margin-top: 0;
margin-bottom: 0;
> li {
float: left;
> a {
border-radius: 0;
}
}
&.pull-right {
width: auto;
}
}
// Required to make the collapsing navbar work on regular desktops
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
.nav-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
margin-top: ((@navbar-height - @input-height-base) / 2);
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
float: left;
padding: 0 @navbar-padding-horizontal;
.navbar-vertical-align(@line-height-computed);
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
// Default navbar variables
.navbar-link {
color: @navbar-link-color;
&:hover {
color: @navbar-link-hover-color;
}
}
// Use the inverse navbar variables
.navbar-inverse .navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}