Commit c59e5251 authored by Mark Otto's avatar Mark Otto
Browse files

initial pass at removing navbar-inner from .navbar component

parent f12946be
Showing with 604 additions and 727 deletions
+604 -727
...@@ -590,8 +590,8 @@ ...@@ -590,8 +590,8 @@
.navbar-fixed-bottom { .navbar-fixed-bottom {
margin-top: 20px; margin-top: 20px;
} }
.navbar-fixed-top .navbar-inner, .navbar-fixed-top,
.navbar-fixed-bottom .navbar-inner { .navbar-fixed-bottom {
padding: 5px; padding: 5px;
} }
.navbar .container { .navbar .container {
...@@ -711,7 +711,7 @@ ...@@ -711,7 +711,7 @@
.navbar .btn-navbar { .navbar .btn-navbar {
display: block; display: block;
} }
.navbar-static .navbar-inner { .navbar-static {
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;
} }
......
...@@ -4046,40 +4046,28 @@ input[type="submit"].btn::-moz-focus-inner { ...@@ -4046,40 +4046,28 @@ input[type="submit"].btn::-moz-focus-inner {
} }
.navbar { .navbar {
padding: 0 20px;
margin-bottom: 20px; margin-bottom: 20px;
overflow: visible; overflow: visible;
color: #777777; color: #777777;
} background-color: #f2f2f2;
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
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; border: 1px solid #d4d4d4;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-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); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
} }
.navbar-inner:before, .navbar:before,
.navbar-inner:after { .navbar:after {
display: table; display: table;
line-height: 0; line-height: 0;
content: ""; content: "";
} }
.navbar-inner:after { .navbar:after {
clear: both; clear: both;
} }
...@@ -4206,9 +4194,6 @@ input[type="submit"].btn::-moz-focus-inner { ...@@ -4206,9 +4194,6 @@ input[type="submit"].btn::-moz-focus-inner {
.navbar-static-top { .navbar-static-top {
position: static; position: static;
margin-bottom: 0; margin-bottom: 0;
}
.navbar-static-top .navbar-inner {
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
...@@ -4220,27 +4205,19 @@ input[type="submit"].btn::-moz-focus-inner { ...@@ -4220,27 +4205,19 @@ input[type="submit"].btn::-moz-focus-inner {
right: 0; right: 0;
left: 0; left: 0;
z-index: 1030; z-index: 1030;
margin-bottom: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-right: 0; padding-right: 0;
padding-left: 0; padding-left: 0;
margin-bottom: 0;
border-width: 0 0 1px;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
} }
.navbar-fixed-bottom {
border-width: 1px 0 0;
}
.navbar-static-top .container, .navbar-static-top .container,
.navbar-fixed-top .container, .navbar-fixed-top .container,
.navbar-fixed-bottom .container { .navbar-fixed-bottom .container {
...@@ -4251,8 +4228,8 @@ input[type="submit"].btn::-moz-focus-inner { ...@@ -4251,8 +4228,8 @@ input[type="submit"].btn::-moz-focus-inner {
top: 0; top: 0;
} }
.navbar-fixed-top .navbar-inner, .navbar-fixed-top,
.navbar-static-top .navbar-inner { .navbar-static-top {
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
...@@ -4260,9 +4237,6 @@ input[type="submit"].btn::-moz-focus-inner { ...@@ -4260,9 +4237,6 @@ input[type="submit"].btn::-moz-focus-inner {
.navbar-fixed-bottom { .navbar-fixed-bottom {
bottom: 0; bottom: 0;
}
.navbar-fixed-bottom .navbar-inner {
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 10px rgba(0, 0, 0, 0.1);
...@@ -4459,18 +4433,8 @@ input[type="submit"].btn::-moz-focus-inner { ...@@ -4459,18 +4433,8 @@ input[type="submit"].btn::-moz-focus-inner {
.navbar-inverse { .navbar-inverse {
color: #999999; color: #999999;
} background-color: #111111;
.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-color: #252525; border-color: #252525;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
} }
.navbar-inverse .brand, .navbar-inverse .brand,
......
...@@ -28,6 +28,7 @@ h3 code { ...@@ -28,6 +28,7 @@ h3 code {
body > .navbar { body > .navbar {
font-size: 13px; font-size: 13px;
background-color: rgba(0,0,0,.9);
} }
/* Change the docs' brand */ /* Change the docs' brand */
......
...@@ -32,39 +32,37 @@ ...@@ -32,39 +32,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="">
<li class=""> <a href="./index.html">Home</a>
<a href="./index.html">Home</a> </li>
</li> <li class="">
<li class=""> <a href="./getting-started.html">Get started</a>
<a href="./getting-started.html">Get started</a> </li>
</li> <li class="">
<li class=""> <a href="./scaffolding.html">Scaffolding</a>
<a href="./scaffolding.html">Scaffolding</a> </li>
</li> <li class="active">
<li class="active"> <a href="./base-css.html">Base CSS</a>
<a href="./base-css.html">Base CSS</a> </li>
</li> <li class="">
<li class=""> <a href="./components.html">Components</a>
<a href="./components.html">Components</a> </li>
</li> <li class="">
<li class=""> <a href="./javascript.html">JavaScript</a>
<a href="./javascript.html">JavaScript</a> </li>
</li> <li class="">
<li class=""> <a href="./customize.html">Customize</a>
<a href="./customize.html">Customize</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
This diff is collapsed.
...@@ -32,39 +32,37 @@ ...@@ -32,39 +32,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="">
<li class=""> <a href="./index.html">Home</a>
<a href="./index.html">Home</a> </li>
</li> <li class="">
<li class=""> <a href="./getting-started.html">Get started</a>
<a href="./getting-started.html">Get started</a> </li>
</li> <li class="">
<li class=""> <a href="./scaffolding.html">Scaffolding</a>
<a href="./scaffolding.html">Scaffolding</a> </li>
</li> <li class="">
<li class=""> <a href="./base-css.html">Base CSS</a>
<a href="./base-css.html">Base CSS</a> </li>
</li> <li class="">
<li class=""> <a href="./components.html">Components</a>
<a href="./components.html">Components</a> </li>
</li> <li class="">
<li class=""> <a href="./javascript.html">JavaScript</a>
<a href="./javascript.html">JavaScript</a> </li>
</li> <li class="active">
<li class="active"> <a href="./customize.html">Customize</a>
<a href="./customize.html">Customize</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -32,39 +32,37 @@ ...@@ -32,39 +32,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="">
<li class=""> <a href="./index.html">Home</a>
<a href="./index.html">Home</a> </li>
</li> <li class="">
<li class=""> <a href="./getting-started.html">Get started</a>
<a href="./getting-started.html">Get started</a> </li>
</li> <li class="">
<li class=""> <a href="./scaffolding.html">Scaffolding</a>
<a href="./scaffolding.html">Scaffolding</a> </li>
</li> <li class="">
<li class=""> <a href="./base-css.html">Base CSS</a>
<a href="./base-css.html">Base CSS</a> </li>
</li> <li class="">
<li class=""> <a href="./components.html">Components</a>
<a href="./components.html">Components</a> </li>
</li> <li class="">
<li class=""> <a href="./javascript.html">JavaScript</a>
<a href="./javascript.html">JavaScript</a> </li>
</li> <li class="">
<li class=""> <a href="./customize.html">Customize</a>
<a href="./customize.html">Customize</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -32,39 +32,37 @@ ...@@ -32,39 +32,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="">
<li class=""> <a href="./index.html">Home</a>
<a href="./index.html">Home</a> </li>
</li> <li class="active">
<li class="active"> <a href="./getting-started.html">Get started</a>
<a href="./getting-started.html">Get started</a> </li>
</li> <li class="">
<li class=""> <a href="./scaffolding.html">Scaffolding</a>
<a href="./scaffolding.html">Scaffolding</a> </li>
</li> <li class="">
<li class=""> <a href="./base-css.html">Base CSS</a>
<a href="./base-css.html">Base CSS</a> </li>
</li> <li class="">
<li class=""> <a href="./components.html">Components</a>
<a href="./components.html">Components</a> </li>
</li> <li class="">
<li class=""> <a href="./javascript.html">JavaScript</a>
<a href="./javascript.html">JavaScript</a> </li>
</li> <li class="">
<li class=""> <a href="./customize.html">Customize</a>
<a href="./customize.html">Customize</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -32,39 +32,37 @@ ...@@ -32,39 +32,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="active">
<li class="active"> <a href="./index.html">Home</a>
<a href="./index.html">Home</a> </li>
</li> <li class="">
<li class=""> <a href="./getting-started.html">Get started</a>
<a href="./getting-started.html">Get started</a> </li>
</li> <li class="">
<li class=""> <a href="./scaffolding.html">Scaffolding</a>
<a href="./scaffolding.html">Scaffolding</a> </li>
</li> <li class="">
<li class=""> <a href="./base-css.html">Base CSS</a>
<a href="./base-css.html">Base CSS</a> </li>
</li> <li class="">
<li class=""> <a href="./components.html">Components</a>
<a href="./components.html">Components</a> </li>
</li> <li class="">
<li class=""> <a href="./javascript.html">JavaScript</a>
<a href="./javascript.html">JavaScript</a> </li>
</li> <li class="">
<li class=""> <a href="./customize.html">Customize</a>
<a href="./customize.html">Customize</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -32,39 +32,37 @@ ...@@ -32,39 +32,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="">
<li class=""> <a href="./index.html">Home</a>
<a href="./index.html">Home</a> </li>
</li> <li class="">
<li class=""> <a href="./getting-started.html">Get started</a>
<a href="./getting-started.html">Get started</a> </li>
</li> <li class="">
<li class=""> <a href="./scaffolding.html">Scaffolding</a>
<a href="./scaffolding.html">Scaffolding</a> </li>
</li> <li class="">
<li class=""> <a href="./base-css.html">Base CSS</a>
<a href="./base-css.html">Base CSS</a> </li>
</li> <li class="">
<li class=""> <a href="./components.html">Components</a>
<a href="./components.html">Components</a> </li>
</li> <li class="active">
<li class="active"> <a href="./javascript.html">JavaScript</a>
<a href="./javascript.html">JavaScript</a> </li>
</li> <li class="">
<li class=""> <a href="./customize.html">Customize</a>
<a href="./customize.html">Customize</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -32,39 +32,37 @@ ...@@ -32,39 +32,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="">
<li class=""> <a href="./index.html">Home</a>
<a href="./index.html">Home</a> </li>
</li> <li class="">
<li class=""> <a href="./getting-started.html">Get started</a>
<a href="./getting-started.html">Get started</a> </li>
</li> <li class="active">
<li class="active"> <a href="./scaffolding.html">Scaffolding</a>
<a href="./scaffolding.html">Scaffolding</a> </li>
</li> <li class="">
<li class=""> <a href="./base-css.html">Base CSS</a>
<a href="./base-css.html">Base CSS</a> </li>
</li> <li class="">
<li class=""> <a href="./components.html">Components</a>
<a href="./components.html">Components</a> </li>
</li> <li class="">
<li class=""> <a href="./javascript.html">JavaScript</a>
<a href="./javascript.html">JavaScript</a> </li>
</li> <li class="">
<li class=""> <a href="./customize.html">Customize</a>
<a href="./customize.html">Customize</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -44,39 +44,37 @@ ...@@ -44,39 +44,37 @@
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> </button>
</button> <a class="brand" href="./index.html">Bootstrap</a>
<a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse">
<div class="nav-collapse collapse"> <ul class="nav">
<ul class="nav"> <li class="{{index}}">
<li class="{{index}}"> <a href="./index.html">{{_i}}Home{{/i}}</a>
<a href="./index.html">{{_i}}Home{{/i}}</a> </li>
</li> <li class="{{getting-started}}">
<li class="{{getting-started}}"> <a href="./getting-started.html">{{_i}}Get started{{/i}}</a>
<a href="./getting-started.html">{{_i}}Get started{{/i}}</a> </li>
</li> <li class="{{scaffolding}}">
<li class="{{scaffolding}}"> <a href="./scaffolding.html">{{_i}}Scaffolding{{/i}}</a>
<a href="./scaffolding.html">{{_i}}Scaffolding{{/i}}</a> </li>
</li> <li class="{{base-css}}">
<li class="{{base-css}}"> <a href="./base-css.html">{{_i}}Base CSS{{/i}}</a>
<a href="./base-css.html">{{_i}}Base CSS{{/i}}</a> </li>
</li> <li class="{{components}}">
<li class="{{components}}"> <a href="./components.html">{{_i}}Components{{/i}}</a>
<a href="./components.html">{{_i}}Components{{/i}}</a> </li>
</li> <li class="{{javascript}}">
<li class="{{javascript}}"> <a href="./javascript.html">{{_i}}JavaScript{{/i}}</a>
<a href="./javascript.html">{{_i}}JavaScript{{/i}}</a> </li>
</li> <li class="{{customize}}">
<li class="{{customize}}"> <a href="./customize.html">{{_i}}Customize{{/i}}</a>
<a href="./customize.html">{{_i}}Customize{{/i}}</a> </li>
</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
This diff is collapsed.
...@@ -9,17 +9,10 @@ ...@@ -9,17 +9,10 @@
// Base class and wrapper // Base class and wrapper
.navbar { .navbar {
overflow: visible; overflow: visible;
padding: 0 20px;
margin-bottom: @baseLineHeight; margin-bottom: @baseLineHeight;
color: @navbarText; color: @navbarText;
} background-color: @navbarBackground;
// 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: 1px solid @navbarBorder;
.border-radius(4px); .border-radius(4px);
.box-shadow(0 1px 4px rgba(0,0,0,.065)); .box-shadow(0 1px 4px rgba(0,0,0,.065));
...@@ -150,9 +143,7 @@ ...@@ -150,9 +143,7 @@
.navbar-static-top { .navbar-static-top {
position: static; position: static;
margin-bottom: 0; // remove 18px margin for default navbar margin-bottom: 0; // remove 18px margin for default navbar
.navbar-inner { .border-radius(0);
.border-radius(0);
}
} }
...@@ -168,20 +159,14 @@ ...@@ -168,20 +159,14 @@
left: 0; left: 0;
z-index: @zindexFixedNavbar; z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for default navbar margin-bottom: 0; // remove 18px margin for default navbar
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
border-width: 0 0 1px; border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
.border-radius(0); .border-radius(0);
} }
.navbar-fixed-bottom {
border-width: 1px 0 0;
}
// Reset container width // Reset container width
// Required here as we reset the width earlier on and the grid mixins don't override early enough // Required here as we reset the width earlier on and the grid mixins don't override early enough
...@@ -197,17 +182,13 @@ ...@@ -197,17 +182,13 @@
} }
.navbar-fixed-top, .navbar-fixed-top,
.navbar-static-top { .navbar-static-top {
.navbar-inner { .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
}
} }
// Fixed to bottom // Fixed to bottom
.navbar-fixed-bottom { .navbar-fixed-bottom {
bottom: 0; bottom: 0;
.navbar-inner { .box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
.box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)");
}
} }
...@@ -376,11 +357,8 @@ ...@@ -376,11 +357,8 @@
.navbar-inverse { .navbar-inverse {
color: @navbarInverseText; color: @navbarInverseText;
background-color: @navbarInverseBackground;
.navbar-inner { border-color: @navbarInverseBorder;
#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
border-color: @navbarInverseBorder;
}
.brand, .brand,
.nav > li > a { .nav > li > a {
......
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
.navbar-fixed-bottom { .navbar-fixed-bottom {
margin-top: @baseLineHeight; margin-top: @baseLineHeight;
} }
.navbar-fixed-top .navbar-inner, .navbar-fixed-top,
.navbar-fixed-bottom .navbar-inner { .navbar-fixed-bottom {
padding: 5px; padding: 5px;
} }
.navbar .container { .navbar .container {
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
// STATIC NAVBAR // STATIC NAVBAR
// ------------- // -------------
.navbar-static .navbar-inner { .navbar-static {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
......
Supports Markdown
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