Adjusted dropdown menus to have a larger clickable area #2223
Let me know what you think of this approach @markeharding.
It was majorly awkward because there are multiple places that these classes are used.
Testing
Find dropdowns and check they're not broken - note some dropdowns like the discovery are horizontal.
added scoped labels
![Mark Harding](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill-opacity="0"/></svg>)
Last updated by Ben Hayward92 96 border: 1px solid themed($m-grey-50); 93 97 } 94 98 99 .m-dropdown--list--item { - Owner
why is padding not applied to bem styled
.m-dropdownList__item? - Developer
Styling for the older HTML that uses the non-BEM named classes.
- Owner
Why are we not applying to the new class and only the old one? They should work exactly the same
changed this line in version 2 of the diff
- Developer
Okay, well, if we're going lower, the reason it's not consistent across the site is because the li dropdown item can contain one or more elements. This doesn't work for the discovery search wherein this causes issues with the horizontal, nested lists.
Now, all li elements, have a nested div, which in turn contains the old li content. E.g., the li should contain a wrapper for the content.
In addition, some other adjustments were required to make things fit together.
- Developer
The idea was more to override the padding in the nested horizontal lists used for discovery, as they're a pretty unique use-case.
added scoped label and automatically removed label
