vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improvements to hover and focus states on the adminbar:

Browse Source 
* 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@26407 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Matt Thomas 2013-11-26 17:18:00 +00:00
parent 42da7f3053
commit ec10ecbebf
2 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/wp-admin/css/color-schemes/_admin.scss
View File

@ -253,9 +253,8 @@ ul#adminmenu > li.current > a.current:after {
#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;
}
@ -267,16 +266,20 @@ ul#adminmenu > li.current > a.current:after {
#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;
}
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before {
@ -307,10 +310,20 @@ ul#adminmenu > li.current > a.current:after {
}
#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;
}
@ -348,6 +361,10 @@ ul#adminmenu > li.current > a.current:after {
color: $menu-text;
}
#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;
}

34
src/wp-includes/css/admin-bar.css
View File

@ -7,7 +7,6 @@
text-transform: none;
letter-spacing: normal;
font: normal 13px/32px "Open Sans", sans-serif;
color: #eee;
border-radius: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
@ -16,12 +15,12 @@
-moz-transition: none;
-o-transition: none;
transition: none;
-webkit-font-smoothing: subpixel-antialiased; /* Prevent Safari from switching to standard antialiasing on hover */
}
#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: #eee;
}
@ -196,16 +195,17 @@
right: 100%;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
color: #fff;
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item {
background: #333;
color: #2ea2cc;
}
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
background: #333;
#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: #2ea2cc;
}
@ -250,11 +250,19 @@
}
#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.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: #2ea2cc;
}
@ -387,10 +395,6 @@
display: block;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
color: #fff;
}
#wpadminbar #wp-admin-bar-user-info .username {
color: #999;
font-size: 11px;