mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

fix(ratio): missing variable prefix (#32501)

Browse Source 
This is the only unprefixed custom property, and its name is very common so I think we'd better prefix it too.
This commit is contained in:
Gaël Poupard
2021-01-06 07:14:54 +01:00
committed by GitHub
parent d1a62b47c3
commit acec356c81
4 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/helpers/ratio.md
+3 -3
View File
@@ -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
}
}
```