From: Mark Otto Date: Wed, 27 Aug 2025 05:24:47 +0000 (-0700) Subject: Move ratio from helpers to utilties (#41684) X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=1d3d4339ba4e954a44279683fcb1c7761140b060;p=thirdparty%2Fbootstrap.git Move ratio from helpers to utilties (#41684) * Convert .ratio helper to new .ratio utility * Fix up * Fix links for now, even though they'll be deleted --- diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 13f2752c9b..b7777cf468 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -3,7 +3,6 @@ @import "helpers/colored-links"; @import "helpers/focus-ring"; @import "helpers/icon-link"; -@import "helpers/ratio"; @import "helpers/position"; @import "helpers/stacks"; @import "helpers/visually-hidden"; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 696f906ec9..2760ffacac 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -11,6 +11,13 @@ $utilities: map-merge( values: baseline top middle bottom text-bottom text-top ), // scss-docs-end utils-vertical-align + // scss-docs-start utils-aspect-ratio + "aspect-ratio": ( + property: aspect-ratio, + class: ratio, + values: $aspect-ratios + ), + // scss-docs-end utils-aspect-ratio // scss-docs-start utils-float "float": ( responsive: true, diff --git a/scss/_variables.scss b/scss/_variables.scss index 545c872789..ba5744b198 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -588,10 +588,11 @@ $transition-collapse-width: width .35s ease !default; // scss-docs-start aspect-ratios $aspect-ratios: ( - "1x1": 100%, - "4x3": calc(3 / 4 * 100%), - "16x9": calc(9 / 16 * 100%), - "21x9": calc(9 / 21 * 100%) + "auto": auto, + "1x1": #{"1 / 1"}, + "4x3": #{"4 / 3"}, + "16x9": #{"16 / 9"}, + "21x9": #{"21 / 9"} ) !default; // scss-docs-end aspect-ratios diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss deleted file mode 100644 index b6a7654c52..0000000000 --- a/scss/helpers/_ratio.scss +++ /dev/null @@ -1,26 +0,0 @@ -// Credit: Nicolas Gallagher and SUIT CSS. - -.ratio { - position: relative; - width: 100%; - - &::before { - display: block; - padding-top: var(--#{$prefix}aspect-ratio); - content: ""; - } - - > * { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -@each $key, $ratio in $aspect-ratios { - .ratio-#{$key} { - --#{$prefix}aspect-ratio: #{$ratio}; - } -} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index dea26b401a..fb8d3246b6 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -107,7 +107,6 @@ - title: Focus ring - title: Icon link - title: Position - - title: Ratio - title: Stacks - title: Stretched link - title: Text truncation @@ -119,6 +118,7 @@ icon_color: red pages: - title: API + - title: Aspect ratio - title: Background - title: Borders - title: Colors diff --git a/site/src/content/docs/helpers/ratio.mdx b/site/src/content/docs/helpers/ratio.mdx deleted file mode 100644 index 950d31c731..0000000000 --- a/site/src/content/docs/helpers/ratio.mdx +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Ratios -description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent. -toc: true ---- - -## About - -Use the ratio helper to manage the aspect ratios of external content like ` - `} /> - -## Aspect ratios - -Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: - - -
1x1
- -
-
4x3
-
-
-
16x9
-
-
-
21x9
-
`} /> - -## Custom ratios - -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 `--bs-aspect-ratio: 50%` on the `.ratio`. - - -
2x1
- `} /> - -This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint. - -```scss -.ratio-4x3 { - @include media-breakpoint-up(md) { - --bs-aspect-ratio: 50%; // 2x1 - } -} -``` - - -
4x3, then 2x1
- `} /> - - -## Sass maps - -Within `_variables.scss`, you can change the aspect ratios you want to use. Here’s our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use. - - diff --git a/site/src/content/docs/migration.mdx b/site/src/content/docs/migration.mdx index e9ef35f86c..4edf26fb89 100644 --- a/site/src/content/docs/migration.mdx +++ b/site/src/content/docs/migration.mdx @@ -709,11 +709,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co ### Helpers -- Breaking **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/helpers/ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable. +- Breaking **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/utilities/aspect-ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable. - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`. - We’ve dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element. - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair. - - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/helpers/ratio#custom-ratios]]). + - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/utilities/aspect-ratio#custom-ratios]]). - Breaking **"Screen reader" classes are now ["visually hidden" classes]([[docsref:/helpers/visually-hidden]]).** - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss` diff --git a/site/src/content/docs/utilities/aspect-ratio.mdx b/site/src/content/docs/utilities/aspect-ratio.mdx new file mode 100644 index 0000000000..428e729b0a --- /dev/null +++ b/site/src/content/docs/utilities/aspect-ratio.mdx @@ -0,0 +1,72 @@ +--- +title: Aspect ratio +description: Make elements maintain specific aspect ratios. Perfect for handling videos, slideshow embeds, and more based on the width of the parent. +toc: true +--- + +Use the ratio utility to manage the aspect ratios of content like ``} /> + +Swap the `.ratio-*` class for a different aspect ratio. + + +
Auto
+ +
+
1×1
+
+
+
4×3
+
+
+
16×9
+
+
+
21×9
+
`} /> + + +{/* +## Custom ratios + +mdo-do: do we bring these back? + +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 `--bs-aspect-ratio: 50%` on the `.ratio`. + + +
2x1
+ `} /> + +This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint. + +```scss +.ratio-4x3 { + @include media-breakpoint-up(md) { + --bs-aspect-ratio: 50%; // 2x1 + } +} +``` + + +
4x3, then 2x1
+ `} /> +*/} + +## Sass map + +Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use. + + diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index 64ef3549f5..1800d84e55 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -173,29 +173,18 @@ // Ratio helpers .bd-example-ratios { - .ratio { - display: inline-block; - width: 10rem; + [class*="ratio"] { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; color: var(--bs-secondary-color); background-color: var(--bs-tertiary-bg); border: var(--bs-border-width) solid var(--bs-border-color); - - > div { - display: flex; - align-items: center; - justify-content: center; - } + @include border-radius(var(--bs-border-radius)); } } -.bd-example-ratios-breakpoint { - .ratio-4x3 { - width: 16rem; - @include media-breakpoint-up(md) { - --bs-aspect-ratio: 50%; // 2x1 - } - } -} .bd-example-offcanvas { .offcanvas {