From 7cd1a00a059743752bccc75395b6449b3e8451f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 6 Aug 2023 22:48:17 -0700 Subject: [PATCH] Move ratio helper to utility API with aspect-ratio property --- scss/_helpers.scss | 1 - scss/_utilities.scss | 7 ++ scss/_variables.scss | 11 ++- scss/helpers/_ratio.scss | 26 ------ site/assets/scss/_component-examples.scss | 23 ++---- site/content/docs/5.3/helpers/ratio.md | 81 ------------------- .../docs/5.3/utilities/aspect-ratio.md | 49 +++++++++++ site/data/sidebar.yml | 2 +- 8 files changed, 67 insertions(+), 133 deletions(-) delete mode 100644 scss/helpers/_ratio.scss delete mode 100644 site/content/docs/5.3/helpers/ratio.md create mode 100644 site/content/docs/5.3/utilities/aspect-ratio.md 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 7706c0f6a5..a668eef080 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -586,16 +586,15 @@ $transition-collapse: height .35s ease !default; $transition-collapse-width: width .35s ease !default; // scss-docs-end collapse-transition -// stylelint-disable function-disallowed-list // 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, + "4x3": 4 / 3, + "1x1": 1 / 1, + "16x9": 16 / 9, + "21x9": 21 / 9 ) !default; // scss-docs-end aspect-ratios -// stylelint-enable function-disallowed-list // Typography // 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/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 1d8caed666..b0857578fc 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -173,27 +173,14 @@ // Ratio helpers .bd-example-ratios { - .ratio { - display: inline-block; - width: 10rem; + [class*="ratio"] { + display: inline-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; - } - } -} -.bd-example-ratios-breakpoint { - .ratio-4x3 { - width: 16rem; - - @include media-breakpoint-up(md) { - --bs-aspect-ratio: 50%; // 2x1 - } } } diff --git a/site/content/docs/5.3/helpers/ratio.md b/site/content/docs/5.3/helpers/ratio.md deleted file mode 100644 index 04b6eefead..0000000000 --- a/site/content/docs/5.3/helpers/ratio.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -layout: docs -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. -group: helpers -toc: true ---- - -## About - -Use the ratio helper to manage the aspect ratios of external content like ` - -{{< /example >}} - -## Aspect ratios - -Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: - -{{< example class="bd-example-ratios" >}} -
-
1x1
-
-
-
4x3
-
-
-
16x9
-
-
-
21x9
-
-{{< /example >}} - -## 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`. - -{{< example class="bd-example-ratios" >}} -
-
2x1
-
-{{< /example >}} - -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 - } -} -``` - -{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}} -
-
4x3, then 2x1
-
-{{< /example >}} - - -## 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. - -{{< scss-docs name="aspect-ratios" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/utilities/aspect-ratio.md b/site/content/docs/5.3/utilities/aspect-ratio.md new file mode 100644 index 0000000000..888e2eff48 --- /dev/null +++ b/site/content/docs/5.3/utilities/aspect-ratio.md @@ -0,0 +1,49 @@ +--- +layout: docs +title: Aspect ratio +description: Use the `aspect-ratio` property to make an element maintain the aspect ratio of your choosing. Ideal for responsively handling video or slideshow embeds based on the width of the parent. +group: utilities +toc: true +--- + +Use the ratio utility to manage the aspect ratios of content like ` +{{< /example >}} + +## Aspect ratios + +A handful of aspect ratio classes are provided by default, generated via the utility API and the `$aspect-ratios` Sass variable. + +{{< example class="bd-example-ratios d-flex flex-column align-start" >}} +
+
Auto
+
+
+
1x1
+
+
+
4x3
+
+
+
16x9
+
+
+
21x9
+
+{{< /example >}} + +## Sass maps + +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. + +{{< scss-docs name="aspect-ratios" file="scss/_variables.scss" >}} 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