0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/less/navbar.less

404 lines
8.7 KiB
Plaintext
Raw Normal View History

2012-06-29 06:46:45 +02:00
//
// Navbars
2012-06-29 06:46:45 +02:00
// --------------------------------------------------
// 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)
2013-05-01 04:12:48 +02:00
margin-bottom: 20px;
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
background-color: @navbar-bg;
border-radius: @navbar-border-radius;
2013-01-17 01:14:41 +01:00
// Prevent floats from breaking the navbar
.clearfix();
}
// Navbar nav links
2013-01-17 01:14:41 +01:00
// -------------------------
.navbar-nav {
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
margin-top: 10px;
margin-bottom: 15px;
> 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;
2013-07-07 23:40:18 +02:00
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
}
2013-07-07 23:40:18 +02:00
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
2013-07-07 23:40:18 +02:00
> .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;
.nav-collapse {
}
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
// 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 {
display: block;
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
2013-01-18 05:30:40 +01:00
font-weight: 500;
line-height: @line-height-computed;
color: @navbar-brand-color;
text-align: center;
&:hover,
&:focus {
2013-04-01 02:56:31 +02:00
color: @navbar-brand-hover-color;
text-decoration: none;
2013-04-01 02:56:31 +02:00
background-color: @navbar-brand-hover-bg;
}
}
// Collapsible navbar toggle
.navbar-toggle {
position: relative;
float: right;
height: 34px;
width: 48px;
.navbar-vertical-align(34px);
padding: @padding-base-vertical @padding-base-horizontal;
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
}
2013-01-17 20:20:19 +01:00
2013-01-17 20:55:37 +01:00
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
2013-01-17 20:55:37 +01:00
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 .navbar-nav > li > .dropdown-menu {
2013-01-17 20:55:37 +01:00
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
// Dropdown menu items and carets
.navbar-nav {
2013-01-17 20:55:37 +01:00
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
2013-04-01 02:56:31 +02:00
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
2013-01-17 20:55:37 +01:00
}
// Remove background color from open dropdown
2013-07-07 23:40:18 +02:00
> .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;
}
}
2013-01-17 20:55:37 +01:00
}
> .dropdown > a .caret {
2013-01-17 20:55:37 +01:00
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 {
2013-01-17 20:55:37 +01:00
left: auto;
right: 0;
}
2013-01-17 01:14:41 +01:00
// Inverse navbar
// --------------------------------------------------
2013-01-17 01:14:41 +01:00
.navbar-inverse {
2013-01-17 20:55:37 +01:00
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;
2013-07-07 23:40:18 +02:00
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
2013-07-07 23:40:18 +02:00
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
2013-07-07 23:40:18 +02:00
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
2013-01-17 20:55:37 +01:00
// 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;
}
}
2013-01-17 20:55:37 +01:00
// Dropdowns
.navbar-nav {
2013-07-07 23:40:18 +02:00
> .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;
}
2013-07-07 23:40:18 +02:00
> .open > a {
&,
&:hover,
&:focus {
.caret {
border-top-color: @navbar-inverse-link-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
}
}
}
2013-01-17 20:55:37 +01:00
}
2013-01-17 01:14:41 +01:00
}
// Responsive navbar
2013-01-17 01:14:41 +01:00
// --------------------------------------------------
@media screen and (min-width: @grid-float-breakpoint) {
.navbar-brand {
float: left;
margin-left: -(@navbar-padding-horizontal);
margin-right: 5px;
max-width: none; // Disables the default mobile setting
}
2013-06-20 18:40:30 +02:00
.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 {
2013-07-27 05:44:35 +02:00
display: block !important;
height: auto !important;
overflow: visible !important;
}
2013-01-17 20:55:37 +01:00
}
// 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 {
2013-07-30 03:30:21 +02:00
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 {
2012-12-01 00:33:56 +01:00
color: @navbar-link-color;
&:hover {
2013-04-01 02:56:31 +02:00
color: @navbar-link-hover-color;
2012-01-15 02:16:46 +01:00
}
}
// Use the inverse navbar variables
.navbar-inverse .navbar-link {
color: @navbar-inverse-link-color;
&:hover {
color: @navbar-inverse-link-hover-color;
}
}