sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Circular focus styling for expand/collapse arrows. 

Affects postboxes, widgets, and nav menus, all in the admin.

props grvrulz for the initial patch.
see #33808.


git-svn-id: https://develop.svn.wordpress.org/trunk@35200 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2015-10-15 16:45:14 +00:00
parent 017daba3d8
commit 19bb379a17
2 changed files with 56 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/wp-admin/css/common.css
View File

@ -2800,25 +2800,23 @@ img {
color: #464646;
}
/* @todo: these seem misplaced */
.js .meta-box-sortables .postbox:hover .handlediv {
margin-right: 0 !important;
}
/* Metabox collapse arrow indicators */
.js .sidebar-name .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox .toggle-indicator:before {
position: relative;
left: -1px; /* fix the dashicon horizontal alignment */
content: "\f142";
display: inline-block;
font: normal 20px/1 dashicons;
speak: none;
padding: 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
}
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
content: "\f140";
}
.js .sidebar-name .sidebar-name-arrow:before {
padding: 10px;
left: 0;
@ -2833,15 +2831,25 @@ img {
display: block;
}
/* Show the arrow only on hover */
.js .sidebar-name .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox .toggle-indicator:before {
content: "\f142";
.js .postbox .handlediv .toggle-indicator:before {
margin-top: 4px;
width: 20px;
border-radius: 50%;
text-indent: -1px; /* account for the dashicon alignment */
}
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
content: "\f140";
.js .postbox .handlediv:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
.js .postbox .handlediv:focus .toggle-indicator:before {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
/* @todo: appears to be Press This only and overridden */
@ -2974,16 +2982,19 @@ img {
}
.widget-top a.widget-action:after {
padding: 12px 12px 11px;
padding: 1px 2px 1px 0px;
margin-top: 10px;
margin-right: 10px;
border-radius: 50%;
}
.widget-top a.widget-action:focus:after {
-webkit-box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
box-shadow: 0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8);
}
.nav-menus-php .item-edit:before {
line-height: 2.1;
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30,140,190,.8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30,140,190,.8);
}
.control-section .accordion-section-title:after,

24
src/wp-admin/css/nav-menus.css
View File

@ -579,7 +579,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
/* Menu item controls */
.item-type {
display: inline-block;
padding: 12px 10px;
padding: 12px 16px;
color: #666;
font-size: 12px;
line-height: 18px;
@ -618,6 +618,28 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
white-space: nowrap;
}
.nav-menus-php .item-edit:before {
margin-top: 10px;
margin-left: 4px;
width: 20px;
border-radius: 50%;
text-indent: -1px; /* account for the dashicon alignment */
}
.nav-menus-php .item-edit:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
.nav-menus-php .item-edit:focus:before {
-webkit-box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
}
/* Menu editing */
.menu-instructions-inactive {
display: none;