mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
94792b9dae
* Add top margin, calculated by subtracting height of an input from height of a navbar, and dividing by two * Uses the same method as .navbar-form * To use, add .navbar-btn to any button outside a form element * Also add section to docs detailing buttons in navbars, and add more ids for the other unlinked and unmentioned sections in the side nav
323 lines
7.0 KiB
Plaintext
323 lines
7.0 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
|
|
margin-top: 5px;
|
|
|
|
> 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;
|
|
}
|
|
> 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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//
|
|
// 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; }
|
|
|
|
|
|
|
|
//
|
|
// Navbar optional components
|
|
// --------------------------------------------------
|
|
|
|
// Brand/project name
|
|
.navbar-brand {
|
|
display: block;
|
|
max-width: 200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 15px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: @line-height-base;
|
|
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 {
|
|
.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 .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
|
|
li.dropdown > a:hover .caret,
|
|
li.dropdown > a:focus .caret {
|
|
border-top-color: @navbar-link-hover-color;
|
|
border-bottom-color: @navbar-link-hover-color;
|
|
}
|
|
|
|
// 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-active-bg;
|
|
color: @navbar-link-active-color;
|
|
}
|
|
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-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-text;
|
|
}
|
|
|
|
.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 {
|
|
li.dropdown.open > .dropdown-toggle,
|
|
li.dropdown.active > .dropdown-toggle,
|
|
li.dropdown.open.active > .dropdown-toggle {
|
|
background-color: @navbar-inverse-link-active-bg;
|
|
color: @navbar-inverse-link-active-color;
|
|
}
|
|
li.dropdown > a:hover .caret {
|
|
border-top-color: @navbar-inverse-link-hover-color;
|
|
border-bottom-color: @navbar-inverse-link-hover-color;
|
|
}
|
|
li.dropdown > .dropdown-toggle .caret {
|
|
border-top-color: @navbar-inverse-link-color;
|
|
border-bottom-color: @navbar-inverse-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-inverse-link-active-color;
|
|
border-bottom-color: @navbar-inverse-link-active-color;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Inverse navbar
|
|
// --------------------------------------------------
|
|
|
|
@media screen and (min-width: @screen-tablet) {
|
|
|
|
.navbar-brand {
|
|
float: left;
|
|
margin-left: -5px;
|
|
margin-right: 5px;
|
|
}
|
|
.navbar .nav {
|
|
float: left;
|
|
margin-top: 0; // undo top margin to make nav extend full height of navbar
|
|
|
|
> li {
|
|
float: left;
|
|
}
|
|
|
|
&.pull-right {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
// 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 navbar
|
|
//
|
|
// Vertically center a button within a navbar (when *not* in a form).
|
|
|
|
.navbar-btn {
|
|
margin-top: ((@navbar-height - @input-height-base) / 2);
|
|
}
|
|
|
|
/*
|
|
|
|
// Janky solution for now to account for links outside the .nav
|
|
// -------------------------
|
|
.navbar-link {
|
|
color: @navbar-link-color;
|
|
&:hover {
|
|
color: @navbar-link-hover-color;
|
|
}
|
|
}
|
|
|
|
*/
|