Skip to content

B
bootstrap
Commit 597a248d authored by Mark Otto's avatar Mark Otto
Browse files
Options

Rearrange navbar.less and improve vertical divider support

parent 360f0c53
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 183 deletions
docs/assets/css/bootstrap.css
View file @ 597a248d
...@@ -2975,6 +2975,52 @@ button.close { ...@@ -2975,6 +2975,52 @@ button.close {
clear: both; clear: both;
} }
.navbar .nav {
margin-top: 15px;
}
.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 {
color: #333333;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
}
.navbar-static-top {
position: static;
border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar .brand { .navbar .brand {
display: inline-block; display: inline-block;
padding: 7px 15px; padding: 7px 15px;
...@@ -3010,28 +3056,59 @@ button.close { ...@@ -3010,28 +3056,59 @@ button.close {
margin-top: 3px; margin-top: 3px;
} }
.navbar .nav { .navbar .divider-vertical {
margin-top: 15px; height: 30px;
margin: 10px 9px;
border-right: 1px solid #fbfbfb;
border-left: 1px solid #e1e1e1;
} }
.navbar .nav > li > a { .navbar-form {
padding-top: 15px; margin-top: 9px;
padding-bottom: 15px; margin-bottom: 9px;
line-height: 20px;
color: #777777;
} }
.navbar .nav > li > a:hover, .navbar-inverse {
.navbar .nav > li > a:focus { background-color: #222222;
color: #333333; }
.navbar-inverse .brand {
color: #999999;
}
.navbar-inverse .brand:hover {
color: #808080;
background-color: transparent; background-color: transparent;
} }
.navbar .nav > .active > a, .navbar-inverse .navbar-text {
.navbar .nav > .active > a:hover, color: #999999;
.navbar .nav > .active > a:focus { }
color: #555555;
background-color: #d5d5d5; .navbar-inverse .nav > li > a {
color: #999999;
}
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .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 {
color: #ffffff;
background-color: #222222;
}
.navbar-inverse .btn-navbar {
background-color: #444;
}
.navbar-inverse .divider-vertical {
border-right-color: #2f2f2f;
border-left-color: #151515;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
...@@ -3072,78 +3149,6 @@ button.close { ...@@ -3072,78 +3149,6 @@ button.close {
} }
} }
.navbar-inverse {
background-color: #222222;
}
.navbar-inverse .brand {
color: #999999;
}
.navbar-inverse .brand:hover {
color: #808080;
background-color: transparent;
}
.navbar-inverse .navbar-text {
color: #999999;
}
.navbar-inverse .nav > li > a {
color: #999999;
}
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .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 {
color: #ffffff;
background-color: #222222;
}
.navbar-inverse .btn-navbar {
background-color: #444;
}
.navbar-static-top {
position: static;
border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
}
.navbar .divider-vertical {
height: 26px;
margin: 7px 9px;
border-right: 1px solid #fbfbfb;
border-left: 1px solid #e1e1e1;
}
.navbar-form {
margin-top: 9px;
margin-bottom: 9px;
}
/* /*
// Janky solution for now to account for links outside the .nav // Janky solution for now to account for links outside the .nav
......
less/navbar.less
View file @ 597a248d
...@@ -11,9 +11,63 @@ ...@@ -11,9 +11,63 @@
.clear_float(); .clear_float();
} }
// Brand/project name // Navbar nav links
// ------------------------- // -------------------------
.navbar {
.nav {
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
}
.nav > 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 {
color: @navbar-link-color-hover;
background-color: @navbar-link-bg-hover;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
}
}
//
// Navbar alignment options
// --------------------------------------------------
// Static navbar
.navbar-static-top {
position: static;
border-radius: 0;
}
// Fixed navbar
.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 { .navbar .brand {
display: inline-block; display: inline-block;
padding: 7px 15px; padding: 7px 15px;
...@@ -28,9 +82,7 @@ ...@@ -28,9 +82,7 @@
} }
} }
// Responsive navbar button // Collapsible navbar toggle
// -------------------------
.btn-navbar { .btn-navbar {
float: right; float: right;
padding: 10px 12px; padding: 10px 12px;
...@@ -51,68 +103,23 @@ ...@@ -51,68 +103,23 @@
} }
} }
// Navbar nav links // Dividers in navbar
// ------------------------- .navbar .divider-vertical {
height: @navbar-height * .6;
.navbar { margin: (@navbar-height * .2) 9px;
.nav { border-left: 1px solid darken(@navbar-bg, 5%);
margin-top: 15px; // space out from .navbar .brand and .btn-navbar border-right: 1px solid lighten(@navbar-bg, 5%);
}
.nav > 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 {
color: @navbar-link-color-hover;
background-color: @navbar-link-bg-hover;
}
.nav > .active > a,
.nav > .active > a:hover,
.nav > .active > a:focus {
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
}
} }
@media screen and (min-width: 768px) { // Navbar form
.navbar { .navbar-form {
padding-top: 0; .navbar-vertical-align(32px); // Vertically center in navbar
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: -15px;
}
.navbar .nav {
float: left;
margin-top: 0; // undo top margin to make nav extend full height of navbar
.clear_float();
&.pull-right {
float: right;
}
}
.navbar .nav > li {
float: left;
}
// Required to make the collapsing navbar work on regular desktops
.navbar .btn-navbar {
display: none;
}
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
// Inverse navbar // Inverse navbar
// ------------------------- // --------------------------------------------------
.navbar-inverse { .navbar-inverse {
background-color: @navbar-inverse-bg; background-color: @navbar-inverse-bg;
...@@ -143,54 +150,55 @@ ...@@ -143,54 +150,55 @@
color: @navbar-inverse-link-color-active; color: @navbar-inverse-link-color-active;
background-color: @navbar-inverse-link-bg-active; background-color: @navbar-inverse-link-bg-active;
} }
.btn-navbar { .btn-navbar {
background-color: #444; background-color: #444;
} }
}
.divider-vertical {
// border-left-color: darken(@navbar-inverse-bg, 5%);
// Navbar alignment options border-right-color: lighten(@navbar-inverse-bg, 5%);
// -------------------------------------------------- }
// Static navbar
.navbar-static-top {
position: static;
border-radius: 0;
} }
// Fixed navbar
.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; }
// // Inverse navbar
// Navbar optional components
// -------------------------------------------------- // --------------------------------------------------
// Dividers in navbar @media screen and (min-width: 768px) {
.navbar .divider-vertical { .navbar {
height: 26px; padding-top: 0;
margin: 7px 9px; padding-bottom: 0;
border-left: 1px solid darken(@navbar-bg, 5%); }
border-right: 1px solid lighten(@navbar-bg, 5%); .navbar .brand {
} float: left;
padding-top: (@navbar-height - @line-height-base) / 2;
// Navbar form padding-bottom: (@navbar-height - @line-height-base) / 2;
.navbar-form { margin-left: -15px;
.navbar-vertical-align(32px); // Vertically center in navbar }
} .navbar .nav {
float: left;
margin-top: 0; // undo top margin to make nav extend full height of navbar
.clear_float();
&.pull-right {
float: right;
}
}
.navbar .nav > li {
float: left;
}
// Required to make the collapsing navbar work on regular desktops
.navbar .btn-navbar {
display: none;
}
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
/* /*
......
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