diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index a5c0b402f5..2bc8771cec 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -1831,13 +1831,15 @@ html.wp-toolbar {
}
.postbox .handlediv {
+ display: none;
float: right;
- width: 33px;
+ width: 36px;
height: 36px;
+ padding: 0;
}
.js .postbox .handlediv {
- cursor: pointer;
+ display: block;
}
.sortable-placeholder {
@@ -2770,19 +2772,23 @@ img {
/* Metabox collapse arrow indicators */
.js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .handlediv:before {
- right: 12px;
+.js .meta-box-sortables .postbox .toggle-indicator:before {
+ position: relative;
+ left: -1px; /* fix the dashicon horizontal alignment */
+ display: inline-block;
font: normal 20px/1 dashicons;
speak: none;
- display: inline-block;
- padding: 8px 10px;
- top: 0;
- position: relative;
+ padding: 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
}
+.js .sidebar-name .sidebar-name-arrow:before {
+ padding: 10px;
+ left: 0;
+}
+
.js #widgets-left .sidebar-name .sidebar-name-arrow {
display: none;
}
@@ -2794,12 +2800,12 @@ img {
/* Show the arrow only on hover */
.js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .handlediv:before {
+.js .meta-box-sortables .postbox .toggle-indicator:before {
content: "\f142";
}
.js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox.closed .handlediv:before {
+.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
content: "\f140";
}
@@ -2925,6 +2931,7 @@ img {
.widget-action:hover,
.handlediv:hover,
+.handlediv:focus,
.item-edit:hover,
.sidebar-name:hover .sidebar-name-arrow,
.accordion-section-title:hover:after {
diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index d9481ad974..ccdfa9b469 100644
--- a/src/wp-admin/css/widgets.css
+++ b/src/wp-admin/css/widgets.css
@@ -147,10 +147,8 @@ div#widgets-left .sidebar-name h3 {
margin: 0 10px 0 0;
}
-div#widgets-left .sidebar-name .sidebar-name-arrow:before {
- right: 0;
- top: 4px;
- padding: 4px 6px 4px 4px;
+#widgets-left .sidebar-name .sidebar-name-arrow:before {
+ padding: 9px;
}
#widgets-left #available-widgets,
@@ -250,8 +248,7 @@ div#widgets-right .sidebar-name h3 {
}
div#widgets-right .sidebar-name .sidebar-name-arrow:before {
- right: 0;
- top: 4px;
+ top: 2px;
}
div#widgets-right .widget-top {
diff --git a/src/wp-admin/includes/template-functions.php b/src/wp-admin/includes/template-functions.php
index 515b7f1869..e3abbf93b0 100644
--- a/src/wp-admin/includes/template-functions.php
+++ b/src/wp-admin/includes/template-functions.php
@@ -989,8 +989,9 @@ function do_meta_boxes( $screen, $context, $object ) {
$hidden_class = in_array($box['id'], $hidden) ? ' hide-if-js' : '';
echo '
' . "\n";
if ( 'dashboard_browser_nag' != $box['id'] ) {
- echo '