mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Merge branch 'v4' of github.com:twbs/derpstrap into v4
This commit is contained in:
Jacob Thornton
commit
4e45e2363c
28 changed files with 308 additions and 501 deletions
|
|
@ -3430,105 +3430,43 @@ input[type="button"].btn-block {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
.c-select {
|
||||
display: inline-block;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.select > 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;
|
||||
.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:focus:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
.c-select::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.select > select:active {
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
.c-select-sm {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.select select:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.select select {
|
||||
padding-right: 1rem;
|
||||
text-indent: .01px;
|
||||
text-overflow: "";
|
||||
}
|
||||
.select option {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
|
|
|
|||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css.map
vendored
2
dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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'
|
||||
})
|
||||
|
||||
|
|
|
|||
2
docs/assets/css/docs.min.css
vendored
2
docs/assets/css/docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
.carbonad-text a,
|
||||
.carbonad-tag a {
|
||||
color: #fff !important;
|
||||
color: $bd-purple-light !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
|
|
|
|||
|
|
@ -21,4 +21,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,15 +35,15 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
> li > a {
|
||||
.dropdown-item {
|
||||
padding-left: .75rem;
|
||||
padding-right: .75rem;
|
||||
|
||||
&:first-child { margin-top: .25rem; }
|
||||
&:last-child { margin-bottom: .25rem; }
|
||||
}
|
||||
|
||||
> li:first-child { margin-top: .25rem; }
|
||||
> li:last-child { margin-bottom: .25rem; }
|
||||
|
||||
> .no-results {
|
||||
.no-results {
|
||||
padding: .75rem 1rem;
|
||||
color: #7a7a7a;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<p class="text-help">A block of help text that breaks onto a new line and may extend beyond one line.</p>
|
||||
<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-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
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -3430,105 +3430,43 @@ input[type="button"].btn-block {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.select {
|
||||
position: relative;
|
||||
.c-select {
|
||||
display: inline-block;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.select > 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;
|
||||
.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:focus:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
.c-select::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.select > select:active {
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
.c-select-sm {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.select select:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.select select {
|
||||
padding-right: 1rem;
|
||||
text-indent: .01px;
|
||||
text-overflow: "";
|
||||
}
|
||||
.select option {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
|
|
|
|||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css.map
vendored
2
docs/dist/css/bootstrap.min.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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',
|
||||
|
|
|
|||
2
docs/dist/js/bootstrap.min.js
vendored
2
docs/dist/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/js/umd/alert.js
vendored
2
docs/dist/js/umd/alert.js
vendored
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
22
js/dist/scrollspy.js
vendored
22
js/dist/scrollspy.js
vendored
|
|
@ -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
|
||||
|
|
|
|||
2
js/dist/scrollspy.js.map
vendored
2
js/dist/scrollspy.js.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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)
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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;
|
||||
|
||||
> 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;
|
||||
// Have to include vendor prefixes as the `appearance` property isn't part of the CSS spec.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
|
||||
// IE9 hacks to hide the background-image and reduce padding
|
||||
padding-right: .75rem \9;
|
||||
background-image: none \9;
|
||||
|
||||
// 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;
|
||||
}
|
||||
&: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);
|
||||
}
|
||||
|
||||
// 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;
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
.select select {
|
||||
@include hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue