From a451449766d581978068a5b8f8c1e27f50386ea7 Mon Sep 17 00:00:00 2001 From: Mario Date: Thu, 23 Sep 2021 08:33:36 +0000 Subject: Revert "composer update bootstrap to version 5.1.1" This reverts commit 89e4006b2d84d398e34d407a019854823b1dd37d. --- .../site/content/docs/5.0/helpers/clearfix.md | 36 ++++++++++ .../site/content/docs/5.0/helpers/colored-links.md | 21 ++++++ .../site/content/docs/5.0/helpers/position.md | 42 +++++++++++ .../site/content/docs/5.0/helpers/ratio.md | 81 ++++++++++++++++++++++ .../content/docs/5.0/helpers/stretched-link.md | 74 ++++++++++++++++++++ .../content/docs/5.0/helpers/text-truncation.md | 23 ++++++ .../content/docs/5.0/helpers/visually-hidden.md | 29 ++++++++ 7 files changed, 306 insertions(+) create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.0/helpers/clearfix.md create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.0/helpers/colored-links.md create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.0/helpers/position.md create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.0/helpers/ratio.md create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.0/helpers/stretched-link.md create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.0/helpers/text-truncation.md create mode 100644 vendor/twbs/bootstrap/site/content/docs/5.0/helpers/visually-hidden.md (limited to 'vendor/twbs/bootstrap/site/content/docs/5.0/helpers') diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/clearfix.md b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/clearfix.md new file mode 100644 index 000000000..9e31474a4 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/clearfix.md @@ -0,0 +1,36 @@ +--- +layout: docs +title: Clearfix +description: Quickly and easily clear floated content within a container by adding a clearfix utility. +group: helpers +aliases: "/docs/5.0/helpers/" +--- + +Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin. + +Use in HTML: + +```html +
...
+``` + +The mixin source code: + +{{< scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" >}} + +Use the mixin in SCSS: + +```scss +.element { + @include clearfix; +} +``` + +The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout. + +{{< example >}} +
+ + +
+{{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/colored-links.md b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/colored-links.md new file mode 100644 index 000000000..e940196ff --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/colored-links.md @@ -0,0 +1,21 @@ +--- +layout: docs +title: Colored links +description: Colored links with hover states +group: helpers +toc: false +--- + +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +{{ .name | title }} link +{{- end -}} +{{< /colored-links.inline >}} +{{< /example >}} + +{{< callout info >}} +Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +{{< /callout >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/position.md b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/position.md new file mode 100644 index 000000000..d54c1c795 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/position.md @@ -0,0 +1,42 @@ +--- +layout: docs +title: Position +description: Use these helpers for quickly configuring the position of an element. +group: helpers +toc: true +--- + +## Fixed top + +Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. + +```html +
...
+``` + +## Fixed bottom + +Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. + +```html +
...
+``` + +## Sticky top + +Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers. + +```html +
...
+``` + +## Responsive sticky top + +Responsive variations also exist for `.sticky-top` utility. + +```html +
Stick to the top on viewports sized SM (small) or wider
+
Stick to the top on viewports sized MD (medium) or wider
+
Stick to the top on viewports sized LG (large) or wider
+
Stick to the top on viewports sized XL (extra-large) or wider
+``` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/ratio.md b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/ratio.md new file mode 100644 index 000000000..771bc07cb --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/ratio.md @@ -0,0 +1,81 @@ +--- +layout: docs +title: Ratios +description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent. +group: helpers +toc: true +--- + +## About + +Use the ratio helper to manage the aspect ratios of external content like ` + +{{< /example >}} + +## Aspect ratios + +Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: + +{{< example class="bd-example-ratios" >}} +
+
1x1
+
+
+
4x3
+
+
+
16x9
+
+
+
21x9
+
+{{< /example >}} + +## Custom ratios + +Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part. + +For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`. + +{{< example class="bd-example-ratios" >}} +
+
2x1
+
+{{< /example >}} + +This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint. + +```scss +.ratio-4x3 { + @include media-breakpoint-up(md) { + --bs-aspect-ratio: 50%; // 2x1 + } +} +``` + +{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}} +
+
4x3, then 2x1
+
+{{< /example >}} + + +## Sass map + +Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use. + +{{< scss-docs name="aspect-ratios" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/stretched-link.md b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/stretched-link.md new file mode 100644 index 000000000..93bffeb31 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/stretched-link.md @@ -0,0 +1,74 @@ +--- +layout: docs +title: Stretched link +description: Make any HTML element or Bootstrap component clickable by "stretching" a nested link via CSS. +group: helpers +--- + +Add `.stretched-link` to a link to make its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block) clickable via a `::after` pseudo element. In most cases, this means that an element with `position: relative;` that contains a link with the `.stretched-link` class is clickable. Please note given [how CSS `position` works](https://www.w3.org/TR/CSS21/visuren.html#propdef-position), `.stretched-link` cannot be mixed with most table elements. + +Cards have `position: relative` by default in Bootstrap, so in this case you can safely add the `.stretched-link` class to a link in the card without any other HTML changes. + +Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required. + +{{< example >}} +
+ {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}} +
+
Card with stretched link
+

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

+ Go somewhere +
+
+{{< /example >}} + +Most custom components do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the parent element. + +{{< example >}} +
+ {{< placeholder width="144" height="144" class="flex-shrink-0 me-3" text="false" title="Generic placeholder image" >}} +
+
Custom component with stretched link
+

This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.

+ Go somewhere +
+
+{{< /example >}} + +{{< example >}} +
+
+ {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}} +
+
+
Columns with stretched link
+

Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.

+ Go somewhere +
+
+{{< /example >}} + +## Identifying the containing block + +If the stretched link doesn't seem to work, the [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block) will probably be the cause. The following CSS properties will make an element the containing block: + +- A `position` value other than `static` +- A `transform` or `perspective` value other than `none` +- A `will-change` value of `transform` or `perspective` +- A `filter` value other than `none` or a `will-change` value of `filter` (only works on Firefox) + +{{< example >}} +
+ {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}} +
+
Card with stretched links
+

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

+

+ Stretched link will not work here, because position: relative is added to the link +

+

+ This stretched link will only be spread over the p-tag, because a transform is applied to it. +

+
+
+{{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/text-truncation.md b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/text-truncation.md new file mode 100644 index 000000000..a92a171fd --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/text-truncation.md @@ -0,0 +1,23 @@ +--- +layout: docs +title: Text truncation +description: Truncate long strings of text with an ellipsis. +group: helpers +toc: false +--- + +For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.** + +{{< example >}} + +
+
+ Praeterea iter est quasdam res quas ex communi. +
+
+ + + + Praeterea iter est quasdam res quas ex communi. + +{{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/visually-hidden.md b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/visually-hidden.md new file mode 100644 index 000000000..d8148b3f3 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/visually-hidden.md @@ -0,0 +1,29 @@ +--- +layout: docs +title: Visually hidden +description: Use these helpers to visually hide elements but keep them accessible to assistive technologies. +group: helpers +aliases: "/docs/5.0/helpers/screen-readers/" +--- + +Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus. + +{{< example >}} + +Skip to main content +
A container with a focusable element.
+{{< /example >}} + +Both `visually-hidden` and `visually-hidden-focusable` can also be used as mixins. + +```scss +// Usage as a mixin + +.visually-hidden-title { + @include visually-hidden; +} + +.skip-navigation { + @include visually-hidden-focusable; +} +``` -- cgit v1.2.3