From 2a1341b910dfb1187dd9fceebd2b3be14e825e28 Mon Sep 17 00:00:00 2001 From: Mario Date: Fri, 28 Apr 2023 19:02:23 +0000 Subject: update bootstrap --- .../bootstrap/site/content/docs/5.3/about/brand.md | 14 +- .../site/content/docs/5.3/components/accordion.md | 38 +- .../site/content/docs/5.3/components/alerts.md | 23 +- .../site/content/docs/5.3/components/breadcrumb.md | 5 +- .../content/docs/5.3/components/button-group.md | 38 +- .../site/content/docs/5.3/components/buttons.md | 18 +- .../site/content/docs/5.3/components/card.md | 28 +- .../site/content/docs/5.3/components/carousel.md | 4 +- .../content/docs/5.3/components/close-button.md | 14 +- .../site/content/docs/5.3/components/collapse.md | 4 +- .../site/content/docs/5.3/components/dropdowns.md | 17 +- .../site/content/docs/5.3/components/list-group.md | 10 +- .../site/content/docs/5.3/components/modal.md | 25 +- .../site/content/docs/5.3/components/navbar.md | 10 +- .../site/content/docs/5.3/components/navs-tabs.md | 27 ++ .../site/content/docs/5.3/components/offcanvas.md | 6 +- .../content/docs/5.3/components/placeholders.md | 10 +- .../site/content/docs/5.3/components/popovers.md | 18 +- .../site/content/docs/5.3/components/progress.md | 37 +- .../site/content/docs/5.3/components/scrollspy.md | 2 +- .../site/content/docs/5.3/components/toasts.md | 22 +- .../site/content/docs/5.3/components/tooltips.md | 23 +- .../site/content/docs/5.3/content/figures.md | 4 +- .../site/content/docs/5.3/content/images.md | 4 +- .../site/content/docs/5.3/content/reboot.md | 18 +- .../site/content/docs/5.3/content/tables.md | 6 +- .../site/content/docs/5.3/content/typography.md | 8 +- .../site/content/docs/5.3/customize/color-modes.md | 83 +---- .../site/content/docs/5.3/customize/color.md | 73 ++-- .../content/docs/5.3/customize/css-variables.md | 31 +- .../site/content/docs/5.3/customize/optimize.md | 5 +- .../site/content/docs/5.3/customize/overview.md | 2 + .../site/content/docs/5.3/examples/.stylelintrc | 15 - .../site/content/docs/5.3/examples/_index.md | 71 ++-- .../content/docs/5.3/examples/album-rtl/index.html | 34 +- .../content/docs/5.3/examples/album/index.html | 34 +- .../content/docs/5.3/examples/blog-rtl/index.html | 6 +- .../site/content/docs/5.3/examples/blog/index.html | 8 +- .../docs/5.3/examples/carousel-rtl/index.html | 26 +- .../docs/5.3/examples/carousel/carousel.css | 2 +- .../docs/5.3/examples/carousel/carousel.rtl.css | 2 +- .../content/docs/5.3/examples/carousel/index.html | 26 +- .../docs/5.3/examples/cheatsheet-rtl/index.html | 26 +- .../docs/5.3/examples/cheatsheet/index.html | 26 +- .../docs/5.3/examples/checkout-rtl/index.html | 26 +- .../content/docs/5.3/examples/checkout/index.html | 24 +- .../docs/5.3/examples/dashboard-rtl/dashboard.js | 16 +- .../docs/5.3/examples/dashboard-rtl/index.html | 8 +- .../docs/5.3/examples/dashboard/dashboard.js | 16 +- .../content/docs/5.3/examples/dashboard/index.html | 8 +- .../docs/5.3/examples/dropdowns/dropdowns.css | 24 +- .../content/docs/5.3/examples/dropdowns/index.html | 382 ++++++++++++++------- .../docs/5.3/examples/features/features.css | 10 - .../content/docs/5.3/examples/features/index.html | 50 ++- .../content/docs/5.3/examples/footers/index.html | 106 +++--- .../site/content/docs/5.3/examples/grid/grid.css | 8 +- .../content/docs/5.3/examples/headers/headers.css | 2 +- .../content/docs/5.3/examples/headers/index.html | 36 +- .../content/docs/5.3/examples/heroes/index.html | 16 +- .../content/docs/5.3/examples/jumbotron/index.html | 6 +- .../docs/5.3/examples/list-groups/index.html | 271 +++++++-------- .../docs/5.3/examples/list-groups/list-groups.css | 14 +- .../content/docs/5.3/examples/masonry/index.html | 10 +- .../content/docs/5.3/examples/modals/index.html | 49 +-- .../content/docs/5.3/examples/modals/modals.css | 7 - .../docs/5.3/examples/navbar-bottom/index.html | 2 +- .../docs/5.3/examples/navbar-fixed/index.html | 2 +- .../docs/5.3/examples/navbar-static/index.html | 2 +- .../docs/5.3/examples/navbars-offcanvas/index.html | 10 +- .../content/docs/5.3/examples/navbars/index.html | 8 +- .../docs/5.3/examples/offcanvas-navbar/index.html | 14 +- .../content/docs/5.3/examples/pricing/index.html | 20 +- .../content/docs/5.3/examples/pricing/pricing.css | 2 +- .../content/docs/5.3/examples/product/index.html | 20 +- .../content/docs/5.3/examples/sidebars/index.html | 107 ++---- .../docs/5.3/examples/sidebars/sidebars.css | 14 +- .../content/docs/5.3/examples/sign-in/index.html | 2 +- .../docs/5.3/examples/starter-template/index.html | 89 ++++- .../examples/starter-template/starter-template.css | 9 - .../5.3/examples/sticky-footer-navbar/index.html | 4 +- .../docs/5.3/examples/sticky-footer/index.html | 4 +- .../site/content/docs/5.3/forms/checks-radios.md | 4 +- .../site/content/docs/5.3/forms/floating-labels.md | 4 +- .../site/content/docs/5.3/forms/form-control.md | 42 ++- .../site/content/docs/5.3/forms/input-group.md | 8 +- .../site/content/docs/5.3/forms/overview.md | 42 +-- .../bootstrap/site/content/docs/5.3/forms/range.md | 4 +- .../site/content/docs/5.3/forms/select.md | 4 +- .../site/content/docs/5.3/forms/validation.md | 26 +- .../docs/5.3/getting-started/browsers-devices.md | 6 +- .../docs/5.3/getting-started/introduction.md | 2 +- .../content/docs/5.3/getting-started/javascript.md | 43 +-- .../content/docs/5.3/getting-started/parcel.md | 4 +- .../site/content/docs/5.3/getting-started/rtl.md | 8 +- .../site/content/docs/5.3/getting-started/vite.md | 35 +- .../content/docs/5.3/getting-started/webpack.md | 89 +++-- .../content/docs/5.3/helpers/color-background.md | 4 + .../site/content/docs/5.3/helpers/colored-links.md | 30 +- .../site/content/docs/5.3/helpers/stacks.md | 34 +- .../content/docs/5.3/helpers/stretched-link.md | 2 +- .../site/content/docs/5.3/helpers/vertical-rule.md | 8 +- .../site/content/docs/5.3/layout/columns.md | 2 + .../site/content/docs/5.3/layout/containers.md | 14 +- .../bootstrap/site/content/docs/5.3/layout/grid.md | 6 +- .../site/content/docs/5.3/layout/gutters.md | 2 +- .../bootstrap/site/content/docs/5.3/migration.md | 102 +++++- .../site/content/docs/5.3/utilities/api.md | 7 + .../site/content/docs/5.3/utilities/background.md | 32 +- .../site/content/docs/5.3/utilities/borders.md | 19 + .../site/content/docs/5.3/utilities/colors.md | 39 ++- .../site/content/docs/5.3/utilities/display.md | 2 + .../site/content/docs/5.3/utilities/flex.md | 36 +- .../site/content/docs/5.3/utilities/object-fit.md | 20 +- .../site/content/docs/5.3/utilities/sizing.md | 26 +- .../site/content/docs/5.3/utilities/spacing.md | 4 +- .../site/content/docs/5.3/utilities/text.md | 15 +- .../site/content/docs/5.3/utilities/z-index.md | 16 +- .../twbs/bootstrap/site/content/docs/versions.md | 8 +- 118 files changed, 1647 insertions(+), 1403 deletions(-) delete mode 100644 vendor/twbs/bootstrap/site/content/docs/5.3/examples/.stylelintrc delete mode 100644 vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/starter-template.css (limited to 'vendor/twbs/bootstrap/site/content/docs') diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md b/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md index 9c31da07f..59f262eff 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md @@ -10,7 +10,7 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline ## Logo -When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap. +When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects.
Bootstrap @@ -29,19 +29,15 @@ Our logo mark is also available in black and white. All rules for our primary lo ## Name -Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_. +Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
-
+
Bootstrap
Correct
-
-
BootStrap
- Incorrect -
-
-
Twitter Bootstrap
+
+
BootStrap
Incorrect
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 33399772a..227d11a86 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 @@ -24,36 +24,36 @@ Click the accordions below to expand/collapse the accordion content. {{< example >}}
-

