mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00
Code Issues Releases Wiki 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

14
site/content/docs/5.1/components/dropdowns.md
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" >}}

8
site/content/docs/5.1/examples/dropdowns/index.html
View File

@@ -80,7 +80,7 @@ body_class: ""
</symbol>
</svg>
<div class="d-flex gap-5 justify-content-center" id="dropdownMacos">
<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownMacos">
<ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
@@ -100,7 +100,7 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="d-flex gap-5 justify-content-center" id="dropdownFilter">
<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownFilter">
<div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
<form class="p-2 mb-2 bg-light border-bottom">
<input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
@@ -152,7 +152,7 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="d-flex gap-5 justify-content-center" id="dropdownIcons">
<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownIcons">
<ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
<li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#">
@@ -316,7 +316,7 @@ body_class: ""
<div class="b-example-divider"></div>
<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg" style="width: 600px" id="dropdownMega">
<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg dropdown" style="width: 600px" id="dropdownMega">
<nav class="d-grid gap-2 col-8">
<a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
<svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>