Merge branch 'v4' of github.com:twbs/derpstrap into v4
This commit is contained in:
Jacob Thornton
commit
4e45e2363c
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
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'
|
||||
})
|
||||
|
||||
|
|
|
|||
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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
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',
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
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 New Issue