diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/helpers')
5 files changed, 52 insertions, 26 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md index aee048e0f..d64ca4339 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md @@ -23,6 +23,10 @@ Color and background helpers combine the power of our [`.text-*` utilities]({{< {{< /text-bg.inline >}} {{< /example >}} +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## With components Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}): diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md index e940196ff..6a3dbe4b7 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md @@ -3,19 +3,41 @@ layout: docs title: Colored links description: Colored links with hover states group: helpers -toc: false +toc: true --- -You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. +## Link colors + +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. 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 info >}} +**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities. +{{< /callout >}} {{< example >}} {{< colored-links.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a> +<p><a href="#" class="link-{{ .name }}">{{ .name | title }} link</a></p> {{- end -}} {{< /colored-links.inline >}} +<p><a href="#" class="link-body-emphasis">Emphasis link</a></p> {{< /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. +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} + +## Link utilities + +{{< added-in "5.3.0" >}} + +Colored links can also be modified by our [link utilities]({{< docsref "/utilities/link/" >}}). + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p> +{{- end -}} +{{< /colored-links.inline >}} +<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p> +{{< /example >}} 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 802ab4db6..2be6b30b4 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 @@ -17,11 +17,11 @@ Heads up! Support for gap utilities with flexbox was recently added to Safari, s Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items. -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="vstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border">Second item</div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} @@ -29,32 +29,32 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items. -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border">Second item</div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} Using horizontal margin utilities like `.ms-auto` as spacers: -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}): -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> <div class="vr"></div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} @@ -80,6 +80,6 @@ Create an inline form with `.hstack`: </div> {{< /example >}} -## Sass +## CSS {{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md index 8a13ff41c..21a11c030 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md @@ -66,7 +66,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel <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);"> + <p class="card-text bg-body-tertiary" 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> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md index f10a16d08..334eb3e0a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md @@ -35,11 +35,11 @@ Vertical rules scale their height in flex layouts: They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}): -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> + <div class="p-2">First item</div> + <div class="p-2 ms-auto">Second item</div> <div class="vr"></div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} |