mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Convert dropdowns to CSS variables

Browse Source
This commit is contained in:
Mark Otto
2021-11-28 00:56:37 -10:00
committed by Mark Otto
parent 3e6265ac55
commit d568e029da
3 changed files with 79 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/components/dropdowns.md
+13 -1
View File
@@ -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" >}}