Changeset 26407 for trunk/src/wp-admin/css/color-schemes/_admin.scss

Timestamp:

11/26/2013 05:18:00 PM (13 years ago)

Author:

iammattthomas

Message:

Improvements to hover and focus states on the adminbar:

• Add a clear hover state for top-level links in the adminbar.
• Add :focus styles to the adminbar for keyboard accessibility.
• Ensure that the username link in the profile submenu gets a :hover style.
• Add adminbar hover styles to color schemes.
• Set -webkit-font-smoothing to subpixel-antialiased on the adminbar so that Safari doesn't switch to standard antialiasing on mouseover.

Fixes #26152, props ryelle.

File:

• trunk/src/wp-admin/css/color-schemes/_admin.scss (modified) (4 diffs)

trunk/src/wp-admin/css/color-schemes/_admin.scss

@@ -254 +254 @@
 #wpadminbar .ab-item,
 #wpadminbar a.ab-item,
-#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label,
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label,
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.noticon {
+#wpadminbar > #wp-toolbar span.ab-label,
+#wpadminbar > #wp-toolbar span.noticon {
     color: $menu-text;
 }
@@ -268 +267 @@
 #wpadminbar .ab-top-menu > li:hover > .ab-item,
 #wpadminbar .ab-top-menu > li.hover > .ab-item,
-#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label,
-#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label,
 #wpadminbar .ab-top-menu > li > .ab-item:focus,
 #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
 #wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
 #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
-    color: $menu-highlight-text;
+    color: $menu-submenu-focus-text;
     background: $menu-submenu-background;
+}
+
+#wpadminbar > #wp-toolbar li:hover span.ab-label,
+#wpadminbar > #wp-toolbar li.hover span.ab-label,
+#wpadminbar > #wp-toolbar a:focus span.ab-label {
+    color: $menu-submenu-focus-text;
 }
 
@@ -308 +311 @@
 
 #wpadminbar .quicklinks .menupop ul li a:hover,
+#wpadminbar .quicklinks .menupop ul li a:focus,
+#wpadminbar .quicklinks .menupop ul li a:hover strong,
+#wpadminbar .quicklinks .menupop ul li a:focus strong,
 #wpadminbar .quicklinks .menupop.hover ul li a:hover,
-#wpadminbar .quicklinks .menupop .ab-sub-secondary > li:hover > a,
-#wpadminbar .quicklinks .menupop .ab-sub-secondary > li.hover > a,
-#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
+#wpadminbar .quicklinks .menupop.hover ul li a:focus,
+#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
+#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
+#wpadminbar li:hover .ab-icon:before,
+#wpadminbar li:hover .ab-item:before,
+#wpadminbar li a:focus .ab-icon:before,
+#wpadminbar li .ab-item:focus:before,
+#wpadminbar li.hover .ab-icon:before,
+#wpadminbar li.hover .ab-item:before,
+#wpadminbar li:hover #adminbarsearch:before {
     color: $menu-submenu-focus-text;
 }
@@ -349 +362 @@
 }
 
+#wpadminbar #wp-admin-bar-user-info a:hover .display-name {
+    color: $menu-submenu-focus-text;
+}
+
 #wpadminbar #wp-admin-bar-user-info .username {
     color: $menu-submenu-text;