Skip to content

Commit

Permalink
fix(components): nav-tabs arrows
Browse files Browse the repository at this point in the history 
local nav
pointed nav-tabs
boostwatch + news example
  • Loading branch information
@ygatesoupe
ygatesoupe committed Dec 21, 2015
1 parent 65cef4f commit 1fc3b1f
Show file tree
Hide file tree
Showing 8 changed files with 123 additions and 76 deletions.
18 changes: 9 additions & 9 deletions docs-orange/_includes/boostwatch/navLocal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ <h3 id="local1">Default local navigation</h3>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar1">
<ul class="nav navbar-nav">
<li class="active nav-item"><a href="#">Voluptatem</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a href="#">Unde omnis istea</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
Expand All @@ -31,7 +31,7 @@ <h3 id="local1">Default local navigation</h3>
</li>
</ul>
<ul class="nav navbar-nav pull-md-right">
<li class="nav-item"><a href="#">Accusantium</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" id="dropdownMenu1">Dropdown <b class="caret" aria-hidden="true"></b></a>
<div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
Expand Down Expand Up @@ -67,8 +67,8 @@ <h3 id="local2">Two levels local navigation</h3>
<!-- Local nav with 2 level : 1st level -->
<div class="collapse navbar-toggleable-xs local" id="exCollapsingNavbar2">
<ul class="nav navbar-nav">
<li class="active nav-item"><a href="#">Voluptatem</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a href="#">Unde omnis istea</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a class="nav-link active" href="#">Voluptatem<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea<div class='arrow' aria-hidden='true'></div></a></li>
</ul>
<ul class="nav navbar-nav pull-md-right">
<li class="nav-item dropdown">
Expand All @@ -87,10 +87,10 @@ <h3 id="local2">Two levels local navigation</h3>
<!-- Local nav with 2 level : 2nd level. Be careful about small devices, this component is not completely adapted -->
<div class="navbar-collapse sublocal">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#">Natus error sit</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a href="#">Accusantium</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item active"><a href="#">Totam rem aperiam</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a href="#">Sed ut</a><div class='arrow' aria-hidden='true'></div></li>
<li class="nav-item"><a class="nav-link" href="#">Natus error sit<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Accusantium<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link active" href="#">Totam rem aperiam<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">Sed ut<div class='arrow' aria-hidden='true'></div></a></li>
</ul>
</div>
<!--</div>-->
Expand Down
8 changes: 4 additions & 4 deletions docs-orange/_includes/boostwatch/navTab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ <h3 id="tab-clear">Content without border</h3>
<h3 id="tabB">Orange pointed tabs</h3>
</div>
<ul class="nav nav-tabs o-nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#home2" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#messages2" data-toggle="tab">Messages</a></li>
<li class="nav-item"><a class="nav-link" href="#settings2" data-toggle="tab">Settings</a></li>
<li class="nav-item"><a class="nav-link active" href="#home2" data-toggle="tab">Home<div class="arrow" aria-hidden="true"></div></a></li>
<li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile<div class="arrow" aria-hidden="true"></div></a></li>
<li class="nav-item"><a class="nav-link" href="#messages2" data-toggle="tab">Messages<div class="arrow" aria-hidden="true"></div></a></li>
<li class="nav-item"><a class="nav-link" href="#settings2" data-toggle="tab">Settings<div class="arrow" aria-hidden="true"></div></a></li>
</ul>
<div class="tab-content o-nav-tabs-content">
<div class="tab-pane active" id="home2">Lorem ipsum dolor sit
Expand Down
42 changes: 20 additions & 22 deletions docs-orange/examples/orange-news/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,23 +207,21 @@ <h1>News</h1>
</div>

<div id="localNavigation" class="container">
<nav class="navbar navbar-default nav-local" role="navigation" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
</button>
</div>

<div class="collapse navbar-collapse local" id="bs-example-navbar-collapse-2">
<nav class="navbar nav-local" role="navigation">
<button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
</button>

