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
This commit is contained in:
Mark Otto
2013-02-01 22:56:09 -08:00
parent dad9889aeb
commit 94e256c016
5 changed files with 57 additions and 35 deletions

View File

@@ -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;
}