diff options
author | Mario <mario@mariovavti.com> | 2021-09-22 06:38:27 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2021-09-22 06:38:27 +0000 |
commit | 89e4006b2d84d398e34d407a019854823b1dd37d (patch) | |
tree | eed215c505af2395952b474917a92584f9e1866a /vendor/twbs/bootstrap/site/content/docs/5.0/helpers | |
parent | 26ac452c96ce499c140bcbae78643b8fe39b4243 (diff) | |
download | volse-hubzilla-89e4006b2d84d398e34d407a019854823b1dd37d.tar.gz volse-hubzilla-89e4006b2d84d398e34d407a019854823b1dd37d.tar.bz2 volse-hubzilla-89e4006b2d84d398e34d407a019854823b1dd37d.zip |
composer update bootstrap to version 5.1.1
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.0/helpers')
7 files changed, 0 insertions, 306 deletions
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 deleted file mode 100644 index 9e31474a4..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/clearfix.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -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 -<div class="clearfix">...</div> -``` - -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 >}} -<div class="bg-info clearfix"> - <button type="button" class="btn btn-secondary float-start">Example Button floated left</button> - <button type="button" class="btn btn-secondary float-end">Example Button floated right</button> -</div> -{{< /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 deleted file mode 100644 index e940196ff..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/colored-links.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -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") }} -<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a> -{{- 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 deleted file mode 100644 index d54c1c795..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/position.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -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 -<div class="fixed-top">...</div> -``` - -## 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 -<div class="fixed-bottom">...</div> -``` - -## 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 -<div class="sticky-top">...</div> -``` - -## Responsive sticky top - -Responsive variations also exist for `.sticky-top` utility. - -```html -<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div> -<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div> -<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div> -<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div> -``` 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 deleted file mode 100644 index 771bc07cb..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/ratio.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -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 `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied from the parent `.ratio` class directly to the child. - -Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios). - -{{< callout info >}} -**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}). -{{< /callout >}} - -## Example - -Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector `.ratio > *`. - -{{< example >}} -<div class="ratio ratio-16x9"> - <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe> -</div> -{{< /example >}} - -## Aspect ratios - -Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: - -{{< example class="bd-example-ratios" >}} -<div class="ratio ratio-1x1"> - <div>1x1</div> -</div> -<div class="ratio ratio-4x3"> - <div>4x3</div> -</div> -<div class="ratio ratio-16x9"> - <div>16x9</div> -</div> -<div class="ratio ratio-21x9"> - <div>21x9</div> -</div> -{{< /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" >}} -<div class="ratio" style="--bs-aspect-ratio: 50%;"> - <div>2x1</div> -</div> -{{< /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" >}} -<div class="ratio ratio-4x3"> - <div>4x3, then 2x1</div> -</div> -{{< /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 deleted file mode 100644 index 93bffeb31..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.0/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 >}} -<div class="card" style="width: 18rem;"> - {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}} - <div class="card-body"> - <h5 class="card-title">Card with stretched link</h5> - <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> - <a href="#" class="btn btn-primary stretched-link">Go somewhere</a> - </div> -</div> -{{< /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 >}} -<div class="d-flex position-relative"> - {{< placeholder width="144" height="144" class="flex-shrink-0 me-3" text="false" title="Generic placeholder image" >}} - <div> - <h5 class="mt-0">Custom component with stretched link</h5> - <p>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.</p> - <a href="#" class="stretched-link">Go somewhere</a> - </div> -</div> -{{< /example >}} - -{{< example >}} -<div class="row g-0 bg-light position-relative"> - <div class="col-md-6 mb-md-0 p-md-4"> - {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}} - </div> - <div class="col-md-6 p-4 ps-md-0"> - <h5 class="mt-0">Columns with stretched link</h5> - <p>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.</p> - <a href="#" class="stretched-link">Go somewhere</a> - </div> -</div> -{{< /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 >}} -<div class="card" style="width: 18rem;"> - {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}} - <div class="card-body"> - <h5 class="card-title">Card with stretched links</h5> - <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> - <p class="card-text"> - <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a> - </p> - <p class="card-text bg-light" style="transform: rotate(0);"> - This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it. - </p> - </div> -</div> -{{< /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 deleted file mode 100644 index a92a171fd..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/text-truncation.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -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 >}} -<!-- Block level --> -<div class="row"> - <div class="col-2 text-truncate"> - Praeterea iter est quasdam res quas ex communi. - </div> -</div> - -<!-- Inline level --> -<span class="d-inline-block text-truncate" style="max-width: 150px;"> - Praeterea iter est quasdam res quas ex communi. -</span> -{{< /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 deleted file mode 100644 index d8148b3f3..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.0/helpers/visually-hidden.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -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 >}} -<h2 class="visually-hidden">Title for screen readers</h2> -<a class="visually-hidden-focusable" href="#content">Skip to main content</a> -<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div> -{{< /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; -} -``` |