Refactor Claro's menus-and-lists stylesheet

bspeare → closed merge request !3381

Gauravvv → made their first commit to this issue’s fork.

I have improved nesting and added margin-inline-start & margin-inline-end, so we don't need

[dir="rtl"] .item-list ul {
  margin: 0.25em 1.5em 0.25em 0;
}

anymore.

Please review

Seems more nesting could be done I think.

Also does [dir="rtl"] need to be replaced?

Issue summary mentions needing before/after screenshots to show nothing broke.

Code wise everything looks fine.

After patch:

Added after patch screenshot, please review

Will let committer decide but seems difficult to read. But not sure what could be done.

Did a bit of work on this.

The first thing I noticed was image referenced in list-style-image: url(../../images/menu-collapsed.png); did not exist.

This image should get called when there's a menu. Note that the menu just shows up as an unordered list, but the images (which were small triangles) didn't show. So, I removed them from being called.

I also added spacing between the code blocks and converted the REM unit to PX (as it'll be auto converted by PostCSS.

Tested on modules page and didn't see any issues.

Committed bf26629 and pushed to 10.1.x. Thanks!

Thank you for your assistance on this issue VladimirAus

Starting March 2023, simple rerolls, rebases, or merges will no longer receive issue credit. Only rerolls that address a merge conflict will be credited, and the merge conflict that was resolved must be documented in the text of an issue comment.

To receive credit for contributing to this issue, assist with other outstanding tasks or unaddressed feedback.

See the issue credit guidelines → for more information.

Automatically closed - issue fixed for 2 weeks with no activity.