From 94e256c0162748dcddd6401d57a186576254f884 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Fri, 1 Feb 2013 22:56:09 -0800
Subject: [PATCH] Refactor navbar dividers
* Instead of .divider-vertical, use .divider
* Makes use of .nav-divider mixin
* Dividers are horizontal to start, matching the default state of navbar nav links
* Dividers become vertical above 768px via media queries
---
docs/assets/css/bootstrap.css | 33 ++++++++++++++++--------
docs/components.html | 14 +++++-----
docs/templates/pages/components.mustache | 14 +++++-----
less/mixins.less | 2 +-
less/navbar.less | 29 ++++++++++++++-------
5 files changed, 57 insertions(+), 35 deletions(-)
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index d006d71606..01c603b26b 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -8,7 +8,7 @@
* Designed and built with all the love in the world by @mdo and @fat.
*/
-/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
@@ -2531,7 +2531,7 @@ fieldset[disabled] .btn-link:hover {
.dropdown-menu .divider {
height: 1px;
- margin: 9px 1px;
+ margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
@@ -2827,7 +2827,7 @@ button.close {
.nav .divider {
height: 1px;
- margin: 9px 1px;
+ margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
@@ -3019,11 +3019,12 @@ button.close {
margin-top: 3px;
}
-.navbar .divider-vertical {
- height: 30px;
- margin: 10px 9px;
- border-right: 1px solid #fbfbfb;
- border-left: 1px solid #e1e1e1;
+.navbar .nav > .divider {
+ height: 1px;
+ margin: 9px 0;
+ overflow: hidden;
+ background-color: #e1e1e1;
+ border-bottom: 1px solid #fbfbfb;
}
.navbar-form {
@@ -3110,9 +3111,9 @@ button.close {
background-color: #444;
}
-.navbar-inverse .divider-vertical {
- border-right-color: #2f2f2f;
- border-left-color: #151515;
+.navbar-inverse .nav > .divider {
+ background-color: #151515;
+ border-bottom-color: #2f2f2f;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
@@ -3168,6 +3169,16 @@ button.close {
.navbar .nav > li {
float: left;
}
+ .navbar .nav > .divider {
+ width: 1px;
+ height: 30px;
+ margin: 10px 9px;
+ border-right: 1px solid #fbfbfb;
+ border-bottom: 0;
+ }
+ .navbar-inverse .nav > .divider {
+ border-right-color: #2f2f2f;
+ }
.navbar .btn-navbar {
display: none;
}
diff --git a/docs/components.html b/docs/components.html
index 4293e43bf8..ade79e7b5b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -831,17 +831,17 @@
<li><a href="#">Link</a></li>
</ul>
</pre>
- <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
+ <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><li></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">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
</ul>
</div>
</div>
@@ -849,7 +849,7 @@
<pre class="prettyprint linenums">
<ul class="nav">
...
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
...
</ul>
</pre>
@@ -999,7 +999,7 @@
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></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">
@@ -1080,7 +1080,7 @@
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></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">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 7f87294871..3d0470bc54 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -763,17 +763,17 @@
<li><a href="#">Link</a></li>
</ul>
</pre>
- <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
+ <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><li></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">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
</ul>
</div>
</div>
@@ -781,7 +781,7 @@
<pre class="prettyprint linenums">
<ul class="nav">
...
- <li class="divider-vertical"></li>
+ <li class="divider"></li>
...
</ul>
</pre>
@@ -931,7 +931,7 @@
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></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">
@@ -1012,7 +1012,7 @@
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
- <li class="divider-vertical"></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">
diff --git a/less/mixins.less b/less/mixins.less
index 3282bd10e5..71ca3dfefc 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -377,7 +377,7 @@
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@top: #e5e5e5, @bottom: #fff) {
height: 1px;
- margin: ((@line-height-base / 2) - 1) 1px; // 8px 1px
+ margin: ((@line-height-base / 2) - 1) 0;
overflow: hidden;
background-color: @top;
border-bottom: 1px solid @bottom;
diff --git a/less/navbar.less b/less/navbar.less
index 2a6824e06a..1af0c499ab 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -104,11 +104,8 @@
}
// Dividers in navbar
-.navbar .divider-vertical {
- height: @navbar-height * .6;
- margin: (@navbar-height * .2) 9px;
- border-left: 1px solid darken(@navbar-bg, 5%);
- border-right: 1px solid lighten(@navbar-bg, 5%);
+.navbar .nav > .divider {
+ .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%));
}
// Navbar form
@@ -204,10 +201,10 @@
background-color: #444;
}
- // Darken divider borders
- .divider-vertical {
- border-left-color: darken(@navbar-inverse-bg, 5%);
- border-right-color: lighten(@navbar-inverse-bg, 5%);
+ // Darken dividers
+ .nav > .divider {
+ background-color: darken(@navbar-inverse-bg, 5%);
+ border-bottom-color: lighten(@navbar-inverse-bg, 5%);
}
// Dropdowns
@@ -262,6 +259,20 @@
float: left;
}
+ // Dividers go vertical
+ // Change the height and height, disable bottom border, then add right border
+ .navbar .nav > .divider {
+ width: 1px;
+ height: @navbar-height * .6;
+ margin: (@navbar-height * .2) 9px;
+ border-bottom: 0;
+ border-right: 1px solid lighten(@navbar-bg, 5%);
+ }
+ // Since we override the border, we need to specify it again for inverted navbars
+ .navbar-inverse .nav > .divider {
+ border-right-color: lighten(@navbar-inverse-bg, 5%);
+ }
+
// Required to make the collapsing navbar work on regular desktops
.navbar .btn-navbar {
display: none;
--
GitLab