Merge branch 'MDL-77277-master' of https://github.com/skodak/moodle

This commit is contained in:
Andrew Nicols 2023-03-02 09:11:22 +08:00
commit 54ac0ae079
101 changed files with 1261 additions and 1185 deletions

View File

@ -62,8 +62,8 @@ staticDir: "./admin/tool/componentlibrary/content/static"
params:
moodleroot: "MOODLEROOT"
current_version: "4.6.0"
current_ruby_version: "4.6.0"
current_version: "4.6.2"
current_ruby_version: "4.6.2"
docs_version: "4.6"
boostrap_docs: "https://getbootstrap.com/docs/4.6"
repo: "https://github.com/twbs/bootstrap"

View File

@ -54,4 +54,4 @@ $breadcrumb-divider: none;
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
For more information, see the [ARIA Authoring Practices Guide breadcrumb pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).

View File

@ -123,10 +123,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
@ -155,10 +155,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
@ -166,28 +166,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>

View File

@ -81,7 +81,7 @@ Create block level buttons—those that span the full width of a parent—by add
## Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
Buttons will appear pressed when active with a darker background, darker border, and, when shadows are enabled, an inset shadow. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
{{< example >}}
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
@ -101,19 +101,23 @@ Disabled buttons using the `<a>` element behave a bit different:
- `<a>`s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.
- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all.
- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
- Disabled buttons using `<a>` should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
- Disabled buttons using `<a>` *should not* include the `href` attribute.
{{< example >}}
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
{{< /example >}}
### Link functionality caveat
To cover cases where you have to keep the `href` attribute on a disabled link, the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
{{< example >}}
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
{{< /example >}}
{{< callout warning >}}
##### Link functionality caveat
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
{{< /callout >}}
## Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

View File

@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>

View File

@ -24,7 +24,7 @@ Lastly, if you're building our JavaScript from source, it [requires `util.js`]({
Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit.
**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element.
### Slides only
@ -48,7 +48,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-
### With controls
Adding in the previous and next controls:
Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"`.
{{< example >}}
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
@ -63,14 +63,14 @@ Adding in the previous and next controls:
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</button>
</div>
{{< /example >}}
@ -96,14 +96,14 @@ You can also add the indicators to the carousel, alongside the controls, too.
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</button>
</div>
{{< /example >}}
@ -141,20 +141,20 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</button>
</div>
{{< /example >}}
### Crossfade
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add `.bg-body` or some custom CSS to the `.carousel-item`s for proper crossfading.
{{< example >}}
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
@ -169,14 +169,14 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</button>
</div>
{{< /example >}}
@ -197,14 +197,14 @@ Add `data-interval=""` to a `.carousel-item` to change the amount of time to del
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</button>
</div>
{{< /example >}}
@ -225,14 +225,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControlsNoTouching" role="button" data-slide="prev">
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-slide="next">
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</button>
</div>
{{< /example >}}

View File

@ -40,6 +40,29 @@ Generally, we recommend using a button with the `data-target` attribute. While n
</div>
{{< /example >}}
## Horizontal
The collapse plugin also supports horizontal collapsing. Add the `.width` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}).
{{< callout info >}}
Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**
{{< /callout >}}
{{< example >}}
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
{{< /example >}}
## Multiple targets
A `<button>` or `<a>` can show and hide multiple elements by referencing them with a JQuery selector in its `href` or `data-target` attribute.
@ -127,7 +150,7 @@ Be sure to add `aria-expanded` to the control element. This attribute explicitly
If your control element is targeting a single collapsible element i.e. the `data-target` attribute is pointing to an `id` selector you should add the `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Note that Bootstrap's current implementation does not cover the various keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
Note that Bootstrap's current implementation does not cover the various keyboard interactions described in the [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript.
## Usage

View File

@ -16,7 +16,7 @@ If you're building our JavaScript from source, it [requires `util.js`]({{< docsr
## Accessibility
The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/WAI/PF/aria/roles#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
The [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr>](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/TR/wai-aria/#menu), but this is specific to application-like menus which trigger actions or functions. <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus.
Bootstrap's dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true <abbr title="Accessible Rich Internet Applications">ARIA</abbr> menus. Authors will have to include these more specific attributes themselves.
@ -32,10 +32,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
{{< example >}}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
@ -47,11 +47,11 @@ And with `<a>` elements:
{{< example >}}
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
@ -63,7 +63,7 @@ The best part is you can do this with any button variant, too:
<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -73,7 +73,7 @@ The best part is you can do this with any button variant, too:
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -83,7 +83,7 @@ The best part is you can do this with any button variant, too:
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -93,7 +93,7 @@ The best part is you can do this with any button variant, too:
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -103,7 +103,7 @@ The best part is you can do this with any button variant, too:
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -113,7 +113,7 @@ The best part is you can do this with any button variant, too:
</div>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -127,7 +127,7 @@ The best part is you can do this with any button variant, too:
```html
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
@ -149,7 +149,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -162,7 +162,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -175,7 +175,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -188,7 +188,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -201,7 +201,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -214,7 +214,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -231,7 +231,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -250,7 +250,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="bd-example">
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
@ -263,7 +263,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
</div>
<div class="btn-group">
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -279,7 +279,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
```html
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
@ -290,7 +290,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -301,7 +301,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<div class="bd-example">
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
@ -314,7 +314,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
</div>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -330,7 +330,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
```html
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
@ -341,7 +341,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -358,7 +358,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<div class="bd-example">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
@ -373,7 +373,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -389,7 +389,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
```html
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
@ -402,7 +402,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -417,7 +417,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
<div class="bd-example">
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
@ -432,7 +432,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
@ -448,7 +448,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
```html
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
@ -461,7 +461,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
@ -476,7 +476,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<div class="bd-example">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
@ -488,8 +488,8 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
</div>
</div>
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
@ -509,7 +509,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
```html
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
@ -519,8 +519,8 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
@ -539,10 +539,10 @@ Historically dropdown menu contents *had* to be links, but that's no longer the
{{< example >}}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<div class="dropdown-menu">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
@ -580,7 +580,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
{{< example >}}
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
<a class="dropdown-item disabled">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
{{< /example >}}
@ -595,7 +595,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
{{< example >}}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
@ -614,7 +614,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
{{< example >}}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Left-aligned but right aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-lg-right">
@ -629,7 +629,7 @@ To align **left** the dropdown menu with the given breakpoint or larger, add `.d
{{< example >}}
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false">
Right-aligned but left aligned when large screen
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
@ -745,10 +745,10 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
{{< example >}}
<div class="d-flex">
<div class="dropdown mr-1">
<button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
Offset
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
@ -756,10 +756,10 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Reference</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false" data-reference="parent">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
@ -784,10 +784,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
```html
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" data-toggle="dropdown" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
<div class="dropdown-menu">
...
</div>
</div>

View File

@ -192,7 +192,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
{{< example >}}
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -207,7 +207,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -225,7 +225,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
@ -243,7 +243,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary">Action</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">

View File

@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**.
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
{{< /example >}}

View File

@ -1,7 +1,7 @@
---
layout: docs
title: Navbar
description: Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
description: Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, collapse plugin, and more.
group: components
toc: true
---
@ -50,10 +50,10 @@ Here's an example of all the sub-components included in a responsive light-theme
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
@ -61,7 +61,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
@ -135,7 +135,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
@ -155,7 +155,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</div>
</div>
</nav>
@ -181,10 +181,10 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
@ -461,10 +461,10 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
@ -472,7 +472,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
<a class="nav-link disabled">Link</a>
</li>
</ul>
<form class="d-flex">
@ -510,7 +510,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
@ -539,7 +539,7 @@ With a brand name shown on the left and toggler on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
@ -568,7 +568,7 @@ With a toggler on the left and brand name on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">

View File

@ -28,7 +28,7 @@ The base `.nav` component does not include any `.active` state. The following ex
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -40,7 +40,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</nav>
{{< /example >}}
@ -66,7 +66,7 @@ Centered with `.justify-content-center`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -85,7 +85,7 @@ Right-aligned with `.justify-content-end`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -106,7 +106,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -118,7 +118,7 @@ As always, vertical navigation is possible without `<ul>`s, too.
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</nav>
{{< /example >}}
@ -138,7 +138,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -159,7 +159,7 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -180,7 +180,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -192,7 +192,7 @@ When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</nav>
{{< /example >}}
@ -210,7 +210,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -222,7 +222,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</nav>
{{< /example >}}
@ -235,7 +235,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>
{{< /example >}}
@ -243,7 +243,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example.
Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/). See [JavaScript behavior](#javascript-behavior) for dynamic tabbed interfaces in this section for an example.
## Using dropdowns
@ -257,7 +257,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link active" href="#">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>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -270,7 +270,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -283,7 +283,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link active" href="#">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>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -296,7 +296,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -307,20 +307,22 @@ Use the tab JavaScript plugin—include it individually or through the compiled
If you're building our JavaScript from source, it [requires `util.js`]({{< docsref "/getting-started/javascript#util" >}}).
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).
Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
{{< callout danger >}}
Note that the tab JavaScript plugin **does not** support tabbed interfaces that contain dropdown menus, as these cause both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
{{< /callout >}}
<div class="bd-example bd-example-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
<button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
@ -339,13 +341,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
```html
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
<button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
@ -360,9 +362,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
<div class="bd-example bd-example-tabs">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
<button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
@ -381,9 +383,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
```html
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
<button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
@ -398,13 +400,13 @@ The tabs plugin also works with pills.
<div class="bd-example bd-example-tabs">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
<button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
<button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
<button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
@ -423,13 +425,13 @@ The tabs plugin also works with pills.
```html
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
<button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
<button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
<button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
@ -445,10 +447,10 @@ And with vertical pills.
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="col-9">
@ -474,10 +476,10 @@ And with vertical pills.
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
<button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="col-9">
@ -499,16 +501,16 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
@ -526,7 +528,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
```js
$('#myTab a').on('click', function (event) {
$('#myTab button').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
@ -535,10 +537,10 @@ $('#myTab a').on('click', function (event) {
You can activate individual tabs in several ways:
```js
$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab
$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab
```
### Fade effect
@ -562,21 +564,21 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
#### $().tab
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
Activates a tab element and content container. Tab should have either a `data-target` or, if using a link, an `href` attribute targeting a container node in the DOM.
```html
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
<button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
<button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
<button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
<button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
</li>
</ul>
@ -589,7 +591,7 @@ Activates a tab element and content container. Tab should have either a `data-ta
<script>
$(function () {
$('#myTab li:last-child a').tab('show')
$('#myTab li:last-child button').tab('show')
})
</script>
```
@ -645,7 +647,7 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
</table>
```js
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})

View File

@ -58,7 +58,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
@ -128,7 +128,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
@ -144,7 +144,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>

View File

@ -22,6 +22,10 @@ Things to know when using the popover plugin:
- Popovers must be hidden before their corresponding elements have been removed from the DOM.
- Popovers can be triggered thanks to an element inside a shadow DOM.
{{< callout info >}}
{{< partial "callout-info-sanitizer.md" >}}
{{< /callout >}}
{{< callout info >}}
{{< partial "callout-info-prefersreducedmotion.md" >}}
{{< /callout >}}
@ -268,7 +272,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<td>sanitize</td>
<td>boolean</td>
<td>true</td>
<td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td>
<td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td>
</tr>
<tr>
<td>whiteList</td>

View File

@ -33,7 +33,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
<a class="nav-link" href="#mdo">@mdo</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>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
@ -69,7 +69,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
<a class="nav-link" href="#mdo">@mdo</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>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>

View File

@ -47,7 +47,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
### Live
Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with `.hide`.
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with `.hide`.
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
@ -91,7 +91,7 @@ Click the button the below to show as toast (positioning with our utilities in t
### Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.
Toasts are slightly translucent to blend in with what's below them.
{{< example class="bg-dark" >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
@ -229,13 +229,13 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
## Accessibility
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
You also need to adapt the `role` and `aria-live` level depending on the content. If it's an important message like an error, use `role="alert" aria-live="assertive"`, otherwise use `role="status" aria-live="polite"` attributes.
As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast.
As the content you're displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
```html
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
@ -261,6 +261,8 @@ When using `autohide: false`, you must add a close button to allow users to dism
</div>
{{< /example >}}
While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
## JavaScript behavior
### Usage

View File

@ -21,6 +21,10 @@ Things to know when using the tooltip plugin:
- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.
{{< callout info >}}
{{< partial "callout-info-sanitizer.md" >}}
{{< /callout >}}
{{< callout info >}}
{{< partial "callout-info-prefersreducedmotion.md" >}}
{{< /callout >}}
@ -269,7 +273,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
<td>sanitize</td>
<td>boolean</td>
<td>true</td>
<td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized.</td>
<td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td>
</tr>
<tr>
<td>whiteList</td>

View File

@ -53,7 +53,7 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}})
If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
```html
<picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

View File

@ -52,7 +52,7 @@ $font-family-sans-serif:
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
```
Note that because the font stack includes emoji fonts, many common symbol/dingbat unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multi-colored pictographs. Their appearance will vary, depending on the style used in the browser/platform's native emoji font, and they won't be affected by any CSS `color` styles.
This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.

View File

@ -201,7 +201,7 @@ Use text utilities as needed to change the alignment of your blockquote.
{{< example >}}
<blockquote class="blockquote text-center">
<p class="mb-0">>A well-known quote, contained in a blockquote element.</p>
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
{{< /example >}}
@ -283,4 +283,4 @@ Align terms and descriptions horizontally by using our grid system's predefined
As of v4.3.0, Bootstrap ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the `$enable-responsive-font-sizes` Sass variable to `true` and recompiling Bootstrap.
To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/v8.0.4).
To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/v8.1.0).

View File

@ -606,6 +606,7 @@ Responsive variations also exist for `align-content`.
- `.align-content{{ .abbr }}-start`
- `.align-content{{ .abbr }}-end`
- `.align-content{{ .abbr }}-center`
- `.align-content{{ .abbr }}-between`
- `.align-content{{ .abbr }}-around`
- `.align-content{{ .abbr }}-stretch`
{{- end -}}

File diff suppressed because one or more lines are too long

View File

@ -1,16 +1,26 @@
- name: primary
- name: blue
hex: "#007bff"
- name: secondary
hex: "#868e96"
- name: success
hex: "#28a745"
- name: danger
- name: indigo
hex: "#6610f2"
- name: purple
hex: "#6f42c1"
- name: pink
hex: "#e83e8c"
- name: red
hex: "#dc3545"
- name: warning
- name: orange
hex: "#fd7e14"
- name: yellow
hex: "#ffc107"
- name: info
- name: green
hex: "#28a745"
- name: teal
hex: "#20c997"
- name: cyan
hex: "#17a2b8"
- name: light
hex: "#f8f9fa"
- name: dark
- name: white
hex: "#fff"
- name: gray
hex: "#6c757d"
- name: gray-dark
hex: "#343a40"

View File

@ -9,7 +9,7 @@
- name: 500
hex: "#adb5bd"
- name: 600
hex: "#868e96"
hex: "#6c757d"
- name: 700
hex: "#495057"
- name: 800

View File

@ -1,7 +1,7 @@
- name: primary
hex: "#007bff"
- name: secondary
hex: "#868e96"
hex: "#6c757d"
- name: success
hex: "#28a745"
- name: danger

View File

@ -1,5 +1,5 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
<meta name="author" content="{{ .Site.Params.authors }}">
<meta name="generator" content="Hugo {{ hugo.Version }}">

View File

@ -1,6 +1,5 @@
{{- /*
Usage: `callout "type"`,
where type is one of info (default), danger, warning
Usage: `callout "type"`, where `type` is one of info (default), danger, or warning
*/ -}}
{{- $css_class := .Get 0 | default "info" -}}

View File

