diff options
Diffstat (limited to 'site/content/docs/5.1/components/dropdowns.md')
| -rw-r--r-- | site/content/docs/5.1/components/dropdowns.md | 14 |
1 files changed, 13 insertions, 1 deletions
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 </div> {{< /example >}} -## Sass +## CSS ### Variables +<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small> + +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" >}} |