diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/utilities')
12 files changed, 252 insertions, 69 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md index a4da94224..aa7d6b88b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md @@ -389,6 +389,7 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -415,6 +416,7 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -444,6 +446,7 @@ You can enable responsive classes for an existing set of utilities that are not ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -499,6 +502,7 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -522,6 +526,7 @@ Remove any of the default utilities with the [`map-remove()` Sass function](http ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -537,6 +542,7 @@ You can also use the [`map-merge()` Sass function](https://sass-lang.com/documen ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -558,6 +564,7 @@ You can add, remove, and modify many utilities all at once with the [`map-merge( ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md index dad71ec37..eea553291 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md @@ -6,10 +6,18 @@ group: utilities toc: true --- +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Background color Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}). +{{< callout info >}} +Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -79,11 +87,11 @@ Or, choose from any of the `.bg-opacity` utilities: <div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div> {{< /example >}} -## Sass +## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -### Variables +### Sass variables Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. @@ -97,7 +105,13 @@ Grayscale colors are also available, but only a subset are used to generate any {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} -### Map +Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: + +{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. @@ -111,11 +125,17 @@ RGB colors are generated from a separate Sass map: {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} -And background color opacities build on that with their own map that's consumed by the utilities API: +Background color opacities build on that with their own map that's consumed by the utilities API: {{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}} -### Mixins +Color mode background colors are also available as a Sass map: + +{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}} + +### Sass mixins **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients. @@ -123,7 +143,7 @@ And background color opacities build on that with their own map that's consumed {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}} -### Utilities API +## Utilities API Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md index 50df793f2..fe33cac48 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md @@ -36,6 +36,10 @@ Or remove borders: ## Color +{{< callout info >}} +Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + Change the border color using utilities built on our theme colors. {{< example class="bd-example-border-utils" >}} @@ -45,6 +49,7 @@ Change the border color using utilities built on our theme colors. <span class="border border-{{ .name }}-subtle"></span> {{- end -}} {{< /border.inline >}} +<span class="border border-black"></span> <span class="border border-white"></span> {{< /example >}} @@ -162,6 +167,20 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}} +Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode: + +{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps + +Color mode adaptive border colors are also available as a Sass map: + +{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}} + ### Sass mixins {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md index 4b1647242..e132a2f11 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md @@ -6,10 +6,18 @@ group: utilities toc: true --- +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Colors Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states. +{{< callout info >}} +Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6. +{{< /callout >}} + {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -17,9 +25,8 @@ Colorize text with color utilities. If you want to colorize links, you can use t <p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p> {{- end -}} {{< /colors.inline >}} -<p class="text-body">.text-body</p> -<p class="text-muted">.text-muted</p> +<p class="text-body">.text-body</p> <p class="text-body-emphasis">.text-body-emphasis</p> <p class="text-body-secondary">.text-body-secondary</p> <p class="text-body-tertiary">.text-body-tertiary</p> @@ -35,11 +42,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t {{< /callout >}} {{< callout warning >}} -**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. -{{< /callout >}} - -{{< callout info >}} -{{< partial "callouts/warning-color-assistive-technologies.md" >}} +**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. {{< /callout >}} ## Opacity @@ -83,11 +86,11 @@ Or, choose from any of the `.text-opacity` utilities: Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class. -## Sass +## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -### Variables +### Sass variables Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. @@ -99,7 +102,15 @@ Grayscale colors are also available, but only a subset are used to generate any {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} -### Map +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode: + +{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. @@ -113,10 +124,16 @@ RGB colors are generated from a separate Sass map: {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} -And color opacities build on that with their own map that's consumed by the utilities API: +Color opacities build on that with their own map that's consumed by the utilities API: {{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}} +Color mode adaptive text colors are also available as a Sass map: + +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}} + ### Utilities API Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md index 1962f4bd2..dc5a497bf 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md @@ -26,6 +26,7 @@ Where *value* is one of: - `inline-block` - `block` - `grid` +- `inline-grid` - `table` - `table-cell` - `table-row` @@ -89,6 +90,7 @@ Change the `display` value of elements when printing with our print display util - `.d-print-inline-block` - `.d-print-block` - `.d-print-grid` +- `.d-print-inline-grid` - `.d-print-table` - `.d-print-table-row` - `.d-print-table-cell` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md index e29503434..564c39f86 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md @@ -82,34 +82,34 @@ Use `justify-content` utilities on flexbox containers to change the alignment of <div class="bd-example bd-example-flex"> <div class="d-flex justify-content-start mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Start</div> </div> <div class="d-flex justify-content-end mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">End</div> </div> <div class="d-flex justify-content-center mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Center</div> </div> <div class="d-flex justify-content-between mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Between</div> </div> <div class="d-flex justify-content-around mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Around</div> </div> <div class="d-flex justify-content-evenly"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Evenly</div> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md new file mode 100644 index 000000000..1b8eaa1ef --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md @@ -0,0 +1,105 @@ +--- +layout: docs +title: Link +description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. +group: utilities +toc: true +added: 5.3 +--- + +## Link opacity + +Change the alpha opacity of the link `rgba()` color value with utilities. Please be aware that changes to a color's opacity can lead to links with [*insufficient* contrast]({{< docsref "getting-started/accessibility#color-contrast" >}}). + +{{< example >}} +<p><a class="link-opacity-10" href="#">Link opacity 10</a></p> +<p><a class="link-opacity-25" href="#">Link opacity 25</a></p> +<p><a class="link-opacity-50" href="#">Link opacity 50</a></p> +<p><a class="link-opacity-75" href="#">Link opacity 75</a></p> +<p><a class="link-opacity-100" href="#">Link opacity 100</a></p> +{{< /example >}} + +You can even change the opacity level on hover. + +{{< example >}} +<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p> +<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p> +<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p> +<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p> +<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p> +{{< /example >}} + +## Link underlines + +### Underline color + +Change the underline's color independent of the link text color. + +{{< example >}} +{{< link-underline-colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="link-underline-{{ .name }}">{{ .name | title }} underline</a></p> +{{- end -}} +{{< /link-underline-colors.inline >}} +{{< /example >}} + +### Underline offset + +Change the underline's distance from your text. Offset is set in `em` units to automatically scale with the element's current `font-size`. + +{{< example >}} +<p><a href="#">Default link</a></p> +<p><a class="link-offset-1" href="#">Offset 1 link</a></p> +<p><a class="link-offset-2" href="#">Offset 2 link</a></p> +<p><a class="link-offset-3" href="#">Offset 3 link</a></p> +{{< /example >}} + +### Underline opacity + +Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity. + +{{< example >}} +<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p> +<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p> +{{< /example >}} + +### Hover variants + +Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles. + +{{< example >}} +<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#"> + Underline opacity 0 +</a> +{{< /example >}} + +## Colored links + +[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset. + +{{< 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 >}} + +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + +## Sass + +In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. + +### Utilities API + +Link 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-links" file="scss/_utilities.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md index 4d6c476eb..debd495e8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md @@ -23,11 +23,11 @@ Classes for the value of `object-fit` are named using the format `.object-fit-{v Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element): {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" >}} +{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" color="#868e96" background="#dee2e6" >}} {{< /example >}} ## Responsive @@ -35,11 +35,11 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need. {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" >}} +{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" color="#868e96" background="#dee2e6" >}} {{< /example >}} ## Video diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md index b8b58ddfd..3d0f8e81c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md @@ -18,25 +18,27 @@ Width and height utilities are generated from the utility API in `_utilities.scs <div class="w-auto p-3">Width auto</div> {{< /example >}} -{{< example >}} -<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> - <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div> - <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div> - <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div> - <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div> - <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div> +{{< example class="bd-example-flex" >}} +<div style="height: 100px;"> + <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div> + <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div> + <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div> + <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div> + <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div> </div> {{< /example >}} You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. -{{< example >}} -{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}} +{{< example class="bd-example-flex" >}} +<div style="width: 50%; height: 100px;"> + <div class="mw-100" style="width: 200%;">Max-width 100%</div> +</div> {{< /example >}} -{{< example >}} -<div style="height: 100px; background-color: rgba(255,0,0,.1);"> - <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div> +{{< example class="bd-example-flex" >}} +<div style="height: 100px;"> + <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div> </div> {{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md index 3d17e081d..c7a216c31 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md @@ -75,13 +75,13 @@ Here are some representative examples of these classes: Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`. <div class="bd-example"> - <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);"> + <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-violet-rgb),.15); border: rgba(var(--bd-violet-rgb),.3) solid 1px;"> Centered element </div> </div> ```html -<div class="mx-auto" style="width: 200px;"> +<div class="mx-auto p-2" style="width: 200px;"> Centered element </div> ``` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md index 5b3cd028b..f7c030da6 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md @@ -90,6 +90,7 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. ` <p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-semibold">Semibold weight text.</p> +<p class="fw-medium">Medium weight text.</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> @@ -121,7 +122,7 @@ Change a selection to our monospace font stack with `.font-monospace`. Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent. {{< example >}} -<p class="text-muted"> +<p class="text-body-secondary"> Muted text with a <a href="#" class="text-reset">reset link</a>. </p> {{< /example >}} @@ -136,19 +137,23 @@ Decorate text in components with text decoration classes. <a href="#" class="text-decoration-none">This link has its text decoration removed</a> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables + +Default type and font related Sass variables: {{< scss-docs name="font-variables" file="scss/_variables.scss" >}} -### Maps +### Sass maps Font-size utilities are generated from this map, in combination with our utilities API. {{< scss-docs name="font-sizes" file="scss/_variables.scss" >}} -### Utilities API +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +## Utilities API Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md index 5e4fe05b0..ca7d8e35a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md @@ -16,11 +16,11 @@ We call these "low-level" `z-index` utilities because of their default values of {{< /callout >}} {{< example class="bd-example-zindex-levels position-relative" >}} -<div class="z-3 position-absolute p-5 rounded-3"></div> -<div class="z-2 position-absolute p-5 rounded-3"></div> -<div class="z-1 position-absolute p-5 rounded-3"></div> -<div class="z-0 position-absolute p-5 rounded-3"></div> -<div class="z-n1 position-absolute p-5 rounded-3"></div> +<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div> +<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div> +<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div> +<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div> +<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div> {{< /example >}} ## Overlays @@ -42,3 +42,9 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale Customize this Sass map to change the available values and generated utilities. {{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}} + +### Utilities API + +Position 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-zindex" file="scss/_utilities.scss" >}} |