rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

reverse navbar styles to save code

Browse Source
This commit is contained in:
Mark Otto 2012-07-29 00:30:15 -07:00
parent fe6a4b0b54
commit a30045daef
21 changed files with 637 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -935,14 +935,14 @@
display: none;
}
.nav-collapse .nav .nav-header {
color: #999999;
color: #555555;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
color: #999999;
color: #555555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
@ -959,7 +959,7 @@
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #111111;
background-color: #f2f2f2;
}
.nav-collapse.in .btn-group {
padding: 0;
@ -995,8 +995,8 @@
float: none;
padding: 10px 15px;
margin: 10px 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #111111;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);

404
docs/assets/css/bootstrap.css vendored
View File

@ -2614,8 +2614,6 @@ table .span24 {
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
opacity: 0.3;
filter: alpha(opacity=30);
}
.dropdown .caret {
@ -2623,17 +2621,6 @@ table .span24 {
margin-left: 2px;
}
.dropdown a:focus .caret,
.dropdown a:hover .caret,
.open .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar .nav .open > a {
color: #ffffff;
}
.dropdown-menu {
position: absolute;
top: 100%;
@ -2643,7 +2630,7 @@ table .span24 {
float: left;
min-width: 160px;
padding: 5px 0;
margin: 1px 0 0;
margin: 2px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ccc;
@ -3029,6 +3016,10 @@ button.close {
box-sizing: border-box;
}
.btn-block + .btn-block {
margin-top: 5px;
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
@ -3982,26 +3973,28 @@ input[type="submit"].btn.btn-mini {
*z-index: 2;
margin-bottom: 20px;
overflow: visible;
color: #555555;
}
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-color: #fafafa;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.navbar .container {
@ -4012,36 +4005,32 @@ input[type="submit"].btn.btn-mini {
height: auto;
}
.navbar {
color: #999999;
.navbar .brand {
display: block;
float: left;
padding: 10px 20px 10px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #555555;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .brand:hover {
text-decoration: none;
}
.navbar .brand {
display: block;
float: left;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: #999999;
}
.navbar .navbar-text {
.navbar-text {
margin-bottom: 0;
line-height: 40px;
}
.navbar .navbar-link {
color: #999999;
.navbar-link {
color: #555555;
}
.navbar .navbar-link:hover {
color: #ffffff;
.navbar-link:hover {
color: #333333;
}
.navbar .btn,
@ -4114,19 +4103,9 @@ input[type="submit"].btn.btn-mini {
font-size: 13px;
font-weight: normal;
line-height: 1;
color: #ffffff;
background-color: #515151;
border: 1px solid #040404;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.navbar-search .search-query:-moz-placeholder {
@ -4141,19 +4120,6 @@ input[type="submit"].btn.btn-mini {
color: #cccccc;
}
.navbar-search .search-query:focus,
.navbar-search .search-query.focused {
padding: 5px 15px;
color: #333333;
text-shadow: 0 1px 0 #ffffff;
background-color: #ffffff;
border: 0;
outline: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
@ -4179,6 +4145,10 @@ input[type="submit"].btn.btn-mini {
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-top .navbar-inner {
border-width: 0 0 1px;
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
@ -4186,6 +4156,10 @@ input[type="submit"].btn.btn-mini {
.navbar-fixed-bottom {
bottom: 0;
}
.navbar-fixed-bottom .navbar-inner {
border-width: 1px 0 0;
-webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
@ -4209,32 +4183,19 @@ input[type="submit"].btn.btn-mini {
.navbar .nav > li > a {
float: none;
padding: 10px 15px 11px;
line-height: 19px;
color: #999999;
padding: 10px 15px 10px;
color: #555555;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
.navbar .btn {
display: inline-block;
padding: 4px 10px 4px;
margin: 5px 5px 6px;
line-height: 20px;
}
.navbar .btn-group {
padding: 5px 5px 6px;
margin: 0;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #ffffff;
color: #333333;
text-decoration: none;
background-color: transparent;
}
@ -4242,23 +4203,12 @@ input[type="submit"].btn.btn-mini {
.navbar .nav .active > a,
.navbar .nav .active > a:hover,
.navbar .nav .active > a:focus {
color: #ffffff;
color: #555555;
text-decoration: none;
background-color: #111111;
}
.navbar .divider-vertical {
width: 1px;
height: 40px;
margin: 0 9px;
overflow: hidden;
background-color: #111111;
border-right: 1px solid #222222;
}
.navbar .nav.pull-right {
margin-right: 0;
margin-left: 10px;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.navbar .btn-navbar {
@ -4269,17 +4219,17 @@ input[type="submit"].btn.btn-mini {
margin-left: 5px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e0e0e;
*background-color: #040404;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
background-image: -webkit-linear-gradient(top, #151515, #040404);
background-image: -o-linear-gradient(top, #151515, #040404);
background-image: linear-gradient(to bottom, #151515, #040404);
background-image: -moz-linear-gradient(top, #151515, #040404);
background-color: #ededed;
*background-color: #e5e5e5;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
background-repeat: repeat-x;
border-color: #040404 #040404 #000000;
border-color: #e5e5e5 #e5e5e5 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
@ -4292,13 +4242,13 @@ input[type="submit"].btn.btn-mini {
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
color: #ffffff;
background-color: #040404;
*background-color: #000000;
background-color: #e5e5e5;
*background-color: #d9d9d9;
}
.navbar .btn-navbar:active,
.navbar .btn-navbar.active {
background-color: #000000 \9;
background-color: #cccccc \9;
}
.navbar .btn-navbar .icon-bar {
@ -4356,26 +4306,23 @@ input[type="submit"].btn.btn-mini {
border-bottom: 0;
}
.navbar .nav li.dropdown .dropdown-toggle .caret,
.navbar .nav li.dropdown.open .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar .nav li.dropdown.active .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
color: #555555;
background-color: #e5e5e5;
}
.navbar .nav li.dropdown.active > .dropdown-toggle:focus,
.navbar .nav li.dropdown.active > .dropdown-toggle:hover {
color: #ffffff;
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.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 .dropdown-menu,
@ -4396,150 +4343,109 @@ input[type="submit"].btn.btn-mini {
left: auto;
}
/* Subnav navbar
-------------------------------------------------- */
.navbar-inverse {
color: #999999;
}
.navbar-subnav .navbar-inner {
padding-right: 10px;
padding-left: 10px;
background-color: #f9f9f9;
background-image: -webkit-linear-gradient(top, #ffffff, #f1f1f1);
background-image: linear-gradient(to bottom, #ffffff, #f1f1f1);
background-image: -moz-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -o-linear-gradient(top, #ffffff, #f1f1f1);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f1f1f1));
.navbar-inverse .navbar-inner {
background-color: #1b1b1b;
background-image: -moz-linear-gradient(top, #222222, #111111);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
background-image: -webkit-linear-gradient(top, #222222, #111111);
background-image: -o-linear-gradient(top, #222222, #111111);
background-image: linear-gradient(to bottom, #222222, #111111);
background-repeat: repeat-x;
border: 1px solid #e5e5e5;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #252525;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}
.navbar-subnav .divider-vertical {
background-color: #f1f1f1;
border-right-color: #ffffff;
}
.navbar-subnav .nav > li > a {
color: #0088cc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.navbar-subnav .nav > li > a:hover {
color: #005580;
}
.navbar-subnav .nav > .active > a,
.navbar-subnav .nav > .active > a:hover {
color: #777;
background-color: #eee;
-webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5), 1px 0 0 rgba(255, 255, 255, 0.5);
}
.navbar-subnav .nav li.dropdown .dropdown-toggle .caret,
.navbar-subnav .nav li.dropdown.open .caret {
border-top-color: #0088cc;
border-bottom-color: #0088cc;
}
.navbar-subnav .search-query {
background-color: #fff;
border-color: #ccc;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-subnav .search-query:focus,
.navbar-subnav .search-query.focused {
padding: 4px 9px;
border: 1px solid rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
.navbar-subnav .nav .open > a {
color: #005580;
}
.navbar-subnav .btn-navbar {
color: #ffffff;
.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
color: #999999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ededed;
*background-color: #e4e4e4;
background-image: -moz-linear-gradient(top, #f2f2f2, #e4e4e4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e4e4e4));
background-image: -webkit-linear-gradient(top, #f2f2f2, #e4e4e4);
background-image: -o-linear-gradient(top, #f2f2f2, #e4e4e4);
background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
background-repeat: repeat-x;
border-color: #e4e4e4 #e4e4e4 #bebebe;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe4e4e4', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.navbar-subnav .btn-navbar:hover,
.navbar-subnav .btn-navbar:active,
.navbar-subnav .btn-navbar.active,
.navbar-subnav .btn-navbar.disabled,
.navbar-subnav .btn-navbar[disabled] {
.navbar-inverse .brand:hover,
.navbar-inverse .nav > li > a:hover {
color: #ffffff;
background-color: #e4e4e4;
*background-color: #d7d7d7;
}
.navbar-subnav .btn-navbar:active,
.navbar-subnav .btn-navbar.active {
background-color: #cbcbcb \9;
.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
color: #ffffff;
background-color: transparent;
}
.navbar .btn-navbar .icon-bar {
background-color: #999;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
color: #ffffff;
background-color: #111111;
}
.navbar-subnav-fixed {
position: fixed;
top: 40px;
right: 0;
left: 0;
z-index: 1020;
-webkit-box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1);
.navbar-inverse .navbar-link {
color: #999999;
}
.navbar-subnav-fixed .navbar-inner {
border-color: #d5d5d5;
border-width: 0 0 1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
.navbar-inverse .navbar-link:hover {
color: #ffffff;
}
.navbar-subnav-fixed .nav {
float: none;
max-width: 970px;
padding: 0 1px;
margin: 0 auto;
.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 {
color: #ffffff;
background-color: #111111;
}
.navbar-subnav .nav > li:first-child > a,
.navbar-subnav .nav > li:first-child > a:hover {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
.navbar-inverse .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 {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-inverse .navbar-search .search-query {
color: #ffffff;
background-color: #515151;
border-color: #111111;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.navbar-inverse .navbar-search .search-query:-moz-placeholder {
color: #cccccc;
}
.navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
color: #cccccc;
}
.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
color: #cccccc;
}
.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
padding: 5px 15px;
color: #333333;
text-shadow: 0 1px 0 #ffffff;
background-color: #ffffff;
border: 0;
outline: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.breadcrumb {

6
docs/assets/css/docs.css
View File

@ -13,7 +13,6 @@
body {
position: relative;
padding-top: 40px;
font-size: 14px;
}
/* Code in headings */
@ -29,10 +28,10 @@ h3 code {
body > .navbar-fixed-top {
font-size: 13px;
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.15);
/* -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.15);
-moz-box-shadow: 0 5px 15px rgba(0,0,0,.15);
box-shadow: 0 5px 15px rgba(0,0,0,.15);
}
*/}
/* Change the docs' brand */
body > .navbar-fixed-top .brand {
@ -598,6 +597,7 @@ h2 + .row {
z-index: 1;
padding: 0;
height: 90px;
overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {

5
docs/base-css.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@ -1462,7 +1462,8 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</pre>
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example">
<div class="well" style="max-width: 400px; margin: 0 auto;">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-large btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-large btn-block">Block level button</button>
</div>
</div>

9
docs/components.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@ -1246,10 +1246,10 @@
<hr class="bs-docs-separator">
<h2>Subnav variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-subnav</code>. Perfect for a secondary nav, or just a replacement to the default dark navbar.</p>
<h2>Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-docs-example">
<div class="navbar navbar-subnav" style="position: static;">
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
@ -1257,6 +1257,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>

2
docs/customize.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

2
docs/extend.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

2
docs/getting-started.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

2
docs/index.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

2
docs/javascript.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

2
docs/scaffolding.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

2
docs/templates/layout.mustache vendored
View File

@ -43,7 +43,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

3
docs/templates/pages/base-css.mustache vendored
View File

@ -1399,7 +1399,8 @@
</pre>
<p>{{_i}}Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.{{/i}}</p>
<div class="bs-docs-example">
<div class="well" style="max-width: 400px; margin: 0 auto;">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-large btn-primary btn-block">{{_i}}Block level button{{/i}}</button>
<button type="button" class="btn btn-large btn-block">{{_i}}Block level button{{/i}}</button>
</div>
</div>

7
docs/templates/pages/components.mustache vendored
View File

@ -1175,10 +1175,10 @@
<hr class="bs-docs-separator">
<h2>{{_i}}Subnav variation{{/i}}</h2>
<p>{{_i}}Modify the look of the navbar by adding <code>.navbar-subnav</code>. Perfect for a secondary nav, or just a replacement to the default dark navbar.{{/i}}</p>
<h2>{{_i}}Inverted variation{{/i}}</h2>
<p>{{_i}}Modify the look of the navbar by adding <code>.navbar-inverse</code>.{{/i}}</p>
<div class="bs-docs-example">
<div class="navbar navbar-subnav" style="position: static;">
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".subnav-collapse">
@ -1186,6 +1186,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
<div class="nav-collapse subnav-collapse">
<ul class="nav">
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>

2
docs/upgrading.html
View File

@ -31,7 +31,7 @@
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

3
less/bootstrap.less vendored
View File

@ -40,7 +40,8 @@
// Components: Nav
@import "navs.less";
@import "navbar.less";
//@import "navbar.less";
@import "navbar-redux.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";

3
less/buttons.less
View File

@ -107,6 +107,9 @@
padding-right: 0;
.box-sizing(border-box);
}
.btn-block + .btn-block {
margin-top: 5px;
}
// Alternate buttons

12
less/dropdowns.less
View File

@ -28,7 +28,6 @@
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
.opacity(30);
}
// Place the caret
@ -36,15 +35,6 @@
margin-top: 8px;
margin-left: 2px;
}
.dropdown a:focus .caret,
.dropdown a:hover .caret,
.open .caret {
.opacity(100);
}
.navbar .nav .open > a {
color: @navbarLinkColorActive;
}
// The dropdown menu (ul)
// ----------------------
@ -57,7 +47,7 @@
float: left;
min-width: 160px;
padding: 5px 0;
margin: 1px 0 0; // override default ul
margin: 2px 0 0; // override default ul
list-style: none;
background-color: @dropdownBackground;
border: 1px solid #ccc; // Fallback for IE7-8

418
less/navbar-redux.less Normal file
View File

@ -0,0 +1,418 @@
//
// Navbars (Redux)
// --------------------------------------------------
// COMMON STYLES
// -------------
// Base class and wrapper
.navbar {
overflow: visible;
margin-bottom: @baseLineHeight;
color: @navbarText;
// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
*position: relative;
*z-index: 2;
}
// Inner for background effects
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
min-height: @navbarHeight;
padding-left: 20px;
padding-right: 20px;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
border: 1px solid @navbarBorder;
.border-radius(4px);
.box-shadow(0 1px 4px rgba(0,0,0,.065));
}
// Set width to auto for default container
// We then reset it for fixed navbars in the #gridSystem mixin
.navbar .container {
width: auto;
}
// Override the default collapsed state
.nav-collapse.collapse {
height: auto;
}
// Brand: website or project name
// -------------------------
.navbar .brand {
float: left;
display: block;
// Vertically center the text given @navbarHeight
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2);
margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px;
font-weight: 200;
color: @navbarBrandColor;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
&:hover {
text-decoration: none;
}
}
// Plain text in topbar
// -------------------------
.navbar-text {
margin-bottom: 0;
line-height: @navbarHeight;
}
// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link {
color: @navbarLinkColor;
&:hover {
color: @navbarLinkColorHover;
}
}
// Buttons in navbar
// -------------------------
.navbar .btn,
.navbar .btn-group {
.navbarVerticalAlign(28px); // Vertically center in navbar
}
.navbar .btn-group .btn {
margin: 0; // then undo the margin here so we don't accidentally double it
}
// Navbar forms
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(28px); // Vertically center in navbar
}
input,
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 6px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
}
// Navbar search
.navbar-search {
position: relative;
float: left;
.navbarVerticalAlign(30px); // Vertically center in navbar
margin-bottom: 0;
.search-query {
margin-bottom: 0;
padding: 4px 14px;
#font > .sans-serif(13px, normal, 1);
.border-radius(15px); // redeclare because of specificity of the type attribute
.placeholder(@navbarSearchPlaceholderColor);
}
}
// FIXED NAVBAR
// ------------
// Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for static navbar
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}
// Fixed to top
.navbar-fixed-top {
top: 0;
.navbar-inner {
border-width: 0 0 1px;
.box-shadow(0 1px 10px rgba(0,0,0,.1));
}
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
.navbar-inner {
border-width: 1px 0 0;
.box-shadow(0 -1px 10px rgba(0,0,0,.1));
}
}
// NAVIGATION
// ----------
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
float: right; // redeclare due to specificity
}
.navbar .nav > li {
float: left;
}
// Links
.navbar .nav > li > a {
float: none;
// Vertically center the text given @navbarHeight
@elementHeight: 20px;
padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2);
color: @navbarLinkColor;
text-decoration: none;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}
.navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
}
// Hover
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
color: @navbarLinkColorHover;
text-decoration: none;
}
// Active nav items
.navbar .nav .active > a,
.navbar .nav .active > a:hover,
.navbar .nav .active > a:focus {
color: @navbarLinkColorActive;
text-decoration: none;
background-color: @navbarLinkBackgroundActive;
-webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
}
// Navbar button for toggling navbar items in responsive layouts
// These definitions need to come after '.navbar .btn'
.navbar .btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 5px;
margin-right: 5px;
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
}
.navbar .btn-navbar .icon-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5;
.border-radius(1px);
.box-shadow(0 1px 0 rgba(0,0,0,.25));
}
.btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
}
// Dropdown menus
// --------------
// Menu position and menu carets
.navbar .dropdown-menu {
&:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: @dropdownBorder;
position: absolute;
top: -7px;
left: 9px;
}
&:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @dropdownBackground;
position: absolute;
top: -6px;
left: 10px;
}
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .dropdown-menu {
&:before {
border-top: 7px solid #ccc;
border-top-color: @dropdownBorder;
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid @dropdownBackground;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbarLinkBackgroundActive;
color: @navbarLinkColorActive;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbarLinkColor;
border-bottom-color: @navbarLinkColor;
}
.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: @navbarLinkColorActive;
border-bottom-color: @navbarLinkColorActive;
}
// Right aligned menus need alt position
.navbar .pull-right .dropdown-menu,
.navbar .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {
left: auto;
right: 12px;
}
&:after {
left: auto;
right: 13px;
}
}
// Inverted navbar
// -------------------------
.navbar-inverse {
color: @navbarInverseText;
.navbar-inner {
#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
border-color: @navbarInverseBorder;
}
.brand,
.nav > li > a {
color: @navbarInverseLinkColor;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover {
color: @navbarInverseLinkColorHover;
}
}
.nav > li > a:focus,
.nav > li > a:hover {
background-color: @navbarInverseLinkBackgroundHover;
color: @navbarInverseLinkColorHover;
}
.nav .active > a,
.nav .active > a:hover,
.nav .active > a:focus {
color: @navbarInverseLinkColorActive;
background-color: @navbarInverseLinkBackgroundActive;
}
.navbar-link {
color: @navbarInverseLinkColor;
&:hover {
color: @navbarInverseLinkColorHover;
}
}
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbarInverseLinkBackgroundActive;
color: @navbarInverseLinkColorActive;
}
.nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbarInverseLinkColor;
border-bottom-color: @navbarInverseLinkColor;
}
.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: @navbarInverseLinkColorActive;
border-bottom-color: @navbarInverseLinkColorActive;
}
// Navbar search
.navbar-search {
.search-query {
color: @white;
background-color: @navbarInverseSearchBackground;
border-color: @navbarInverseSearchBorder;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
.transition(none);
.placeholder(@navbarInverseSearchPlaceholderColor);
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 15px;
color: @grayDark;
text-shadow: 0 1px 0 @white;
background-color: @navbarInverseSearchBackgroundFocus;
border: 0;
.box-shadow(0 0 3px rgba(0,0,0,.15));
outline: 0;
}
}
}
}

2
less/navbar.less
View File

@ -483,5 +483,3 @@
-moz-border-radius: 0;
border-radius: 0;
}

35
less/variables.less
View File

@ -155,15 +155,16 @@
// Navbar
// -------------------------
@navbarHeight: 40px;
@navbarBackground: #111;
@navbarBackgroundHighlight: #222;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBackgroundHighlight: #ffffff;
@navbarBorder: darken(@navbarBackground, 12%);
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;
@navbarLinkColorHover: @white;
@navbarLinkColorActive: @navbarLinkColorHover;
@navbarText: @gray;
@navbarLinkColor: @gray;
@navbarLinkColorHover: @grayDark;
@navbarLinkColorActive: @gray;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: @navbarBackground;
@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
@navbarSearchBackground: lighten(@navbarBackground, 25%);
@navbarSearchBackgroundFocus: @white;
@ -171,6 +172,26 @@
@navbarSearchPlaceholderColor: #ccc;
@navbarBrandColor: @navbarLinkColor;
// Inverted navbar
@navbarInverseBackground: #111111;
@navbarInverseBackgroundHighlight: #222222;
@navbarInverseBorder: #252525;
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;
@navbarInverseLinkColorHover: @white;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
@navbarInverseSearchBackgroundFocus: @white;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;
@navbarInverseBrandColor: @navbarInverseLinkColor;
// Hero unit
// -------------------------