Commit a30045da authored by Mark Otto's avatar Mark Otto

reverse navbar styles to save code

parent fe6a4b0b
......@@ -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);
......
This diff is collapsed.
......@@ -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 {
......
......@@ -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>
......
......@@ -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>
......
......@@ -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">
......
......@@ -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">
......
......@@ -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">
......
......@@ -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">
......
......@@ -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">
......
......@@ -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">
......
......@@ -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">
......
......@@ -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>
......
......@@ -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>
......
......@@ -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">
......
......@@ -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";
......
......@@ -107,6 +107,9 @@
padding-right: 0;
.box-sizing(border-box);
}
.btn-block + .btn-block {
margin-top: 5px;
}
// Alternate buttons
......
......@@ -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
......
This diff is collapsed.
......@@ -483,5 +483,3 @@
-moz-border-radius: 0;
border-radius: 0;
}
......@@ -155,15 +155,16 @@
// Navbar
// -------------------------
@navbarHeight: 40px;
@navbarBackground: #111;
@navbarBackgroundHighlight: #222;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;
@navbarLinkColorHover: @white;
@navbarLinkColorActive: @navbarLinkColorHover;
@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
@navbarBackgroundHighlight: #ffffff;
@navbarBorder: darken(@navbarBackground, 12%);
@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
// -------------------------
......
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