diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/helpers')
7 files changed, 208 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/focus-ring.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md new file mode 100644 index 000000000..5f6e77073 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md @@ -0,0 +1,68 @@ +--- +layout: docs +title: Focus ring +description: Utility classes that allows you to add and modify custom focus ring styles to elements and components. +group: helpers +toc: true +added: "5.3" +--- + +The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component. + +## Example + +Click directly on the link below to see the focus ring in action, or into the example below and then press <kbd>Tab</kbd>. + +{{< example >}} +<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2"> + Custom focus ring +</a> +{{< /example >}} + +## Customize + +Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles. + +### CSS variables + +Modify the `--bs-focus-ring-*` CSS variables as needed to change the default appearance. + +{{< example >}} +<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-color: rgba(var(--bs-success-rgb), .25)"> + Green focus ring +</a> +{{< /example >}} + +`.focus-ring` sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts. + +{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} + +By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values. Modify them to change the default appearance. + +{{< example >}} +<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px"> + Blurry offset focus ring +</a> +{{< /example >}} + +### Sass + +Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +### Utilities + +In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support. + +{{< example >}} +{{< focus-ring.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="d-inline-flex focus-ring focus-ring-{{ .name }} py-1 px-2 text-decoration-none border rounded-2">{{ title .name }} focus</a></p> +{{- end -}} +{{< /focus-ring.inline >}} +{{< /example >}} + +Focus ring utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-focus-ring" file="scss/_utilities.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md new file mode 100644 index 000000000..9a0bffcd2 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md @@ -0,0 +1,88 @@ +--- +layout: docs +title: Icon link +description: Quickly create stylized hyperlinks with Bootstrap Icons or other icons. +group: helpers +toc: true +added: 5.3 +--- + +The icon link helper component modifies our default link styles to enhance their appearance and quickly align any pairing of icon and text. Alignment is set via inline flexbox styling and a default `gap` value. We stylize the underline with a custom offset and color. Icons are automatically sized to `1em` to best match their associated text's `font-size`. + +Icon links assume [Bootstrap Icons](https://icons.getbootstrap.com) are being used, but you can use any icon or image you like. + +{{< callout >}} +When icons are purely decorative, they should be hidden from assistive technologies using `aria-hidden="true"`, as we've done in our examples. For icons that convey meaning, provide an appropriate text alternative by adding `role="img"` and an appropriate `aria-label="..."` to the SVGs. +{{< /callout >}} + +## Example + +Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored. + +{{< example >}} +<a class="icon-link" href="#"> + <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg> + Icon link +</a> +{{< /example >}} + +{{< example >}} +<a class="icon-link" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /example >}} + +## Style on hover + +Add `.icon-link-hover` to move the icon to the right on hover. + +{{< example >}} +<a class="icon-link icon-link-hover" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /example >}} + +## Customize + +Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles. + +### CSS variables + +Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance. + +Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable: + +{{< example >}} +<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#"> + <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg> + Icon link +</a> +{{< /example >}} + +Customize the color by overriding the `--bs-link-*` CSS variable: + +{{< example >}} +<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /example >}} + +### Sass + +Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. + +{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}} + +### Utilities + +Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. + +{{< example >}} +<a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#"> + Icon link + <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> +</a> +{{< /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 >}} |