kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
scss/helpers/_ratio.scss
View file

@ -6,7 +6,7 @@
&::before { &::before {
display: block; display: block;
padding-top: var(--aspect-ratio); padding-top: var(--#{$variable-prefix}aspect-ratio);
content: ""; content: "";
} }
@ -21,6 +21,6 @@
@each $key, $ratio in $aspect-ratios { @each $key, $ratio in $aspect-ratios {
.ratio-#{$key} { .ratio-#{$key} {
--aspect-ratio: #{$ratio}; --#{$variable-prefix}aspect-ratio: #{$ratio};
} }
} }

2
site/assets/scss/_component-examples.scss
View file

@ -187,7 +187,7 @@
width: 16rem; width: 16rem;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
--aspect-ratio: 50%; // 2x1 --bs-aspect-ratio: 50%; // 2x1
} }
} }
} }

6
site/content/docs/5.0/helpers/ratio.md
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. 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" >}} {{< example class="bd-example-ratios" >}}
<div class="ratio" style="--aspect-ratio: 50%;"> <div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div> <div>2x1</div>
</div> </div>
{{< /example >}} {{< /example >}}
@ -62,7 +62,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
```scss ```scss
.ratio-4x3 { .ratio-4x3 {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
--aspect-ratio: 50%; // 2x1 --bs-aspect-ratio: 50%; // 2x1
} }
} }
``` ```

1
site/content/docs/5.0/migration.md
View file

@ -13,6 +13,7 @@ toc: true
#### Utilities #### 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`. - 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. - `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). - 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).