From e2bb839d089715b1c3c677001f18888dbfa82f5b Mon Sep 17 00:00:00 2001 From: Kelly Choyce-Dwan Date: Thu, 18 Mar 2021 21:42:12 +0000 Subject: [PATCH] Administration: Make focus states consistent in admin menu when collapsed. When collapsed or on a small screen, these styles would override the color schemes, causing a dark background to appear regardless of the color scheme's settings. This change also uses `focus-within` to show or hide the menu item's arrow, consistent with how the arrow behaves on hover. Props afercia, Bueltge. Fixes #32579. git-svn-id: https://develop.svn.wordpress.org/trunk@50549 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/admin-menu.css | 41 +++++++++++++++++------------ src/wp-admin/css/colors/_admin.scss | 5 ++-- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 8606ede18e..e299fc3b46 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -213,11 +213,6 @@ left: 160px; overflow: visible; word-wrap: break-word; -} - -#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: #2c3338; @@ -231,9 +226,12 @@ top: -1px; } +#adminmenu a.wp-has-current-submenu:focus + .wp-submenu { + top: 0; +} + #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; @@ -245,7 +243,10 @@ border: 0 none; margin-top: 0; box-shadow: none; - background-color: #2c3338; +} + +.folded #adminmenu .wp-has-current-submenu .wp-submenu { + box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); } /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */ @@ -265,8 +266,6 @@ #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, -.folded #adminmenu li.wp-has-current-submenu, -.folded #adminmenu li.current.menu-top, #adminmenu .wp-menu-arrow, #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow div { @@ -445,7 +444,8 @@ ul#adminmenu > li.current > a.current:after { margin-top: -8px; } -.folded ul#adminmenu li:hover a.wp-has-current-submenu:after { +.folded ul#adminmenu li:hover a.wp-has-current-submenu:after, +.folded ul#adminmenu li.wp-has-current-submenu:focus-within a.wp-has-current-submenu:after { display: none; } @@ -456,7 +456,8 @@ ul#adminmenu > li.current > a.current:after { } /* flyout menu arrow */ -#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { +#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { right: 0; border: 8px solid transparent; content: " "; @@ -468,13 +469,15 @@ ul#adminmenu > li.current > a.current:after { z-index: 10000; } -.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, +.folded ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-width: 4px; margin-top: -4px; top: 18px; } -#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-right-color: #2c3338; } @@ -709,11 +712,13 @@ li#wp-admin-bar-menu-toggle { margin-bottom: 0; } - .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after { + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { display: none; } - .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-width: 4px; margin-top: -4px; top: 16px; @@ -808,7 +813,8 @@ li#wp-admin-bar-menu-toggle { margin-top: -8px; } - .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after, + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { display: none; } @@ -840,7 +846,8 @@ li#wp-admin-bar-menu-toggle { display: block; } - .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after { + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu li:focus-within a.wp-has-current-submenu:after { display: block; } diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 37f1fc1666..449b0a8e27 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -286,12 +286,12 @@ textarea:focus { #adminmenu .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu, #adminmenu .wp-has-current-submenu.opensub .wp-submenu, -.folded #adminmenu .wp-has-current-submenu .wp-submenu, #adminmenu a.wp-has-current-submenu:focus + .wp-submenu { background: $menu-submenu-background; } -#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after { +#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after, +#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after { border-right-color: $menu-submenu-background; } @@ -301,7 +301,6 @@ textarea:focus { #adminmenu .wp-submenu a, #adminmenu .wp-has-current-submenu .wp-submenu a, -.folded #adminmenu .wp-has-current-submenu .wp-submenu a, #adminmenu a.wp-has-current-submenu:focus + .wp-submenu a, #adminmenu .wp-has-current-submenu.opensub .wp-submenu a { color: $menu-submenu-text;