From d568e029dac04b50305000df4c1bf33cac7db64a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 Nov 2021 00:56:37 -1000 Subject: Convert dropdowns to CSS variables --- site/content/docs/5.1/components/dropdowns.md | 14 +++++++++++++- site/content/docs/5.1/examples/dropdowns/index.html | 8 ++++---- 2 files changed, 17 insertions(+), 5 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index f5dcff4ccd..c98dd778e0 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -953,10 +953,22 @@ By default, the dropdown menu is closed when clicking inside or outside the drop {{< /example >}} -## Sass +## CSS ### Variables +Added in v5.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. + +{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}} + +Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors. + +{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}} + +### Sass variables + Variables for all dropdowns: {{< scss-docs name="dropdown-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html index 861e816670..518adb568d 100644 --- a/site/content/docs/5.1/examples/dropdowns/index.html +++ b/site/content/docs/5.1/examples/dropdowns/index.html @@ -80,7 +80,7 @@ body_class: "" -
+