<div class="collapse navbar-toggleable-xs local" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">news home</a><div class='arrow' aria-hidden='true'></div></li>
<li><a href="#">world</a><div class='arrow' aria-hidden='true'></div></li>
<li><a href="#">entertainment</a><div class='arrow' aria-hidden='true'></div></li>
<li><a href="#">finance</a><div class='arrow' aria-hidden='true'></div></li>
<li><a href="#">technology</a><div class='arrow' aria-hidden='true'></div></li>
<li><a href="#">weather</a><div class='arrow' aria-hidden='true'></div></li>
<li class="dropdown">
<li class="nav-item"><a class="nav-link active" href="#">news home<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">world<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">entertainment<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">finance<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">technology<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item"><a class="nav-link" href="#">weather<div class='arrow' aria-hidden='true'></div></a></li>
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle active" data-toggle="dropdown"><span class="sr-only">more categories </span>... <b class="caret" aria-hidden="true"></b></a>
<ul class="dropdown-menu">
<li><a href="#">sport</a></li>
Expand All @@ -232,8 +230,8 @@ <h1>News</h1>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="nav navbar-nav pull-md-right">
<li class="nav-item dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">more <span class="sr-only">options</span><b class="caret" aria-hidden="true"></b></a>
<ul class="dropdown-menu">
<li><a href="#">all categories</a></li>
Expand Down Expand Up @@ -406,10 +404,10 @@ <h2>news 6</h2>


<div id="infos" class="col-xs-12 col-sm-12 col-md-4">
<ul class="nav nav-tabs nav-tabs-justified o-nav-tabs">
<li class="active"><a href="#mostRead" data-toggle="tab">Most read</a><div class="arrow" aria-hidden="true"></div></li>
<li><a href="#mostShared" data-toggle="tab">Most shared</a><div class="arrow" aria-hidden="true"></div></li>
<li><a href="#mostRecent" data-toggle="tab">Most recent</a><div class="arrow" aria-hidden="true"></div></li>
<ul class="nav nav-tabs o-nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#mostRead" data-toggle="tab">Most read<div class="arrow" aria-hidden="true"></div></a></li>
<li class="nav-item"><a class="nav-link" href="#mostShared" data-toggle="tab">Most shared<div class="arrow" aria-hidden="true"></div></a></li>
<li class="nav-item"><a class="nav-link" href="#mostRecent" data-toggle="tab">Most recent<div class="arrow" aria-hidden="true"></div></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content o-nav-tabs-content">
Expand Down
87 changes: 69 additions & 18 deletions docs/components/navbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,16 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc

- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-form` for vertically centering default-sized inputs and buttons.
- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.

Here's an example of all the sub-components included in a default, light navbar:

{% example html %}
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
Expand All @@ -48,13 +47,65 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-xs-right">
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
{% endexample %}

### Brand

The `.navbar-brand` can be applied to most elements, but an anchor works best.

{% example html %}
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
</nav>

<nav class="navbar navbar-light bg-faded">
<h1 class="navbar-brand">Navbar</h1>
</nav>

{% endexample %}

### Nav

Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.

{% example html %}
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" 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>
</nav>
{% endexample %}

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

{% example html %}
<nav class="navbar navbar-light bg-faded">
<div class="nav navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link" href="#">About</a>
</div>
</nav>
{% endexample %}


## Color schemes

Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
Expand All @@ -65,8 +116,8 @@ Here are some examples to show what we mean.
<nav class="navbar navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
Expand All @@ -78,16 +129,16 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-xs-right">
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-info-outline" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
Expand All @@ -99,16 +150,16 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-xs-right">
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary-outline" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
Expand All @@ -120,7 +171,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-xs-right">
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary-outline" type="submit">Search</button>
</form>
Expand All @@ -143,7 +194,7 @@ Here are some examples to show what we mean.

## Containers

Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).

{% example html %}
<div class="container">
Expand Down Expand Up @@ -190,7 +241,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con

{% example html %}
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a">
<div class="bg-inverse p-a-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
Expand All @@ -212,8 +263,8 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#">Responsive navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
Expand Down
4 changes: 0 additions & 4 deletions scss/_navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,6 @@
}
}

.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
Expand Down Expand Up @@ -214,8 +212,6 @@
}
}

.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
@include plain-hover-focus {
Expand Down
Loading

0 comments on commit 1fc3b1f

Please sign in to comment.