diff options
| author | Gaël Poupard <[email protected]> | 2021-01-06 07:14:54 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-01-06 08:14:54 +0200 |
| commit | acec356c811e9bcfd7999795336000ce6d609d33 (patch) | |
| tree | cd6cdc3f25c7000c48ed6b96c6e9e55d4fb8f4b6 /site/content/docs | |
| parent | d1a62b47c38d2098577894e9b6340514af07754b (diff) | |
| download | bootstrap-acec356c811e9bcfd7999795336000ce6d609d33.tar.xz bootstrap-acec356c811e9bcfd7999795336000ce6d609d33.zip | |
fix(ratio): missing variable prefix (#32501)
This is the only unprefixed custom property, and its name is very common so I think we'd better prefix it too.
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.0/helpers/ratio.md | 6 | ||||
| -rw-r--r-- | site/content/docs/5.0/migration.md | 1 |
2 files changed, 4 insertions, 3 deletions
diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index 62e173ff1..771bc07cb 100644 --- a/site/content/docs/5.0/helpers/ratio.md +++ b/site/content/docs/5.0/helpers/ratio.md @@ -49,10 +49,10 @@ Aspect ratios can be customized with modifier classes. By default the following 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 `--aspect-ratio: 50%` on the `.ratio`. +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="--aspect-ratio: 50%;"> +<div class="ratio" style="--bs-aspect-ratio: 50%;"> <div>2x1</div> </div> {{< /example >}} @@ -62,7 +62,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T ```scss .ratio-4x3 { @include media-breakpoint-up(md) { - --aspect-ratio: 50%; // 2x1 + --bs-aspect-ratio: 50%; // 2x1 } } ``` diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md index 551499e35..895b8c275 100644 --- a/site/content/docs/5.0/migration.md +++ b/site/content/docs/5.0/migration.md @@ -13,6 +13,7 @@ toc: true #### Utilities +- Renamed `--aspect-ratio` to `--bs-aspect-ratio` to be consistent with other custom properties. - Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`. - `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore. - Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757). |