mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-03-19 11:29:48 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Administration: Make focus states consistent in admin menu when collapsed.

Browse Source 
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
This commit is contained in:
Kelly Choyce-Dwan 2021-03-18 21:42:12 +00:00
parent 2111085dff
commit e2bb839d08
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/wp-admin/css/admin-menu.css
View File

@ -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;
}

5
src/wp-admin/css/colors/_admin.scss
View File

@ -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;