diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content')
30 files changed, 468 insertions, 459 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md index 227d11a86..8b22686ad 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md @@ -11,7 +11,7 @@ toc: true ## How it works -The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`. +The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. {{< callout info >}} {{< partial "callouts/info-prefersreducedmotion.md" >}} @@ -21,6 +21,10 @@ The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally Click the accordions below to expand/collapse the accordion content. +To render an accordion that's expanded by default: +- add the `.show` class on the `.accordion-collapse` element. +- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`. + {{< example >}} <div class="accordion" id="accordionExample"> <div class="accordion-item"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md index 9eb64dfe3..6103898bc 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md @@ -162,13 +162,11 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS {{< deprecated-in "5.3.0" >}} -Used in combination with `$theme-colors` to create contextual modifier classes for our alerts. - {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} ### Sass loops -Loop that generates the modifier classes with the `alert-variant()` mixin. +Loop that generates the modifier classes with an overriding of CSS variables. {{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/badge.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/badge.md index c07387850..56ade490d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/badge.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/badge.md @@ -13,12 +13,12 @@ Badges scale to match the size of the immediate parent element by using relative ### Headings {{< example >}} -<h1>Example heading <span class="badge bg-secondary">New</span></h1> -<h2>Example heading <span class="badge bg-secondary">New</span></h2> -<h3>Example heading <span class="badge bg-secondary">New</span></h3> -<h4>Example heading <span class="badge bg-secondary">New</span></h4> -<h5>Example heading <span class="badge bg-secondary">New</span></h5> -<h6>Example heading <span class="badge bg-secondary">New</span></h6> +<h1>Example heading <span class="badge text-bg-secondary">New</span></h1> +<h2>Example heading <span class="badge text-bg-secondary">New</span></h2> +<h3>Example heading <span class="badge text-bg-secondary">New</span></h3> +<h4>Example heading <span class="badge text-bg-secondary">New</span></h4> +<h5>Example heading <span class="badge text-bg-secondary">New</span></h5> +<h6>Example heading <span class="badge text-bg-secondary">New</span></h6> {{< /example >}} ### Buttons diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md index 6138c3d92..c504fef61 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md @@ -63,7 +63,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t ### Images -`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. +`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card's borders. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. {{< example >}} <div class="card" style="width: 18rem;"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md index 598bb38d6..7f7e1457c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md @@ -117,21 +117,21 @@ These work great with custom content as well. <div class="fw-bold">Subheading</div> Content for list item </div> - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> Content for list item </div> - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">Subheading</div> Content for list item </div> - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> </ol> {{< /example >}} @@ -200,15 +200,15 @@ Add badges to any list group item to show unread counts, activity, and more with <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> A list item - <span class="badge bg-primary rounded-pill">14</span> + <span class="badge text-bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> A second list item - <span class="badge bg-primary rounded-pill">2</span> + <span class="badge text-bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> A third list item - <span class="badge bg-primary rounded-pill">1</span> + <span class="badge text-bg-primary rounded-pill">1</span> </li> </ul> {{< /example >}} @@ -321,8 +321,6 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca {{< deprecated-in "5.3.0" >}} -Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s. - {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}} ### Sass loops diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md index ba2a51a6e..3ca7cc4d2 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md @@ -218,7 +218,7 @@ When modals become too long for the user's viewport or device, they scroll indep </button> </div> -You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`. +You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`. <div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md index 7c4c86206..ac257df24 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md @@ -144,7 +144,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. {{< callout warning >}} -Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. +**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. {{< /callout >}} {{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}} @@ -328,6 +328,7 @@ const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas') {{< bs-table "table" >}} | Method | Description | | --- | --- | +| `dispose` | Destroys an element's offcanvas. | | `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. | | `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md index 685d2c3c6..f4697a771 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md @@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, { const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance // setContent example -myPopover.setContent({ +popover.setContent({ '.popover-header': 'another title', '.popover-body': 'another content' }) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md b/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md index ef2bd13bc..1400e8c55 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md @@ -64,7 +64,7 @@ $font-family-sans-serif: // Android Roboto, // older macOS and iOS - "Helvetica Neue" + "Helvetica Neue", // Linux "Noto Sans", "Liberation Sans", diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md b/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md index b75b233e1..3d3583c37 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md @@ -549,7 +549,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `. <div class="bd-example"> <table class="table"> - <thead class="table-light"> + <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md index 6a3c323b0..d42c63615 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md @@ -18,341 +18,343 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` **Heads up!** There's some potential confusion with our new secondary and tertiary colors, and our existing secondary theme color, as well as our light and dark theme colors. Expect this to be ironed out in v6. {{< /callout >}} -<table class="table table-swatches"> - <thead> - <tr> - <th style="width: 340px;">Description</th> - <th style="width: 200px;" class="ps-0">Swatch</th> - <th>Variables</th> - </tr> - </thead> - <tbody> - <tr> - <td rowspan="2"> - {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </div> - </td> - <td> - {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="2"> - {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"> </div> - </td> - <td> - {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="2"> - {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"> </div> - </td> - <td> - {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"> </div> - </td> - <td> - {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-primary"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-success"> </div> - </td> - <td> - {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-danger"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-warning"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-info"> </div> - </td> - <td> - {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-light"> </div> - </td> - <td> - {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} - </td> - </tr> - <tr> - <td rowspan="4"> - {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} - </td> - <td class="ps-0"> - <div class="p-3 rounded-2 bg-dark"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> - </td> - <td> - {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} - </td> - </tr> - <tr> - <td> - <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> - </td> - <td> - {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} - </td> - </tr> - </tbody> -</table> +<div class="table-responsive"> + <table class="table table-swatches"> + <thead> + <tr> + <th style="width: 340px;">Description</th> + <th style="width: 200px;" class="ps-0">Swatch</th> + <th>Variables</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2"> + {{< markdown >}}**Body —** Default foreground (color) and background, including components.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-body-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-body-color`<br>`--bs-body-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </div> + </td> + <td> + {{< markdown >}}`--bs-body-bg`<br>`--bs-body-bg-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="2"> + {{< markdown >}}**Secondary —** Use the `color` option for lighter text. Use the `bg` option for dividers and to indicate disabled component states.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-secondary-color`<br>`--bs-secondary-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2 border" style="background-color: var(--bs-secondary-bg);"> </div> + </td> + <td> + {{< markdown >}}`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="2"> + {{< markdown >}}**Tertiary —** Use the `color` option for even lighter text. Use the `bg` option to style backgrounds for hover states, accents, and wells.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2 border" style="background-color: var(--bs-tertiary-bg);"> </div> + </td> + <td> + {{< markdown >}}`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + {{< markdown >}}**Emphasis —** For higher contrast text. Not applicable for backgrounds.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-emphasis-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-emphasis-color`<br>`--bs-emphasis-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + {{< markdown >}}**Border —** For component borders, dividers, and rules. Use `--bs-border-color-translucent` to blend with backgrounds with an `rgba()` value.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);"> </div> + </td> + <td> + {{< markdown >}}`--bs-border-color`<br>`--bs-border-color-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-primary"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-success"> </div> + </td> + <td> + {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-danger"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-warning"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-info"> </div> + </td> + <td> + {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-light"> </div> + </td> + <td> + {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} + </td> + </tr> + <tr> + <td rowspan="4"> + {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} + </td> + <td class="ps-0"> + <div class="p-3 rounded-2 bg-dark"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> + </td> + <td> + {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} + </td> + </tr> + <tr> + <td> + <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> + </td> + <td> + {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} + </td> + </tr> + </tbody> + </table> +</div> ### Using the new colors diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md index ceadf3a98..a2b2bb26c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md @@ -244,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect. +`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative. + {{< scss-docs name="color-functions" file="scss/_functions.scss" >}} In practice, you'd call the function and pass in the color and weight parameters. @@ -256,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters .custom-element-2 { color: shade-color($danger, 30%); } + +.custom-element-3 { + color: shift-color($success, 40%); + background-color: shift-color($success, -60%); +} ``` ### Color contrast @@ -338,18 +345,18 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a ### Color schemes -A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. {{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}} ```scss .custom-element { - @include color-scheme(dark) { - // Insert dark mode styles here + @include color-scheme(light) { + // Insert light mode styles here } - @include color-scheme(custom-named-scheme) { - // Insert custom color scheme styles here + @include color-scheme(dark) { + // Insert dark mode styles here } } ``` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html index 97d991302..666b748cb 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html @@ -192,7 +192,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">مثال على عنوان منشور المدونة</h6> - <small class="text-body-secondary">15 يناير 2023</small> + <small class="text-body-secondary">15 يناير 2024</small> </div> </a> </li> @@ -201,7 +201,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">هذا عنوان آخر للمدونة</h6> - <small class="text-body-secondary">14 يناير 2023</small> + <small class="text-body-secondary">14 يناير 2024</small> </div> </a> </li> @@ -210,7 +210,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6> - <small class="text-body-secondary">13 يناير 2023</small> + <small class="text-body-secondary">13 يناير 2024</small> </div> </a> </li> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css index ddbca5a8f..86eedaf1d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css @@ -1,4 +1,4 @@ -/* stylelint-disable stylistic/selector-list-comma-newline-after */ +/* stylelint-disable @stylistic/selector-list-comma-newline-after */ .blog-header-logo { font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css index 043d4e617..bd0c9d1f0 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css @@ -1,4 +1,4 @@ -/* stylelint-disable stylistic/selector-list-comma-newline-after */ +/* stylelint-disable @stylistic/selector-list-comma-newline-after */ .blog-header-logo { font-family: Amiri, Georgia, "Times New Roman", serif; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html index 993c84e03..39535911e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html @@ -244,7 +244,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">Example blog post title</h6> - <small class="text-body-secondary">January 15, 2023</small> + <small class="text-body-secondary">January 15, 2024</small> </div> </a> </li> @@ -253,7 +253,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">This is another blog post title</h6> - <small class="text-body-secondary">January 14, 2023</small> + <small class="text-body-secondary">January 14, 2024</small> </div> </a> </li> @@ -262,7 +262,7 @@ extra_css: {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} <div class="col-lg-8"> <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6> - <small class="text-body-secondary">January 13, 2023</small> + <small class="text-body-secondary">January 13, 2024</small> </div> </a> </li> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html index 9fd24e2e0..eeb825fad 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html @@ -23,7 +23,7 @@ direction: rtl <nav class="small" id="toc"> <ul class="list-unstyled"> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button> <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">النصوص</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">الصور</a></li> @@ -32,7 +32,7 @@ direction: rtl </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button> <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">نظرة عامة</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">الحقول المعطلة</a></li> @@ -43,7 +43,7 @@ direction: rtl </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button> <ul class="list-unstyled ps-3 collapse" id="components-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">المطوية</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">الإنذارات</a></li> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html index 4c96bc0ae..cbe2b745c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html @@ -22,7 +22,7 @@ body_class: "bg-body-tertiary" <nav class="small" id="toc"> <ul class="list-unstyled"> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button> <ul class="list-unstyled ps-3 collapse" id="contents-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li> @@ -31,7 +31,7 @@ body_class: "bg-body-tertiary" </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button> <ul class="list-unstyled ps-3 collapse" id="forms-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li> @@ -42,7 +42,7 @@ body_class: "bg-body-tertiary" </ul> </li> <li class="my-2"> - <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button> + <button type="button" class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button> <ul class="list-unstyled ps-3 collapse" id="components-collapse"> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li> <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/bootstrap-docs.png b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/bootstrap-docs.png Binary files differindex daf9c62d1..a4e9b9864 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/bootstrap-docs.png +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/bootstrap-docs.png diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html index 0b245bd96..fd4d49847 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html @@ -24,12 +24,12 @@ extra_css: <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> Aperture </a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="#offcanvas" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> - <div class="offcanvas offcanvas-end" tabindex="-1" id="#offcanvas" aria-labelledby="#offcanvasLabel"> + <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"> <div class="offcanvas-header"> - <h5 class="offcanvas-title" id="#offcanvasLabel">Aperture</h5> + <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md index a18ab38c2..fe1ed948e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md @@ -305,7 +305,7 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg ### Outlined styles -Different variants of `.btn`, such at the various outlined styles, are supported. +Different variants of `.btn`, such as the various outlined styles, are supported. {{< example >}} <input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md index 36619e7b2..a987b4587 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md @@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-parcel@2x.png ## Setup -We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. +We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. -1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. +1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. ```sh mkdir my-project && cd my-project @@ -148,7 +148,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md index 9c2be9f11..33b76d3df 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md @@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-vite@2x.png ## Setup -We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. +We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. -1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. +1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. ```sh mkdir my-project && cd my-project @@ -42,7 +42,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre npm i --save-dev sass ``` -Now that we have all the necessary dependencies installed and setup, we can get to work creating the project files and importing Bootstrap. +Now that we have all the necessary dependencies installed and set up, we can get to work creating the project files and importing Bootstrap. ## Project structure @@ -78,10 +78,10 @@ With dependencies installed and our project folder ready for us to start coding, <!-- eslint-skip --> ```js - const path = require('path') + import { resolve } from 'path' export default { - root: path.resolve(__dirname, 'src'), + root: resolve(__dirname, 'src'), build: { outDir: '../dist' }, @@ -170,7 +170,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md index 0709b7ae5..39adaf61a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md @@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-webpack@2x.png ## Setup -We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. +We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal. -1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. +1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions. ```sh mkdir my-project && cd my-project @@ -242,7 +242,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this: <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md index caa2c67ff..ffe434188 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md @@ -10,7 +10,7 @@ added: "5.1" Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/). {{< callout warning >}} -Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap). +**Heads up!** Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap). {{< /callout >}} ## Vertical diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md b/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md index 27dff4591..d839f7681 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md @@ -152,13 +152,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Alert variants are now styled via CSS variables. -- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### List group - List group item variants are now styled via CSS variables. -- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `list-group-item-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### Dropdowns @@ -391,25 +391,25 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - We've ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}). -- <span class="badge bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ color space. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/) +- <span class="badge text-bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ color space. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/) - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`. - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`. -- <span class="badge bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach. +- <span class="badge text-bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach. - `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than `lg`). - - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`). + - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`). -- <span class="badge bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339). +- <span class="badge text-bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339). -- <span class="badge bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083). +- <span class="badge text-bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083). -- <span class="badge bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`. +- <span class="badge text-bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`. -- <span class="badge bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity. +- <span class="badge text-bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity. -- <span class="badge bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes. +- <span class="badge text-bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes. -- <span class="badge bg-danger">Breaking</span> **Removed previously deprecated mixins:** +- <span class="badge text-bg-danger">Breaking</span> **Removed previously deprecated mixins:** - `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active` - `float()` - `form-control-mixin()` @@ -419,7 +419,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - `visibility()` - `form-control-focus()` -- <span class="badge bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. +- <span class="badge text-bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function. - `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. [See #30394](https://github.com/twbs/bootstrap/pull/30394). @@ -441,15 +441,15 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities. - Added new [gutter class]({{< docsref "/layout/gutters" >}}) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters. - - <span class="badge bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities. + - <span class="badge text-bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities. - Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior. -- <span class="badge bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box. +- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box. -- <span class="badge bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). +- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}). -- <span class="badge bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference. +- <span class="badge text-bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference. - `$enable-grid-classes` no longer disables the generation of container classes anymore. [See #29146.](https://github.com/twbs/bootstrap/pull/29146) @@ -459,7 +459,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - **[RFS]({{< docsref "/getting-started/rfs" >}}) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._ -- <span class="badge bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s. +- <span class="badge text-bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s. - Added two new `.display-*` heading sizes, `.display-5` and `.display-6`. @@ -467,21 +467,21 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling. -- <span class="badge bg-danger">Breaking</span> Nested tables do not inherit styles anymore. +- <span class="badge text-bg-danger">Breaking</span> Nested tables do not inherit styles anymore. -- <span class="badge bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`). +- <span class="badge text-bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`). -- <span class="badge bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables. +- <span class="badge text-bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables. - Split table cell padding variables into `-y` and `-x`. -- <span class="badge bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135) +- <span class="badge text-bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135) -- <span class="badge bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267) +- <span class="badge text-bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267) -- <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793) +- <span class="badge text-bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793) -- <span class="badge bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~ +- <span class="badge text-bg-danger">Breaking</span> ~~`<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).~~ - Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`. @@ -495,7 +495,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}}) -- <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML. +- <span class="badge text-bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML. - `.custom-control.custom-checkbox` is now `.form-check`. - `.custom-control.custom-radio` is now `.form-check`. - `.custom-control.custom-switch` is now `.form-check.form-switch`. @@ -504,15 +504,15 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - `.custom-range` is now `.form-range`. - Dropped native `.form-control-file` and `.form-control-range`. -- <span class="badge bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. +- <span class="badge text-bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups. - The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation. -- <span class="badge bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`. +- <span class="badge text-bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`. -- <span class="badge bg-danger">Breaking</span> Form labels now require `.form-label`. +- <span class="badge text-bg-danger">Breaking</span> Form labels now require `.form-label`. -- <span class="badge bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element. +- <span class="badge text-bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element. - Form controls no longer used fixed `height` when possible, instead deferring to `min-height` to improve customization and compatibility with other components. @@ -538,11 +538,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Badges -- <span class="badge bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`). +- <span class="badge text-bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`). -- <span class="badge bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead. +- <span class="badge text-bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead. -- <span class="badge bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements. +- <span class="badge text-bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements. - Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`. @@ -554,9 +554,9 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Buttons -- <span class="badge bg-danger">Breaking</span> **[Toggle buttons]({{< docsref "/forms/checks-radios#toggle-buttons" >}}), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._ +- <span class="badge text-bg-danger">Breaking</span> **[Toggle buttons]({{< docsref "/forms/checks-radios#toggle-buttons" >}}), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._ -- <span class="badge bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]({{< docsref "/components/buttons#block-buttons" >}}) +- <span class="badge text-bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.]({{< docsref "/components/buttons#block-buttons" >}}) - Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters. @@ -566,11 +566,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Card -- <span class="badge bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment). +- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment). -- <span class="badge bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922). +- <span class="badge text-bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922). -- <span class="badge bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}). +- <span class="badge text-bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}). #### Carousel @@ -580,7 +580,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Close button -- <span class="badge bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name. - Close buttons now use a `background-image` (embedded SVG) instead of a `×` in the HTML, allowing for easier customization without the need to touch your markup. @@ -598,11 +598,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Darkened the dropdown divider for improved contrast. -- <span class="badge bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. +- <span class="badge text-bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element. - Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static, or dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning. -- <span class="badge bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. +- <span class="badge text-bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier. - Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive. @@ -610,7 +610,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Jumbotron -- <span class="badge bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]({{< docsref "/examples/jumbotron" >}}) +- <span class="badge text-bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]({{< docsref "/examples/jumbotron" >}}) #### List group @@ -622,8 +622,8 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Navbars -- <span class="badge bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required). -- <span class="badge bg-danger">Breaking</span> The `.active` class can no longer be applied to `.nav-item`s, it must be applied directly on `.nav-link`s. +- <span class="badge text-bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required). +- <span class="badge text-bg-danger">Breaking</span> The `.active` class can no longer be applied to `.nav-item`s, it must be applied directly on `.nav-link`s. #### Offcanvas @@ -637,7 +637,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Popovers -- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template. - Renamed `whiteList` option to `allowList`. @@ -657,15 +657,15 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co #### Tooltips -- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template. -- <span class="badge bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements. +- <span class="badge text-bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements. -- <span class="badge bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`. +- <span class="badge text-bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`. ### Utilities -- <span class="badge bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support: +- <span class="badge text-bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support: - Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`. - Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`. - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`. @@ -673,7 +673,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`. - Renamed `.text-*-left` and `.text-*-right` to `.text-*-start` and `.text-*-end`. -- <span class="badge bg-danger">Breaking</span> Disabled negative margins by default. +- <span class="badge text-bg-danger">Breaking</span> Disabled negative margins by default. - Added new `.bg-body` class for quickly setting the `<body>`'s background to additional elements. @@ -683,19 +683,19 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Added new [`border-width` utilities]({{< docsref "/utilities/borders#border-width" >}}). -- <span class="badge bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`. -- <span class="badge bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore. +- <span class="badge text-bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore. - Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map. -- <span class="badge bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency. -- <span class="badge bg-danger">Breaking</span> Renamed `.font-italic` utility to `.fst-italic` for brevity and consistency with new `.fst-normal` utility. +- <span class="badge text-bg-danger">Breaking</span> Renamed `.font-italic` utility to `.fst-italic` for brevity and consistency with new `.fst-normal` utility. - Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts. -- <span class="badge bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687). +- <span class="badge text-bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687). - Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}). @@ -705,13 +705,13 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co ### Helpers -- <span class="badge bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable. +- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable. - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`. - We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element. - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair. - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}). -- <span class="badge bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).** +- <span class="badge text-bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).** - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss` - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable` - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`. @@ -722,7 +722,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - **Dropped jQuery dependency** and rewrote plugins to be in regular JavaScript. -- <span class="badge bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`. +- <span class="badge text-bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`. - **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin: diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md index c17ed8470..1239261b4 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md @@ -22,12 +22,11 @@ Background utilities like `.bg-*` that generated from our original `$theme-color {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div> -<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div> +<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div> {{- end -}} {{< /colors.inline >}} -<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p> -<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p> - +<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div> +<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div> <div class="p-3 mb-2 bg-body text-body">.bg-body</div> <div class="p-3 mb-2 bg-black text-white">.bg-black</div> <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/position.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/position.md index a2ef4ecc7..76df92630 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/position.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/position.md @@ -90,7 +90,7 @@ Here are some real life examples of these classes: {{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}} <button type="button" class="btn btn-primary position-relative"> - Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span> + Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span> </button> <div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md index 95fe06b76..68b516ac5 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md @@ -31,7 +31,7 @@ Note that we don't provide utility classes for justified text. While, aesthetica Wrap text with a `.text-wrap` class. {{< example >}} -<div class="badge bg-primary text-wrap" style="width: 6rem;"> +<div class="badge text-bg-primary text-wrap" style="width: 6rem;"> This text should wrap. </div> {{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/versions.md b/vendor/twbs/bootstrap/site/content/docs/versions.md index 312decc93..c420de2a1 100644 --- a/vendor/twbs/bootstrap/site/content/docs/versions.md +++ b/vendor/twbs/bootstrap/site/content/docs/versions.md @@ -16,7 +16,7 @@ description: An appendix of hosted documentation for nearly every release of Boo <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version }}/"> {{ $version }} {{ if (eq $version $.Site.Params.docs_version) -}} - <span class="badge bg-primary">Latest</span> + <span class="badge text-bg-primary">Latest</span> {{- end }} </a> {{ if (eq (add $i 1) $len) }}</div>{{ end }} |