+

-
+
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-

+

-
+
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-

+

-
+
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
@@ -64,37 +64,37 @@ Click the accordions below to expand/collapse the accordion content. ### Flush -Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. +Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. {{< example class="bg-body-secondary" >}}
-

+

-
+
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.
-

+

-
+
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
-

+

-
+
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
@@ -108,36 +108,36 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord {{< example >}}
-

+

-
+
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-

+

-
+
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-

+

-
+
This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
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 7ea5b9b42..b6e78ea42 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 @@ -38,28 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th We use the following JavaScript to trigger our live alert demo: -```js -const alertPlaceholder = document.getElementById('liveAlertPlaceholder') - -const alert = (message, type) => { - const wrapper = document.createElement('div') - wrapper.innerHTML = [ - `' - ].join('') - - alertPlaceholder.append(wrapper) -} - -const alertTrigger = document.getElementById('liveAlertBtn') -if (alertTrigger) { - alertTrigger.addEventListener('click', () => { - alert('Nice, you triggered this alert message!', 'success') - }) -} -``` +{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}} ### Link color diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md index 0012f9748..fc68fc580 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md @@ -54,11 +54,8 @@ $breadcrumb-divider: quote(">"); It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. - {{< callout info >}} -### Using embedded SVG - -Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape. +**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info. {{< /callout >}} {{< example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md index 8f7d2d6a9..9c6356249 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md @@ -18,12 +18,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
{{< /example >}} -{{< callout warning >}} -##### Ensure correct `role` and provide a label - -In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. - -In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. +{{< callout info >}} +Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them. {{< /callout >}} These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}). @@ -145,21 +141,21 @@ Instead of applying button sizing classes to every button in a group, just add ` {{< example >}}
- - - + + +

