diff options
author | Mark Otto <markdotto@gmail.com> | 2021-11-28 13:56:37 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-02-15 06:11:35 +0300 |
commit | d568e029dac04b50305000df4c1bf33cac7db64a (patch) | |
tree | f17de2032faece7e2ffd38600f2d08433e64c44c /site/content/docs/5.1/components | |
parent | 3e6265ac55cd8548a83f2470a19ff1dcf28d3b0a (diff) |
Convert dropdowns to CSS variables
Diffstat (limited to 'site/content/docs/5.1/components')
-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" >}} |