Changeset 49961

Timestamp:

01/14/2021 09:58:25 PM (4 years ago)

Author:

ryelle

Message:

Administration: Update hover and focus states in admin menu.

This adds a border along the side of admin menu links when hovering or focusing on them, as color should not be the only indicator of link state.

Props accessiblejoe florianziegler afercia rianrietveld michael-arestad ryan hedgefield audrasjb ibdz.
Fixes #28599.

File:

• trunk/src/wp-admin/css/admin-menu.css (modified) (4 diffs)

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

@@ -195 +195 @@
 }
 
+#adminmenu a:hover,
+#adminmenu a:focus,
+.folded #adminmenu .wp-submenu-head:hover {
+    box-shadow: inset 4px 0 0 0 currentColor;
+    transition: box-shadow .1s linear;
+}
+
 #adminmenu li.menu-top {
     border: none;
@@ -290 +297 @@
     min-width: 160px;
     width: auto;
+    border-left: 5px solid transparent;
 }
 
@@ -496 +504 @@
     font-weight: 400;
     font-size: 14px;
-    padding: 8px 4px 8px 11px;
-    margin: -7px 0px 4px;
+    padding: 5px 4px 5px 11px;
+    margin: -7px 0px 4px -5px;
+    border-width: 3px 0 3px 5px;
+    border-style: solid;
+    border-color: transparent;
 }
 
@@ -844 +855 @@
     }
 
+    #adminmenu .wp-not-current-submenu .wp-submenu,
+    .folded #adminmenu .wp-has-current-submenu .wp-submenu {
+        border-left: none;
+    }
+
     /* Remove submenu headers and adjust sub meu*/
     #adminmenu .wp-submenu .wp-submenu-head {