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.

Built from https://develop.svn.wordpress.org/trunk@35200


git-svn-id: http://core.svn.wordpress.org/trunk@35166 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2015-10-15 16:47:25 +00:00
parent 3eb4a57c27
commit 50288dea5a
7 changed files with 117 additions and 51 deletions

View File

@ -2800,25 +2800,23 @@ img {
color: #464646;
}
/* @todo: these seem misplaced */
.js .meta-box-sortables .postbox:hover .handlediv {
margin-left: 0 !important;
}
/* Metabox collapse arrow indicators */
.js .sidebar-name .sidebar-name-arrow:before,
.js .meta-box-sortables .postbox .toggle-indicator:before {
position: relative;
right: -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;
right: 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 0px 1px 2px;
margin-top: 10px;
margin-left: 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,

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,

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-right: 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;

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;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.4-alpha-35199';
$wp_version = '4.4-alpha-35200';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.