#32579 closed defect (bug) (fixed)
Admin menu: color schemes fly-out menu background when focused
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 5.8 | Priority: | normal |
Severity: | normal | Version: | 4.2 |
Component: | Administration | Keywords: | has-patch has-testing-info |
Focuses: | ui, css | Cc: |
Description
Small visual glitch about Sass color schemes, please refer to the screenshot below.
To reproduce:
- set a color scheme (here it's "Ocean" which doesn't use dark backgrounds and makes this clear)
- collapse the admin menu
- tab with your keyboard and focus the current top menu item
On the left when focused, on the right when hovered. Also, notice a (minor) inconsistency about the displaying of the small arrow.
Attachments (6)
Change History (17)
#2
@
10 years ago
- Keywords has-patch added; needs-patch removed
The patch works fine, tested in this scenario with mouse and keyboard, focus and hover.
But is it also a difference on the box-shadow. The box-shadow is missed on focus, hover for a active item of the menu. This difference was clear for me. But I don't know what is the goal, with or without box-shadow. Currently is not always the same. Maybe a topic for new ticket? This topic here was solved, but leave a open new topic.
The source is in wp-admin/css/admin-menu.css
.
#adminmenu .wp-submenu, .folded #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu { padding: 7px 0 8px; z-index: 9999; background-color: #32373c; -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2); box-shadow: 0 3px 5px rgba(0,0,0,0.2); }
and
#adminmenu .wp-has-current-submenu .wp-submenu, .no-js li.wp-has-current-submenu:hover .wp-submenu, #adminmenu a.wp-has-current-submenu:focus + .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, #adminmenu .wp-has-current-submenu.opensub .wp-submenu { position: relative; z-index: 3; top: auto; left: auto; right: auto; bottom: auto; border: 0 none; margin-top: 0; -webkit-box-shadow: none; box-shadow: none; background-color: #32373c; }
You see this shadow topic also on the screenshots from the reporter.
#3
@
9 years ago
Refreshed patch. Would love the admin menu to be simpler but there's nothing simple here :) It's extremely difficult to keep track of all the possible menu states but I've tried to do my best. What I'm trying to do in this patch:
- separate and simplify the rules for the
box-shadow
so it's applied and reset just in two places - remove the small arrow on the current item also when the menu is in
auto-fold
state
Would definitely need some testing. @ryelle @Bueltge would greatly appreciate your help when you get a chance :)
To recap there are at least 4 states to test:
- expanded (default on large screens)
- folded (user intentionally collapsed the menu)
- auto-fold with a viewport less than 782px
- auto-fold with a viewport greater than 782px
#5
@
4 years ago
- Focuses css added
dropdown-focus-before.png shows that this is still an issue on trunk. I've taken a stab at fixing it in dropdown-focus.diff by deleting a bunch of folded-specific CSS, which apparently wasn't necessary. I also tweaked the box-shadow rules so it applies to the current menu, it works on hover and when child-items are focused, but I just noticed it's not right in my screenshots. It's a step in the right direction though.
dropdown-focus-after.png shows the after, the menu backgrounds are all correct and the light-colored arrow is gone.
#7
@
4 years ago
- Owner set to ryelle
- Resolution set to fixed
- Status changed from new to closed
In 50549:
32579.diff adds the :focus'd submenu selector to the color schemes, so they get the correct colors per-scheme. It also removes the small arrow when the item is focused or the menu is open.