Add a glass effect to dropdowns about bootstrap

[morrissey-ingenious]

I would probably do something like this ...

:root {
  --bs-bg-opacity: 0.8;

  --bs-bg-glass-blur: 1.5em;
  --bs-bg-glass-saturation: 170%;
}

.bg-glass {
   backdrop-filter: blur(var(--bs-bg-glass-blur, 1.5em)) saturate(var(--bs-bg-glass-saturation, 170%));
}

.dropdown-menu {
  --bs-dropdown-bg: rgba(var(--bs-body-bg), var(--bs-bg-opacity, 1));
}

this will work with most of the main bg classes

<div class="bg-primary bg-glass"></div>

and here with the dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu bg-glass">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

i don't think adding them in as data variables is needed you just attach a style to the element that way you don't need any js.

[webJose]

Thanks, @morrissey-ingenious for dropping by and your suggestion. Indeed, the information piece I missed was the fact that the color opacity can be worked out via the CSS variable. This makes the implementation easier for sure. My sincere gratitude.

I'll leave the decision of closing this to you: Maybe glass is a cool thing Bootstrap would like to have? If not, close the request.

[julien-deramond]

IMHO, this would be too specific to add to Bootstrap as it could be done from "outside". I would add that glass effect can probably also be tricky on the a11y side.

Assigning this feature request to @mdo for a design point of view and final word.