<DeprecatedIn version="5.3.0" />
-<ScssDocs name="alert-variant-mixin" file="scss/mixins/_alert.scss" removeIndentation={false} />
+{/*<ScssDocs name="alert-variant-mixin" file="scss/mixins/_alert.scss" removeIndentation={false} />*/}
### Sass loops
There are three mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin.
-<ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" />
+{/*<ScssDocs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" />
<ScssDocs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" />
-<ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" />
+<ScssDocs name="btn-size-mixin" file="scss/mixins/_buttons.scss" />*/}
### Sass loops
<DeprecatedIn version="5.3.0" />
-<ScssDocs name="list-group-mixin" file="scss/mixins/_list-group.scss" />
+{/*<ScssDocs name="list-group-mixin" file="scss/mixins/_list-group.scss" />*/}
### Sass loops
### Sass mixins
-<ScssDocs name="pagination-mixin" file="scss/mixins/_pagination.scss" />
+{/*<ScssDocs name="pagination-mixin" file="scss/mixins/_pagination.scss" />*/}
In practice, those variables are then applied in Reboot like so:
-<ScssDocs name="reboot-body-rules" file="scss/_reboot.scss" />
+<ScssDocs name="reboot-body-rules" file="scss/content/_reboot.scss" />
Which allows you to make real-time customizations however you like:
Behind the scenes it looks like this:
-<ScssDocs name="table-variant" file="scss/mixins/_table-variants.scss" />
+{/*<ScssDocs name="table-variant" file="scss/mixins/_table-variants.scss" />*/}
## Table borders
Within `scss/_variables.scss`, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the `$colors` Sass map:
-<ScssDocs name="colors-map" file="scss/_variables.scss" />
+{/*<ScssDocs name="colors-map" file="scss/_variables.scss" />*/}
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.
### Helpers
-- <span class="badge text-bg-danger">Breaking</span> **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.
+- <span class="badge text-bg-danger">Breaking</span> **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]]).
- <span class="badge text-bg-danger">Breaking</span> **"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`
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-<ScssDocs name="color-variables" file="scss/_variables.scss" />
+{/*<ScssDocs name="color-variables" file="scss/_variables.scss" />*/}
<ScssDocs name="theme-color-variables" file="scss/_variables.scss" />
Grayscale colors are also available, but only a subset are used to generate any utilities.
-<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />
+{/*<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />*/}
Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
-<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />
+{/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
RGB colors are generated from a separate Sass map:
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
-<ScssDocs name="color-variables" file="scss/_variables.scss" />
+{/*<ScssDocs name="color-variables" file="scss/_variables.scss" />*/}
<ScssDocs name="theme-color-variables" file="scss/_variables.scss" />
Grayscale colors are also available, but only a subset are used to generate any utilities.
-<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />
+{/*<ScssDocs name="gray-color-variables" file="scss/_variables.scss" />*/}
<ScssDocs name="theme-text-map" file="scss/_maps.scss" />
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
-<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />
+{/*<ScssDocs name="gray-colors-map" file="scss/_variables.scss" />*/}
RGB colors are generated from a separate Sass map:
projects / thirdparty / bootstrap.git / commitdiff
