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

View File

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

View File

@ -579,7 +579,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
/* Menu item controls */ /* Menu item controls */
.item-type { .item-type {
display: inline-block; display: inline-block;
padding: 12px 10px; padding: 12px 16px;
color: #666; color: #666;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
@ -618,6 +618,28 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
white-space: nowrap; 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 editing */
.menu-instructions-inactive { .menu-instructions-inactive {
display: none; display: none;

View File

@ -579,7 +579,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
/* Menu item controls */ /* Menu item controls */
.item-type { .item-type {
display: inline-block; display: inline-block;
padding: 12px 10px; padding: 12px 16px;
color: #666; color: #666;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
@ -618,6 +618,28 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
white-space: nowrap; 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 editing */
.menu-instructions-inactive { .menu-instructions-inactive {
display: none; 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 * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.