mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
ef8e5853cb
Prevents an odd alignment issue in mobile views by forcing the nav links to be full width without undoing the float.
364 lines
7.5 KiB
Plaintext
364 lines
7.5 KiB
Plaintext
//
|
|
// Navbars
|
|
// --------------------------------------------------
|
|
|
|
// Wrapper and base class
|
|
.navbar {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
background-color: @navbar-bg;
|
|
border-radius: @border-radius-base;
|
|
|
|
// Prevent floats from breaking the navbar
|
|
.clearfix();
|
|
}
|
|
|
|
// Navbar nav links
|
|
// -------------------------
|
|
|
|
.navbar-nav {
|
|
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
|
|
// and outdent nav links so text lines up with logo.
|
|
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: 20px;
|
|
border-radius: @border-radius-base;
|
|
}
|
|
> li > a:hover,
|
|
> li > a:focus {
|
|
color: @navbar-link-hover-color;
|
|
background-color: @navbar-link-hover-bg;
|
|
}
|
|
> .active > a,
|
|
> .active > a:hover,
|
|
> .active > a:focus {
|
|
color: @navbar-link-active-color;
|
|
background-color: @navbar-link-active-bg;
|
|
}
|
|
> .disabled > a,
|
|
> .disabled > a:hover,
|
|
> .disabled > a: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
|
|
}
|
|
|
|
|
|
|
|
//
|
|
// Navbar optional components
|
|
// --------------------------------------------------
|
|
|
|
// Brand/project name
|
|
.navbar-brand {
|
|
display: block;
|
|
max-width: 200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 15px;
|
|
font-size: @font-size-large;
|
|
font-weight: 500;
|
|
line-height: @line-height-computed;
|
|
color: @navbar-brand-color;
|
|
text-align: center;
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-brand-hover-color;
|
|
text-decoration: none;
|
|
background-color: @navbar-brand-hover-bg;
|
|
}
|
|
}
|
|
|
|
// Collapsible navbar toggle
|
|
.navbar-toggle {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
padding: 8px 12px;
|
|
background-color: transparent;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
// Bars
|
|
.icon-bar {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background-color: #ccc;
|
|
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-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 {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-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,
|
|
> .open > a:hover,
|
|
> .open > a:focus {
|
|
background-color: @navbar-link-active-bg;
|
|
color: @navbar-link-active-color;
|
|
}
|
|
> .dropdown > a .caret {
|
|
border-top-color: @navbar-link-color;
|
|
border-bottom-color: @navbar-link-color;
|
|
}
|
|
> .open > a .caret,
|
|
> .open > a:hover .caret,
|
|
> .open > a:focus .caret {
|
|
border-top-color: @navbar-link-active-color;
|
|
border-bottom-color: @navbar-link-active-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;
|
|
}
|
|
> li > a:hover,
|
|
> li > a:focus {
|
|
color: @navbar-inverse-link-hover-color;
|
|
background-color: @navbar-inverse-link-hover-bg;
|
|
}
|
|
> .active > a,
|
|
> .active > a:hover,
|
|
> .active > a:focus {
|
|
color: @navbar-inverse-link-active-color;
|
|
background-color: @navbar-inverse-link-active-bg;
|
|
}
|
|
> .disabled > a,
|
|
> .disabled > a:hover,
|
|
> .disabled > a:focus {
|
|
color: @navbar-inverse-link-disabled-color;
|
|
background-color: @navbar-inverse-link-disabled-bg;
|
|
}
|
|
}
|
|
|
|
// Darken the responsive nav toggle
|
|
.navbar-toggle {
|
|
border-color: #333;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: #333;
|
|
}
|
|
.icon-bar {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
// Dropdowns
|
|
.navbar-nav {
|
|
> .open > a,
|
|
> .open > a:hover,
|
|
> .open > a: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 .caret,
|
|
> .open > a:hover .caret,
|
|
> .open > a: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) {
|
|
|
|
.navbar-brand {
|
|
float: left;
|
|
margin-left: -5px;
|
|
margin-right: 5px;
|
|
}
|
|
.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 {
|
|
float: 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 {
|
|
height: auto !important;
|
|
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 {
|
|
.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;
|
|
}
|
|
}
|