New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a glass effect to dropdowns #39897
Comments
I would probably do something like this ...
this will work with most of the main bg classes
and here with the dropdown
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. |
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. |
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. |
Prerequisites
Proposal
Achieving a glass effect is very simple nowadays: Apply a blur effect and an optional saturate effect on a block element's backdrop and that has a semi-transparent background.
The "hard" part for us consumers of unmodified Bootstrap or already-modified Bootstrap (for instance, my company has a customized version that I'm not supposed to touch) is setting the partial opacity in the background color. My limited knowledge tells me that this should be defined early in the Bootstrap-building process where the RGB or HSL values are available.
My proposal would be for Bootstrap to provide at least the
dropdown-menu-glass
CSS class that switches to the semi-transparent background color (whichever that is, including the ones set usingbg-<variant>
) and applies thebackdrop-filter
CSS attribute. The blur radius and saturation percentage would come fromdata-bs-
attributes, or perhaps overridable CSS variables that us consumers and component library creators can define in, sayDIV
elements with itsdisplay
CSS attribute set tocontents
.Using data attributes:
Using CSS variables:
NOTE: The
d-contents
helper class doesn't exist in Bootstrap, so it would have to be defined.I am no expert in Bootstrap, so unsure if interjecting the
DIV.d-contents
HTML element disrupts the dropdown CSS mechanisms.Motivation and context
While this might be possible for Bootstrap experts to achieve, us mainstream developers would have a very hard time achieving this glass effect in a way that is fully compliant with all other Bootstrap features like the
text-bg-*
andbg-*
classes, or any other background color-related features in this comprehensive CSS library.The text was updated successfully, but these errors were encountered: