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 | |
parent | 3e6265ac55cd8548a83f2470a19ff1dcf28d3b0a (diff) |
Convert dropdowns to CSS variables
Diffstat (limited to 'site/content/docs')
-rw-r--r-- | site/content/docs/5.1/components/dropdowns.md | 14 | ||||
-rw-r--r-- | site/content/docs/5.1/examples/dropdowns/index.html | 8 |
2 files changed, 17 insertions, 5 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" >}} 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: "" </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> |