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
Show whitespace changes
Inline Side-by-side
Showing with 101 additions and 173 deletions
docs/components/navbar.md
View file @ 18da568b
...@@ -161,8 +161,8 @@ Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the p ...@@ -161,8 +161,8 @@ 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. 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"> <nav class="navbar navbar-default navbar-sm">
<h3 class="navbar-brand pull-left"> <h3 class="navbar-brand pull-left">
<a href="#">Navbar</a> <a href="#">Navbar</a>
</h3> </h3>
...@@ -184,9 +184,9 @@ When moving from a regular navbar to a small one, be sure to update your inputs ...@@ -184,9 +184,9 @@ When moving from a regular navbar to a small one, be sure to update your inputs
<input class="form-control form-control-sm" type="text" placeholder="Search"> <input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button> <button class="btn btn-sm btn-primary" type="submit">Search</button>
</form> </form>
</nav> </nav>
<nav class="navbar navbar-inverse navbar-sm"> <nav class="navbar navbar-inverse navbar-sm">
<h3 class="navbar-brand pull-left"> <h3 class="navbar-brand pull-left">
<a href="#">Navbar</a> <a href="#">Navbar</a>
</h3> </h3>
...@@ -208,9 +208,18 @@ When moving from a regular navbar to a small one, be sure to update your inputs ...@@ -208,9 +208,18 @@ When moving from a regular navbar to a small one, be sure to update your inputs
<input class="form-control form-control-sm" type="text" placeholder="Search"> <input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button> <button class="btn btn-sm btn-primary" type="submit">Search</button>
</form> </form>
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default navbar-sm">
<!-- Navbar contents -->
</nav> </nav>
{% endexample %}
<nav class="navbar navbar-inverse navbar-sm">
<!-- Navbar contents -->
</nav>
{% endhighlight %}
### Collapsible content ### Collapsible content
......
scss/_navbar.scss
View file @ 18da568b
...@@ -202,84 +202,6 @@ ...@@ -202,84 +202,6 @@
background-color: $navbar-default-brand-hover-bg; 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 // Inverse navbar
...@@ -309,7 +231,6 @@ ...@@ -309,7 +231,6 @@
background-color: $navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
.navbar-brand { .navbar-brand {
color: $navbar-inverse-brand-color; color: $navbar-inverse-brand-color;
@include hover-focus { @include hover-focus {
...@@ -318,67 +239,65 @@ ...@@ -318,67 +239,65 @@
} }
} }
.navbar-text {
color: $navbar-inverse-color;
}
.navbar-nav { .navbar-nav {
> li > a { .navbar-link {
color: $navbar-inverse-link-color; color: $navbar-inverse-link-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg; background-color: $navbar-inverse-link-hover-bg;
} }
}
> .active > a { &.active > a {
@include plain-hover-focus { @include plain-hover-focus {
color: $navbar-inverse-link-active-color; color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg; background-color: $navbar-inverse-link-active-bg;
} }
} }
> .disabled > a {
&.disabled > a {
@include plain-hover-focus { @include plain-hover-focus {
color: $navbar-inverse-link-disabled-color; color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg; 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;
}
}
}
.navbar-link {
color: $navbar-inverse-link-color;
@include hover {
color: $navbar-inverse-link-hover-color;
}
} }
.btn-link { // .navbar-collapse,
color: $navbar-inverse-link-color; // .navbar-form {
// border-color: darken($navbar-inverse-bg, 7%);
@include hover-focus { // }
color: $navbar-inverse-link-hover-color; //
} // // Dropdowns
// .navbar-nav {
// > .open > a {
// @include plain-hover-focus {
// color: $navbar-inverse-link-active-color;
// background-color: $navbar-inverse-link-active-bg;
// }
// }
// }
&:disabled, // .navbar-link {
fieldset[disabled] & { // color: $navbar-inverse-link-color;
@include hover-focus { // @include hover {
color: $navbar-inverse-link-disabled-color; // 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