diff --git a/scss/_helpers.scss b/scss/_helpers.scss deleted file mode 100644 index 13f2752c9b..0000000000 --- a/scss/_helpers.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "helpers/clearfix"; -@import "helpers/color-bg"; -@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"; -@import "helpers/stretched-link"; -@import "helpers/text-truncation"; -@import "helpers/vr"; diff --git a/scss/_utilities.scss b/scss/_utilities.scss index dcaa9b5836..f8a09b2959 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -18,6 +18,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 3e16bf429c..1193fd4cdd 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -296,16 +296,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 ba13752d7a..0000000000 --- a/scss/helpers/_ratio.scss +++ /dev/null @@ -1,30 +0,0 @@ -@use "../config" as *; -@use "../variables" as *; -// mdo-do: remve for utilities - -// 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/scss/helpers/index.scss b/scss/helpers/index.scss new file mode 100644 index 0000000000..3df08ebe8d --- /dev/null +++ b/scss/helpers/index.scss @@ -0,0 +1,11 @@ +@import "clearfix"; +@import "color-bg"; +@import "colored-links"; +@import "focus-ring"; +@import "icon-link"; +@import "position"; +@import "stacks"; +@import "visually-hidden"; +@import "stretched-link"; +@import "text-truncation"; +@import "vr"; 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 0772c5c4f8..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/utilities/aspect-ratio.mdx b/site/src/content/docs/utilities/aspect-ratio.mdx new file mode 100644 index 0000000000..5a490e86fa --- /dev/null +++ b/site/src/content/docs/utilities/aspect-ratio.mdx @@ -0,0 +1,47 @@ +--- +title: Aspect Ratio +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 +--- + +Use the ratio utility to manage the aspect ratios of content like ``} /> + +## Aspect ratios + +Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: + + +
Auto
+ +
+
1x1
+
+
+
4x3
+
+
+
16x9
+
+
+
21x9
+
`} /> + +## Custom ratios + +mdo-do: do we bring these back? + +## 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 3dffd00fe7..0fd3cbf3de 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -183,29 +183,17 @@ // 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; - } } } -.bd-example-ratios-breakpoint { - .ratio-4x3 { - width: 16rem; - @include media-breakpoint-up(md) { - --bs-aspect-ratio: 50%; // 2x1 - } - } -} .bd-example-offcanvas { .offcanvas {