Skip to content

B
bootstrap
Commit 8b3a1702 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Overhaul navbar navs 

* Switch from  to  to eliminate an element in selectors
* Drop .navbar-divider entirely
parent 2ffa0e44
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 204 deletions
docs/assets/css/bootstrap.css
View file @ 8b3a1702
......@@ -3515,33 +3515,33 @@ button.close {
clear: both;
}
.navbar .nav {
.navbar-nav {
margin-top: 15px;
}
.navbar .nav > li > a {
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #777777;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
}
.navbar .nav > .disabled > a,
.navbar .nav > .disabled > a:hover,
.navbar .nav > .disabled > a:focus {
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
......@@ -3570,7 +3570,7 @@ button.close {
.navbar-brand {
display: block;
max-width: 200px;
padding: 7px 15px;
padding: 15px;
margin-right: auto;
margin-left: auto;
font-size: 18px;
......@@ -3614,57 +3614,49 @@ button.close {
margin-top: 4px;
}
.navbar .nav > .divider {
height: 2px;
margin: 9px 0;
overflow: hidden;
background-color: #e1e1e1;
border-bottom: 1px solid #fbfbfb;
}
.navbar-form {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar .nav > li > .dropdown-menu {
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.navbar-fixed-bottom .nav > li > .dropdown-menu {
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
.navbar-nav li.dropdown > a:hover .caret,
.navbar-nav li.dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
.navbar-nav li.dropdown.open > .dropdown-toggle,
.navbar-nav li.dropdown.active > .dropdown-toggle,
.navbar-nav li.dropdown.open.active > .dropdown-toggle {
color: #555555;
background-color: #d5d5d5;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
.navbar-nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
.navbar-nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
right: 0;
left: auto;
}
......@@ -3687,26 +3679,26 @@ button.close {
color: #999999;
}
.navbar-inverse .nav > li > a {
.navbar-inverse .navbar-nav > li > a {
color: #999999;
}
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .nav > .active > a,
.navbar-inverse .nav > .active > a:hover,
.navbar-inverse .nav > .active > a:focus {
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .nav > .disabled > a,
.navbar-inverse .nav > .disabled > a:hover,
.navbar-inverse .nav > .disabled > a:focus {
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
......@@ -3724,31 +3716,26 @@ button.close {
background-color: #fff;
}
.navbar-inverse .nav > .divider {
background-color: #151515;
border-bottom-color: #2f2f2f;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .nav li.dropdown > a:hover .caret {
.navbar-inverse .navbar-nav li.dropdown > a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
.navbar-inverse .navbar-nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #999999;
border-bottom-color: #999999;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
......@@ -3760,36 +3747,19 @@ button.close {
}
.navbar-brand {
float: left;
padding-top: 15px;
padding-bottom: 15px;
margin-left: -10px;
margin-right: 5px;
margin-left: -5px;
}
.navbar .nav {
float: left;
margin-top: 0;
}
.navbar .nav:before,
.navbar .nav:after {
display: table;
content: " ";
}
.navbar .nav:after {
clear: both;
}
.navbar .nav:before,
.navbar .nav:after {
display: table;
content: " ";
}
.navbar .nav:after {
clear: both;
.navbar .nav > li {
float: left;
}
.navbar .nav.pull-right {
float: right;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > .divider {
width: 1px;
height: 30px;
......@@ -3800,15 +3770,6 @@ button.close {
.navbar-inverse .nav > .divider {
border-right-color: #2f2f2f;
}
.navbar-fixed-left {
padding-right: 0;
padding-left: 0;
}
.navbar-fixed-left .navbar-brand,
.navbar-fixed-left .nav,
.navbar-fixed-left .nav > li {
float: none;
}
.navbar-toggle {
position: relative;
top: auto;
......
docs/assets/css/docs.css
View file @ 8b3a1702
......@@ -308,7 +308,7 @@ section > ul li {
.bs-navbar-bottom-example {
z-index: 1;
padding: 0;
height: 90px;
height: 110px;
overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-fixed-top,
......
docs/docs.html
View file @ 8b3a1702
......@@ -3423,7 +3423,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-example">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
......@@ -3433,7 +3433,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html linenos %}
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
......@@ -3458,7 +3458,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Nav items are simple to add via unordered lists.</p>
<div class="bs-docs-example">
<div class="navbar">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
......@@ -3466,31 +3466,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
</div><!-- /example -->
{% highlight html linenos %}
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li class="disabled"><a href="#">Disabled</a></li>
</ul>
{% endhighlight %}
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code>&lt;li&gt;</code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
<div class="bs-docs-example">
<div class="navbar">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li><a href="#">Link</a></li>
<li class="divider"></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html linenos %}
<ul class="nav">
...
<li class="divider"></li>
...
</ul>
{% endhighlight %}
<h3 id="navbar-forms">Forms</h3>
......@@ -3529,7 +3509,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
......@@ -3565,7 +3545,7 @@ body {
<div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
......@@ -3601,7 +3581,7 @@ body {
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
......@@ -3628,7 +3608,7 @@ body {
</button>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
......@@ -3648,9 +3628,8 @@ body {
<form class="navbar-form pull-left" action="">
<input type="text" class="col-span-8" placeholder="Search">
</form>
<ul class="nav pull-right">
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
......@@ -3706,7 +3685,7 @@ body {
</button>
<a class="navbar-brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
......@@ -3726,9 +3705,8 @@ body {
<form class="navbar-form pull-left" action="">
<input type="text" class="col-span-8" placeholder="Search">
</form>
<ul class="nav pull-right">
<ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
......
less/navbar.less
View file @ 8b3a1702
......@@ -15,31 +15,30 @@
// Navbar nav links
// -------------------------
.navbar {
.nav {
// space out from .navbar .brand and .btn-navbar
margin-top: 15px;
}
.nav > li > a {
.navbar-nav {
// Space out from .navbar .brand and .btn-navbar
margin-top: 15px;
> 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 {
> li > a:hover,
> li > a:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
> .active > a,
> .active > a:hover,
> .active > a:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
> .disabled > a,
> .disabled > a:hover,
> .disabled > a:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
......@@ -80,7 +79,7 @@
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: 7px 15px;
padding: 15px;
font-size: 18px;
font-weight: 500;
line-height: @line-height-base;
......@@ -122,11 +121,6 @@
}
}
// 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
......@@ -135,19 +129,19 @@
// Dropdown menus
// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
.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 {
.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 {
.navbar-nav {
// Caret should match text color on hover
li.dropdown > a:hover .caret,
li.dropdown > a:focus .caret {
......@@ -175,8 +169,8 @@
}
// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
.navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
......@@ -202,25 +196,27 @@
color: @navbar-inverse-text;
}
.nav > li > a {
color: @navbar-inverse-link-color;
}
.nav > li > a:hover,
.nav > li > a:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
.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
......@@ -235,32 +231,29 @@
}
}
// 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-active-bg;
color: @navbar-inverse-link-active-color;
}
.nav li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-hover-color;
border-bottom-color: @navbar-inverse-link-hover-color;
}
.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-active-color;
border-bottom-color: @navbar-inverse-link-active-color;
.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;
}
}
}
......@@ -270,28 +263,28 @@
// --------------------------------------------------
@media screen and (min-width: @screen-tablet) {
.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: -10px;
margin-left: -5px;
margin-right: 5px;
}
.navbar .nav {
float: left;
margin-top: 0; // undo top margin to make nav extend full height of navbar
.clearfix();
> li {
float: left;
}
&.pull-right {
float: right;
}
}
.navbar .nav > li {
float: left;
}
// Dividers go vertical
// Change the height and height, disable bottom border, then add right border
......@@ -307,16 +300,6 @@
border-right-color: lighten(@navbar-inverse-bg, 5%);
}
.navbar-fixed-left {
padding-left: 0;
padding-right: 0;
}
.navbar-fixed-left .navbar-brand,
.navbar-fixed-left .nav,
.navbar-fixed-left .nav > li {
float: none;
}
// Required to make the collapsing navbar work on regular desktops
.navbar-toggle {
position: relative;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment