diff options
| -rw-r--r-- | docs/components/navbar.md | 99 | ||||
| -rw-r--r-- | scss/_navbar.scss | 175 |
2 files changed, 101 insertions, 173 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index f45ee5876..a1f8bae74 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -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 diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 7a01e3c2c..32735c8e5 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -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; + // } + // } + // } } |