Changeset 50549

Timestamp:

03/18/2021 09:42:12 PM (4 years ago)

Author:

ryelle

Message:

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.

Location:

trunk/src/wp-admin/css

Files:

• admin-menu.css (modified) (11 diffs)
• colors/_admin.scss (modified) (2 diffs)

trunk/src/wp-admin/css/admin-menu.css

@@ -214 +214 @@
     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;
@@ -232 +227 @@
 }
 
+#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 {
@@ -246 +244 @@
     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);
 }
 
@@ -266 +267 @@
 #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,
@@ -446 +445 @@
 }
 
-.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;
 }
@@ -457 +457 @@
 
 /* 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;
@@ -469 +470 @@
 }
 
-.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;
@@ -475 +477 @@
 }
 
-#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;
 }
@@ -710 +713 @@
     }
 
-    .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;
@@ -809 +814 @@
     }
 
-    .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;
     }
@@ -841 +847 @@
     }
 
-    .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;
     }

trunk/src/wp-admin/css/colors/_admin.scss

@@ -287 +287 @@
 #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;
 }
@@ -302 +302 @@
 #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 {