Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

v4: Nav cleanup #18783

Merged
merged 8 commits into from Jan 6, 2016
Merged

v4: Nav cleanup #18783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9c19dc9
Nav docs updates
mdo Jan 6, 2016
030ab62
Add $nav-item-inline-spacer variable
mdo Jan 6, 2016
7668a66
Add $nav-disabled-link-hover-bg variable
mdo Jan 6, 2016
93dda63
Revamp tabbed nav border variables
mdo Jan 6, 2016
7da2e12
Regroup nav variables
mdo Jan 6, 2016
774a2ed
Spacing y'all
mdo Jan 6, 2016
fac0c31
New $nav-pills-active-link-* variables
mdo Jan 6, 2016
c847279
Consolidate nav-tab dropdown styles with nav-tab styles
mdo Jan 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 25 additions & 14 deletions docs/components/navs.md
View file
Open in desktop
Expand Up @@ -22,13 +22,13 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
{% example html %}
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
Expand All @@ -42,20 +42,20 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}

## Inline

Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.

{% example html %}
<nav class="nav nav-inline">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
Expand All @@ -65,13 +65,13 @@ The same works for a navigation built with lists.
{% example html %}
<ul class="nav nav-inline">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
Expand All @@ -92,7 +92,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
Expand All @@ -113,17 +113,17 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}

## Stacked pills
### Stacked pills

Just add `.nav-stacked` to the `.nav.nav-pills`.
Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.

{% example html %}
<ul class="nav nav-pills nav-stacked">
Expand All @@ -134,14 +134,25 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}

As always, stacked pills are possible without `<ul>`s.

{% example html %}
<nav class="nav nav-pills nav-stacked">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}

## Using dropdowns

Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
Expand All @@ -164,7 +175,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
Expand All @@ -190,7 +201,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
Expand Down
33 changes: 14 additions & 19 deletions scss/_nav.scss
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@
@include plain-hover-focus {
color: $nav-disabled-link-hover-color;
cursor: $cursor-disabled;
background-color: transparent;
background-color: $nav-disabled-link-hover-bg;
}
}
}
Expand All @@ -38,7 +38,7 @@

.nav-item + .nav-item,
.nav-link + .nav-link {
margin-left: 1rem;
margin-left: $nav-item-inline-spacer;
}
}

Expand All @@ -48,13 +48,13 @@
//

.nav-tabs {
border-bottom: 1px solid $nav-tabs-border-color;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
@include clearfix();

.nav-item {
float: left;
// Make the list-items overlay the bottom border
margin-bottom: -1px;
margin-bottom: -$nav-tabs-border-width;

+ .nav-item {
margin-left: $nav-item-margin;
Expand All @@ -64,7 +64,7 @@
.nav-link {
display: block;
padding: $nav-link-padding;
border: $nav-tabs-link-border-width solid transparent;
border: $nav-tabs-border-width solid transparent;
@include border-radius($border-radius $border-radius 0 0);

@include hover-focus {
Expand All @@ -88,6 +88,13 @@
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
}
}

.dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -$nav-tabs-border-width;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
}


Expand Down Expand Up @@ -115,9 +122,9 @@
.nav-link.active,
.nav-item.open .nav-link {
@include plain-hover-focus {
color: $component-active-color;
color: $nav-pills-active-link-color;
cursor: default;
background-color: $component-active-bg;
background-color: $nav-pills-active-link-bg;
}
}
}
Expand Down Expand Up @@ -148,15 +155,3 @@
display: block;
}
}


//
// Dropdowns
//

.nav-tabs .dropdown-menu {
// Make dropdown border overlap tab border
margin-top: -1px;
// Remove the top rounded corners here since there is a hard edge above the menu
@include border-top-radius(0);
}
43 changes: 20 additions & 23 deletions scss/_variables.scss
View file
Open in desktop
Expand Up @@ -388,29 +388,26 @@ $navbar-light-disabled-color: rgba(0,0,0,.15) !default;

// Navs

$nav-item-margin: .2rem !default;

$nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default;

$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;

$nav-tabs-border-color: #ddd !default;

$nav-tabs-link-border-width: $border-width !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;

$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-border-color: #ddd !default;

$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;

$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-hover-bg: $component-active-bg !default;
$nav-pills-active-link-hover-color: $component-active-color !default;
$nav-item-margin: .2rem !default;
$nav-item-inline-spacer: 1rem !default;
$nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default;
$nav-disabled-link-hover-color: $gray-light !default;
$nav-disabled-link-hover-bg: transparent !default;

$nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-active-link-hover-color: $gray !default;
$nav-tabs-active-link-hover-bg: $body-bg !default;
$nav-tabs-active-link-hover-border-color: #ddd !default;
$nav-tabs-justified-link-border-color: #ddd !default;
$nav-tabs-justified-active-link-border-color: $body-bg !default;

$nav-pills-border-radius: $border-radius !default;
$nav-pills-active-link-color: $component-active-color !default;
$nav-pills-active-link-bg: $component-active-bg !default;


// Pagination
Expand Down