From 7c966f584889c6dfb0f1a70dd1757b2d237a68a0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Mar 2022 21:27:58 -0800 Subject: Convert added in badges to shortcode (#36007) --- site/content/docs/5.1/components/alerts.md | 2 +- site/content/docs/5.1/components/badge.md | 2 +- site/content/docs/5.1/components/breadcrumb.md | 2 +- site/content/docs/5.1/components/buttons.md | 2 +- site/content/docs/5.1/components/dropdowns.md | 2 +- site/content/docs/5.1/components/navbar.md | 2 +- site/content/docs/5.1/components/pagination.md | 2 +- site/content/docs/5.1/components/popovers.md | 4 ++-- site/content/docs/5.1/components/tooltips.md | 4 ++-- site/content/docs/5.1/content/reboot.md | 2 +- site/content/docs/5.1/customize/color.md | 2 +- site/content/docs/5.1/utilities/background.md | 2 +- site/content/docs/5.1/utilities/borders.md | 2 +- site/content/docs/5.1/utilities/colors.md | 2 +- site/layouts/shortcodes/added-in.html | 5 +++++ 15 files changed, 21 insertions(+), 16 deletions(-) create mode 100644 site/layouts/shortcodes/added-in.html diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md index 54e2113483..68a18be7ad 100644 --- a/site/content/docs/5.1/components/alerts.md +++ b/site/content/docs/5.1/components/alerts.md @@ -160,7 +160,7 @@ When an alert is dismissed, the element is completely removed from the page stru ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md index 2e604c82a9..e00b21a12b 100644 --- a/site/content/docs/5.1/components/badge.md +++ b/site/content/docs/5.1/components/badge.md @@ -90,7 +90,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/breadcrumb.md b/site/content/docs/5.1/components/breadcrumb.md index dabf6b58b4..05df37a0aa 100644 --- a/site/content/docs/5.1/components/breadcrumb.md +++ b/site/content/docs/5.1/components/breadcrumb.md @@ -100,7 +100,7 @@ For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb p ### Variables -Added in v5.3.0 +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, breadcrumbs now use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md index 59a013a734..7f400df1a1 100644 --- a/site/content/docs/5.1/components/buttons.md +++ b/site/content/docs/5.1/components/buttons.md @@ -242,7 +242,7 @@ buttons.forEach(function (button) { ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index e5a396d56c..0bd6a4fdfe 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -991,7 +991,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index f54b8ff8cf..7b36f245c1 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -736,7 +736,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md index eebc3ce6f1..8e05a18614 100644 --- a/site/content/docs/5.1/components/pagination.md +++ b/site/content/docs/5.1/components/pagination.md @@ -160,7 +160,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, pagination now uses local CSS variables on `.pagination` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md index 44c053b671..93ccc6f783 100644 --- a/site/content/docs/5.1/components/popovers.md +++ b/site/content/docs/5.1/components/popovers.md @@ -83,7 +83,7 @@ var popover = new bootstrap.Popover(document.querySelector('.example-popover'), ### Custom popovers -Added in v5.2.0 +{{< added-in "5.2.0" >}} You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables. @@ -135,7 +135,7 @@ For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap’s evolving CSS variables approach, popovers now use local CSS variables on `.popover` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md index 8ec95c137f..ee2808f41b 100644 --- a/site/content/docs/5.1/components/tooltips.md +++ b/site/content/docs/5.1/components/tooltips.md @@ -54,7 +54,7 @@ Hover over the links below to see tooltips: ### Custom tooltips -Added in v5.2.0 +{{< added-in "5.2.0" >}} You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable. @@ -125,7 +125,7 @@ With an SVG: ### Variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on `.tooltip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index 9403efc535..04c4cdebf7 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -20,7 +20,7 @@ Here are our guidelines and reasons for choosing what to override in Reboot: ## CSS variables -Added in v5.2.0 +{{< added-in "5.2.0" >}} With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.** diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md index 1b9647645b..23a7f71042 100644 --- a/site/content/docs/5.1/customize/color.md +++ b/site/content/docs/5.1/customize/color.md @@ -109,7 +109,7 @@ Here's how you can use these in your Sass: ## Generating utilities -Added in v5.1.0 +{{< added-in "5.1.0" >}} Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0. diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.1/utilities/background.md index 728254f1cf..fe0bf573b8 100644 --- a/site/content/docs/5.1/utilities/background.md +++ b/site/content/docs/5.1/utilities/background.md @@ -37,7 +37,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs- ## Opacity -Added in v5.1.0 +{{< added-in "5.1.0" >}} As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes. diff --git a/site/content/docs/5.1/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md index 49df82df89..6939dcdf8a 100644 --- a/site/content/docs/5.1/utilities/borders.md +++ b/site/content/docs/5.1/utilities/borders.md @@ -45,7 +45,7 @@ Change the border color using utilities built on our theme colors. ## Opacity -Added in v5.2.0 +{{< added-in "5.2.0" >}} Bootstrap `border-{color}` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes. diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md index 329c371d11..eb917f91c2 100644 --- a/site/content/docs/5.1/utilities/colors.md +++ b/site/content/docs/5.1/utilities/colors.md @@ -33,7 +33,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t ## Opacity -Added in v5.1.0 +{{< added-in "5.1.0" >}} As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes. diff --git a/site/layouts/shortcodes/added-in.html b/site/layouts/shortcodes/added-in.html new file mode 100644 index 0000000000..ca461c2e68 --- /dev/null +++ b/site/layouts/shortcodes/added-in.html @@ -0,0 +1,5 @@ +{{- /* Outputs badge to identify the first version something was added */ -}} + +{{- $version := .Get 0 -}} + +Added in v{{ $version }} -- cgit v1.2.3