- - - + + +

- - - + + +
{{< /example >}} @@ -190,12 +186,12 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli {{< example >}}
- - - - - - + + + + + +
{{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md index 396beec7f..ae58fca9a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md @@ -6,9 +6,23 @@ group: components toc: true --- -## Examples +## Base class -Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. +Bootstrap has a base `.btn` class that sets up basic styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, and lack any explicit focus and hover styles. + +{{< example >}} + +{{< /example >}} + +The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. + +{{< callout warning >}} +If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles. +{{< /callout >}} + +## Variants + +Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. {{< example >}} {{< buttons.inline >}} 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 f715a5eac..2ad32b470 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 @@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `` tag. If the `.card-t
Card title
-
Card subtitle
+
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link @@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `` elements.

With supporting text below as a natural lead-in to additional content.

Go somewhere
-
+
2 days ago
@@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

+

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

+

Last updated 3 mins ago

{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
@@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

+

Last updated 3 mins ago

@@ -487,7 +487,7 @@ Use card groups to render cards as a single, attached element with equal width a
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

-

Last updated 3 mins ago

+

Last updated 3 mins ago

@@ -495,7 +495,7 @@ Use card groups to render cards as a single, attached element with equal width a
Card title

This card has supporting text below as a natural lead-in to additional content.

-

Last updated 3 mins ago

+

Last updated 3 mins ago

@@ -503,7 +503,7 @@ Use card groups to render cards as a single, attached element with equal width a
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

-

Last updated 3 mins ago

+

Last updated 3 mins ago

@@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up.

This card has supporting text below as a natural lead-in to additional content.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up.

This card has supporting text below as a natural lead-in to additional content.

- Last updated 3 mins ago + Last updated 3 mins ago
@@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up.

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

- Last updated 3 mins ago + Last updated 3 mins ago
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md index dca8e9a79..422f0aaec 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md @@ -347,9 +347,9 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`). -## Sass +## CSS -### Variables +### Sass variables Variables for all carousels: diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md index 39b80e1cd..533271b49 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md @@ -24,7 +24,9 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event ## Dark variant -{{< callout info >}} +{{< deprecated-in "5.3.0" >}} + +{{< callout warning >}} **Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. {{< /callout >}} @@ -37,8 +39,16 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.3.0" >}} + +As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}} + +### Sass variables + {{< scss-docs name="close-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md index 95abc536c..21b9c3e06 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md @@ -100,9 +100,9 @@ If your control element is targeting a single collapsible element – i.e. the ` Note that Bootstrap's current implementation does not cover the various *optional* 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. -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md index b7dae56ab..098882064 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md @@ -400,8 +400,7 @@ And putting it to use in a navbar: ## Directions {{< callout info >}} -#### RTL -Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side. +**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side. {{< /callout >}} ### Centered @@ -842,7 +841,7 @@ Separate groups of related menu items with a divider. Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width. {{< example >}} -
+

Some example text that's free-flowing within the dropdown menu.

@@ -1026,7 +1025,7 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity: {{< scss-docs name="caret-variables" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. @@ -1057,6 +1056,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ### Via JavaScript +{{< callout warning >}} +Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api. +{{< /callout >}} + Call the dropdowns via JavaScript: ```js @@ -1064,12 +1067,6 @@ const dropdownElementList = document.querySelectorAll('.dropdown-toggle') const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl)) ``` -{{< callout info >}} -##### `data-bs-toggle="dropdown"` still required - -Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{{< /callout >}} - ### Options {{< markdown >}} 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 daa7a8818..2a0d22f86 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 @@ -230,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
List group item heading
- 3 days ago + 3 days ago

Some placeholder content in a paragraph.

- And some muted small print. + And some muted small print.
List group item heading
- 3 days ago + 3 days ago

Some placeholder content in a paragraph.

- And some muted small print. + And some muted small print.
{{< /example >}} @@ -319,6 +319,8 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca ### Sass mixins +{{< 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" >}} 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 09ae0653d..55272b33f 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 @@ -481,24 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
{{< /example >}} -```js -const exampleModal = document.getElementById('exampleModal') -exampleModal.addEventListener('show.bs.modal', event => { - // Button that triggered the modal - const button = event.relatedTarget - // Extract info from data-bs-* attributes - const recipient = button.getAttribute('data-bs-whatever') - // If necessary, you could initiate an AJAX request here - // and then do the updating in a callback. - // - // Update the modal's content. - const modalTitle = exampleModal.querySelector('.modal-title') - const modalBodyInput = exampleModal.querySelector('.modal-body input') - - modalTitle.textContent = `New message to ${recipient}` - modalBodyInput.value = recipient -}) -``` +{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}} ### Toggle between modals @@ -576,7 +559,7 @@ Modals have three optional sizes, available via modifier classes to be placed on | Size | Class | Modal max-width | --- | --- | --- | | Small | `.modal-sm` | `300px` | -| Default | None | `500px` | +| Default | None | `500px` | | Large | `.modal-lg` | `800px` | | Extra large | `.modal-xl` | `1140px` | {{< /bs-table >}} @@ -643,7 +626,7 @@ Another override is the option to pop up a modal that covers the user viewport, {{< bs-table >}} | Class | Availability | -| --- | --- | --- | +| --- | --- | | `.modal-fullscreen` | Always | | `.modal-fullscreen-sm-down` | `576px` | | `.modal-fullscreen-md-down` | `768px` | @@ -786,7 +769,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} -### Loop +### Sass loop [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md index 3afd89cd5..a150f8653 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md @@ -328,7 +328,7 @@ Mix and match with other components and utilities as needed. **New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`. {{< /callout >}} -Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities. +Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` utilities.
- 9 دقائق + 9 دقائق @@ -141,7 +141,7 @@ direction: rtl - 9 دقائق + 9 دقائق @@ -157,7 +157,7 @@ direction: rtl - 9 دقائق + 9 دقائق @@ -172,7 +172,7 @@ direction: rtl - 9 دقائق + 9 دقائق @@ -187,7 +187,7 @@ direction: rtl - 9 دقائق + 9 دقائق @@ -198,7 +198,7 @@ direction: rtl -