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. --- .../content/docs/5.1/helpers/stretched-link.md | 74 ---------------------- 1 file changed, 74 deletions(-) delete mode 100644 vendor/twbs/bootstrap/site/content/docs/5.1/helpers/stretched-link.md (limited to 'vendor/twbs/bootstrap/site/content/docs/5.1/helpers/stretched-link.md') diff --git a/vendor/twbs/bootstrap/site/content/docs/5.1/helpers/stretched-link.md b/vendor/twbs/bootstrap/site/content/docs/5.1/helpers/stretched-link.md deleted file mode 100644 index 93bffeb31..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.1/helpers/stretched-link.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -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 >}} -- cgit v1.2.3