rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

rewrite some navbar stuff, clean out some commented out code

Browse Source
This commit is contained in:
Mark Otto 2015-06-22 23:24:55 -07:00
parent ed42fc9b76
commit 18da568b8b
2 changed files with 102 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
docs/components/navbar.md
View File

@ -161,56 +161,65 @@ Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the p
When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
{% example html %}
<div class="bd-example">
<nav class="navbar navbar-default navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-inverse navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
<!-- Navbar contents -->
</nav>
<nav class="navbar navbar-inverse navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
<!-- Navbar contents -->
</nav>
{% endexample %}
{% endhighlight %}
### Collapsible content

177
scss/_navbar.scss
View File

@ -202,84 +202,6 @@
background-color: $navbar-default-brand-hover-bg;
}
}
// .navbar-text {
// color: $navbar-default-color;
// }
// .navbar-nav {
// > li > a {
// color: $navbar-default-link-color;
// @include hover-focus {
// color: $navbar-default-link-hover-color;
// background-color: $navbar-default-link-hover-bg;
// }
// }
// > .active > a {
// @include plain-hover-focus {
// color: $navbar-default-link-active-color;
// background-color: $navbar-default-link-active-bg;
// }
// }
// > .disabled > a {
// @include plain-hover-focus {
// color: $navbar-default-link-disabled-color;
// background-color: $navbar-default-link-disabled-bg;
// }
// }
// }
// .navbar-toggle {
// border-color: $navbar-default-toggle-border-color;
// @include 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: $navbar-default-border;
// }
// // Dropdown menu items
// .navbar-nav {
// // Remove background color from open dropdown
// > .open > a {
// @include plain-hover-focus {
// color: $navbar-default-link-active-color;
// background-color: $navbar-default-link-active-bg;
// }
// }
// }
// // Links in navbars
// //
// // Add a class to ensure links outside the navbar nav are colored correctly.
// .navbar-link {
// color: $navbar-default-link-color;
// @include hover {
// color: $navbar-default-link-hover-color;
// }
// }
// .btn-link {
// color: $navbar-default-link-color;
// @include hover-focus {
// color: $navbar-default-link-hover-color;
// }
// &:disabled,
// fieldset[disabled] & {
// @include hover-focus {
// color: $navbar-default-link-disabled-color;
// }
// }
// }
}
// Inverse navbar
@ -309,7 +231,6 @@
background-color: $navbar-inverse-link-active-bg;
}
.navbar-brand {
color: $navbar-inverse-brand-color;
@include hover-focus {
@ -318,67 +239,65 @@
}
}
.navbar-text {
color: $navbar-inverse-color;
}
.navbar-nav {
> li > a {
.navbar-link {
color: $navbar-inverse-link-color;
@include hover-focus {
color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg;
}
}
> .active > a {
@include plain-hover-focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
&.active > a {
@include plain-hover-focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
}
> .disabled > a {
@include plain-hover-focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
&.disabled > a {
@include plain-hover-focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
}
}
}
}
.navbar-collapse,
.navbar-form {
border-color: darken($navbar-inverse-bg, 7%);
}
// .navbar-collapse,
// .navbar-form {
// border-color: darken($navbar-inverse-bg, 7%);
// }
//
// // Dropdowns
// .navbar-nav {
// > .open > a {
// @include plain-hover-focus {
// color: $navbar-inverse-link-active-color;
// background-color: $navbar-inverse-link-active-bg;
// }
// }
// }
// Dropdowns
.navbar-nav {
> .open > a {
@include plain-hover-focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
}
.navbar-link {
color: $navbar-inverse-link-color;
@include hover {
color: $navbar-inverse-link-hover-color;
}
}
.btn-link {
color: $navbar-inverse-link-color;
@include hover-focus {
color: $navbar-inverse-link-hover-color;
}
&:disabled,
fieldset[disabled] & {
@include hover-focus {
color: $navbar-inverse-link-disabled-color;
}
}
}
// .navbar-link {
// color: $navbar-inverse-link-color;
// @include hover {
// color: $navbar-inverse-link-hover-color;
// }
// }
//
// .btn-link {
// color: $navbar-inverse-link-color;
//
// @include hover-focus {
// color: $navbar-inverse-link-hover-color;
// }
//
// &:disabled,
// fieldset[disabled] & {
// @include hover-focus {
// color: $navbar-inverse-link-disabled-color;
// }
// }
// }
}