Skip to content

B
bootstrap
Commit 18da568b authored by Mark Otto's avatar Mark Otto
Browse files
Options

rewrite some navbar stuff, clean out some commented out code

parent ed42fc9b
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 173 deletions
docs/components/navbar.md
View file @ 18da568b
......@@ -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
......
scss/_navbar.scss
View file @ 18da568b
......@@ -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;
}
}
> .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%);
}
// Dropdowns
.navbar-nav {
> .open > 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;
}
}
}
}
.navbar-link {
color: $navbar-inverse-link-color;
@include hover {
color: $navbar-inverse-link-hover-color;
&.disabled > a {
@include plain-hover-focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
}
}
}
}
.btn-link {
color: $navbar-inverse-link-color;
@include hover-focus {
color: $navbar-inverse-link-hover-color;
}
// .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;
// }
// }
// }
&: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;
// }
// }
// }
}
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