diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx index e25604462b..36c5c6c39b 100644 --- a/site/src/content/docs/components/alerts.mdx +++ b/site/src/content/docs/components/alerts.mdx @@ -140,7 +140,7 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C - +{/**/} ### Sass loops diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 3cf99ae197..0c01016593 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -214,11 +214,11 @@ Here’s an example of building a custom `.btn-*` modifier class as we do for th There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin. - +{/* - +*/} ### Sass loops diff --git a/site/src/content/docs/components/list-group.mdx b/site/src/content/docs/components/list-group.mdx index 59827ddd41..403aca5daf 100644 --- a/site/src/content/docs/components/list-group.mdx +++ b/site/src/content/docs/components/list-group.mdx @@ -271,7 +271,7 @@ As part of Bootstrap’s evolving CSS variables approach, list groups now use lo - +{/**/} ### Sass loops diff --git a/site/src/content/docs/components/pagination.mdx b/site/src/content/docs/components/pagination.mdx index 063c14eef7..de185fde7b 100644 --- a/site/src/content/docs/components/pagination.mdx +++ b/site/src/content/docs/components/pagination.mdx @@ -168,4 +168,4 @@ As part of Bootstrap’s evolving CSS variables approach, pagination now uses lo ### Sass mixins - +{/**/} diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 642638ffbe..08cef2774b 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/site/src/content/docs/content/reboot.mdx @@ -28,7 +28,7 @@ For example, consider these `:root` CSS variables for common `` styles: In practice, those variables are then applied in Reboot like so: - + Which allows you to make real-time customizations however you like: diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx index 3c47b930a6..7fe22f011b 100644 --- a/site/src/content/docs/content/tables.mdx +++ b/site/src/content/docs/content/tables.mdx @@ -227,7 +227,7 @@ For the accented tables ([striped rows](#striped-rows), [striped columns](#strip Behind the scenes it looks like this: - +{/**/} ## Table borders diff --git a/site/src/content/docs/customize/color.mdx b/site/src/content/docs/customize/color.mdx index b24f14d6b0..95a2cee0a4 100644 --- a/site/src/content/docs/customize/color.mdx +++ b/site/src/content/docs/customize/color.mdx @@ -450,7 +450,7 @@ Bootstrap’s source Sass files include three maps to help you quickly and easil Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map: - +{/**/} Add, remove, or modify values within the map to update how they’re used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. 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/background.mdx b/site/src/content/docs/utilities/background.mdx index 365d01eb3a..d356cc8a3b 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/site/src/content/docs/utilities/background.mdx @@ -82,7 +82,7 @@ In addition to the following Sass functionality, consider reading about our incl Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. - +{/**/} @@ -90,7 +90,7 @@ Most `background-color` utilities are generated by our theme colors, reassigned Grayscale colors are also available, but only a subset are used to generate any utilities. - +{/**/} Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: @@ -106,7 +106,7 @@ Theme colors are then put into a Sass map so we can loop over them to generate o Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** - +{/**/} RGB colors are generated from a separate Sass map: diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index 41c08f6ae0..31a18efb4f 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -84,13 +84,13 @@ In addition to the following Sass functionality, consider reading about our incl Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. - +{/**/} Grayscale colors are also available, but only a subset are used to generate any utilities. - +{/**/} @@ -108,7 +108,7 @@ Theme colors are then put into a Sass map so we can loop over them to generate o Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** - +{/**/} RGB colors are generated from a separate Sass map: