Skip to content

B
bootstrap
Commit 7b4e2a9a authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-navbar-default' of... 

Merge branch '3.0.0-navbar-default' of https://github.com/juthilo/bootstrap-wip into juthilo-3.0.0-navbar-default

Conflicts:
	dist/css/bootstrap.min.css
parents fe767a18 ef68cf8e
Show whitespace changes
Inline Side-by-side
Showing with 322 additions and 242 deletions
components.html
View file @ 7b4e2a9a
...@@ -1312,7 +1312,7 @@ base_url: "../" ...@@ -1312,7 +1312,7 @@ base_url: "../"
<h3>Tabs with dropdowns</h3> <h3>Tabs with dropdowns</h3>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li> <li><a href="#">Help</a></li>
...@@ -1400,7 +1400,7 @@ base_url: "../" ...@@ -1400,7 +1400,7 @@ base_url: "../"
</div> </div>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
...@@ -1450,7 +1450,7 @@ base_url: "../" ...@@ -1450,7 +1450,7 @@ base_url: "../"
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
...@@ -1514,7 +1514,7 @@ base_url: "../" ...@@ -1514,7 +1514,7 @@ base_url: "../"
<h2 id="navbar-buttons">Buttons</h2> <h2 id="navbar-buttons">Buttons</h2>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p> <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
...@@ -1537,7 +1537,7 @@ base_url: "../" ...@@ -1537,7 +1537,7 @@ base_url: "../"
<h2 id="navbar-text">Text</h2> <h2 id="navbar-text">Text</h2>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p> <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
...@@ -1560,7 +1560,7 @@ base_url: "../" ...@@ -1560,7 +1560,7 @@ base_url: "../"
<h2 id="navbar-links">Non-nav links</h2> <h2 id="navbar-links">Non-nav links</h2>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p> <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
...@@ -1588,7 +1588,7 @@ base_url: "../" ...@@ -1588,7 +1588,7 @@ base_url: "../"
<h2 id="navbar-fixed-top">Fixed to top</h2> <h2 id="navbar-fixed-top">Fixed to top</h2>
<p>Add <code>.navbar-fixed-top</code>.</p> <p>Add <code>.navbar-fixed-top</code>.</p>
<div class="bs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-fixed-top" role="navigation"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
...@@ -1611,7 +1611,7 @@ base_url: "../" ...@@ -1611,7 +1611,7 @@ base_url: "../"
</nav> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-fixed-top" role="navigation"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
... ...
</nav> </nav>
{% endhighlight %} {% endhighlight %}
...@@ -1629,7 +1629,7 @@ body { padding-top: 70px; } ...@@ -1629,7 +1629,7 @@ body { padding-top: 70px; }
<h2 id="navbar-fixed-bottom">Fixed to bottom</h2> <h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p> <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-example bs-navbar-bottom-example"> <div class="bs-example bs-navbar-bottom-example">
<nav class="navbar navbar-fixed-bottom" role="navigation"> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse">
...@@ -1652,7 +1652,7 @@ body { padding-top: 70px; } ...@@ -1652,7 +1652,7 @@ body { padding-top: 70px; }
</nav> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-fixed-bottom" role="navigation"> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
... ...
</nav> </nav>
{% endhighlight %} {% endhighlight %}
...@@ -1670,7 +1670,7 @@ body { padding-bottom: 70px; } ...@@ -1670,7 +1670,7 @@ body { padding-bottom: 70px; }
<h2 id="navbar-static-top">Static top</h2> <h2 id="navbar-static-top">Static top</h2>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p> <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-static-top" role="navigation"> <nav class="navbar navbar-default navbar-static-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse">
...@@ -1693,7 +1693,7 @@ body { padding-bottom: 70px; } ...@@ -1693,7 +1693,7 @@ body { padding-bottom: 70px; }
</nav> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-static-top" role="navigation"> <nav class="navbar navbar-default navbar-static-top" role="navigation">
... ...
</nav> </nav>
{% endhighlight %} {% endhighlight %}
......
customize.html
View file @ 7b4e2a9a
...@@ -710,41 +710,41 @@ base_url: "../" ...@@ -710,41 +710,41 @@ base_url: "../"
<input type="text" class="form-control" placeholder="50px" data-var="@navbar-height"> <input type="text" class="form-control" placeholder="50px" data-var="@navbar-height">
<label>@navbar-margin-bottom</label> <label>@navbar-margin-bottom</label>
<input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom"> <input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom">
<label>@navbar-color</label> <label>@navbar-default-color</label>
<input type="text" class="form-control" placeholder="#777" data-var="@navbar-color"> <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-color">
<label>@navbar-bg</label> <label>@navbar-default-bg</label>
<input type="text" class="form-control" placeholder="#eee" data-var="@navbar-bg"> <input type="text" class="form-control" placeholder="#eee" data-var="@navbar-default-bg">
<label>@navbar-border-radius</label> <label>@navbar-border-radius</label>
<input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius"> <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius">
<h4>Links</h4> <h4>Links</h4>
<label>@navbar-link-color</label> <label>@navbar-default-link-color</label>
<input type="text" class="form-control" placeholder="#777" data-var="@navbar-link-color"> <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-link-color">
<label>@navbar-link-hover-color</label> <label>@navbar-default-link-hover-color</label>
<input type="text" class="form-control" placeholder="#333" data-var="@navbar-link-hover-color"> <input type="text" class="form-control" placeholder="#333" data-var="@navbar-default-link-hover-color">
<label>@navbar-link-hover-bg</label> <label>@navbar-default-link-hover-bg</label>
<input type="text" class="form-control" placeholder="transparent" data-var="@navbar-link-hover-bg"> <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-hover-bg">
<label>@navbar-link-active-color</label> <label>@navbar-default-link-active-color</label>
<input type="text" class="form-control" placeholder="#555" data-var="@navbar-link-active-color"> <input type="text" class="form-control" placeholder="#555" data-var="@navbar-default-link-active-color">
<label>@navbar-link-active-bg</label> <label>@navbar-default-link-active-bg</label>
<input type="text" class="form-control" placeholder="darken(@navbar-bg, 10%)" data-var="@navbar-link-active-bg"> <input type="text" class="form-control" placeholder="darken(@navbar-bg, 10%)" data-var="@navbar-default-link-active-bg">
<label>@navbar-link-disabled-color</label> <label>@navbar-default-link-disabled-color</label>
<input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-link-disabled-color"> <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-link-disabled-color">
<label>@navbar-link-disabled-bg</label> <label>@navbar-default-link-disabled-bg</label>
<input type="text" class="form-control" placeholder="transparent" data-var="@navbar-link-disabled-bg"> <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-disabled-bg">
<h4>Brand</h4> <h4>Brand</h4>
<label>@navbar-brand-color</label> <label>@navbar-default-brand-color</label>
<input type="text" class="form-control" placeholder="@navbar-link-color" data-var="@navbar-brand-color"> <input type="text" class="form-control" placeholder="@navbar-link-color" data-var="@navbar-default-brand-color">
<label>@navbar-brand-hover-color</label> <label>@navbar-default-brand-hover-color</label>
<input type="text" class="form-control" placeholder="darken(@navbar-link-color, 10%)" data-var="@navbar-brand-hover-color"> <input type="text" class="form-control" placeholder="darken(@navbar-link-color, 10%)" data-var="@navbar-default-brand-hover-color">
<label>@navbar-brand-hover-bg</label> <label>@navbar-default-brand-hover-bg</label>
<input type="text" class="form-control" placeholder="transparent" data-var="@navbar-brand-hover-bg"> <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-brand-hover-bg">
<h4>Toggle</h4> <h4>Toggle</h4>
<label>@navbar-toggle-hover-bg</label> <label>@navbar-default-toggle-hover-bg</label>
<input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-toggle-hover-bg"> <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-hover-bg">
<label>@navbar-toggle-icon-bar-bg</label> <label>@navbar-default-toggle-icon-bar-bg</label>
<input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-toggle-icon-bar-bg"> <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-toggle-icon-bar-bg">
<label>@navbar-toggle-border-color</label> <label>@navbar-default-toggle-border-color</label>
<input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-toggle-border-color"> <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-border-color">
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<h3>Inverted navbar</h3> <h3>Inverted navbar</h3>
......
dist/css/bootstrap.css
View file @ 7b4e2a9a
...@@ -3946,8 +3946,7 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -3946,8 +3946,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
position: relative; position: relative;
min-height: 50px; min-height: 50px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: #f8f8f8; border: 1px solid transparent;
border: 1px solid #e7e7e7;
} }
.navbar:before, .navbar:before,
...@@ -4007,7 +4006,7 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4007,7 +4006,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
overflow-x: visible; overflow-x: visible;
border-top: 1px solid #e6e6e6; border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
...@@ -4110,14 +4109,11 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4110,14 +4109,11 @@ textarea.input-group-sm > .input-group-btn > .btn {
padding: 15px 15px; padding: 15px 15px;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
color: #777777;
} }
.navbar-brand:hover, .navbar-brand:hover,
.navbar-brand:focus { .navbar-brand:focus {
color: #5e5e5e;
text-decoration: none; text-decoration: none;
background-color: transparent;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -4134,20 +4130,14 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4134,20 +4130,14 @@ textarea.input-group-sm > .input-group-btn > .btn {
margin-right: 15px; margin-right: 15px;
margin-bottom: 8px; margin-bottom: 8px;
background-color: transparent; background-color: transparent;
border: 1px solid #dddddd; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
} }
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-toggle .icon-bar { .navbar-toggle .icon-bar {
display: block; display: block;
width: 22px; width: 22px;
height: 2px; height: 2px;
background-color: #cccccc;
border-radius: 1px; border-radius: 1px;
} }
...@@ -4169,27 +4159,6 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4169,27 +4159,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
line-height: 20px; 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: #e7e7e7;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
...@@ -4208,26 +4177,11 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4208,26 +4177,11 @@ textarea.input-group-sm > .input-group-btn > .btn {
} }
.navbar-nav .open .dropdown-menu > li > a { .navbar-nav .open .dropdown-menu > li > a {
line-height: 20px; line-height: 20px;
color: #777777;
} }
.navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus { .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
background-image: none; background-image: none;
} }
.navbar-nav .open .dropdown-menu > .active > a,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -4263,8 +4217,8 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4263,8 +4217,8 @@ textarea.input-group-sm > .input-group-btn > .btn {
margin-right: -15px; margin-right: -15px;
margin-bottom: 8px; margin-bottom: 8px;
margin-left: -15px; margin-left: -15px;
border-top: 1px solid #e6e6e6; border-top: 1px solid transparent;
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-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); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
} }
...@@ -4322,31 +4276,6 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4322,31 +4276,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.navbar-nav > .dropdown > a:hover .caret,
.navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-nav > .open > a .caret,
.navbar-nav > .open > a:hover .caret,
.navbar-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.navbar-nav.pull-right > li > .dropdown-menu, .navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right { .navbar-nav > li > .dropdown-menu.pull-right {
right: 0; right: 0;
...@@ -4362,7 +4291,6 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4362,7 +4291,6 @@ textarea.input-group-sm > .input-group-btn > .btn {
float: left; float: left;
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
color: #777777;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -4372,11 +4300,120 @@ textarea.input-group-sm > .input-group-btn > .btn { ...@@ -4372,11 +4300,120 @@ textarea.input-group-sm > .input-group-btn > .btn {
} }
} }
.navbar-link { .navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
color: #777777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777777;
}
.navbar-default .navbar-nav > li > a {
color: #777777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #dddddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #e6e6e6;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777777; color: #777777;
} }
.navbar-link:hover { .navbar-default .navbar-link:hover {
color: #333333; color: #333333;
} }
......
dist/css/bootstrap.min.css
View file @ 7b4e2a9a
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/navbar-fixed-top/index.html
View file @ 7b4e2a9a
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<body> <body>
<!-- Fixed navbar --> <!-- Fixed navbar -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-default navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
......
examples/navbar-static-top/index.html
View file @ 7b4e2a9a
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<body> <body>
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar navbar-static-top"> <div class="navbar navbar-default navbar-static-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
......
examples/navbar/index.html
View file @ 7b4e2a9a
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div class="container"> <div class="container">
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar"> <div class="navbar navbar-default">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
......
examples/sticky-footer-navbar/index.html
View file @ 7b4e2a9a
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<div id="wrap"> <div id="wrap">
<!-- Fixed navbar --> <!-- Fixed navbar -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-default navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
......
examples/theme/index.html
View file @ 7b4e2a9a
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
<h1>Navbars</h1> <h1>Navbars</h1>
</div> </div>
<div class="navbar"> <div class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
......
javascript.html
View file @ 7b4e2a9a
...@@ -355,7 +355,7 @@ $('#myModal').on('hidden.bs.modal', function () { ...@@ -355,7 +355,7 @@ $('#myModal').on('hidden.bs.modal', function () {
<h3>Within a navbar</h3> <h3>Within a navbar</h3>
<div class="bs-example"> <div class="bs-example">
<nav id="navbar-example" class="navbar navbar-static" role="navigation"> <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
...@@ -526,7 +526,7 @@ $('#myDropdown').on('show.bs.dropdown', function () { ...@@ -526,7 +526,7 @@ $('#myDropdown').on('show.bs.dropdown', function () {
<h2 id="scrollspy-examples">Example in navbar</h2> <h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p> <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example"> <div class="bs-example">
<nav id="navbar-example2" class="navbar navbar-static" role="navigation"> <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
......
less/navbar.less
View file @ 7b4e2a9a
...@@ -12,8 +12,7 @@ ...@@ -12,8 +12,7 @@
position: relative; position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom; margin-bottom: @navbar-margin-bottom;
background-color: @navbar-bg; border: 1px solid transparent;
border: 1px solid @navbar-border;
// Prevent floats from breaking the navbar // Prevent floats from breaking the navbar
.clearfix(); .clearfix();
...@@ -53,7 +52,7 @@ ...@@ -53,7 +52,7 @@
overflow-x: visible; overflow-x: visible;
padding-right: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%); border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
.clearfix(); .clearfix();
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
...@@ -145,12 +144,9 @@ ...@@ -145,12 +144,9 @@
padding: @navbar-padding-vertical @navbar-padding-horizontal; padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large; font-size: @font-size-large;
line-height: @line-height-computed; line-height: @line-height-computed;
color: @navbar-brand-color;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-brand-hover-color;
text-decoration: none; text-decoration: none;
background-color: @navbar-brand-hover-bg;
} }
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
...@@ -173,20 +169,14 @@ ...@@ -173,20 +169,14 @@
padding: 9px 10px; padding: 9px 10px;
.navbar-vertical-align(34px); .navbar-vertical-align(34px);
background-color: transparent; background-color: transparent;
border: 1px solid @navbar-toggle-border-color; border: 1px solid transparent;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
}
// Bars // Bars
.icon-bar { .icon-bar {
display: block; display: block;
width: 22px; width: 22px;
height: 2px; height: 2px;
background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px; border-radius: 1px;
} }
.icon-bar + .icon-bar { .icon-bar + .icon-bar {
...@@ -210,29 +200,7 @@ ...@@ -210,29 +200,7 @@
> li > a { > li > a {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
color: @navbar-link-color;
line-height: @line-height-computed; line-height: @line-height-computed;
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
...@@ -250,31 +218,12 @@ ...@@ -250,31 +218,12 @@
padding: 5px 15px 5px 25px; padding: 5px 15px 5px 25px;
} }
> li > a { > li > a {
color: @navbar-link-color;
line-height: @line-height-computed; line-height: @line-height-computed;
&:hover, &:hover,
&:focus { &:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
background-image: none; background-image: none;
} }
} }
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
} }
} }
...@@ -321,8 +270,8 @@ ...@@ -321,8 +270,8 @@
margin-left: -@navbar-padding-horizontal; margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal; padding: 10px @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%); border-top: 1px solid transparent;
border-bottom: 1px solid darken(@navbar-bg, 7%); border-bottom: 1px solid transparent;
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow); .box-shadow(@shadow);
...@@ -363,34 +312,6 @@ ...@@ -363,34 +312,6 @@
.border-bottom-radius(0); .border-bottom-radius(0);
} }
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-link-hover-color;
border-bottom-color: @navbar-link-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-link-active-bg;
color: @navbar-link-active-color;
.caret {
border-top-color: @navbar-link-active-color;
border-bottom-color: @navbar-link-active-color;
}
}
}
> .dropdown > a .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
}
// Right aligned menus need alt position // Right aligned menus need alt position
.navbar-nav.pull-right > li > .dropdown-menu, .navbar-nav.pull-right > li > .dropdown-menu,
.navbar-nav > li > .dropdown-menu.pull-right { .navbar-nav > li > .dropdown-menu.pull-right {
...@@ -414,7 +335,6 @@ ...@@ -414,7 +335,6 @@
.navbar-text { .navbar-text {
float: left; float: left;
color: @navbar-color;
.navbar-vertical-align(@line-height-computed); .navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
...@@ -423,22 +343,145 @@ ...@@ -423,22 +343,145 @@
} }
} }
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
.navbar-brand {
color: @navbar-default-brand-color;
&:hover,
&:focus {
color: @navbar-default-brand-hover-color;
background-color: @navbar-default-brand-hover-bg;
}
}
.navbar-text {
color: @navbar-default-color;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color;
&:hover,
&:focus {
background-color: @navbar-default-toggle-hover-bg;
}
.icon-bar {
background-color: @navbar-default-toggle-icon-bar-bg;
}
}
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-default-bg, 7%);
}
// Dropdown menu items and carets
.navbar-nav {
// Caret should match text color on hover
> .dropdown > a:hover .caret,
> .dropdown > a:focus .caret {
border-top-color: @navbar-default-link-hover-color;
border-bottom-color: @navbar-default-link-hover-color;
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
.caret {
border-top-color: @navbar-default-link-active-color;
border-bottom-color: @navbar-default-link-active-color;
}
}
}
> .dropdown > a .caret {
border-top-color: @navbar-default-link-color;
border-bottom-color: @navbar-default-link-color;
}
@media (max-width: @screen-xs-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
> li > a {
color: @navbar-default-link-color;
&:hover,
&:focus {
color: @navbar-default-link-hover-color;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
// Default navbar variables // Links in navbars
.navbar-link { //
color: @navbar-link-color; // Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover { &:hover {
color: @navbar-link-hover-color; color: @navbar-default-link-hover-color;
}
} }
}
}
// Inverse navbar // Inverse navbar
// --------------------------------------------------
.navbar-inverse { .navbar-inverse {
background-color: @navbar-inverse-bg; background-color: @navbar-inverse-bg;
......
less/theme.less
View file @ 7b4e2a9a
...@@ -93,13 +93,13 @@ ...@@ -93,13 +93,13 @@
// Basic navbar // Basic navbar
.navbar { .navbar {
#gradient > .vertical(@start-color: lighten(@navbar-bg, 10%); @end-color: @navbar-bg;); #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;);
border-radius: @navbar-border-radius; border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow); .box-shadow(@shadow);
.navbar-nav > .active > a { .navbar-nav > .active > a {
background-color: @navbar-bg; background-color: @navbar-default-bg;
} }
} }
.navbar-brand, .navbar-brand,
......
less/variables.less
View file @ 7b4e2a9a
...@@ -237,31 +237,31 @@ ...@@ -237,31 +237,31 @@
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; @navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed; @navbar-margin-bottom: @line-height-computed;
@navbar-color: #777; @navbar-default-color: #777;
@navbar-bg: #f8f8f8; @navbar-default-bg: #f8f8f8;
@navbar-border: darken(@navbar-bg, 6.5%); @navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base; @navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links // Navbar links
@navbar-link-color: #777; @navbar-default-link-color: #777;
@navbar-link-hover-color: #333; @navbar-default-link-hover-color: #333;
@navbar-link-hover-bg: transparent; @navbar-default-link-hover-bg: transparent;
@navbar-link-active-color: #555; @navbar-default-link-active-color: #555;
@navbar-link-active-bg: darken(@navbar-bg, 6.5%); @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-link-disabled-color: #ccc; @navbar-default-link-disabled-color: #ccc;
@navbar-link-disabled-bg: transparent; @navbar-default-link-disabled-bg: transparent;
// Navbar brand label // Navbar brand label
@navbar-brand-color: @navbar-link-color; @navbar-default-brand-color: @navbar-default-link-color;
@navbar-brand-hover-color: darken(@navbar-link-color, 10%); @navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%);
@navbar-brand-hover-bg: transparent; @navbar-default-brand-hover-bg: transparent;
// Navbar toggle // Navbar toggle
@navbar-toggle-hover-bg: #ddd; @navbar-default-toggle-hover-bg: #ddd;
@navbar-toggle-icon-bar-bg: #ccc; @navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-toggle-border-color: #ddd; @navbar-default-toggle-border-color: #ddd;
// Inverted navbar // Inverted navbar
......
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