github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-02-11 06:25:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor navbar dividers

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

2
less/mixins.less
View File

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

29
less/navbar.less
View File

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