rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +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

13
docs/components/navbar.md
View File

@ -161,7 +161,7 @@ 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>
@ -209,8 +209,17 @@ When moving from a regular navbar to a small one, be sure to update your inputs
<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>
{% endexample %} </div>
{% highlight html %}
<nav class="navbar navbar-default navbar-sm">
<!-- Navbar contents -->
</nav>
<nav class="navbar navbar-inverse navbar-sm">
<!-- Navbar contents -->
</nav>
{% endhighlight %}
### Collapsible content ### Collapsible content

161
scss/_navbar.scss
View File

@ -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 @@
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 @@
} }
} }
.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-collapse,
.navbar-nav { // .navbar-form {
> .open > a { // border-color: darken($navbar-inverse-bg, 7%);
@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 { // .navbar-link {
color: $navbar-inverse-link-color; // color: $navbar-inverse-link-color;
@include hover { // @include hover {
color: $navbar-inverse-link-hover-color; // color: $navbar-inverse-link-hover-color;
} // }
} // }
//
.btn-link { // .btn-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;
} // }
//
&:disabled, // &:disabled,
fieldset[disabled] & { // fieldset[disabled] & {
@include hover-focus { // @include hover-focus {
color: $navbar-inverse-link-disabled-color; // color: $navbar-inverse-link-disabled-color;
} // }
} // }
} // }
} }