@ -1,27 +1,28 @@
{{- /*
Usage: `example [args]`
Usage: `example args`
`args` are optional and can be one of the following:
id: the `div`'s id - default: ""
class: any extra class(es) to be added to the `div` - default ""
show_preview: if the preview should be output in the HTML - default: `true`
show_markup: if the markup should be output in the HTML - default: `true`
`args` are all optional and can be one of the following:
* id: the `div`'s id - default: ""
* class: any extra class(es) to be added to the `div` - default: ""
* show_preview: if the preview should be output in the HTML - default: `true`
* show_markup: if the markup should be output in the HTML - default: `true`
*/ -}}
{{- $id := .Get "id" -}}
{{- $class := .Get "class" -}}
{{- $lang := .Get "lang" | default "html" -}}
{{- $show_preview := .Get "show_preview" | default true -}}
{{- $show_markup := .Get "show_markup" | default true -}}
{{- $input := .Inner -}}
{{- $inputrendered := replaceRE `{{#js}}` "<div class='hidden' data-action='runjs'>" $input -}}
{{- $inputrendered = replaceRE `{{/js}}` "</div>" $inputrendered -}}
{{- if eq $show_preview true -}}
<div{{ with .Get "id" }} id="{{ . }}"{{ end }} class="bd-example{{ with .Get "class" }} {{ . }}{{ end }}">
{{- $inputrendered | safeHTML -}}
<div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example{{ with $class }} {{ . }}{{ end }}">
{{- $input -}}
</div>
{{- end -}}
{{- if eq $show_markup true -}}
{{- $content := replaceRE `<svg class="bd\-placeholder\-img(?:\-lg)?(?: *?bd\-placeholder\-img\-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
{{- $content = replaceRE `(class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") "html" "" -}}
{{- $content := replaceRE `<svg class="bd-placeholder-img(?:-lg)?(?: *?bd-placeholder-img-lg)? ?(.*?)".*?<\/svg>\n` `<img src="..." class="$1" alt="...">` $input -}}
{{- $content = replaceRE ` (class=" *?")` "" $content -}}
{{- highlight (trim $content "\n") $lang "" -}}
{{- end -}}

View File

@ -0,0 +1,14 @@
{{- /*
Work around wrong escapes in integrity attributes.
Original: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/param.html
*/ -}}
{{- $name := .Get 0 -}}
{{- with $name -}}
{{- $value := $.Page.Param . -}}
{{- /* If any parameter ends with `_hash`, mark the string as safe HTML */ -}}
{{- if (strings.HasSuffix $name "_hash") -}}
{{- $value = $value | safeHTML -}}
{{- end -}}
{{- with $value }}{{ . }}{{ else }}{{ errorf "Param %q not found: %s" $name $.Position }}{{ end -}}
{{- else }}{{ errorf "Missing param key: %s" $.Position }}{{ end -}}

View File

@ -1,21 +1,24 @@
{{- /*
Usage: `placeholder args`
args can be one of the following:
title: Used in the SVG `title` tag, default "Placeholder"
text: The text to show in the image - default: "width x height"
class: default: "bd-placeholder-img"
color: The text color (foreground) - default: "#dee2e6"
background: The background color - default: "#868e96"
width: default: 100%
height: default: 180px
`args` are all optional and can be one of the following:
* title: Used in the SVG `title` tag - default: "Placeholder"
* text: The text to show in the image - default: "width x height"
* class: Class to add to the `svg` - default: "bd-placeholder-img"
* color: The text color (foreground) - default: "#dee2e6"
* background: The background color - default: "#868e96"
* width: default: "100%"
* height: default: "180px"
*/ -}}
{{- $grays := $.Site.Data.grays -}}
{{- $default_color := (index $grays 2).hex -}}
{{- $default_background := (index $grays 5).hex -}}
{{- $title := .Get "title" | default "Placeholder" -}}
{{- $class := .Get "class" -}}
{{- $color := .Get "color" | default (index $grays 2).hex -}}
{{- $background := .Get "background" | default (index $grays 5).hex -}}
{{- $color := .Get "color" | default $default_color -}}
{{- $background := .Get "background" | default $default_background -}}
{{- $width := .Get "width" | default "100%" -}}
{{- $height := .Get "height" | default "180" -}}
{{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}}
@ -23,8 +26,8 @@
{{- $show_title := not (eq $title "false") -}}
{{- $show_text := not (eq $text "false") -}}
<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ end }} preserveAspectRatio="xMidYMid slice" role="img">
{{- if $show_title -}}<title>{{ $title }}</title>{{- end -}}
<svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
{{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
<rect width="100%" height="100%" fill="{{ $background }}"/>
{{- if $show_text -}}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{- end -}}
{{- if $show_text }}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{ end -}}
</svg>

View File

@ -1,5 +1,3 @@
{{- /*
Output the current year
*/ -}}
{{- /* Outputs the current year */ -}}
{{- now.Format "2006" -}}

View File

@ -1,3 +1,3 @@
define("theme_boost/bootstrap/alert",["exports","jquery","./util"],(function(_exports,_jquery,_util){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_util=_interopRequireDefault(_util);const EVENT_KEY=".".concat("bs.alert"),JQUERY_NO_CONFLICT=_jquery.default.fn.alert,EVENT_CLOSE="close".concat(EVENT_KEY),EVENT_CLOSED="closed".concat(EVENT_KEY),EVENT_CLICK_DATA_API="click".concat(EVENT_KEY).concat(".data-api");class Alert{constructor(element){this._element=element}static get VERSION(){return"4.6.0"}close(element){let rootElement=this._element;element&&(rootElement=this._getRootElement(element));this._triggerCloseEvent(rootElement).isDefaultPrevented()||this._removeElement(rootElement)}dispose(){_jquery.default.removeData(this._element,"bs.alert"),this._element=null}_getRootElement(element){const selector=_util.default.getSelectorFromElement(element);let parent=!1;return selector&&(parent=document.querySelector(selector)),parent||(parent=(0,_jquery.default)(element).closest(".".concat("alert"))[0]),parent}_triggerCloseEvent(element){const closeEvent=_jquery.default.Event(EVENT_CLOSE);return(0,_jquery.default)(element).trigger(closeEvent),closeEvent}_removeElement(element){if((0,_jquery.default)(element).removeClass("show"),!(0,_jquery.default)(element).hasClass("fade"))return void this._destroyElement(element);const transitionDuration=_util.default.getTransitionDurationFromElement(element);(0,_jquery.default)(element).one(_util.default.TRANSITION_END,(event=>this._destroyElement(element,event))).emulateTransitionEnd(transitionDuration)}_destroyElement(element){(0,_jquery.default)(element).detach().trigger(EVENT_CLOSED).remove()}static _jQueryInterface(config){return this.each((function(){const $element=(0,_jquery.default)(this);let data=$element.data("bs.alert");data||(data=new Alert(this),$element.data("bs.alert",data)),"close"===config&&data[config](this)}))}static _handleDismiss(alertInstance){return function(event){event&&event.preventDefault(),alertInstance.close(this)}}}(0,_jquery.default)(document).on(EVENT_CLICK_DATA_API,'[data-dismiss="alert"]',Alert._handleDismiss(new Alert)),_jquery.default.fn.alert=Alert._jQueryInterface,_jquery.default.fn.alert.Constructor=Alert,_jquery.default.fn.alert.noConflict=()=>(_jquery.default.fn.alert=JQUERY_NO_CONFLICT,Alert._jQueryInterface);var _default=Alert;return _exports.default=_default,_exports.default}));
define("theme_boost/bootstrap/alert",["exports","jquery","./util"],(function(_exports,_jquery,_util){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_util=_interopRequireDefault(_util);const EVENT_KEY=".".concat("bs.alert"),JQUERY_NO_CONFLICT=_jquery.default.fn.alert,EVENT_CLOSE="close".concat(EVENT_KEY),EVENT_CLOSED="closed".concat(EVENT_KEY),EVENT_CLICK_DATA_API="click".concat(EVENT_KEY).concat(".data-api");class Alert{constructor(element){this._element=element}static get VERSION(){return"4.6.2"}close(element){let rootElement=this._element;element&&(rootElement=this._getRootElement(element));this._triggerCloseEvent(rootElement).isDefaultPrevented()||this._removeElement(rootElement)}dispose(){_jquery.default.removeData(this._element,"bs.alert"),this._element=null}_getRootElement(element){const selector=_util.default.getSelectorFromElement(element);let parent=!1;return selector&&(parent=document.querySelector(selector)),parent||(parent=(0,_jquery.default)(element).closest(".".concat("alert"))[0]),parent}_triggerCloseEvent(element){const closeEvent=_jquery.default.Event(EVENT_CLOSE);return(0,_jquery.default)(element).trigger(closeEvent),closeEvent}_removeElement(element){if((0,_jquery.default)(element).removeClass("show"),!(0,_jquery.default)(element).hasClass("fade"))return void this._destroyElement(element);const transitionDuration=_util.default.getTransitionDurationFromElement(element);(0,_jquery.default)(element).one(_util.default.TRANSITION_END,(event=>this._destroyElement(element,event))).emulateTransitionEnd(transitionDuration)}_destroyElement(element){(0,_jquery.default)(element).detach().trigger(EVENT_CLOSED).remove()}static _jQueryInterface(config){return this.each((function(){const $element=(0,_jquery.default)(this);let data=$element.data("bs.alert");data||(data=new Alert(this),$element.data("bs.alert",data)),"close"===config&&data[config](this)}))}static _handleDismiss(alertInstance){return function(event){event&&event.preventDefault(),alertInstance.close(this)}}}(0,_jquery.default)(document).on(EVENT_CLICK_DATA_API,'[data-dismiss="alert"]',Alert._handleDismiss(new Alert)),_jquery.default.fn.alert=Alert._jQueryInterface,_jquery.default.fn.alert.Constructor=Alert,_jquery.default.fn.alert.noConflict=()=>(_jquery.default.fn.alert=JQUERY_NO_CONFLICT,Alert._jQueryInterface);var _default=Alert;return _exports.default=_default,_exports.default}));
//# sourceMappingURL=alert.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,3 @@
define("theme_boost/bootstrap/button",["exports","jquery"],(function(_exports,_jquery){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=(obj=_jquery)&&obj.__esModule?obj:{default:obj};const NAME="button",EVENT_KEY=".".concat("bs.button"),JQUERY_NO_CONFLICT=_jquery.default.fn[NAME],EVENT_CLICK_DATA_API="click".concat(EVENT_KEY).concat(".data-api"),EVENT_FOCUS_BLUR_DATA_API="focus".concat(EVENT_KEY).concat(".data-api"," ")+"blur".concat(EVENT_KEY).concat(".data-api"),EVENT_LOAD_DATA_API="load".concat(EVENT_KEY).concat(".data-api");class Button{constructor(element){this._element=element,this.shouldAvoidTriggerChange=!1}static get VERSION(){return"4.6.0"}toggle(){let triggerChangeEvent=!0,addAriaPressed=!0;const rootElement=(0,_jquery.default)(this._element).closest('[data-toggle="buttons"]')[0];if(rootElement){const input=this._element.querySelector('input:not([type="hidden"])');if(input){if("radio"===input.type)if(input.checked&&this._element.classList.contains("active"))triggerChangeEvent=!1;else{const activeElement=rootElement.querySelector(".active");activeElement&&(0,_jquery.default)(activeElement).removeClass("active")}triggerChangeEvent&&("checkbox"!==input.type&&"radio"!==input.type||(input.checked=!this._element.classList.contains("active")),this.shouldAvoidTriggerChange||(0,_jquery.default)(input).trigger("change")),input.focus(),addAriaPressed=!1}}this._element.hasAttribute("disabled")||this._element.classList.contains("disabled")||(addAriaPressed&&this._element.setAttribute("aria-pressed",!this._element.classList.contains("active")),triggerChangeEvent&&(0,_jquery.default)(this._element).toggleClass("active"))}dispose(){_jquery.default.removeData(this._element,"bs.button"),this._element=null}static _jQueryInterface(config,avoidTriggerChange){return this.each((function(){const $element=(0,_jquery.default)(this);let data=$element.data("bs.button");data||(data=new Button(this),$element.data("bs.button",data)),data.shouldAvoidTriggerChange=avoidTriggerChange,"toggle"===config&&data[config]()}))}}(0,_jquery.default)(document).on(EVENT_CLICK_DATA_API,'[data-toggle^="button"]',(event=>{let button=event.target;const initialButton=button;if((0,_jquery.default)(button).hasClass("btn")||(button=(0,_jquery.default)(button).closest(".btn")[0]),!button||button.hasAttribute("disabled")||button.classList.contains("disabled"))event.preventDefault();else{const inputBtn=button.querySelector('input:not([type="hidden"])');if(inputBtn&&(inputBtn.hasAttribute("disabled")||inputBtn.classList.contains("disabled")))return void event.preventDefault();"INPUT"!==initialButton.tagName&&"LABEL"===button.tagName||Button._jQueryInterface.call((0,_jquery.default)(button),"toggle","INPUT"===initialButton.tagName)}})).on(EVENT_FOCUS_BLUR_DATA_API,'[data-toggle^="button"]',(event=>{const button=(0,_jquery.default)(event.target).closest(".btn")[0];(0,_jquery.default)(button).toggleClass("focus",/^focus(in)?$/.test(event.type))})),(0,_jquery.default)(window).on(EVENT_LOAD_DATA_API,(()=>{let buttons=[].slice.call(document.querySelectorAll('[data-toggle="buttons"] .btn'));for(let i=0,len=buttons.length;i<len;i++){const button=buttons[i],input=button.querySelector('input:not([type="hidden"])');input.checked||input.hasAttribute("checked")?button.classList.add("active"):button.classList.remove("active")}buttons=[].slice.call(document.querySelectorAll('[data-toggle="button"]'));for(let i=0,len=buttons.length;i<len;i++){const button=buttons[i];"true"===button.getAttribute("aria-pressed")?button.classList.add("active"):button.classList.remove("active")}})),_jquery.default.fn[NAME]=Button._jQueryInterface,_jquery.default.fn[NAME].Constructor=Button,_jquery.default.fn[NAME].noConflict=()=>(_jquery.default.fn[NAME]=JQUERY_NO_CONFLICT,Button._jQueryInterface);var _default=Button;return _exports.default=_default,_exports.default}));
define("theme_boost/bootstrap/button",["exports","jquery"],(function(_exports,_jquery){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=(obj=_jquery)&&obj.__esModule?obj:{default:obj};const NAME="button",EVENT_KEY=".".concat("bs.button"),JQUERY_NO_CONFLICT=_jquery.default.fn[NAME],EVENT_CLICK_DATA_API="click".concat(EVENT_KEY).concat(".data-api"),EVENT_FOCUS_BLUR_DATA_API="focus".concat(EVENT_KEY).concat(".data-api"," ")+"blur".concat(EVENT_KEY).concat(".data-api"),EVENT_LOAD_DATA_API="load".concat(EVENT_KEY).concat(".data-api");class Button{constructor(element){this._element=element,this.shouldAvoidTriggerChange=!1}static get VERSION(){return"4.6.2"}toggle(){let triggerChangeEvent=!0,addAriaPressed=!0;const rootElement=(0,_jquery.default)(this._element).closest('[data-toggle="buttons"]')[0];if(rootElement){const input=this._element.querySelector('input:not([type="hidden"])');if(input){if("radio"===input.type)if(input.checked&&this._element.classList.contains("active"))triggerChangeEvent=!1;else{const activeElement=rootElement.querySelector(".active");activeElement&&(0,_jquery.default)(activeElement).removeClass("active")}triggerChangeEvent&&("checkbox"!==input.type&&"radio"!==input.type||(input.checked=!this._element.classList.contains("active")),this.shouldAvoidTriggerChange||(0,_jquery.default)(input).trigger("change")),input.focus(),addAriaPressed=!1}}this._element.hasAttribute("disabled")||this._element.classList.contains("disabled")||(addAriaPressed&&this._element.setAttribute("aria-pressed",!this._element.classList.contains("active")),triggerChangeEvent&&(0,_jquery.default)(this._element).toggleClass("active"))}dispose(){_jquery.default.removeData(this._element,"bs.button"),this._element=null}static _jQueryInterface(config,avoidTriggerChange){return this.each((function(){const $element=(0,_jquery.default)(this);let data=$element.data("bs.button");data||(data=new Button(this),$element.data("bs.button",data)),data.shouldAvoidTriggerChange=avoidTriggerChange,"toggle"===config&&data[config]()}))}}(0,_jquery.default)(document).on(EVENT_CLICK_DATA_API,'[data-toggle^="button"]',(event=>{let button=event.target;const initialButton=button;if((0,_jquery.default)(button).hasClass("btn")||(button=(0,_jquery.default)(button).closest(".btn")[0]),!button||button.hasAttribute("disabled")||button.classList.contains("disabled"))event.preventDefault();else{const inputBtn=button.querySelector('input:not([type="hidden"])');if(inputBtn&&(inputBtn.hasAttribute("disabled")||inputBtn.classList.contains("disabled")))return void event.preventDefault();"INPUT"!==initialButton.tagName&&"LABEL"===button.tagName||Button._jQueryInterface.call((0,_jquery.default)(button),"toggle","INPUT"===initialButton.tagName)}})).on(EVENT_FOCUS_BLUR_DATA_API,'[data-toggle^="button"]',(event=>{const button=(0,_jquery.default)(event.target).closest(".btn")[0];(0,_jquery.default)(button).toggleClass("focus",/^focus(in)?$/.test(event.type))})),(0,_jquery.default)(window).on(EVENT_LOAD_DATA_API,(()=>{let buttons=[].slice.call(document.querySelectorAll('[data-toggle="buttons"] .btn'));for(let i=0,len=buttons.length;i<len;i++){const button=buttons[i],input=button.querySelector('input:not([type="hidden"])');input.checked||input.hasAttribute("checked")?button.classList.add("active"):button.classList.remove("active")}buttons=[].slice.call(document.querySelectorAll('[data-toggle="button"]'));for(let i=0,len=buttons.length;i<len;i++){const button=buttons[i];"true"===button.getAttribute("aria-pressed")?button.classList.add("active"):button.classList.remove("active")}})),_jquery.default.fn[NAME]=Button._jQueryInterface,_jquery.default.fn[NAME].Constructor=Button,_jquery.default.fn[NAME].noConflict=()=>(_jquery.default.fn[NAME]=JQUERY_NO_CONFLICT,Button._jQueryInterface);var _default=Button;return _exports.default=_default,_exports.default}));
//# sourceMappingURL=button.min.js.map

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

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

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

View File

@ -1,3 +1,3 @@
define("theme_boost/bootstrap/popover",["exports","jquery","./tooltip"],(function(_exports,_jquery,_tooltip){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_tooltip=_interopRequireDefault(_tooltip);const NAME="popover",EVENT_KEY=".".concat("bs.popover"),JQUERY_NO_CONFLICT=_jquery.default.fn[NAME],BSCLS_PREFIX_REGEX=new RegExp("(^|\\s)".concat("bs-popover","\\S+"),"g"),Default={..._tooltip.default.Default,placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'},DefaultType={..._tooltip.default.DefaultType,content:"(string|element|function)"},Event={HIDE:"hide".concat(EVENT_KEY),HIDDEN:"hidden".concat(EVENT_KEY),SHOW:"show".concat(EVENT_KEY),SHOWN:"shown".concat(EVENT_KEY),INSERTED:"inserted".concat(EVENT_KEY),CLICK:"click".concat(EVENT_KEY),FOCUSIN:"focusin".concat(EVENT_KEY),FOCUSOUT:"focusout".concat(EVENT_KEY),MOUSEENTER:"mouseenter".concat(EVENT_KEY),MOUSELEAVE:"mouseleave".concat(EVENT_KEY)};class Popover extends _tooltip.default{static get VERSION(){return"4.6.0"}static get Default(){return Default}static get NAME(){return NAME}static get DATA_KEY(){return"bs.popover"}static get Event(){return Event}static get EVENT_KEY(){return EVENT_KEY}static get DefaultType(){return DefaultType}isWithContent(){return this.getTitle()||this._getContent()}addAttachmentClass(attachment){(0,_jquery.default)(this.getTipElement()).addClass("".concat("bs-popover","-").concat(attachment))}getTipElement(){return this.tip=this.tip||(0,_jquery.default)(this.config.template)[0],this.tip}setContent(){const $tip=(0,_jquery.default)(this.getTipElement());this.setElementContent($tip.find(".popover-header"),this.getTitle());let content=this._getContent();"function"==typeof content&&(content=content.call(this.element)),this.setElementContent($tip.find(".popover-body"),content),$tip.removeClass("".concat("fade"," ").concat("show"))}_getContent(){return this.element.getAttribute("data-content")||this.config.content}_cleanTipClass(){const $tip=(0,_jquery.default)(this.getTipElement()),tabClass=$tip.attr("class").match(BSCLS_PREFIX_REGEX);null!==tabClass&&tabClass.length>0&&$tip.removeClass(tabClass.join(""))}static _jQueryInterface(config){return this.each((function(){let data=(0,_jquery.default)(this).data("bs.popover");const _config="object"==typeof config?config:null;if((data||!/dispose|hide/.test(config))&&(data||(data=new Popover(this,_config),(0,_jquery.default)(this).data("bs.popover",data)),"string"==typeof config)){if(void 0===data[config])throw new TypeError('No method named "'.concat(config,'"'));data[config]()}}))}}_jquery.default.fn[NAME]=Popover._jQueryInterface,_jquery.default.fn[NAME].Constructor=Popover,_jquery.default.fn[NAME].noConflict=()=>(_jquery.default.fn[NAME]=JQUERY_NO_CONFLICT,Popover._jQueryInterface);var _default=Popover;return _exports.default=_default,_exports.default}));
define("theme_boost/bootstrap/popover",["exports","jquery","./tooltip"],(function(_exports,_jquery,_tooltip){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_tooltip=_interopRequireDefault(_tooltip);const NAME="popover",EVENT_KEY=".".concat("bs.popover"),JQUERY_NO_CONFLICT=_jquery.default.fn[NAME],BSCLS_PREFIX_REGEX=new RegExp("(^|\\s)".concat("bs-popover","\\S+"),"g"),Default={..._tooltip.default.Default,placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'},DefaultType={..._tooltip.default.DefaultType,content:"(string|element|function)"},Event={HIDE:"hide".concat(EVENT_KEY),HIDDEN:"hidden".concat(EVENT_KEY),SHOW:"show".concat(EVENT_KEY),SHOWN:"shown".concat(EVENT_KEY),INSERTED:"inserted".concat(EVENT_KEY),CLICK:"click".concat(EVENT_KEY),FOCUSIN:"focusin".concat(EVENT_KEY),FOCUSOUT:"focusout".concat(EVENT_KEY),MOUSEENTER:"mouseenter".concat(EVENT_KEY),MOUSELEAVE:"mouseleave".concat(EVENT_KEY)};class Popover extends _tooltip.default{static get VERSION(){return"4.6.2"}static get Default(){return Default}static get NAME(){return NAME}static get DATA_KEY(){return"bs.popover"}static get Event(){return Event}static get EVENT_KEY(){return EVENT_KEY}static get DefaultType(){return DefaultType}isWithContent(){return this.getTitle()||this._getContent()}addAttachmentClass(attachment){(0,_jquery.default)(this.getTipElement()).addClass("".concat("bs-popover","-").concat(attachment))}getTipElement(){return this.tip=this.tip||(0,_jquery.default)(this.config.template)[0],this.tip}setContent(){const $tip=(0,_jquery.default)(this.getTipElement());this.setElementContent($tip.find(".popover-header"),this.getTitle());let content=this._getContent();"function"==typeof content&&(content=content.call(this.element)),this.setElementContent($tip.find(".popover-body"),content),$tip.removeClass("".concat("fade"," ").concat("show"))}_getContent(){return this.element.getAttribute("data-content")||this.config.content}_cleanTipClass(){const $tip=(0,_jquery.default)(this.getTipElement()),tabClass=$tip.attr("class").match(BSCLS_PREFIX_REGEX);null!==tabClass&&tabClass.length>0&&$tip.removeClass(tabClass.join(""))}static _jQueryInterface(config){return this.each((function(){let data=(0,_jquery.default)(this).data("bs.popover");const _config="object"==typeof config?config:null;if((data||!/dispose|hide/.test(config))&&(data||(data=new Popover(this,_config),(0,_jquery.default)(this).data("bs.popover",data)),"string"==typeof config)){if(void 0===data[config])throw new TypeError('No method named "'.concat(config,'"'));data[config]()}}))}}_jquery.default.fn[NAME]=Popover._jQueryInterface,_jquery.default.fn[NAME].Constructor=Popover,_jquery.default.fn[NAME].noConflict=()=>(_jquery.default.fn[NAME]=JQUERY_NO_CONFLICT,Popover._jQueryInterface);var _default=Popover;return _exports.default=_default,_exports.default}));
//# sourceMappingURL=popover.min.js.map

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

View File

@ -1,3 +1,3 @@
define("theme_boost/bootstrap/tab",["exports","jquery","./util"],(function(_exports,_jquery,_util){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_util=_interopRequireDefault(_util);const EVENT_KEY=".".concat("bs.tab"),JQUERY_NO_CONFLICT=_jquery.default.fn.tab,EVENT_HIDE="hide".concat(EVENT_KEY),EVENT_HIDDEN="hidden".concat(EVENT_KEY),EVENT_SHOW="show".concat(EVENT_KEY),EVENT_SHOWN="shown".concat(EVENT_KEY),EVENT_CLICK_DATA_API="click".concat(EVENT_KEY).concat(".data-api");class Tab{constructor(element){this._element=element}static get VERSION(){return"4.6.0"}show(){if(this._element.parentNode&&this._element.parentNode.nodeType===Node.ELEMENT_NODE&&(0,_jquery.default)(this._element).hasClass("active")||(0,_jquery.default)(this._element).hasClass("disabled"))return;let target,previous;const listElement=(0,_jquery.default)(this._element).closest(".nav, .list-group")[0],selector=_util.default.getSelectorFromElement(this._element);if(listElement){const itemSelector="UL"===listElement.nodeName||"OL"===listElement.nodeName?"> li > .active":".active";previous=_jquery.default.makeArray((0,_jquery.default)(listElement).find(itemSelector)),previous=previous[previous.length-1]}const hideEvent=_jquery.default.Event(EVENT_HIDE,{relatedTarget:this._element}),showEvent=_jquery.default.Event(EVENT_SHOW,{relatedTarget:previous});if(previous&&(0,_jquery.default)(previous).trigger(hideEvent),(0,_jquery.default)(this._element).trigger(showEvent),showEvent.isDefaultPrevented()||hideEvent.isDefaultPrevented())return;selector&&(target=document.querySelector(selector)),this._activate(this._element,listElement);const complete=()=>{const hiddenEvent=_jquery.default.Event(EVENT_HIDDEN,{relatedTarget:this._element}),shownEvent=_jquery.default.Event(EVENT_SHOWN,{relatedTarget:previous});(0,_jquery.default)(previous).trigger(hiddenEvent),(0,_jquery.default)(this._element).trigger(shownEvent)};target?this._activate(target,target.parentNode,complete):complete()}dispose(){_jquery.default.removeData(this._element,"bs.tab"),this._element=null}_activate(element,container,callback){const active=(!container||"UL"!==container.nodeName&&"OL"!==container.nodeName?(0,_jquery.default)(container).children(".active"):(0,_jquery.default)(container).find("> li > .active"))[0],isTransitioning=callback&&active&&(0,_jquery.default)(active).hasClass("fade"),complete=()=>this._transitionComplete(element,active,callback);if(active&&isTransitioning){const transitionDuration=_util.default.getTransitionDurationFromElement(active);(0,_jquery.default)(active).removeClass("show").one(_util.default.TRANSITION_END,complete).emulateTransitionEnd(transitionDuration)}else complete()}_transitionComplete(element,active,callback){if(active){(0,_jquery.default)(active).removeClass("active");const dropdownChild=(0,_jquery.default)(active.parentNode).find("> .dropdown-menu .active")[0];dropdownChild&&(0,_jquery.default)(dropdownChild).removeClass("active"),"tab"===active.getAttribute("role")&&active.setAttribute("aria-selected",!1)}if((0,_jquery.default)(element).addClass("active"),"tab"===element.getAttribute("role")&&element.setAttribute("aria-selected",!0),_util.default.reflow(element),element.classList.contains("fade")&&element.classList.add("show"),element.parentNode&&(0,_jquery.default)(element.parentNode).hasClass("dropdown-menu")){const dropdownElement=(0,_jquery.default)(element).closest(".dropdown")[0];if(dropdownElement){const dropdownToggleList=[].slice.call(dropdownElement.querySelectorAll(".dropdown-toggle"));(0,_jquery.default)(dropdownToggleList).addClass("active")}element.setAttribute("aria-expanded",!0)}callback&&callback()}static _jQueryInterface(config){return this.each((function(){const $this=(0,_jquery.default)(this);let data=$this.data("bs.tab");if(data||(data=new Tab(this),$this.data("bs.tab",data)),"string"==typeof config){if(void 0===data[config])throw new TypeError('No method named "'.concat(config,'"'));data[config]()}}))}}(0,_jquery.default)(document).on(EVENT_CLICK_DATA_API,'[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',(function(event){event.preventDefault(),Tab._jQueryInterface.call((0,_jquery.default)(this),"show")})),_jquery.default.fn.tab=Tab._jQueryInterface,_jquery.default.fn.tab.Constructor=Tab,_jquery.default.fn.tab.noConflict=()=>(_jquery.default.fn.tab=JQUERY_NO_CONFLICT,Tab._jQueryInterface);var _default=Tab;return _exports.default=_default,_exports.default}));
define("theme_boost/bootstrap/tab",["exports","jquery","./util"],(function(_exports,_jquery,_util){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_util=_interopRequireDefault(_util);const EVENT_KEY=".".concat("bs.tab"),JQUERY_NO_CONFLICT=_jquery.default.fn.tab,EVENT_HIDE="hide".concat(EVENT_KEY),EVENT_HIDDEN="hidden".concat(EVENT_KEY),EVENT_SHOW="show".concat(EVENT_KEY),EVENT_SHOWN="shown".concat(EVENT_KEY),EVENT_CLICK_DATA_API="click".concat(EVENT_KEY).concat(".data-api");class Tab{constructor(element){this._element=element}static get VERSION(){return"4.6.2"}show(){if(this._element.parentNode&&this._element.parentNode.nodeType===Node.ELEMENT_NODE&&(0,_jquery.default)(this._element).hasClass("active")||(0,_jquery.default)(this._element).hasClass("disabled")||this._element.hasAttribute("disabled"))return;let target,previous;const listElement=(0,_jquery.default)(this._element).closest(".nav, .list-group")[0],selector=_util.default.getSelectorFromElement(this._element);if(listElement){const itemSelector="UL"===listElement.nodeName||"OL"===listElement.nodeName?"> li > .active":".active";previous=_jquery.default.makeArray((0,_jquery.default)(listElement).find(itemSelector)),previous=previous[previous.length-1]}const hideEvent=_jquery.default.Event(EVENT_HIDE,{relatedTarget:this._element}),showEvent=_jquery.default.Event(EVENT_SHOW,{relatedTarget:previous});if(previous&&(0,_jquery.default)(previous).trigger(hideEvent),(0,_jquery.default)(this._element).trigger(showEvent),showEvent.isDefaultPrevented()||hideEvent.isDefaultPrevented())return;selector&&(target=document.querySelector(selector)),this._activate(this._element,listElement);const complete=()=>{const hiddenEvent=_jquery.default.Event(EVENT_HIDDEN,{relatedTarget:this._element}),shownEvent=_jquery.default.Event(EVENT_SHOWN,{relatedTarget:previous});(0,_jquery.default)(previous).trigger(hiddenEvent),(0,_jquery.default)(this._element).trigger(shownEvent)};target?this._activate(target,target.parentNode,complete):complete()}dispose(){_jquery.default.removeData(this._element,"bs.tab"),this._element=null}_activate(element,container,callback){const active=(!container||"UL"!==container.nodeName&&"OL"!==container.nodeName?(0,_jquery.default)(container).children(".active"):(0,_jquery.default)(container).find("> li > .active"))[0],isTransitioning=callback&&active&&(0,_jquery.default)(active).hasClass("fade"),complete=()=>this._transitionComplete(element,active,callback);if(active&&isTransitioning){const transitionDuration=_util.default.getTransitionDurationFromElement(active);(0,_jquery.default)(active).removeClass("show").one(_util.default.TRANSITION_END,complete).emulateTransitionEnd(transitionDuration)}else complete()}_transitionComplete(element,active,callback){if(active){(0,_jquery.default)(active).removeClass("active");const dropdownChild=(0,_jquery.default)(active.parentNode).find("> .dropdown-menu .active")[0];dropdownChild&&(0,_jquery.default)(dropdownChild).removeClass("active"),"tab"===active.getAttribute("role")&&active.setAttribute("aria-selected",!1)}(0,_jquery.default)(element).addClass("active"),"tab"===element.getAttribute("role")&&element.setAttribute("aria-selected",!0),_util.default.reflow(element),element.classList.contains("fade")&&element.classList.add("show");let parent=element.parentNode;if(parent&&"LI"===parent.nodeName&&(parent=parent.parentNode),parent&&(0,_jquery.default)(parent).hasClass("dropdown-menu")){const dropdownElement=(0,_jquery.default)(element).closest(".dropdown")[0];if(dropdownElement){const dropdownToggleList=[].slice.call(dropdownElement.querySelectorAll(".dropdown-toggle"));(0,_jquery.default)(dropdownToggleList).addClass("active")}element.setAttribute("aria-expanded",!0)}callback&&callback()}static _jQueryInterface(config){return this.each((function(){const $this=(0,_jquery.default)(this);let data=$this.data("bs.tab");if(data||(data=new Tab(this),$this.data("bs.tab",data)),"string"==typeof config){if(void 0===data[config])throw new TypeError('No method named "'.concat(config,'"'));data[config]()}}))}}(0,_jquery.default)(document).on(EVENT_CLICK_DATA_API,'[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',(function(event){event.preventDefault(),Tab._jQueryInterface.call((0,_jquery.default)(this),"show")})),_jquery.default.fn.tab=Tab._jQueryInterface,_jquery.default.fn.tab.Constructor=Tab,_jquery.default.fn.tab.noConflict=()=>(_jquery.default.fn.tab=JQUERY_NO_CONFLICT,Tab._jQueryInterface);var _default=Tab;return _exports.default=_default,_exports.default}));
//# sourceMappingURL=tab.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,3 @@
define("theme_boost/bootstrap/toast",["exports","jquery","./util"],(function(_exports,_jquery,_util){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_util=_interopRequireDefault(_util);const NAME="toast",EVENT_KEY=".".concat("bs.toast"),JQUERY_NO_CONFLICT=_jquery.default.fn.toast,EVENT_CLICK_DISMISS="click.dismiss".concat(EVENT_KEY),EVENT_HIDE="hide".concat(EVENT_KEY),EVENT_HIDDEN="hidden".concat(EVENT_KEY),EVENT_SHOW="show".concat(EVENT_KEY),EVENT_SHOWN="shown".concat(EVENT_KEY),DefaultType={animation:"boolean",autohide:"boolean",delay:"number"},Default={animation:!0,autohide:!0,delay:500};class Toast{constructor(element,config){this._element=element,this._config=this._getConfig(config),this._timeout=null,this._setListeners()}static get VERSION(){return"4.6.0"}static get DefaultType(){return DefaultType}static get Default(){return Default}show(){const showEvent=_jquery.default.Event(EVENT_SHOW);if((0,_jquery.default)(this._element).trigger(showEvent),showEvent.isDefaultPrevented())return;this._clearTimeout(),this._config.animation&&this._element.classList.add("fade");const complete=()=>{this._element.classList.remove("showing"),this._element.classList.add("show"),(0,_jquery.default)(this._element).trigger(EVENT_SHOWN),this._config.autohide&&(this._timeout=setTimeout((()=>{this.hide()}),this._config.delay))};if(this._element.classList.remove("hide"),_util.default.reflow(this._element),this._element.classList.add("showing"),this._config.animation){const transitionDuration=_util.default.getTransitionDurationFromElement(this._element);(0,_jquery.default)(this._element).one(_util.default.TRANSITION_END,complete).emulateTransitionEnd(transitionDuration)}else complete()}hide(){if(!this._element.classList.contains("show"))return;const hideEvent=_jquery.default.Event(EVENT_HIDE);(0,_jquery.default)(this._element).trigger(hideEvent),hideEvent.isDefaultPrevented()||this._close()}dispose(){this._clearTimeout(),this._element.classList.contains("show")&&this._element.classList.remove("show"),(0,_jquery.default)(this._element).off(EVENT_CLICK_DISMISS),_jquery.default.removeData(this._element,"bs.toast"),this._element=null,this._config=null}_getConfig(config){return config={...Default,...(0,_jquery.default)(this._element).data(),..."object"==typeof config&&config?config:{}},_util.default.typeCheckConfig(NAME,config,this.constructor.DefaultType),config}_setListeners(){(0,_jquery.default)(this._element).on(EVENT_CLICK_DISMISS,'[data-dismiss="toast"]',(()=>this.hide()))}_close(){const complete=()=>{this._element.classList.add("hide"),(0,_jquery.default)(this._element).trigger(EVENT_HIDDEN)};if(this._element.classList.remove("show"),this._config.animation){const transitionDuration=_util.default.getTransitionDurationFromElement(this._element);(0,_jquery.default)(this._element).one(_util.default.TRANSITION_END,complete).emulateTransitionEnd(transitionDuration)}else complete()}_clearTimeout(){clearTimeout(this._timeout),this._timeout=null}static _jQueryInterface(config){return this.each((function(){const $element=(0,_jquery.default)(this);let data=$element.data("bs.toast");if(data||(data=new Toast(this,"object"==typeof config&&config),$element.data("bs.toast",data)),"string"==typeof config){if(void 0===data[config])throw new TypeError('No method named "'.concat(config,'"'));data[config](this)}}))}}_jquery.default.fn.toast=Toast._jQueryInterface,_jquery.default.fn.toast.Constructor=Toast,_jquery.default.fn.toast.noConflict=()=>(_jquery.default.fn.toast=JQUERY_NO_CONFLICT,Toast._jQueryInterface);var _default=Toast;return _exports.default=_default,_exports.default}));
define("theme_boost/bootstrap/toast",["exports","jquery","./util"],(function(_exports,_jquery,_util){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_util=_interopRequireDefault(_util);const NAME="toast",EVENT_KEY=".".concat("bs.toast"),JQUERY_NO_CONFLICT=_jquery.default.fn.toast,EVENT_CLICK_DISMISS="click.dismiss".concat(EVENT_KEY),EVENT_HIDE="hide".concat(EVENT_KEY),EVENT_HIDDEN="hidden".concat(EVENT_KEY),EVENT_SHOW="show".concat(EVENT_KEY),EVENT_SHOWN="shown".concat(EVENT_KEY),Default={animation:!0,autohide:!0,delay:500},DefaultType={animation:"boolean",autohide:"boolean",delay:"number"};class Toast{constructor(element,config){this._element=element,this._config=this._getConfig(config),this._timeout=null,this._setListeners()}static get VERSION(){return"4.6.2"}static get DefaultType(){return DefaultType}static get Default(){return Default}show(){const showEvent=_jquery.default.Event(EVENT_SHOW);if((0,_jquery.default)(this._element).trigger(showEvent),showEvent.isDefaultPrevented())return;this._clearTimeout(),this._config.animation&&this._element.classList.add("fade");const complete=()=>{this._element.classList.remove("showing"),this._element.classList.add("show"),(0,_jquery.default)(this._element).trigger(EVENT_SHOWN),this._config.autohide&&(this._timeout=setTimeout((()=>{this.hide()}),this._config.delay))};if(this._element.classList.remove("hide"),_util.default.reflow(this._element),this._element.classList.add("showing"),this._config.animation){const transitionDuration=_util.default.getTransitionDurationFromElement(this._element);(0,_jquery.default)(this._element).one(_util.default.TRANSITION_END,complete).emulateTransitionEnd(transitionDuration)}else complete()}hide(){if(!this._element.classList.contains("show"))return;const hideEvent=_jquery.default.Event(EVENT_HIDE);(0,_jquery.default)(this._element).trigger(hideEvent),hideEvent.isDefaultPrevented()||this._close()}dispose(){this._clearTimeout(),this._element.classList.contains("show")&&this._element.classList.remove("show"),(0,_jquery.default)(this._element).off(EVENT_CLICK_DISMISS),_jquery.default.removeData(this._element,"bs.toast"),this._element=null,this._config=null}_getConfig(config){return config={...Default,...(0,_jquery.default)(this._element).data(),..."object"==typeof config&&config?config:{}},_util.default.typeCheckConfig(NAME,config,this.constructor.DefaultType),config}_setListeners(){(0,_jquery.default)(this._element).on(EVENT_CLICK_DISMISS,'[data-dismiss="toast"]',(()=>this.hide()))}_close(){const complete=()=>{this._element.classList.add("hide"),(0,_jquery.default)(this._element).trigger(EVENT_HIDDEN)};if(this._element.classList.remove("show"),this._config.animation){const transitionDuration=_util.default.getTransitionDurationFromElement(this._element);(0,_jquery.default)(this._element).one(_util.default.TRANSITION_END,complete).emulateTransitionEnd(transitionDuration)}else complete()}_clearTimeout(){clearTimeout(this._timeout),this._timeout=null}static _jQueryInterface(config){return this.each((function(){const $element=(0,_jquery.default)(this);let data=$element.data("bs.toast");if(data||(data=new Toast(this,"object"==typeof config&&config),$element.data("bs.toast",data)),"string"==typeof config){if(void 0===data[config])throw new TypeError('No method named "'.concat(config,'"'));data[config](this)}}))}}_jquery.default.fn.toast=Toast._jQueryInterface,_jquery.default.fn.toast.Constructor=Toast,_jquery.default.fn.toast.noConflict=()=>(_jquery.default.fn.toast=JQUERY_NO_CONFLICT,Toast._jQueryInterface);var _default=Toast;return _exports.default=_default,_exports.default}));
//# sourceMappingURL=toast.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,3 @@
define("theme_boost/bootstrap/tools/sanitizer",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.DefaultWhitelist=void 0,_exports.sanitizeHtml=function(unsafeHtml,whiteList,sanitizeFn){if(0===unsafeHtml.length)return unsafeHtml;if(sanitizeFn&&"function"==typeof sanitizeFn)return sanitizeFn(unsafeHtml);const createdDocument=(new window.DOMParser).parseFromString(unsafeHtml,"text/html"),whitelistKeys=Object.keys(whiteList),elements=[].slice.call(createdDocument.body.querySelectorAll("*"));for(let i=0,len=elements.length;i<len;i++){const el=elements[i],elName=el.nodeName.toLowerCase();if(-1===whitelistKeys.indexOf(el.nodeName.toLowerCase())){el.parentNode.removeChild(el);continue}const attributeList=[].slice.call(el.attributes),whitelistedAttributes=[].concat(whiteList["*"]||[],whiteList[elName]||[]);attributeList.forEach((attr=>{allowedAttribute(attr,whitelistedAttributes)||el.removeAttribute(attr.nodeName)}))}return createdDocument.body.innerHTML};const uriAttrs=["background","cite","href","itemtype","longdesc","poster","src","xlink:href"],DefaultWhitelist={"*":["class","dir","id","lang","role",/^aria-[\w-]*$/i],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],div:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","srcset","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]};_exports.DefaultWhitelist=DefaultWhitelist;const SAFE_URL_PATTERN=/^(?:(?:https?|mailto|ftp|tel|file):|[^#&/:?]*(?:[#/?]|$))/gi,DATA_URL_PATTERN=/^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i;function allowedAttribute(attr,allowedAttributeList){const attrName=attr.nodeName.toLowerCase();if(-1!==allowedAttributeList.indexOf(attrName))return-1===uriAttrs.indexOf(attrName)||Boolean(attr.nodeValue.match(SAFE_URL_PATTERN)||attr.nodeValue.match(DATA_URL_PATTERN));const regExp=allowedAttributeList.filter((attrRegex=>attrRegex instanceof RegExp));for(let i=0,len=regExp.length;i<len;i++)if(attrName.match(regExp[i]))return!0;return!1}}));
define("theme_boost/bootstrap/tools/sanitizer",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.DefaultWhitelist=void 0,_exports.sanitizeHtml=function(unsafeHtml,whiteList,sanitizeFn){if(0===unsafeHtml.length)return unsafeHtml;if(sanitizeFn&&"function"==typeof sanitizeFn)return sanitizeFn(unsafeHtml);const createdDocument=(new window.DOMParser).parseFromString(unsafeHtml,"text/html"),whitelistKeys=Object.keys(whiteList),elements=[].slice.call(createdDocument.body.querySelectorAll("*"));for(let i=0,len=elements.length;i<len;i++){const el=elements[i],elName=el.nodeName.toLowerCase();if(-1===whitelistKeys.indexOf(el.nodeName.toLowerCase())){el.parentNode.removeChild(el);continue}const attributeList=[].slice.call(el.attributes),whitelistedAttributes=[].concat(whiteList["*"]||[],whiteList[elName]||[]);attributeList.forEach((attr=>{allowedAttribute(attr,whitelistedAttributes)||el.removeAttribute(attr.nodeName)}))}return createdDocument.body.innerHTML};const uriAttrs=["background","cite","href","itemtype","longdesc","poster","src","xlink:href"],DefaultWhitelist={"*":["class","dir","id","lang","role",/^aria-[\w-]*$/i],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],div:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","srcset","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]};_exports.DefaultWhitelist=DefaultWhitelist;const SAFE_URL_PATTERN=/^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i,DATA_URL_PATTERN=/^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i;function allowedAttribute(attr,allowedAttributeList){const attrName=attr.nodeName.toLowerCase();if(-1!==allowedAttributeList.indexOf(attrName))return-1===uriAttrs.indexOf(attrName)||Boolean(SAFE_URL_PATTERN.test(attr.nodeValue)||DATA_URL_PATTERN.test(attr.nodeValue));const regExp=allowedAttributeList.filter((attrRegex=>attrRegex instanceof RegExp));for(let i=0,len=regExp.length;i<len;i++)if(regExp[i].test(attrName))return!0;return!1}}));
//# sourceMappingURL=sanitizer.min.js.map

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

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): alert.js
* Bootstrap (v4.6.2): alert.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,32 +9,28 @@ import $ from 'jquery'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'alert'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.alert'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const SELECTOR_DISMISS = '[data-dismiss="alert"]'
const CLASS_NAME_ALERT = 'alert'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const EVENT_CLOSE = `close${EVENT_KEY}`
const EVENT_CLOSED = `closed${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_ALERT = 'alert'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const SELECTOR_DISMISS = '[data-dismiss="alert"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Alert {
@ -43,13 +39,11 @@ class Alert {
}
// Getters
static get VERSION() {
return VERSION
}
// Public
close(element) {
let rootElement = this._element
if (element) {
@ -71,7 +65,6 @@ class Alert {
}
// Private
_getRootElement(element) {
const selector = Util.getSelectorFromElement(element)
let parent = false
@ -117,7 +110,6 @@ class Alert {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $element = $(this)
@ -146,9 +138,7 @@ class Alert {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(document).on(
@ -158,9 +148,7 @@ $(document).on(
)
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Alert._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): button.js
* Bootstrap (v4.6.2): button.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -8,13 +8,11 @@
import $ from 'jquery'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'button'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.button'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
@ -24,6 +22,11 @@ const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_BUTTON = 'btn'
const CLASS_NAME_FOCUS = 'focus'
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_FOCUS_BLUR_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY} ` +
`blur${EVENT_KEY}${DATA_API_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const SELECTOR_DATA_TOGGLE_CARROT = '[data-toggle^="button"]'
const SELECTOR_DATA_TOGGLES = '[data-toggle="buttons"]'
const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
@ -32,15 +35,8 @@ const SELECTOR_INPUT = 'input:not([type="hidden"])'
const SELECTOR_ACTIVE = '.active'
const SELECTOR_BUTTON = '.btn'
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_FOCUS_BLUR_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY} ` +
`blur${EVENT_KEY}${DATA_API_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Button {
@ -50,13 +46,11 @@ class Button {
}
// Getters
static get VERSION() {
return VERSION
}
// Public
toggle() {
let triggerChangeEvent = true
let addAriaPressed = true
@ -111,7 +105,6 @@ class Button {
}
// Static
static _jQueryInterface(config, avoidTriggerChange) {
return this.each(function () {
const $element = $(this)
@ -132,9 +125,7 @@ class Button {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(document)
@ -194,9 +185,7 @@ $(window).on(EVENT_LOAD_DATA_API, () => {
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Button._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): carousel.js
* Bootstrap (v4.6.2): carousel.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,13 +9,11 @@ import $ from 'jquery'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'carousel'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.carousel'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
@ -25,23 +23,14 @@ const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key
const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch
const SWIPE_THRESHOLD = 40
const Default = {
interval: 5000,
keyboard: true,
slide: false,
pause: 'hover',
wrap: true,
touch: true
}
const DefaultType = {
interval: '(number|boolean)',
keyboard: 'boolean',
slide: '(boolean|string)',
pause: '(string|boolean)',
wrap: 'boolean',
touch: 'boolean'
}
const CLASS_NAME_CAROUSEL = 'carousel'
const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_SLIDE = 'slide'
const CLASS_NAME_RIGHT = 'carousel-item-right'
const CLASS_NAME_LEFT = 'carousel-item-left'
const CLASS_NAME_NEXT = 'carousel-item-next'
const CLASS_NAME_PREV = 'carousel-item-prev'
const CLASS_NAME_POINTER_EVENT = 'pointer-event'
const DIRECTION_NEXT = 'next'
const DIRECTION_PREV = 'prev'
@ -62,15 +51,6 @@ const EVENT_DRAG_START = `dragstart${EVENT_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_CAROUSEL = 'carousel'
const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_SLIDE = 'slide'
const CLASS_NAME_RIGHT = 'carousel-item-right'
const CLASS_NAME_LEFT = 'carousel-item-left'
const CLASS_NAME_NEXT = 'carousel-item-next'
const CLASS_NAME_PREV = 'carousel-item-prev'
const CLASS_NAME_POINTER_EVENT = 'pointer-event'
const SELECTOR_ACTIVE = '.active'
const SELECTOR_ACTIVE_ITEM = '.active.carousel-item'
const SELECTOR_ITEM = '.carousel-item'
@ -80,16 +60,33 @@ const SELECTOR_INDICATORS = '.carousel-indicators'
const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]'
const SELECTOR_DATA_RIDE = '[data-ride="carousel"]'
const Default = {
interval: 5000,
keyboard: true,
slide: false,
pause: 'hover',
wrap: true,
touch: true
}
const DefaultType = {
interval: '(number|boolean)',
keyboard: 'boolean',
slide: '(boolean|string)',
pause: '(string|boolean)',
wrap: 'boolean',
touch: 'boolean'
}
const PointerType = {
TOUCH: 'touch',
PEN: 'pen'
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Carousel {
constructor(element, config) {
this._items = null
@ -111,7 +108,6 @@ class Carousel {
}
// Getters
static get VERSION() {
return VERSION
}
@ -121,7 +117,6 @@ class Carousel {
}
// Public
next() {
if (!this._isSliding) {
this._slide(DIRECTION_NEXT)
@ -220,7 +215,6 @@ class Carousel {
}
// Private
_getConfig(config) {
config = {
...Default,
@ -283,11 +277,9 @@ class Carousel {
const move = event => {
// ensure swiping with one touch and not pinching
if (event.originalEvent.touches && event.originalEvent.touches.length > 1) {
this.touchDeltaX = 0
} else {
this.touchDeltaX = event.originalEvent.touches[0].clientX - this.touchStartX
}
this.touchDeltaX = event.originalEvent.touches && event.originalEvent.touches.length > 1 ?
0 :
event.originalEvent.touches[0].clientX - this.touchStartX
}
const end = event => {
@ -510,7 +502,6 @@ class Carousel {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
@ -582,9 +573,7 @@ class Carousel {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(document).on(EVENT_CLICK_DATA_API, SELECTOR_DATA_SLIDE, Carousel._dataApiClickHandler)
@ -598,9 +587,7 @@ $(window).on(EVENT_LOAD_DATA_API, () => {
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Carousel._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): collapse.js
* Bootstrap (v4.6.2): collapse.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,18 +9,33 @@ import $ from 'jquery'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'collapse'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.collapse'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_COLLAPSE = 'collapse'
const CLASS_NAME_COLLAPSING = 'collapsing'
const CLASS_NAME_COLLAPSED = 'collapsed'
const DIMENSION_WIDTH = 'width'
const DIMENSION_HEIGHT = 'height'
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const SELECTOR_ACTIVES = '.show, .collapsing'
const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]'
const Default = {
toggle: true,
parent: ''
@ -31,27 +46,8 @@ const DefaultType = {
parent: '(string|element)'
}
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_COLLAPSE = 'collapse'
const CLASS_NAME_COLLAPSING = 'collapsing'
const CLASS_NAME_COLLAPSED = 'collapsed'
const DIMENSION_WIDTH = 'width'
const DIMENSION_HEIGHT = 'height'
const SELECTOR_ACTIVES = '.show, .collapsing'
const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Collapse {
@ -89,7 +85,6 @@ class Collapse {
}
// Getters
static get VERSION() {
return VERSION
}
@ -99,7 +94,6 @@ class Collapse {
}
// Public
toggle() {
if ($(this._element).hasClass(CLASS_NAME_SHOW)) {
this.hide()
@ -262,7 +256,6 @@ class Collapse {
}
// Private
_getConfig(config) {
config = {
...Default,
@ -316,7 +309,6 @@ class Collapse {
}
// Static
static _getTargetFromElement(element) {
const selector = Util.getSelectorFromElement(element)
return selector ? document.querySelector(selector) : null
@ -353,9 +345,7 @@ class Collapse {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(document).on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
@ -377,9 +367,7 @@ $(document).on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Collapse._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): dropdown.js
* Bootstrap (v4.6.2): dropdown.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -10,13 +10,11 @@ import Popper from 'core/popper'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'dropdown'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.dropdown'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
@ -29,6 +27,14 @@ const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key
const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse)
const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`)
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPRIGHT = 'dropright'
const CLASS_NAME_DROPLEFT = 'dropleft'
const CLASS_NAME_MENURIGHT = 'dropdown-menu-right'
const CLASS_NAME_POSITION_STATIC = 'position-static'
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
@ -38,14 +44,6 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPRIGHT = 'dropright'
const CLASS_NAME_DROPLEFT = 'dropleft'
const CLASS_NAME_MENURIGHT = 'dropdown-menu-right'
const CLASS_NAME_POSITION_STATIC = 'position-static'
const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]'
const SELECTOR_FORM_CHILD = '.dropdown form'
const SELECTOR_MENU = '.dropdown-menu'
@ -78,9 +76,7 @@ const DefaultType = {
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Dropdown {
@ -95,7 +91,6 @@ class Dropdown {
}
// Getters
static get VERSION() {
return VERSION
}
@ -109,7 +104,6 @@ class Dropdown {
}
// Public
toggle() {
if (this._element.disabled || $(this._element).hasClass(CLASS_NAME_DISABLED)) {
return
@ -145,10 +139,7 @@ class Dropdown {
// Totally disable Popper for Dropdowns in Navbar
if (!this._inNavbar && usePopper) {
/**
* Check for Popper dependency
* Popper - https://popper.js.org
*/
// Check for Popper dependency
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
}
@ -240,7 +231,6 @@ class Dropdown {
}
// Private
_addEventListeners() {
$(this._element).on(EVENT_CLICK, event => {
event.preventDefault()
@ -308,7 +298,7 @@ class Dropdown {
offset.fn = data => {
data.offsets = {
...data.offsets,
...(this._config.offset(data.offsets, this._element) || {})
...this._config.offset(data.offsets, this._element)
}
return data
@ -348,7 +338,6 @@ class Dropdown {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
@ -504,9 +493,7 @@ class Dropdown {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(document)
@ -523,9 +510,7 @@ $(document)
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Dropdown._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): modal.js
* Bootstrap (v4.6.2): modal.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,19 +9,45 @@ import $ from 'jquery'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'modal'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.modal'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key
const CLASS_NAME_SCROLLABLE = 'modal-dialog-scrollable'
const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure'
const CLASS_NAME_BACKDROP = 'modal-backdrop'
const CLASS_NAME_OPEN = 'modal-open'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_STATIC = 'modal-static'
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
const EVENT_RESIZE = `resize${EVENT_KEY}`
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const SELECTOR_DIALOG = '.modal-dialog'
const SELECTOR_MODAL_BODY = '.modal-body'
const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]'
const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]'
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
const SELECTOR_STICKY_CONTENT = '.sticky-top'
const Default = {
backdrop: true,
keyboard: true,
@ -36,38 +62,8 @@ const DefaultType = {
show: 'boolean'
}
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
const EVENT_RESIZE = `resize${EVENT_KEY}`
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}`
const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_SCROLLABLE = 'modal-dialog-scrollable'
const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure'
const CLASS_NAME_BACKDROP = 'modal-backdrop'
const CLASS_NAME_OPEN = 'modal-open'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_STATIC = 'modal-static'
const SELECTOR_DIALOG = '.modal-dialog'
const SELECTOR_MODAL_BODY = '.modal-body'
const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]'
const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]'
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
const SELECTOR_STICKY_CONTENT = '.sticky-top'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Modal {
@ -84,7 +80,6 @@ class Modal {
}
// Getters
static get VERSION() {
return VERSION
}
@ -94,7 +89,6 @@ class Modal {
}
// Public
toggle(relatedTarget) {
return this._isShown ? this.hide() : this.show(relatedTarget)
}
@ -104,22 +98,22 @@ class Modal {
return
}
if ($(this._element).hasClass(CLASS_NAME_FADE)) {
this._isTransitioning = true
}
const showEvent = $.Event(EVENT_SHOW, {
relatedTarget
})
$(this._element).trigger(showEvent)
if (this._isShown || showEvent.isDefaultPrevented()) {
if (showEvent.isDefaultPrevented()) {
return
}
this._isShown = true
if ($(this._element).hasClass(CLASS_NAME_FADE)) {
this._isTransitioning = true
}
this._checkScrollbar()
this._setScrollbar()
@ -219,7 +213,6 @@ class Modal {
}
// Private
_getConfig(config) {
config = {
...Default,
@ -545,7 +538,6 @@ class Modal {
}
// Static
static _jQueryInterface(config, relatedTarget) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
@ -574,9 +566,7 @@ class Modal {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(document).on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
@ -614,9 +604,7 @@ $(document).on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Modal._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): popover.js
* Bootstrap (v4.6.2): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,19 +9,23 @@ import $ from 'jquery'
import Tooltip from './tooltip'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'popover'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.popover'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const CLASS_PREFIX = 'bs-popover'
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const SELECTOR_TITLE = '.popover-header'
const SELECTOR_CONTENT = '.popover-body'
const Default = {
...Tooltip.Default,
placement: 'right',
@ -38,12 +42,6 @@ const DefaultType = {
content: '(string|element|function)'
}
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const SELECTOR_TITLE = '.popover-header'
const SELECTOR_CONTENT = '.popover-body'
const Event = {
HIDE: `hide${EVENT_KEY}`,
HIDDEN: `hidden${EVENT_KEY}`,
@ -58,14 +56,11 @@ const Event = {
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Popover extends Tooltip {
// Getters
static get VERSION() {
return VERSION
}
@ -95,7 +90,6 @@ class Popover extends Tooltip {
}
// Overrides
isWithContent() {
return this.getTitle() || this._getContent()
}
@ -125,7 +119,6 @@ class Popover extends Tooltip {
}
// Private
_getContent() {
return this.element.getAttribute('data-content') ||
this.config.content
@ -140,7 +133,6 @@ class Popover extends Tooltip {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
@ -167,9 +159,7 @@ class Popover extends Tooltip {
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Popover._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): scrollspy.js
* Bootstrap (v4.6.2): scrollspy.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,18 +9,35 @@ import $ from 'jquery'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'scrollspy'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.scrollspy'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
const CLASS_NAME_ACTIVE = 'active'
const EVENT_ACTIVATE = `activate${EVENT_KEY}`
const EVENT_SCROLL = `scroll${EVENT_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const METHOD_OFFSET = 'offset'
const METHOD_POSITION = 'position'
const SELECTOR_DATA_SPY = '[data-spy="scroll"]'
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
const SELECTOR_NAV_LINKS = '.nav-link'
const SELECTOR_NAV_ITEMS = '.nav-item'
const SELECTOR_LIST_ITEMS = '.list-group-item'
const SELECTOR_DROPDOWN = '.dropdown'
const SELECTOR_DROPDOWN_ITEMS = '.dropdown-item'
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
const Default = {
offset: 10,
method: 'auto',
@ -33,29 +50,8 @@ const DefaultType = {
target: '(string|element)'
}
const EVENT_ACTIVATE = `activate${EVENT_KEY}`
const EVENT_SCROLL = `scroll${EVENT_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
const CLASS_NAME_ACTIVE = 'active'
const SELECTOR_DATA_SPY = '[data-spy="scroll"]'
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
const SELECTOR_NAV_LINKS = '.nav-link'
const SELECTOR_NAV_ITEMS = '.nav-item'
const SELECTOR_LIST_ITEMS = '.list-group-item'
const SELECTOR_DROPDOWN = '.dropdown'
const SELECTOR_DROPDOWN_ITEMS = '.dropdown-item'
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
const METHOD_OFFSET = 'offset'
const METHOD_POSITION = 'position'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class ScrollSpy {
@ -78,7 +74,6 @@ class ScrollSpy {
}
// Getters
static get VERSION() {
return VERSION
}
@ -88,7 +83,6 @@ class ScrollSpy {
}
// Public
refresh() {
const autoMethod = this._scrollElement === this._scrollElement.window ?
METHOD_OFFSET : METHOD_POSITION
@ -128,7 +122,7 @@ class ScrollSpy {
return null
})
.filter(item => item)
.filter(Boolean)
.sort((a, b) => a[0] - b[0])
.forEach(item => {
this._offsets.push(item[0])
@ -151,7 +145,6 @@ class ScrollSpy {
}
// Private
_getConfig(config) {
config = {
...Default,
@ -270,7 +263,6 @@ class ScrollSpy {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
@ -293,9 +285,7 @@ class ScrollSpy {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(window).on(EVENT_LOAD_DATA_API, () => {
@ -309,9 +299,7 @@ $(window).on(EVENT_LOAD_DATA_API, () => {
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = ScrollSpy._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): tab.js
* Bootstrap (v4.6.2): tab.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,30 +9,28 @@ import $ from 'jquery'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'tab'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.tab'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const JQUERY_NO_CONFLICT = $.fn[NAME]
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_DROPDOWN_MENU = 'dropdown-menu'
const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const SELECTOR_DROPDOWN = '.dropdown'
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
const SELECTOR_ACTIVE = '.active'
@ -42,9 +40,7 @@ const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
const SELECTOR_DROPDOWN_ACTIVE_CHILD = '> .dropdown-menu .active'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Tab {
@ -53,18 +49,17 @@ class Tab {
}
// Getters
static get VERSION() {
return VERSION
}
// Public
show() {
if (this._element.parentNode &&
this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
$(this._element).hasClass(CLASS_NAME_ACTIVE) ||
$(this._element).hasClass(CLASS_NAME_DISABLED)) {
$(this._element).hasClass(CLASS_NAME_DISABLED) ||
this._element.hasAttribute('disabled')) {
return
}
@ -133,7 +128,6 @@ class Tab {
}
// Private
_activate(element, container, callback) {
const activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL') ?
$(container).find(SELECTOR_ACTIVE_UL) :
@ -187,7 +181,12 @@ class Tab {
element.classList.add(CLASS_NAME_SHOW)
}
if (element.parentNode && $(element.parentNode).hasClass(CLASS_NAME_DROPDOWN_MENU)) {
let parent = element.parentNode
if (parent && parent.nodeName === 'LI') {
parent = parent.parentNode
}
if (parent && $(parent).hasClass(CLASS_NAME_DROPDOWN_MENU)) {
const dropdownElement = $(element).closest(SELECTOR_DROPDOWN)[0]
if (dropdownElement) {
@ -205,7 +204,6 @@ class Tab {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $this = $(this)
@ -228,9 +226,7 @@ class Tab {
}
/**
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
* Data API implementation
*/
$(document)
@ -240,9 +236,7 @@ $(document)
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Tab._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): toast.js
* Bootstrap (v4.6.2): toast.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -9,33 +9,27 @@ import $ from 'jquery'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'toast'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.toast'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_HIDE = 'hide'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_SHOWING = 'showing'
const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_HIDE = 'hide'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_SHOWING = 'showing'
const DefaultType = {
animation: 'boolean',
autohide: 'boolean',
delay: 'number'
}
const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]'
const Default = {
animation: true,
@ -43,12 +37,14 @@ const Default = {
delay: 500
}
const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]'
const DefaultType = {
animation: 'boolean',
autohide: 'boolean',
delay: 'number'
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Toast {
@ -60,7 +56,6 @@ class Toast {
}
// Getters
static get VERSION() {
return VERSION
}
@ -74,7 +69,6 @@ class Toast {
}
// Public
show() {
const showEvent = $.Event(EVENT_SHOW)
@ -146,7 +140,6 @@ class Toast {
}
// Private
_getConfig(config) {
config = {
...Default,
@ -191,7 +184,6 @@ class Toast {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $element = $(this)
@ -215,9 +207,7 @@ class Toast {
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Toast._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): tools/sanitizer.js
* Bootstrap (v4.6.2): tools/sanitizer.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -55,14 +55,14 @@ export const DefaultWhitelist = {
/**
* A pattern that recognizes a commonly useful subset of URLs that are safe.
*
* Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
* Shoutout to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^#&/:?]*(?:[#/?]|$))/gi
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^#&/:?]*(?:[#/?]|$))/i
/**
* A pattern that matches safe data URLs. Only matches image, video and audio types.
*
* Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
* Shoutout to Angular https://github.com/angular/angular/blob/12.2.x/packages/core/src/sanitization/url_sanitizer.ts
*/
const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[\d+/a-z]+=*$/i
@ -71,7 +71,7 @@ function allowedAttribute(attr, allowedAttributeList) {
if (allowedAttributeList.indexOf(attrName) !== -1) {
if (uriAttrs.indexOf(attrName) !== -1) {
return Boolean(attr.nodeValue.match(SAFE_URL_PATTERN) || attr.nodeValue.match(DATA_URL_PATTERN))
return Boolean(SAFE_URL_PATTERN.test(attr.nodeValue) || DATA_URL_PATTERN.test(attr.nodeValue))
}
return true
@ -81,7 +81,7 @@ function allowedAttribute(attr, allowedAttributeList) {
// Check if a regular expression validates the attribute.
for (let i = 0, len = regExp.length; i < len; i++) {
if (attrName.match(regExp[i])) {
if (regExp[i].test(attrName)) {
return true
}
}
@ -114,6 +114,7 @@ export function sanitizeHtml(unsafeHtml, whiteList, sanitizeFn) {
}
const attributeList = [].slice.call(el.attributes)
// eslint-disable-next-line unicorn/prefer-spread
const whitelistedAttributes = [].concat(whiteList['*'] || [], whiteList[elName] || [])
attributeList.forEach(attr => {

View File

@ -1,26 +1,21 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): tooltip.js
* Bootstrap (v4.6.2): tooltip.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
import {
DefaultWhitelist,
sanitizeHtml
} from './tools/sanitizer'
import { DefaultWhitelist, sanitizeHtml } from './tools/sanitizer'
import $ from 'jquery'
import Popper from 'core/popper'
import Util from './util'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'tooltip'
const VERSION = '4.6.0'
const VERSION = '4.6.2'
const DATA_KEY = 'bs.tooltip'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
@ -28,25 +23,19 @@ const CLASS_PREFIX = 'bs-tooltip'
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
const DISALLOWED_ATTRIBUTES = ['sanitize', 'whiteList', 'sanitizeFn']
const DefaultType = {
animation: 'boolean',
template: 'string',
title: '(string|element|function)',
trigger: 'string',
delay: '(number|object)',
html: 'boolean',
selector: '(string|boolean)',
placement: '(string|function)',
offset: '(number|string|function)',
container: '(string|element|boolean)',
fallbackPlacement: '(string|array)',
boundary: '(string|element)',
customClass: '(string|function)',
sanitize: 'boolean',
sanitizeFn: '(null|function)',
whiteList: 'object',
popperConfig: '(null|object)'
}
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const HOVER_STATE_SHOW = 'show'
const HOVER_STATE_OUT = 'out'
const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
const SELECTOR_ARROW = '.arrow'
const TRIGGER_HOVER = 'hover'
const TRIGGER_FOCUS = 'focus'
const TRIGGER_CLICK = 'click'
const TRIGGER_MANUAL = 'manual'
const AttachmentMap = {
AUTO: 'auto',
@ -78,8 +67,25 @@ const Default = {
popperConfig: null
}
const HOVER_STATE_SHOW = 'show'
const HOVER_STATE_OUT = 'out'
const DefaultType = {
animation: 'boolean',
template: 'string',
title: '(string|element|function)',
trigger: 'string',
delay: '(number|object)',
html: 'boolean',
selector: '(string|boolean)',
placement: '(string|function)',
offset: '(number|string|function)',
container: '(string|element|boolean)',
fallbackPlacement: '(string|array)',
boundary: '(string|element)',
customClass: '(string|function)',
sanitize: 'boolean',
sanitizeFn: '(null|function)',
whiteList: 'object',
popperConfig: '(null|object)'
}
const Event = {
HIDE: `hide${EVENT_KEY}`,
@ -94,21 +100,8 @@ const Event = {
MOUSELEAVE: `mouseleave${EVENT_KEY}`
}
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
const SELECTOR_ARROW = '.arrow'
const TRIGGER_HOVER = 'hover'
const TRIGGER_FOCUS = 'focus'
const TRIGGER_CLICK = 'click'
const TRIGGER_MANUAL = 'manual'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
* Class definition
*/
class Tooltip {
@ -117,7 +110,7 @@ class Tooltip {
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
}
// private
// Private
this._isEnabled = true
this._timeout = 0
this._hoverState = ''
@ -133,7 +126,6 @@ class Tooltip {
}
// Getters
static get VERSION() {
return VERSION
}
@ -163,7 +155,6 @@ class Tooltip {
}
// Public
enable() {
this._isEnabled = true
}
@ -381,7 +372,6 @@ class Tooltip {
}
// Protected
isWithContent() {
return Boolean(this.getTitle())
}
@ -439,7 +429,6 @@ class Tooltip {
}
// Private
_getPopperConfig(attachment) {
const defaultBsConfig = {
placement: attachment,
@ -476,7 +465,7 @@ class Tooltip {
offset.fn = data => {
data.offsets = {
...data.offsets,
...(this.config.offset(data.offsets, this.element) || {})
...this.config.offset(data.offsets, this.element)
}
return data
@ -735,7 +724,6 @@ class Tooltip {
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $element = $(this)
@ -763,9 +751,7 @@ class Tooltip {
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Tooltip._jQueryInterface

View File

@ -1,6 +1,6 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): util.js
* Bootstrap (v4.6.2): util.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
@ -8,9 +8,7 @@
import $ from 'jquery'
/**
* ------------------------------------------------------------------------
* Private TransitionEnd Helpers
* ------------------------------------------------------------------------
*/
const TRANSITION_END = 'transitionend'
@ -62,9 +60,7 @@ function setTransitionEndSupport() {
}
/**
* --------------------------------------------------------------------------
* Public Util Api
* --------------------------------------------------------------------------
* Public Util API
*/
const Util = {
@ -72,6 +68,7 @@ const Util = {
getUID(prefix) {
do {
// eslint-disable-next-line no-bitwise
prefix += ~~(Math.random() * MAX_UID) // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix))

View File

@ -1,34 +1,19 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.6.0): index.js
* Bootstrap (v4.6.2): index.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
import Alert from './bootstrap/alert';
import Button from './bootstrap/button';
import Carousel from './bootstrap/carousel';
import Collapse from './bootstrap/collapse';
import Dropdown from './bootstrap/dropdown';
import Modal from './bootstrap/modal';
import Popover from './bootstrap/popover';
import Scrollspy from './bootstrap/scrollspy';
import Tab from './bootstrap/tab';
import Toast from './bootstrap/toast';
import Tooltip from './bootstrap/tooltip';
import Util from './bootstrap/util';
export {
Util,
Alert,
Button,
Carousel,
Collapse,
Dropdown,
Modal,
Popover,
Scrollspy,
Tab,
Toast,
Tooltip
};
export { default as Alert } from './bootstrap/alert'
export { default as Button } from './bootstrap/button'
export { default as Carousel } from './bootstrap/carousel'
export { default as Collapse } from './bootstrap/collapse'
export { default as Dropdown } from './bootstrap/dropdown'
export { default as Modal } from './bootstrap/modal'
export { default as Popover } from './bootstrap/popover'
export { default as Scrollspy } from './bootstrap/scrollspy'
export { default as Tab } from './bootstrap/tab'
export { default as Toast } from './bootstrap/toast'
export { default as Tooltip } from './bootstrap/tooltip'
export { default as Util } from './bootstrap/util'

View File

@ -4,7 +4,7 @@ Twitter bootstrap
-----------------
Sass:
This theme uses Bootstrap version 4.6.0
This theme uses Bootstrap frontend toolkit.
The Bootstrap repository is available on:
https://github.com/twbs/bootstrap
@ -29,7 +29,7 @@ Javascript:
* copy index.js from ~/bootstrap/js to theme/boost/amd/src
* edit theme/boost/amd/src/index.js and update import path (src -> bootstrap)
* Moodle core includes the popper.js library, make sure each of the new Bootstrap js files
includes the 'core/popper' library instead of 'popper.js'. For version 4.6.0 these files were: tooltip.js and dropdown.js
includes the 'core/popper' library instead of 'popper.js'. For current version these files were: tooltip.js and dropdown.js
* update ./thirdpartylibs.xml to include all new Bootstrap js files
* run "grunt ignorefiles" to prevent linting errors appearing from the new Bootstrap js files.
* in folder theme/boost run "grunt amd" to compile the bootstrap JS

View File

@ -58,7 +58,7 @@
}
.card-subtitle {
margin-top: -$card-spacer-y / 2;
margin-top: -$card-spacer-y * .5;
margin-bottom: 0;
}
@ -109,15 +109,15 @@
//
.card-header-tabs {
margin-right: -$card-spacer-x / 2;
margin-right: -$card-spacer-x * .5;
margin-bottom: -$card-spacer-y;
margin-left: -$card-spacer-x / 2;
margin-left: -$card-spacer-x * .5;
border-bottom: 0;
}
.card-header-pills {
margin-right: -$card-spacer-x / 2;
margin-left: -$card-spacer-x / 2;
margin-right: -$card-spacer-x * .5;
margin-left: -$card-spacer-x * .5;
}
// Card image

View File

@ -95,8 +95,11 @@
align-items: center; // 2. vertically center contents
justify-content: center; // 3. horizontally center contents
width: $carousel-control-width;
padding: 0;
color: $carousel-control-color;
text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity;
@include transition($carousel-control-transition);
@ -186,9 +189,9 @@
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) / 2;
right: (100% - $carousel-caption-width) * .5;
bottom: 20px;
left: (100% - $carousel-caption-width) / 2;
left: (100% - $carousel-caption-width) * .5;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;

View File

@ -13,7 +13,7 @@
display: block;
min-height: $font-size-base * $line-height-base;
padding-left: $custom-control-gutter + $custom-control-indicator-size;
color-adjust: exact; // Keep themed appearance for print
print-color-adjust: exact; // Keep themed appearance for print
}
.custom-control-inline {
@ -26,7 +26,7 @@
left: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text
width: $custom-control-indicator-size;
height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
height: ($font-size-base * $line-height-base + $custom-control-indicator-size) * .5;
opacity: 0;
&:checked ~ .custom-control-label::before {
@ -83,7 +83,7 @@
// Background-color and (when enabled) gradient
&::before {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
@ -91,14 +91,14 @@
pointer-events: none;
content: "";
background-color: $custom-control-indicator-bg;
border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
@include box-shadow($custom-control-indicator-box-shadow);
}
// Foreground (icon)
&::after {
position: absolute;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
@ -186,7 +186,7 @@
}
&::after {
top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) * .5, $custom-control-indicator-border-width * 2);
left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
@ -406,7 +406,7 @@
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
margin-top: ($custom-range-track-height - $custom-range-thumb-height) * .5; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@ -481,7 +481,7 @@
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
border-width: $custom-range-thumb-height / 2;
border-width: $custom-range-thumb-height * .5;
@include box-shadow($custom-range-track-box-shadow);
}

View File

@ -30,12 +30,6 @@
border: 0;
}
// Remove select outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $input-color;
}
// Customize the `:focus` state to imitate native WebKit styles.
@include form-control-focus($ignore-warning: true);
@ -69,6 +63,12 @@ input[type="month"] {
}
select.form-control {
// Remove select outline from select box in FF
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $input-color;
}
&:focus::-ms-value {
// Suppress the nested default white text on blue background highlight given to
// the selected option text when the (still closed) <select> receives focus
@ -199,13 +199,13 @@ textarea.form-control {
.form-row {
display: flex;
flex-wrap: wrap;
margin-right: -$form-grid-gutter-width / 2;
margin-left: -$form-grid-gutter-width / 2;
margin-right: -$form-grid-gutter-width * .5;
margin-left: -$form-grid-gutter-width * .5;
> .col,
> [class*="col-"] {
padding-right: $form-grid-gutter-width / 2;
padding-left: $form-grid-gutter-width / 2;
padding-right: $form-grid-gutter-width * .5;
padding-left: $form-grid-gutter-width * .5;
}
}

View File

@ -75,7 +75,7 @@
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
@ -140,5 +140,51 @@
@return $value1 - $value2;
}
@if type-of($value2) != number {
$value2: unquote("(") + $value2 + unquote(")");
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}

View File

@ -32,7 +32,7 @@
}
.figure-img {
margin-bottom: $spacer / 2;
margin-bottom: $spacer * .5;
line-height: 1;
}

View File

@ -52,12 +52,14 @@
align-items: center;
&:not(:last-child) .custom-file-label,
&:not(:last-child) .custom-file-label::after { @include border-right-radius(0); }
&:not(:first-child) .custom-file-label { @include border-left-radius(0); }
}
&:not(.has-validation) {
> .form-control:not(:last-child),
> .custom-select:not(:last-child),
> .custom-file:not(:last-child) .custom-file-label,
> .custom-file:not(:last-child) .custom-file-label::after {
@include border-right-radius(0);
}
@ -66,6 +68,7 @@
&.has-validation {
> .form-control:nth-last-child(n + 3),
> .custom-select:nth-last-child(n + 3),
> .custom-file:nth-last-child(n + 3) .custom-file-label,
> .custom-file:nth-last-child(n + 3) .custom-file-label::after {
@include border-right-radius(0);
}

View File

@ -1,5 +1,5 @@
.jumbotron {
padding: $jumbotron-padding ($jumbotron-padding / 2);
padding: $jumbotron-padding ($jumbotron-padding * .5);
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;

View File

@ -175,7 +175,7 @@
flex-wrap: wrap;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: $modal-inner-padding - $modal-footer-margin-between / 2;
padding: $modal-inner-padding - $modal-footer-margin-between * .5;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius);
@ -183,7 +183,7 @@
// This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * {
margin: $modal-footer-margin-between / 2;
margin: $modal-footer-margin-between * .5;
}
}

View File

@ -37,10 +37,13 @@
.nav-link {
margin-bottom: -$nav-tabs-border-width;
background-color: transparent;
border: $nav-tabs-border-width solid transparent;
@include border-top-radius($nav-tabs-border-radius);
@include hover-focus() {
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
isolation: isolate;
border-color: $nav-tabs-link-hover-border-color;
}
@ -73,6 +76,8 @@
.nav-pills {
.nav-link {
background: none;
border: 0;
@include border-radius($nav-pills-border-radius);
}

View File

@ -43,13 +43,13 @@
&::before {
bottom: 0;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-outer-color;
}
&::after {
bottom: $popover-border-width;
border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-color;
}
}
@ -66,13 +66,13 @@
&::before {
left: 0;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-outer-color;
}
&::after {
left: $popover-border-width;
border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-color;
}
}
@ -86,13 +86,13 @@
&::before {
top: 0;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
top: $popover-border-width;
border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-color;
}
}
@ -104,7 +104,7 @@
left: 50%;
display: block;
width: $popover-arrow-width;
margin-left: -$popover-arrow-width / 2;
margin-left: -$popover-arrow-width * .5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
@ -121,13 +121,13 @@
&::before {
right: 0;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
}
&::after {
right: $popover-border-width;
border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}

View File

@ -55,15 +55,6 @@
page-break-inside: avoid;
}
//
// Printing Tables:
// https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
//
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;

View File

@ -10,8 +10,8 @@
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
border: $spinner-border-width solid currentColor;
vertical-align: $spinner-vertical-align;
border: $spinner-border-width solid currentcolor;
border-right-color: transparent;
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
@ -42,8 +42,8 @@
display: inline-block;
width: $spinner-width;
height: $spinner-height;
vertical-align: text-bottom;
background-color: currentColor;
vertical-align: $spinner-vertical-align;
background-color: currentcolor;
// stylelint-disable-next-line property-disallowed-list
border-radius: 50%;
opacity: 0;

View File

@ -37,7 +37,7 @@
&::before {
top: 0;
border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-top-color: $tooltip-arrow-color;
}
}
@ -53,7 +53,7 @@
&::before {
right: 0;
border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-right-color: $tooltip-arrow-color;
}
}
@ -67,7 +67,7 @@
&::before {
bottom: 0;
border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
@ -83,7 +83,7 @@
&::before {
left: 0;
border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}

View File

@ -17,4 +17,10 @@
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.width {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}

View File

@ -257,6 +257,7 @@ $caret-spacing: $caret-width * .85 !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
$transition-collapse-width: width .35s ease !default;
$embed-responsive-aspect-ratios: () !default;
$embed-responsive-aspect-ratios: join(
@ -299,7 +300,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
$headings-margin-bottom: $spacer / 2 !default;
$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
@ -319,7 +320,7 @@ $display-line-height: $headings-line-height !default;
$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$small-font-size: .875em !default;
$text-muted: $gray-600 !default;
@ -495,7 +496,7 @@ $input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@ -565,7 +566,7 @@ $custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
$custom-switch-indicator-border-radius: $custom-control-indicator-size * .5 !default;
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
$custom-select-padding-y: $input-padding-y !default;
@ -710,12 +711,12 @@ $nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-divider-color: $gray-200 !default;
$nav-divider-margin-y: $spacer / 2 !default;
$nav-divider-margin-y: $spacer * .5 !default;
// Navbar
$navbar-padding-y: $spacer / 2 !default;
$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: $spacer !default;
$navbar-nav-link-padding-x: .5rem !default;
@ -724,7 +725,7 @@ $navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
@ -821,6 +822,7 @@ $pagination-disabled-border-color: $gray-300 !default;
$pagination-border-radius-sm: $border-radius-sm !default;
$pagination-border-radius-lg: $border-radius-lg !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
@ -844,7 +846,7 @@ $card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;
$card-group-margin: $grid-gutter-width / 2 !default;
$card-group-margin: $grid-gutter-width * .5 !default;
$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default;
@ -1100,9 +1102,10 @@ $carousel-transition: transform $carousel-transition-duration eas
// Spinners
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-border-width: .25em !default;
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-vertical-align: -.125em !default;
$spinner-border-width: .25em !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: $spinner-width-sm !default;

View File

@ -1,7 +1,7 @@
/*!
* Bootstrap Grid v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Bootstrap Grid v4.6.2 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/

View File

@ -1,7 +1,7 @@
/*!
* Bootstrap Reboot v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Bootstrap Reboot v4.6.2 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/

View File

@ -1,7 +1,7 @@
/*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Bootstrap v4.6.2 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/

View File

@ -69,7 +69,7 @@
// Align tooltip to form elements
.form-row > .col > &,
.form-row > [class*="col-"] > & {
left: $form-grid-gutter-width / 2;
left: $form-grid-gutter-width * .5;
}
}
@ -85,7 +85,7 @@
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
background-image: escape-svg($icon);
background-repeat: no-repeat;
background-position: right $input-height-inner-quarter center;
@ -99,6 +99,16 @@
}
}
// stylelint-disable-next-line selector-no-qualifying-type
select.form-control {
@include form-validation-state-selector($state) {
@if $enable-validation-icons {
padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important
background-position: right $input-padding-x * 2 center;
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
@include form-validation-state-selector($state) {
@ -114,7 +124,7 @@
border-color: $color;
@if $enable-validation-icons {
padding-right: $custom-select-feedback-icon-padding-right;
padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
}

View File

@ -8,8 +8,8 @@
%grid-column {
position: relative;
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
padding-right: $gutter * .5;
padding-left: $gutter * .5;
}
@each $breakpoint in map-keys($breakpoints) {

View File

@ -4,8 +4,8 @@
@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
padding-right: $gutter * .5;
padding-left: $gutter * .5;
margin-right: auto;
margin-left: auto;
}
@ -13,8 +13,8 @@
@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
margin-right: -$gutter / 2;
margin-left: -$gutter / 2;
margin-right: -$gutter * .5;
margin-left: -$gutter * .5;
}
// For each breakpoint, define the maximum width of the container in a media query
@ -33,16 +33,16 @@
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
padding-right: $gutter / 2;
padding-left: $gutter / 2;
padding-right: $gutter * .5;
padding-left: $gutter * .5;
}
@mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 percentage($size / $columns);
flex: 0 0 percentage(divide($size, $columns));
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns);
max-width: percentage(divide($size, $columns));
}
@mixin make-col-auto() {
@ -52,7 +52,7 @@
}
@mixin make-col-offset($size, $columns: $grid-columns) {
$num: $size / $columns;
$num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
@ -63,7 +63,7 @@
// style grid.
@mixin row-cols($count) {
> * {
flex: 0 0 100% / $count;
max-width: 100% / $count;
flex: 0 0 divide(100%, $count);
max-width: divide(100%, $count);
}
}

View File

@ -11,7 +11,7 @@
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
}

View File

@ -1,7 +1,7 @@
// Only display content to screen readers
//
// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
@mixin sr-only() {
position: absolute;

View File

@ -33,7 +33,7 @@
.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
&::before {
padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
padding-top: percentage(divide($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x));
}
}
}

View File

@ -30,7 +30,7 @@
// Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
@each $size, $length in $spacers {
@if $size != 0 {
@if "#{$size}" != "0" {
.m#{$infix}-n#{$size} { margin: -$length !important; }
.mt#{$infix}-n#{$size},
.my#{$infix}-n#{$size} {

View File

@ -2,9 +2,9 @@
// SCSS RFS mixin
//
// Automated font-resizing
// Automated responsive font sizes
//
// See https://github.com/twbs/rfs
// Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE)
// Configuration
@ -12,11 +12,19 @@
$rfs-base-font-size: 1.25rem !default;
$rfs-font-size-unit: rem !default;
@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
@error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
}
// Breakpoint at where font-size starts decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;
// Resize font-size based on screen height and width
@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
@error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
}
// Resize font size based on screen height and width
$rfs-two-dimensional: false !default;
// Factor of decrease
@ -41,12 +49,54 @@ $enable-responsive-font-sizes: true !default;
// Cache $rfs-base-font-size unit
$rfs-base-font-size-unit: unit($rfs-base-font-size);
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}
// Remove px-unit from $rfs-base-font-size for calculations
@if $rfs-base-font-size-unit == "px" {
$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
$rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
}
@else if $rfs-base-font-size-unit == "rem" {
$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
$rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 0 + 1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
@ -54,13 +104,55 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == "px" {
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
$rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
$rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
}
// Responsive font-size mixin
// Internal mixin that adds disable classes to the selector if needed.
@mixin _rfs-disable-class {
@if $rfs-class == "disable" {
// Adding an extra class increases specificity, which prevents the media query to override the font size
&,
.disable-responsive-font-size &,
&.disable-responsive-font-size {
@content;
}
}
@else {
@content;
}
}
// Internal mixin that adds enable classes to the selector if needed.
@mixin _rfs-enable-class {
@if $rfs-class == "enable" {
.enable-responsive-font-size &,
&.enable-responsive-font-size {
@content;
}
}
@else {
@content;
}
}
// Internal mixin used to determine which media query needs to be used
@mixin _rfs-media-query($mq-value) {
@if $rfs-two-dimensional {
@media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
@content;
}
}
@else {
@media (max-width: #{$mq-value}) {
@content;
}
}
}
// Responsive font size mixin
@mixin rfs($fs, $important: false) {
// Cache $fs unit
$fs-unit: if(type-of($fs) == "number", unit($fs), false);
@ -73,128 +165,60 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
font-size: #{$fs}#{$rfs-suffix};
}
@else {
// Variables for storing static and fluid rescaling
$rfs-static: null;
$rfs-fluid: null;
// Remove px-unit from $fs for calculations
// Remove unit from $fs for calculations
@if $fs-unit == "px" {
$fs: $fs / ($fs * 0 + 1);
$fs: divide($fs, $fs * 0 + 1);
}
@else if $fs-unit == "rem" {
$fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
$fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value));
}
// Set default font-size
@if $rfs-font-size-unit == rem {
$rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
}
@else if $rfs-font-size-unit == px {
$rfs-static: #{$fs}px#{$rfs-suffix};
// Set default font size
$rfs-static: if($rfs-font-size-unit == rem, #{divide($fs, $rfs-rem-value)}rem, #{$fs}px);
// Only add the media query if the font size is bigger than the minimum font size
@if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
font-size: #{$rfs-static}#{$rfs-suffix};
}
@else {
@error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
}
// Calculate the minimum font size for $fs
$fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor);
// Only add media query if font-size is bigger as the minimum font-size
// If $rfs-factor == 1, no rescaling will take place
@if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
$min-width: null;
$variable-unit: null;
// Calculate minimum font-size for given font-size
$fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
// Calculate difference between given font-size and minimum font-size for given font-size
// Calculate difference between $fs and the minimum font size
$fs-diff: $fs - $fs-min;
// Base font-size formatting
// No need to check if the unit is valid, because we did that before
$min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
$min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
// If two-dimensional, use smallest of screen width and height
// Use `vmin` if two-dimensional is enabled
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
$variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
$variable-width: #{divide($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
// Set the calculated font-size.
// Set the calculated font-size
$rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
}
// Rendering
@if $rfs-fluid == null {
// Only render static font-size if no fluid font-size is available
font-size: $rfs-static;
}
@else {
$mq-value: null;
// Breakpoint formatting
$mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
// RFS breakpoint formatting
@if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
$mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
}
@else if $rfs-breakpoint-unit == px {
$mq-value: #{$rfs-breakpoint}px;
}
@else {
@error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
@include _rfs-disable-class {
font-size: #{$rfs-static}#{$rfs-suffix};
}
@if $rfs-class == "disable" {
// Adding an extra class increases specificity,
// which prevents the media query to override the font size
&,
.disable-responsive-font-size &,
&.disable-responsive-font-size {
font-size: $rfs-static;
@include _rfs-media-query($mq-value) {
@include _rfs-enable-class {
font-size: $rfs-fluid;
}
}
@else {
font-size: $rfs-static;
}
@if $rfs-two-dimensional {
@media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
@if $rfs-class == "enable" {
.enable-responsive-font-size &,
&.enable-responsive-font-size {
font-size: $rfs-fluid;
}
}
@else {
font-size: $rfs-fluid;
}
@if $rfs-safari-iframe-resize-bug-fix {
// stylelint-disable-next-line length-zero-no-unit
min-width: 0vw;
}
}
}
@else {
@media (max-width: #{$mq-value}) {
@if $rfs-class == "enable" {
.enable-responsive-font-size &,
&.enable-responsive-font-size {
font-size: $rfs-fluid;
}
}
@else {
font-size: $rfs-fluid;
}
@if $rfs-safari-iframe-resize-bug-fix {
// stylelint-disable-next-line length-zero-no-unit
min-width: 0vw;
}
}
// Include safari iframe resize fix if needed
min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
}
}
}
}
// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
// The font-size & responsive-font-size mixins use RFS to rescale the font size
@mixin font-size($fs, $important: false) {
@include rfs($fs, $important);
}

View File

@ -2327,9 +2327,9 @@
clip: auto; }
/*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Bootstrap v4.6.2 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root {
@ -2715,7 +2715,7 @@ hr {
small,
.small {
font-size: 80%;
font-size: 0.875em;
font-weight: 400; }
mark,
@ -2749,7 +2749,7 @@ mark,
.blockquote-footer {
display: block;
font-size: 80%;
font-size: 0.875em;
color: #6a737b; }
.blockquote-footer::before {
content: "\2014\00A0"; }
@ -2896,48 +2896,48 @@ pre {
max-width: 100%; }
.col-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%; }
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%; }
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%; }
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; }
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%; }
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-12 {
flex: 0 0 100%;
@ -2989,37 +2989,37 @@ pre {
order: 12; }
.offset-1 {
margin-left: 8.3333333333%; }
margin-left: 8.33333333%; }
.offset-2 {
margin-left: 16.6666666667%; }
margin-left: 16.66666667%; }
.offset-3 {
margin-left: 25%; }
.offset-4 {
margin-left: 33.3333333333%; }
margin-left: 33.33333333%; }
.offset-5 {
margin-left: 41.6666666667%; }
margin-left: 41.66666667%; }
.offset-6 {
margin-left: 50%; }
.offset-7 {
margin-left: 58.3333333333%; }
margin-left: 58.33333333%; }
.offset-8 {
margin-left: 66.6666666667%; }
margin-left: 66.66666667%; }
.offset-9 {
margin-left: 75%; }
.offset-10 {
margin-left: 83.3333333333%; }
margin-left: 83.33333333%; }
.offset-11 {
margin-left: 91.6666666667%; }
margin-left: 91.66666667%; }
@media (min-width: 576px) {
.col-sm {
@ -3049,38 +3049,38 @@ pre {
width: auto;
max-width: 100%; }
.col-sm-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%; }
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-sm-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-sm-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-sm-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-sm-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%; }
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-sm-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%; }
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-sm-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-sm-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-sm-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; }
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-sm-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%; }
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-sm-12 {
flex: 0 0 100%;
max-width: 100%; }
@ -3117,27 +3117,27 @@ pre {
.offset-sm-0 {
margin-left: 0; }
.offset-sm-1 {
margin-left: 8.3333333333%; }
margin-left: 8.33333333%; }
.offset-sm-2 {
margin-left: 16.6666666667%; }
margin-left: 16.66666667%; }
.offset-sm-3 {
margin-left: 25%; }
.offset-sm-4 {
margin-left: 33.3333333333%; }
margin-left: 33.33333333%; }
.offset-sm-5 {
margin-left: 41.6666666667%; }
margin-left: 41.66666667%; }
.offset-sm-6 {
margin-left: 50%; }
.offset-sm-7 {
margin-left: 58.3333333333%; }
margin-left: 58.33333333%; }
.offset-sm-8 {
margin-left: 66.6666666667%; }
margin-left: 66.66666667%; }
.offset-sm-9 {
margin-left: 75%; }
.offset-sm-10 {
margin-left: 83.3333333333%; }
margin-left: 83.33333333%; }
.offset-sm-11 {
margin-left: 91.6666666667%; } }
margin-left: 91.66666667%; } }
@media (min-width: 768px) {
.col-md {
@ -3167,38 +3167,38 @@ pre {
width: auto;
max-width: 100%; }
.col-md-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%; }
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-md-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-md-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-md-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-md-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%; }
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-md-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-md-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%; }
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-md-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-md-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-md-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; }
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-md-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%; }
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-md-12 {
flex: 0 0 100%;
max-width: 100%; }
@ -3235,27 +3235,27 @@ pre {
.offset-md-0 {
margin-left: 0; }
.offset-md-1 {
margin-left: 8.3333333333%; }
margin-left: 8.33333333%; }
.offset-md-2 {
margin-left: 16.6666666667%; }
margin-left: 16.66666667%; }
.offset-md-3 {
margin-left: 25%; }
.offset-md-4 {
margin-left: 33.3333333333%; }
margin-left: 33.33333333%; }
.offset-md-5 {
margin-left: 41.6666666667%; }
margin-left: 41.66666667%; }
.offset-md-6 {
margin-left: 50%; }
.offset-md-7 {
margin-left: 58.3333333333%; }
margin-left: 58.33333333%; }
.offset-md-8 {
margin-left: 66.6666666667%; }
margin-left: 66.66666667%; }
.offset-md-9 {
margin-left: 75%; }
.offset-md-10 {
margin-left: 83.3333333333%; }
margin-left: 83.33333333%; }
.offset-md-11 {
margin-left: 91.6666666667%; } }
margin-left: 91.66666667%; } }
@media (min-width: 992px) {
.col-lg {
@ -3285,38 +3285,38 @@ pre {
width: auto;
max-width: 100%; }
.col-lg-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%; }
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-lg-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-lg-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-lg-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%; }
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-lg-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-lg-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%; }
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-lg-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-lg-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-lg-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; }
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-lg-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%; }
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-lg-12 {
flex: 0 0 100%;
max-width: 100%; }
@ -3353,27 +3353,27 @@ pre {
.offset-lg-0 {
margin-left: 0; }
.offset-lg-1 {
margin-left: 8.3333333333%; }
margin-left: 8.33333333%; }
.offset-lg-2 {
margin-left: 16.6666666667%; }
margin-left: 16.66666667%; }
.offset-lg-3 {
margin-left: 25%; }
.offset-lg-4 {
margin-left: 33.3333333333%; }
margin-left: 33.33333333%; }
.offset-lg-5 {
margin-left: 41.6666666667%; }
margin-left: 41.66666667%; }
.offset-lg-6 {
margin-left: 50%; }
.offset-lg-7 {
margin-left: 58.3333333333%; }
margin-left: 58.33333333%; }
.offset-lg-8 {
margin-left: 66.6666666667%; }
margin-left: 66.66666667%; }
.offset-lg-9 {
margin-left: 75%; }
.offset-lg-10 {
margin-left: 83.3333333333%; }
margin-left: 83.33333333%; }
.offset-lg-11 {
margin-left: 91.6666666667%; } }
margin-left: 91.66666667%; } }
@media (min-width: 1200px) {
.col-xl {
@ -3403,38 +3403,38 @@ pre {
width: auto;
max-width: 100%; }
.col-xl-1 {
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%; }
flex: 0 0 8.33333333%;
max-width: 8.33333333%; }
.col-xl-2 {
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%; }
flex: 0 0 16.66666667%;
max-width: 16.66666667%; }
.col-xl-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-xl-4 {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%; }
flex: 0 0 33.33333333%;
max-width: 33.33333333%; }
.col-xl-5 {
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%; }
flex: 0 0 41.66666667%;
max-width: 41.66666667%; }
.col-xl-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-xl-7 {
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%; }
flex: 0 0 58.33333333%;
max-width: 58.33333333%; }
.col-xl-8 {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
flex: 0 0 66.66666667%;
max-width: 66.66666667%; }
.col-xl-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-xl-10 {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; }
flex: 0 0 83.33333333%;
max-width: 83.33333333%; }
.col-xl-11 {
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%; }
flex: 0 0 91.66666667%;
max-width: 91.66666667%; }
.col-xl-12 {
flex: 0 0 100%;
max-width: 100%; }
@ -3471,27 +3471,27 @@ pre {
.offset-xl-0 {
margin-left: 0; }
.offset-xl-1 {
margin-left: 8.3333333333%; }
margin-left: 8.33333333%; }
.offset-xl-2 {
margin-left: 16.6666666667%; }
margin-left: 16.66666667%; }
.offset-xl-3 {
margin-left: 25%; }
.offset-xl-4 {
margin-left: 33.3333333333%; }
margin-left: 33.33333333%; }
.offset-xl-5 {
margin-left: 41.6666666667%; }
margin-left: 41.66666667%; }
.offset-xl-6 {
margin-left: 50%; }
.offset-xl-7 {
margin-left: 58.3333333333%; }
margin-left: 58.33333333%; }
.offset-xl-8 {
margin-left: 66.6666666667%; }
margin-left: 66.66666667%; }
.offset-xl-9 {
margin-left: 75%; }
.offset-xl-10 {
margin-left: 83.3333333333%; }
margin-left: 83.33333333%; }
.offset-xl-11 {
margin-left: 91.6666666667%; } }
margin-left: 91.66666667%; } }
.table {
width: 100%;
@ -3773,9 +3773,6 @@ pre {
.form-control::-ms-expand {
background-color: transparent;
border: 0; }
.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #495057; }
.form-control:focus {
color: #495057;
background-color: #fff;
@ -3795,6 +3792,10 @@ input[type="datetime-local"].form-control,
input[type="month"].form-control {
appearance: none; }
select.form-control:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #495057; }
select.form-control:focus::-ms-value {
color: #495057;
background-color: #fff; }
@ -3915,7 +3916,7 @@ textarea.form-control {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
font-size: 0.875em;
color: #357a32; }
.valid-tooltip {
@ -3944,7 +3945,7 @@ textarea.form-control {
.was-validated .form-control:valid, .form-control.is-valid {
border-color: #357a32;
padding-right: calc(1.5em + 0.75rem);
padding-right: calc(1.5em + 0.75rem) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23357a32' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
@ -3953,13 +3954,17 @@ textarea.form-control {
border-color: #357a32;
box-shadow: 0 0 0 0.2rem rgba(53, 122, 50, 0.25); }
.was-validated select.form-control:valid, select.form-control.is-valid {
padding-right: 3rem !important;
background-position: right 1.5rem center; }
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); }
.was-validated .custom-select:valid, .custom-select.is-valid {
border-color: #357a32;
padding-right: calc(0.75em + 2.3125rem);
padding-right: calc(0.75em + 2.3125rem) !important;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23357a32' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
border-color: #357a32;
@ -3999,7 +4004,7 @@ textarea.form-control {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
font-size: 0.875em;
color: #ca3120; }
.invalid-tooltip {
@ -4028,7 +4033,7 @@ textarea.form-control {
.was-validated .form-control:invalid, .form-control.is-invalid {
border-color: #ca3120;
padding-right: calc(1.5em + 0.75rem);
padding-right: calc(1.5em + 0.75rem) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ca3120' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ca3120' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
@ -4037,13 +4042,17 @@ textarea.form-control {
border-color: #ca3120;
box-shadow: 0 0 0 0.2rem rgba(202, 49, 32, 0.25); }
.was-validated select.form-control:invalid, select.form-control.is-invalid {
padding-right: 3rem !important;
background-position: right 1.5rem center; }
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
padding-right: calc(1.5em + 0.75rem);
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); }
.was-validated .custom-select:invalid, .custom-select.is-invalid {
border-color: #ca3120;
padding-right: calc(0.75em + 2.3125rem);
padding-right: calc(0.75em + 2.3125rem) !important;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ca3120' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ca3120' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
border-color: #ca3120;
@ -4593,6 +4602,13 @@ input[type="button"].btn-block {
@media (prefers-reduced-motion: reduce) {
.collapsing {
transition: none; } }
.collapsing.width {
width: 0;
height: auto;
transition: width 0.35s ease; }
@media (prefers-reduced-motion: reduce) {
.collapsing.width {
transition: none; } }
.dropup,
.dropright,
@ -4928,16 +4944,21 @@ input[type="button"].btn-block {
display: flex;
align-items: center; }
.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.input-group > .custom-file:not(:first-child) .custom-file-label {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.input-group:not(.has-validation) > .form-control:not(:last-child),
.input-group:not(.has-validation) > .custom-select:not(:last-child),
.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label,
.input-group:not(.has-validation) > .custom-file:not(:last-child) .custom-file-label::after {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.input-group.has-validation > .form-control:nth-last-child(n + 3),
.input-group.has-validation > .custom-select:nth-last-child(n + 3),
.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label,
.input-group.has-validation > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@ -5057,7 +5078,7 @@ input[type="button"].btn-block {
display: block;
min-height: 1.40625rem;
padding-left: 1.75rem;
color-adjust: exact; }
print-color-adjust: exact; }
.custom-control-inline {
display: inline-flex;
@ -5101,7 +5122,7 @@ input[type="button"].btn-block {
pointer-events: none;
content: "";
background-color: #fff;
border: #8f959e solid 1px; }
border: 1px solid #8f959e; }
.custom-control-label::after {
position: absolute;
top: 0.078125rem;
@ -5407,10 +5428,12 @@ input[type="button"].btn-block {
border-bottom: 1px solid #dee2e6; }
.nav-tabs .nav-link {
margin-bottom: -1px;
background-color: transparent;
border: 1px solid transparent;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
isolation: isolate;
border-color: #e9ecef #e9ecef #dee2e6; }
.nav-tabs .nav-link.disabled {
color: #6a737b;
@ -5427,6 +5450,8 @@ input[type="button"].btn-block {
border-top-right-radius: 0; }
.nav-pills .nav-link {
background: none;
border: 0;
border-radius: 0.5rem; }
.nav-pills .nav-link.active,
@ -6728,8 +6753,8 @@ a.close.disabled {
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
font-size: 0.8203125rem;
word-wrap: break-word;
@ -6812,8 +6837,8 @@ a.close.disabled {
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
font-size: 0.8203125rem;
word-wrap: break-word;
@ -6990,8 +7015,11 @@ a.close.disabled {
align-items: center;
justify-content: center;
width: 15%;
padding: 0;
color: #fff;
text-align: center;
background: none;
border: 0;
opacity: 0.5;
transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
@ -7077,8 +7105,8 @@ a.close.disabled {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
vertical-align: -0.125em;
border: 0.25em solid currentcolor;
border-right-color: transparent;
border-radius: 50%;
animation: .75s linear infinite spinner-border; }
@ -7099,8 +7127,8 @@ a.close.disabled {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
background-color: currentColor;
vertical-align: -0.125em;
background-color: currentcolor;
border-radius: 50%;
opacity: 0;
animation: .75s linear infinite spinner-grow; }
@ -7448,7 +7476,7 @@ button.bg-dark:focus {
border: 0; }
.embed-responsive-21by9::before {
padding-top: 42.8571428571%; }
padding-top: 42.85714286%; }
.embed-responsive-16by9::before {
padding-top: 56.25%; }
@ -9792,8 +9820,6 @@ a.text-dark:hover, a.text-dark:focus {
blockquote {
border: 1px solid #8f959e;
page-break-inside: avoid; }
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
@ -14912,7 +14938,7 @@ span.editinstructions {
width: 100%; }
.description .course-description-item {
font-size: 80%;
font-size: 0.875em;
background-color: #f8f9fa;
padding-left: 1rem;
padding-right: 1rem; }
@ -21155,7 +21181,7 @@ div.editor_atto_content:hover .atto_control {
display: none;
width: 100%;
margin-top: 0.25rem;
font-size: 80%;
font-size: 0.875em;
color: #ca3120; }
.has-danger .editor_atto_content.form-control .invalid-tooltip,
@ -21194,7 +21220,7 @@ div.editor_atto_content:hover .atto_control {
.has-danger .editor_atto_content.form-control-danger .form-control:invalid,
.has-danger .editor_atto_content.form-control-danger .form-control.is-invalid {
border-color: #ca3120;
padding-right: calc(1.5em + 0.75rem);
padding-right: calc(1.5em + 0.75rem) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ca3120' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ca3120' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
@ -21205,6 +21231,12 @@ div.editor_atto_content:hover .atto_control {
border-color: #ca3120;
box-shadow: 0 0 0 0.2rem rgba(202, 49, 32, 0.25); }
.was-validated .has-danger .editor_atto_content.form-control select.form-control:invalid, .has-danger .editor_atto_content.form-control select.form-control.is-invalid, .was-validated
.has-danger .editor_atto_content.form-control-danger select.form-control:invalid,
.has-danger .editor_atto_content.form-control-danger select.form-control.is-invalid {
padding-right: 3rem !important;
background-position: right 1.5rem center; }
.was-validated .has-danger .editor_atto_content.form-control textarea.form-control:invalid, .has-danger .editor_atto_content.form-control textarea.form-control.is-invalid, .was-validated
.has-danger .editor_atto_content.form-control-danger textarea.form-control:invalid,
.has-danger .editor_atto_content.form-control-danger textarea.form-control.is-invalid {
@ -21215,7 +21247,7 @@ div.editor_atto_content:hover .atto_control {
.has-danger .editor_atto_content.form-control-danger .custom-select:invalid,
.has-danger .editor_atto_content.form-control-danger .custom-select.is-invalid {
border-color: #ca3120;
padding-right: calc(0.75em + 2.3125rem);
padding-right: calc(0.75em + 2.3125rem) !important;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ca3120' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ca3120' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; }
.was-validated .has-danger .editor_atto_content.form-control .custom-select:invalid:focus, .has-danger .editor_atto_content.form-control .custom-select.is-invalid:focus, .was-validated
.has-danger .editor_atto_content.form-control-danger .custom-select:invalid:focus,

View File

@ -4,7 +4,7 @@
<location>scss/bootstrap</location>
<name>Twitter Bootstrap</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -17,7 +17,7 @@
<location>amd/src/bootstrap/alert.js</location>
<name>bootstrap-alert</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -29,7 +29,7 @@
<library>
<location>amd/src/bootstrap/button.js</location>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<licenseversion></licenseversion>
<repository>https://github.com/twbs/bootstrap</repository>
@ -43,7 +43,7 @@
<location>amd/src/bootstrap/carousel.js</location>
<name>bootstrap-carousel</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -56,7 +56,7 @@
<location>amd/src/bootstrap/collapse.js</location>
<name>bootstrap-collapse</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -69,7 +69,7 @@
<location>amd/src/bootstrap/dropdown.js</location>
<name>bootstrap-dropdown</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -82,7 +82,7 @@
<location>amd/src/bootstrap/modal.js</location>
<name>bootstrap-modal</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -95,7 +95,7 @@
<location>amd/src/bootstrap/popover.js</location>
<name>bootstrap-popover</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -108,7 +108,7 @@
<location>amd/src/bootstrap/tools/sanitizer.js</location>
<name>bootstrap-sanitizer</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -121,7 +121,7 @@
<location>amd/src/bootstrap/scrollspy.js</location>
<name>bootstrap-scrollspy</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -134,7 +134,7 @@
<location>amd/src/bootstrap/tab.js</location>
<name>bootstrap-tab</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -147,7 +147,7 @@
<location>amd/src/bootstrap/toast.js</location>
<name>bootstrap-toast</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -160,7 +160,7 @@
<location>amd/src/bootstrap/tooltip.js</location>
<name>bootstrap-tooltip</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -173,7 +173,7 @@
<location>amd/src/bootstrap/util.js</location>
<name>bootstrap-util</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>
@ -186,7 +186,7 @@
<location>amd/src/index.js</location>
<name>bootstrap-util</name>
<description>HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web.</description>
<version>4.6.0</version>
<version>4.6.2</version>
<license>MIT</license>
<repository>https://github.com/twbs/bootstrap</repository>
<copyrights>

Some files were not shown because too many files have changed in this diff Show More