Skip to content

B
bootstrap
Commit 4e45e236 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

Merge branch 'v4' of github.com:twbs/derpstrap into v4

parents fd65b9f3 1c19ded8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 307 additions and 500 deletions
dist/css/bootstrap.css
View file @ 4e45e236
......@@ -3430,105 +3430,43 @@ input[type="button"].btn-block {
margin-left: 0;
}
.select {
position: relative;
display: inline-block;
color: #555;
}
.select > select {
.c-select {
display: inline-block;
width: 100%;
max-width: 100%;
-webkit-appearance: none;
padding: .5rem 2.25rem .5rem 1rem;
margin: 0;
line-height: 1.5;
color: #555;
cursor: pointer;
background-color: #eee;
border: 0;
border-radius: .25rem;
outline: 0;
padding: .375rem 1.75rem .375rem .75rem;
padding-right: .75rem \9;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
background-image: none \9;
-webkit-background-size: 8px 10px;
background-size: 8px 10px;
border: 1px solid #ccc;
-moz-appearance: none;
appearance: none;
}
.select > select:focus {
-webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}
.select > select:focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.select > select:active {
color: #fff;
background-color: #0074d9;
}
.select > select::-ms-expand {
display: none;
}
.select:after {
position: absolute;
top: 50%;
right: 1.25rem;
display: inline-block;
width: 0;
height: 0;
margin-top: -.15rem;
pointer-events: none;
content: "";
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
.c-select:focus {
border-color: #51a7e8;
outline: none;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
}
.select select:hover {
background-color: #ddd;
.c-select::-ms-expand {
opacity: 0;
}
@-moz-document url-prefix() {
.select select {
padding-right: 1rem;
text-indent: .01px;
text-overflow: "";
}
.select option {
background-color: #fff;
}
.c-select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px;
}
@media screen and (min-width: 0 \0) {
.select select {
z-index: 1;
padding: .5rem 1.5rem .5rem 1rem;
}
.select:after {
z-index: 5;
}
.select:before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: 1.5rem;
content: "";
background-color: #eee;
}
.select select:focus,
.select select:active,
.select select:hover {
color: #555;
background-color: #eee;
}
.c-select-sm:not([multiple]) {
height: 26px;
min-height: 26px;
}
.file {
......@@ -3607,14 +3545,10 @@ input[type="button"].btn-block {
text-decoration: none;
}
.disabled > .nav-link,
.nav-link.disabled {
color: #818a91;
}
.disabled > .nav-link,
.disabled > .nav-link:focus,
.disabled > .nav-link:hover,
.nav-link.disabled,
.nav-link.disabled:focus,
.nav-link.disabled:hover {
......@@ -3631,6 +3565,16 @@ input[type="button"].btn-block {
border-bottom: 1px solid #ddd;
}
.nav-tabs:before,
.nav-tabs:after {
display: table;
content: " ";
}
.nav-tabs:after {
clear: both;
}
.nav-tabs .nav-item {
float: left;
margin-bottom: -1px;
......@@ -3652,26 +3596,6 @@ input[type="button"].btn-block {
border-color: #eceeef #eceeef #ddd;
}
.nav-tabs .open > .nav-link,
.nav-tabs .open > .nav-link:focus,
.nav-tabs .open > .nav-link:hover,
.nav-tabs .active > .nav-link,
.nav-tabs .active > .nav-link:focus,
.nav-tabs .active > .nav-link:hover,
.nav-tabs .nav-link.open,
.nav-tabs .nav-link.open:focus,
.nav-tabs .nav-link.open:hover,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover {
color: #55595c;
background-color: #fff;
border-color: #ddd #ddd transparent;
}
.nav-tabs .disabled > .nav-link,
.nav-tabs .disabled > .nav-link:focus,
.nav-tabs .disabled > .nav-link:hover,
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link.disabled:focus,
.nav-tabs .nav-link.disabled:hover {
......@@ -3680,6 +3604,17 @@ input[type="button"].btn-block {
border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-item.open .nav-link,
.nav-tabs .nav-item.open .nav-link:focus,
.nav-tabs .nav-item.open .nav-link:hover {
color: #55595c;
background-color: #fff;
border-color: #ddd #ddd transparent;
}
.nav-pills .nav-item {
float: left;
}
......@@ -3694,18 +3629,12 @@ input[type="button"].btn-block {
border-radius: .25rem;
}
.nav-pills .open > .nav-link,
.nav-pills .open > .nav-link:focus,
.nav-pills .open > .nav-link:hover,
.nav-pills .active > .nav-link,
.nav-pills .active > .nav-link:focus,
.nav-pills .active > .nav-link:hover,
.nav-pills .nav-link.open,
.nav-pills .nav-link.open:focus,
.nav-pills .nav-link.open:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover {
.nav-pills .nav-link.active:hover,
.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover {
color: #fff;
cursor: default;
background-color: #0275d8;
......
dist/css/bootstrap.css.map
View file @ 4e45e236
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 4e45e236
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.min.css.map
View file @ 4e45e236
This diff was suppressed by a .gitattributes entry.
docs/_includes/footer.html
View file @ 4e45e236
......@@ -35,8 +35,8 @@
SimpleJekyllSearch.init({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
searchResultTemplate: '<li><a href="{url}">{title}</a></li>',
noResultsText: '<li class="no-results">Sorry, there are no results for that search.</li>',
searchResultTemplate: '<a class="dropdown-item" href="{url}">{title}</a>',
noResultsText: '<div class="dropdown-item no-results">Sorry, there are no results for that search.</div>',
dataSource: '/search.json'
})
......
docs/assets/css/docs.min.css
View file @ 4e45e236
This diff is collapsed.
docs/assets/css/docs.min.css.map
View file @ 4e45e236
This diff was suppressed by a .gitattributes entry.
docs/assets/scss/_ads.scss
View file @ 4e45e236
......@@ -42,7 +42,7 @@
.carbonad-text a,
.carbonad-tag a {
color: #fff !important;
color: $bd-purple-light !important;
&:hover {
color: #fff !important;
......
docs/assets/scss/_nav.scss
View file @ 4e45e236
......@@ -21,4 +21,8 @@
}
}
}
.dropdown-menu {
font-size: inherit;
}
}
docs/assets/scss/_sidebar.scss
View file @ 4e45e236
......@@ -35,15 +35,15 @@
display: none;
}
> li > a {
.dropdown-item {
padding-left: .75rem;
padding-right: .75rem;
}
> li:first-child { margin-top: .25rem; }
> li:last-child { margin-bottom: .25rem; }
&:first-child { margin-top: .25rem; }
&:last-child { margin-bottom: .25rem; }
}
> .no-results {
.no-results {
padding: .75rem 1rem;
color: #7a7a7a;
text-align: center;
......
docs/components/button-group.md
View file @ 4e45e236
......@@ -11,21 +11,7 @@ Group a series of buttons together on a single line with the button group. Add o
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
{% callout warning %}
#### Tooltips & popovers in button groups require special setting
When using tooltips or popovers on elements within a `.btn-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
{% endcallout %}
{% callout warning %}
#### Ensure correct `role` and provide a label
In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
{% endcallout %}
### Basic example
## Basic example
Wrap a series of buttons with `.btn` in `.btn-group`.
......@@ -37,7 +23,7 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
</div>
{% endexample %}
### Button toolbar
## Button toolbar
Combine sets of button groups into button toolbars for more complex components.
......@@ -60,7 +46,7 @@ Combine sets of button groups into button toolbars for more complex components.
</div>
{% endexample %}
### Sizing
## Sizing
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
......@@ -97,7 +83,7 @@ Instead of applying button sizing classes to every button in a group, just add `
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
{% endhighlight %}
### Nesting
## Nesting
Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
......@@ -118,7 +104,7 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
</div>
{% endexample %}
### Vertical variation
## Vertical variation
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
......@@ -172,3 +158,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
...
</div>
{% endhighlight %}
## Tooltips and popovers
Due to the specific implementation (and some other components), a bit of special casing is required for tooltips and popovers within button groups. **You'll have to specify the option `container: 'body'`** to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).
docs/components/forms.md
View file @ 4e45e236
......@@ -515,10 +515,22 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
## Help text
Block level help text for form controls.
No official help text classes exist in Bootstrap 4 (previously we had `.help-block` in v3), but thanks to our utility classes like `.text-muted`, you can create much more flexible help text as you need it.
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else).
{% example html %}
<small class="text-muted">
Some inline text with a small tag looks like this.
</small>
{% endexample %}
Block help text—for below inputs or for longer lines of help text—can be easily achieved with a `<p>`.
{% example html %}
<p class="text-help">A block of help text that breaks onto a new line and may extend beyond one line.</p>
<p class="text-muted">
A block of help text that breaks onto a new line and may extend beyond one line.
</p>
{% endexample %}
## Validation
......@@ -655,35 +667,18 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.c-in
### Select menu
Similar to the checkboxes and radios, we wrap the `<select>` in a `<label>` as a semantic wrapper that we can generate custom styles on with CSS's generated content.
Custom `<select>` menus need only a custom class, `.c-selecct` to trigger the custom styles.
{% example html %}
<label class="select">
<select>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</label>
<select class="c-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
The `<select>` has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:
- The `appearance` is reset to `none` for nearly all styles to correctly apply across modern browsers (meaning not IE9).
- The `:-moz-focusring` is overridden so that on focus there's no inner border in Firefox.
- The arrow is hidden in Firefox with a media query hack. (There's a [longstanding open bug](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) for a native method of addressing this.)
- The arrow is hidden in IE10+ with a simple selector.
- The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.
**Heads up!** This one comes with some quirks right now:
- `select[multiple]` is currently currently **not supported**.
- Clickability is limited in IE9.
- Firefox's dropdown of `option`s looks rather ugly.
- The custom caret is unable to receive the selected state's `color`.
Any ideas on improving these are most welcome.
Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**
### File browser
......
docs/components/navs.md
View file @ 4e45e236
......@@ -30,8 +30,8 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item disabled">
<a class="nav-link" href="#">Disabled</a>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -53,8 +53,8 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
{% example html %}
<ul class="nav nav-tabs">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
......@@ -74,8 +74,8 @@ Take that same HTML, but use `.nav-pills` instead:
{% example html %}
<ul class="nav nav-pills">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
......@@ -83,8 +83,8 @@ Take that same HTML, but use `.nav-pills` instead:
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -95,8 +95,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
{% example html %}
<ul class="nav nav-pills nav-stacked">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
......@@ -104,8 +104,8 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -118,10 +118,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-tabs">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
......@@ -134,8 +134,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -144,10 +144,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-pills">
<li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
......@@ -160,8 +160,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -172,8 +172,8 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<div class="bd-example bd-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
<li class="nav-item">
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
......@@ -212,8 +212,8 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link" href="#home" role="tab" data-toggle="tab">Home</a>
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
......@@ -277,8 +277,8 @@ Activates a tab element and content container. Tab should have either a `data-ta
{% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="nav-item active">
<a class="nav-link" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
......
docs/dist/css/bootstrap.css
View file @ 4e45e236
......@@ -3430,105 +3430,43 @@ input[type="button"].btn-block {
margin-left: 0;
}
.select {
position: relative;
display: inline-block;
color: #555;
}
.select > select {
.c-select {
display: inline-block;
width: 100%;
max-width: 100%;
-webkit-appearance: none;
padding: .5rem 2.25rem .5rem 1rem;
margin: 0;
line-height: 1.5;
color: #555;
cursor: pointer;
background-color: #eee;
border: 0;
border-radius: .25rem;
outline: 0;
padding: .375rem 1.75rem .375rem .75rem;
padding-right: .75rem \9;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
background-image: none \9;
-webkit-background-size: 8px 10px;
background-size: 8px 10px;
border: 1px solid #ccc;
-moz-appearance: none;
appearance: none;
}
.select > select:focus {
-webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}
.select > select:focus:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.select > select:active {
color: #fff;
background-color: #0074d9;
}
.select > select::-ms-expand {
display: none;
}
.select:after {
position: absolute;
top: 50%;
right: 1.25rem;
display: inline-block;
width: 0;
height: 0;
margin-top: -.15rem;
pointer-events: none;
content: "";
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
.c-select:focus {
border-color: #51a7e8;
outline: none;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5);
}
.select select:hover {
background-color: #ddd;
.c-select::-ms-expand {
opacity: 0;
}
@-moz-document url-prefix() {
.select select {
padding-right: 1rem;
text-indent: .01px;
text-overflow: "";
}
.select option {
background-color: #fff;
}
.c-select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px;
}
@media screen and (min-width: 0 \0) {
.select select {
z-index: 1;
padding: .5rem 1.5rem .5rem 1rem;
}
.select:after {
z-index: 5;
}
.select:before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: 1.5rem;
content: "";
background-color: #eee;
}
.select select:focus,
.select select:active,
.select select:hover {
color: #555;
background-color: #eee;
}
.c-select-sm:not([multiple]) {
height: 26px;
min-height: 26px;
}
.file {
......@@ -3607,14 +3545,10 @@ input[type="button"].btn-block {
text-decoration: none;
}
.disabled > .nav-link,
.nav-link.disabled {
color: #818a91;
}
.disabled > .nav-link,
.disabled > .nav-link:focus,
.disabled > .nav-link:hover,
.nav-link.disabled,
.nav-link.disabled:focus,
.nav-link.disabled:hover {
......@@ -3631,6 +3565,16 @@ input[type="button"].btn-block {
border-bottom: 1px solid #ddd;
}
.nav-tabs:before,
.nav-tabs:after {
display: table;
content: " ";
}
.nav-tabs:after {
clear: both;
}
.nav-tabs .nav-item {
float: left;
margin-bottom: -1px;
......@@ -3652,26 +3596,6 @@ input[type="button"].btn-block {
border-color: #eceeef #eceeef #ddd;
}
.nav-tabs .open > .nav-link,
.nav-tabs .open > .nav-link:focus,
.nav-tabs .open > .nav-link:hover,
.nav-tabs .active > .nav-link,
.nav-tabs .active > .nav-link:focus,
.nav-tabs .active > .nav-link:hover,
.nav-tabs .nav-link.open,
.nav-tabs .nav-link.open:focus,
.nav-tabs .nav-link.open:hover,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover {
color: #55595c;
background-color: #fff;
border-color: #ddd #ddd transparent;
}
.nav-tabs .disabled > .nav-link,
.nav-tabs .disabled > .nav-link:focus,
.nav-tabs .disabled > .nav-link:hover,
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link.disabled:focus,
.nav-tabs .nav-link.disabled:hover {
......@@ -3680,6 +3604,17 @@ input[type="button"].btn-block {
border-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-item.open .nav-link,
.nav-tabs .nav-item.open .nav-link:focus,
.nav-tabs .nav-item.open .nav-link:hover {
color: #55595c;
background-color: #fff;
border-color: #ddd #ddd transparent;
}
.nav-pills .nav-item {
float: left;
}
......@@ -3694,18 +3629,12 @@ input[type="button"].btn-block {
border-radius: .25rem;
}
.nav-pills .open > .nav-link,
.nav-pills .open > .nav-link:focus,
.nav-pills .open > .nav-link:hover,
.nav-pills .active > .nav-link,
.nav-pills .active > .nav-link:focus,
.nav-pills .active > .nav-link:hover,
.nav-pills .nav-link.open,
.nav-pills .nav-link.open:focus,
.nav-pills .nav-link.open:hover,
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover {
.nav-pills .nav-link.active:hover,
.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover {
color: #fff;
cursor: default;
background-color: #0275d8;
......
docs/dist/css/bootstrap.css.map
View file @ 4e45e236
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 4e45e236
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/dist/css/bootstrap.min.css.map
View file @ 4e45e236
This diff was suppressed by a .gitattributes entry.
docs/dist/js/bootstrap.js
View file @ 4e45e236
......@@ -296,7 +296,7 @@ var Alert = (function ($) {
return;
}
$(element).one(Util.TRANSITION_END, this._destroyElement.bind(this, element)).emulateTransitionEnd(TRANSITION_DURATION);
$(element).one(Util.TRANSITION_END, $.proxy(this._destroyElement, this, element)).emulateTransitionEnd(TRANSITION_DURATION);
}
}, {
key: '_destroyElement',
......
docs/dist/js/bootstrap.min.js
View file @ 4e45e236
This diff is collapsed.
docs/dist/js/umd/alert.js
View file @ 4e45e236
......@@ -140,7 +140,7 @@
return;
}
$(element).one(_Util['default'].TRANSITION_END, this._destroyElement.bind(this, element)).emulateTransitionEnd(TRANSITION_DURATION);
$(element).one(_Util['default'].TRANSITION_END, $.proxy(this._destroyElement, this, element)).emulateTransitionEnd(TRANSITION_DURATION);
}
}, {
key: '_destroyElement',
......
docs/getting-started/accessibility.md
View file @ 4e45e236
......@@ -6,6 +6,20 @@ group: getting-started
Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.
## Component requirements
Some common HTML elements are always in need for basic accessibility enhancements through `role`s and Aria attributes. Below is a list of some of the most frequently used ones.
{% callout info %}
**Heads up!** As we go through the alphas, we'll be moving more accessibility notes here with links to specific sections from other areas of the docs.
{% endcallout %}
### Button groups
In order for assistive technologies–such as screen readers–to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct `role` attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
## Skip navigation
If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
......
docs/migration.md
View file @ 4e45e236
......@@ -6,6 +6,10 @@ group: migration
Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.
{% callout info %}
**Heads up!** This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we'd love pull requests to help keep it up to date.
{% endcallout %}
## Summary
Here are the big ticket items you'll want to be aware of when moving from v3 to v4.
......
js/dist/scrollspy.js
View file @ 4e45e236
......@@ -45,18 +45,23 @@ var ScrollSpy = (function ($) {
};
var ClassName = {
DROPDOWN_TOGGLE: 'dropdown-toggle',
DROPDOWN_ITEM: 'dropdown-item',
DROPDOWN_MENU: 'dropdown-menu',
NAV_LINK: 'nav-link',
NAV: 'nav',
ACTIVE: 'active'
};
var Selector = {
DATA_SPY: '[data-spy="scroll"]',
ACTIVE: '.active',
LIST_ITEM: '.list-item',
LI: 'li',
LI_DROPDOWN: 'li.dropdown',
NAV_LINKS: '.nav-link',
DROPDOWN_ITEMS: '.dropdown-item'
DROPDOWN: '.dropdown',
DROPDOWN_ITEMS: '.dropdown-item',
DROPDOWN_TOGGLE: '.dropdown-toggle'
};
var OffsetMethod = {
......@@ -229,14 +234,18 @@ var ScrollSpy = (function ($) {
queries = queries.map(function (selector) {
return selector + '[data-target="' + target + '"],' + (selector + '[href="' + target + '"]');
});
var $link = $(queries.join(','));
if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
$link.parent().find(ClassName.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
$link.addClass(ClassName.ACTIVE);
} else {
// todo (fat) this is kinda sus…
// recursively add actives to tested nav-links
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE);
}
$link.addClass(ClassName.ACTIVE);
$(this._scrollElement).trigger(Event.ACTIVATE, {
relatedTarget: target
});
......@@ -244,8 +253,7 @@ var ScrollSpy = (function ($) {
}, {
key: '_clear',
value: function _clear() {
debugger;
$(this._selector).filter(ClassName.ACTIVE).removeClass(Selector.ACTIVE);
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE);
}
// static
......
js/dist/scrollspy.js.map
View file @ 4e45e236
This diff was suppressed by a .gitattributes entry.
js/src/scrollspy.js
View file @ 4e45e236
......@@ -43,18 +43,23 @@ const ScrollSpy = (($) => {
}
const ClassName = {
DROPDOWN_TOGGLE : 'dropdown-toggle',
DROPDOWN_ITEM : 'dropdown-item',
DROPDOWN_MENU : 'dropdown-menu',
ACTIVE : 'active'
DROPDOWN_ITEM : 'dropdown-item',
DROPDOWN_MENU : 'dropdown-menu',
NAV_LINK : 'nav-link',
NAV : 'nav',
ACTIVE : 'active'
}
const Selector = {
DATA_SPY : '[data-spy="scroll"]',
ACTIVE : '.active',
LI_DROPDOWN : 'li.dropdown',
NAV_LINKS : '.nav-link',
DROPDOWN_ITEMS : '.dropdown-item'
DATA_SPY : '[data-spy="scroll"]',
ACTIVE : '.active',
LIST_ITEM : '.list-item',
LI : 'li',
LI_DROPDOWN : 'li.dropdown',
NAV_LINKS : '.nav-link',
DROPDOWN : '.dropdown',
DROPDOWN_ITEMS : '.dropdown-item',
DROPDOWN_TOGGLE : '.dropdown-toggle'
}
const OffsetMethod = {
......@@ -237,22 +242,25 @@ const ScrollSpy = (($) => {
return `${selector}[data-target="${target}"],` +
`${selector}[href="${target}"]`
})
let $link = $(queries.join(','))
if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
$link.parent().find(ClassName.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
$link.addClass(ClassName.ACTIVE)
} else {
// todo (fat) this is kinda sus…
// recursively add actives to tested nav-links
$link.parents(Selector.LI).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
}
$link.addClass(ClassName.ACTIVE)
$(this._scrollElement).trigger(Event.ACTIVATE, {
relatedTarget: target
})
}
_clear() {
debugger
$(this._selector).filter(ClassName.ACTIVE).removeClass(Selector.ACTIVE)
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
}
......
js/tests/unit/scrollspy.js
View file @ 4e45e236
......@@ -129,9 +129,9 @@ $(function () {
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+ '<nav id="navigation" class="navbar">'
+ '<ul class="nav navbar-nav">'
+ '<li class="active"><a id="one-link" href="#one">One</a></li>'
+ '<li><a id="two-link" href="#two">Two</a></li>'
+ '<li><a id="three-link" href="#three">Three</a></li>'
+ '<li class="active"><a class="nav-link" id="one-link" href="#one">One</a></li>'
+ '<li><a class="nav-link" id="two-link" href="#two">Two</a></li>'
+ '<li><a class="nav-link" id="three-link" href="#three">Three</a></li>'
+ '</ul>'
+ '</nav>'
+ '<div id="content" style="height: 200px; overflow-y: auto;">'
......@@ -147,9 +147,9 @@ $(function () {
$scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
$scrollspy.on('scroll.bs.scrollspy', function () {
assert.ok(!$section.find('#one-link').parent().hasClass('active'), '"active" class removed from first section')
assert.ok($section.find('#two-link').parent().hasClass('active'), '"active" class on middle section')
assert.ok(!$section.find('#three-link').parent().hasClass('active'), '"active" class not on last section')
assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section')
assert.ok($section.find('#two-link').hasClass('active'), '"active" class on middle section')
assert.ok(!$section.find('#three-link').hasClass('active'), '"active" class not on last section')
done()
})
......@@ -161,8 +161,8 @@ $(function () {
var navbarHtml =
'<nav class="navbar">'
+ '<ul class="nav">'
+ '<li id="li-1"><a href="#div-1">div 1</a></li>'
+ '<li id="li-2"><a href="#div-2">div 2</a></li>'
+ '<li><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>'
+ '<li><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>'
+ '</ul>'
+ '</nav>'
var contentHtml =
......@@ -189,8 +189,8 @@ $(function () {
return deferred.promise()
}
$.when(testElementIsActiveAfterScroll('#li-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#li-2', '#div-2') })
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
})
QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) {
......@@ -199,9 +199,9 @@ $(function () {
var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">'
+ '<ul class="nav">'
+ '<li id="li-1"><a href="#div-1">div 1</a>'
+ '<li><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
+ '<ul>'
+ '<li id="li-2"><a href="#div-2">div 2</a></li>'
+ '<li><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
+ '</ul>'
+ '</li>'
+ '</ul>'
......@@ -223,8 +223,8 @@ $(function () {
if (++times > 3) return done()
$content.one('scroll', function () {
assert.ok($('#li-1').hasClass('active'), 'nav item for outer element has "active" class')
assert.ok($('#li-2').hasClass('active'), 'nav item for inner element has "active" class')
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
testActiveElements()
})
......@@ -239,9 +239,9 @@ $(function () {
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
+ '<nav id="navigation" class="navbar">'
+ '<ul class="nav navbar-nav">'
+ '<li class="active"><a id="one-link" href="#one">One</a></li>'
+ '<li><a id="two-link" href="#two">Two</a></li>'
+ '<li><a id="three-link" href="#three">Three</a></li>'
+ '<li><a id="one-link" class="nav-link active" href="#one">One</a></li>'
+ '<li><a id="two-link" class="nav-link" href="#two">Two</a></li>'
+ '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>'
+ '</ul>'
+ '</nav>'
$(sectionHTML).appendTo('#qunit-fixture')
......@@ -262,8 +262,7 @@ $(function () {
})
.one('scroll.bs.scrollspy', function () {
assert.strictEqual($('.active').length, 1, '"active" class on only one element present')
assert.strictEqual($('.active').has('#two-link').length, 1, '"active" class on second section')
assert.strictEqual($('.active').is('#two-link'), true, '"active" class on second section')
$scrollspy
.one('scroll.bs.scrollspy', function () {
assert.strictEqual($('.active').length, 0, 'selection cleared')
......@@ -279,11 +278,11 @@ $(function () {
var navbarHtml =
'<nav class="navbar">'
+ '<ul class="nav">'
+ '<li id="li-100-1"><a href="#div-100-1">div 1</a></li>'
+ '<li id="li-100-2"><a href="#div-100-2">div 2</a></li>'
+ '<li id="li-100-3"><a href="#div-100-3">div 3</a></li>'
+ '<li id="li-100-4"><a href="#div-100-4">div 4</a></li>'
+ '<li id="li-100-5"><a href="#div-100-5">div 5</a></li>'
+ '<li><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>'
+ '<li><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>'
+ '<li><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>'
+ '<li><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>'
+ '<li><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>'
+ '</ul>'
+ '</nav>'
var contentHtml =
......@@ -328,9 +327,9 @@ $(function () {
var navbarHtml =
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
+ '<ul class="nav">'
+ '<li id="li-' + type + 'm-1"><a href="#div-' + type + 'm-1">div 1</a></li>'
+ '<li id="li-' + type + 'm-2"><a href="#div-' + type + 'm-2">div 2</a></li>'
+ '<li id="li-' + type + 'm-3"><a href="#div-' + type + 'm-3">div 3</a></li>'
+ '<li><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>'
+ '<li><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>'
+ '<li><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>'
+ '</ul>'
+ '</nav>'
var contentHtml =
......@@ -371,9 +370,9 @@ $(function () {
var navbarHtml =
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
+ '<ul class="nav">'
+ '<li id="li-' + type + 'm-1"><a href="#div-' + type + 'm-1">div 1</a></li>'
+ '<li id="li-' + type + 'm-2"><a href="#div-' + type + 'm-2">div 2</a></li>'
+ '<li id="li-' + type + 'm-3"><a href="#div-' + type + 'm-3">div 3</a></li>'
+ '<li><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>'
+ '<li><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>'
+ '<li><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>'
+ '</ul>'
+ '</nav>'
var contentHtml =
......
scss/_custom-forms.scss
View file @ 4e45e236
......@@ -123,115 +123,47 @@
// Select
//
// Replaces the browser default select with a custom one.
// Replaces the browser default select with a custom one, mostly pulled from
// http://primercss.io.
.select {
position: relative;
.c-select {
display: inline-block;
color: #555;
> select {
display: inline-block;
width: 100%;
padding: .5rem 2.25rem .5rem 1rem;
margin: 0;
line-height: 1.5;
color: #555;
cursor: pointer;
background-color: #eee;
border: 0;
border-radius: .25rem;
outline: 0;
-webkit-appearance: none;
appearance: none;
&:focus {
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
// Undo the Firefox inner focus ring
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
}
&:active {
color: #fff;
background-color: #0074d9;
}
// Hide the arrow in IE10 and up
&::-ms-expand {
display: none;
}
}
// Dropdown arrow
&:after {
position: absolute;
top: 50%;
right: 1.25rem;
display: inline-block;
width: 0;
height: 0;
margin-top: -.15rem;
pointer-events: none;
content: "";
border-top: .35rem solid;
border-right: .35rem solid transparent;
border-bottom: .35rem solid transparent;
border-left: .35rem solid transparent;
}
}
// Hover state
.select select {
@include hover {
background-color: #ddd;
max-width: 100%;
padding: .375rem 1.75rem .375rem .75rem;
vertical-align: middle;
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
background-size: 8px 10px;
border: 1px solid $input-border;
// Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
// IE9 hacks to hide the background-image and reduce padding
padding-right: .75rem \9;
background-image: none \9;
&:focus {
outline: none;
border-color: #51a7e8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
}
// Hides the default caret in IE11
&::-ms-expand {
opacity: 0;
}
}
.c-select-sm {
padding-top: 3px;
padding-bottom: 3px;
font-size: 12px;
// Media query to target Firefox only
@-moz-document url-prefix() {
// Firefox hack to hide the arrow
.select select {
padding-right: 1rem;
text-indent: 0.01px;
text-overflow: "";
}
// <option> elements inherit styles from <select>, so reset them.
.select option {
background-color: #fff;
}
}
// IE9 hack to hide the arrow
@media screen and (min-width:0\0) {
.select select {
z-index: 1;
padding: .5rem 1.5rem .5rem 1rem;
}
.select:after {
z-index: 5;
}
.select:before {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
z-index: 2;
display: block;
width: 1.5rem;
content: "";
background-color: #eee;
}
.select select {
@include hover-focus-active {
color: #555;
background-color: #eee;
}
&:not([multiple]) {
height: 26px;
min-height: 26px;
}
}
......
scss/_nav.scss
View file @ 4e45e236
......@@ -17,7 +17,6 @@
}
// Disabled state lightens text and removes hover/tab effects
.disabled > &,
&.disabled {
color: $nav-disabled-link-color;
......@@ -83,6 +82,7 @@
.nav-tabs {
border-bottom: 1px solid $nav-tabs-border-color;
@include clearfix();
.nav-item {
float: left;
......@@ -103,27 +103,24 @@
@include hover-focus {
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
}
&.disabled {
@include plain-hover-focus {
color: $nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
}
}
}
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
.nav-link.active,
.nav-item.open .nav-link {
@include plain-hover-focus {
color: $nav-tabs-active-link-hover-color;
background-color: $nav-tabs-active-link-hover-bg;
border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
}
}
.disabled > .nav-link,
.nav-link.disabled {
@include plain-hover-focus {
color: $nav-disabled-link-color;
background-color: transparent;
border-color: transparent;
}
}
}
......@@ -146,10 +143,8 @@
@include border-radius($nav-pills-border-radius);
}
.open > .nav-link,
.active > .nav-link,
.nav-link.open,
.nav-link.active {
.nav-link.active,
.nav-item.open .nav-link {
@include plain-hover-focus {
color: $component-active-color;
cursor: default;
......
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