Created by: tordans
The Dropdown Element should have the ability to receive colored backgrounds similar to the Table contextual classes or card background variants.
Example Code
See docs/components/dropdowns.md
Changes
- There are three special cases I see for the background colors, that make the whole change more complex that I like.
- Edge case 1: colored item as first/last child; this the easiest and cleanest to solve.
- Edge case 2: a divider, then a colored item; this is annoying, since there is now "previous sibling" in css yet, so I worked around it with negative margins and border. To keep the margins in sync they are extracted in a variable.
- Edge case 3: a colored item, then a divider; the is also annoying, since the divider is not build in a way that would make this color change easy, so I worked around it with a before element. A cleaner way might be to find a way to refactor the divider to behave like three stacked color bars on top of each other; maybe by just switching the spacing from margins to borders?
- To solve edge case 3 I change the
.dropdown-divider
-overflow and position behavior. Also I removed/re-integratedmixins/nav-divider
since it was only used by the divider anyways. - The colors for the dropdown modifier are added to the variables and re-use the form-state-colors as a default.
- The dropdown documentation is extend i a very basic way.
Questions
- Does the whole thing compile? I don't have a full setup here. // See comments below.
- Should it also work for the whole
.dropdown-menu
like it does for table>tr as well as table>td? - Should the docs for Buttons dropdown and Dropdown interlink more? Right now they duplicate information but there are no links for the information that is missing in the other place.
- Should there be an .inverted case?
- For the docs: What is the proper pattern to name the headlines that handle color changes. For tables, cards, … they all use different headlines like "Contextual variations", "Examples", "Contextual classes" and so on. Maybe I should extract this in a separate issue?
- How to handle the fact that https://github.com/twbs/bootstrap/pull/13797 introduces colored :hover states that will cause new edge cases for this idea. Worst case is, that the colors are very similar so the :hover effect is nullified.