diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 564e6b42c9..034e745124 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2966,7 +2966,7 @@ img { } /* Metabox collapse arrow indicators */ -.js .sidebar-name .sidebar-name-arrow:before, +.sidebar-name .toggle-indicator:before, .js .meta-box-sortables .postbox .toggle-indicator:before, .bulk-action-notice .toggle-indicator:before { content: "\f142"; @@ -2978,26 +2978,12 @@ img { text-decoration: none !important; } -.js .widgets-holder-wrap.closed .sidebar-name-arrow:before, +.js .widgets-holder-wrap.closed .toggle-indicator:before, .js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before, .bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before { content: "\f140"; } -.js .sidebar-name .sidebar-name-arrow:before { - padding: 10px; - left: 0; -} - -.js #widgets-left .sidebar-name .sidebar-name-arrow { - display: none; -} - -.js #widgets-left .widgets-holder-wrap.closed .sidebar-name .sidebar-name-arrow, -.js #widgets-left .sidebar-name:hover .sidebar-name-arrow { - display: block; -} - .js .postbox .handlediv .toggle-indicator:before { margin-top: 4px; width: 20px; @@ -3171,7 +3157,7 @@ img { .handlediv, .postbox .handlediv.button-link, .item-edit, -.sidebar-name-arrow, +.toggle-indicator, .accordion-section-title:after { color: #72777c; } @@ -3188,7 +3174,7 @@ img { .postbox .handlediv.button-link:focus, .item-edit:hover, .item-edit:focus, -.sidebar-name:hover .sidebar-name-arrow, +.sidebar-name:hover .toggle-indicator, .accordion-section-title:hover:after { color: #23282d; } @@ -3488,8 +3474,8 @@ img { #screen-meta-links a.show-settings, .widget-top .widget-action, .widget-top .widget-action:hover, - .sidebar-name-arrow, - .sidebar-name:hover .sidebar-name-arrow, + .sidebar-name .toggle-indicator, + .sidebar-name:hover .toggle-indicator, .meta-box-sortables .postbox:hover .handlediv, #bulk-titles div a, #bulk-titles div a:hover { diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css index 4a262ca2d9..9847fa0c6b 100644 --- a/src/wp-admin/css/widgets.css +++ b/src/wp-admin/css/widgets.css @@ -260,17 +260,52 @@ box-sizing: border-box; } -.sidebar-name-arrow { - position: absolute; - top: 0; - right: 0; - bottom: 0; -} - .js .sidebar-name { cursor: pointer; } +.sidebar-name .handlediv { + float: right; + width: 38px; + height: 38px; + border: 0; + margin: 0; + padding: 8px; + background: none; + cursor: pointer; + outline: none; +} + +#widgets-right .sidebar-name .handlediv { + margin: 5px 3px 0 0; +} + +.sidebar-name .handlediv:focus { + box-shadow: none; + outline: none; +} + +#widgets-left .sidebar-name .toggle-indicator { + display: none; +} + +#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator, +#widgets-left .sidebar-name:hover .toggle-indicator, +#widgets-left .sidebar-name .handlediv:focus .toggle-indicator { + display: block; +} + +.sidebar-name .toggle-indicator:before { + padding: 1px 2px 1px 0; + border-radius: 50%; +} + +.sidebar-name .handlediv:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + .sidebar-name h2, .sidebar-name h3 { margin: 0; @@ -325,10 +360,6 @@ div#widgets-left .sidebar-name h3 { margin: 0 10px 0 0; } -#widgets-left .sidebar-name .sidebar-name-arrow:before { - padding: 9px; -} - #widgets-left .widgets-holder-wrap, div#widgets-left .widget-holder { background: transparent; @@ -423,10 +454,6 @@ div#widgets-right .sidebar-name h3 { padding: 15px 7px; } -div#widgets-right .sidebar-name .sidebar-name-arrow:before { - top: 2px; -} - div#widgets-right .widget-top { padding: 0; } @@ -556,7 +583,7 @@ div#widgets-right .closed .widgets-sortables { .widget-control-noform, #access-off, .widgets_access .widget-action, -.widgets_access .sidebar-name-arrow, +.widgets_access .handlediv, .widgets_access #access-on, .widgets_access .widget-holder .description, .no-js .widget-holder .description { diff --git a/src/wp-admin/includes/widgets.php b/src/wp-admin/includes/widgets.php index d599e5daba..6aa07a781e 100644 --- a/src/wp-admin/includes/widgets.php +++ b/src/wp-admin/includes/widgets.php @@ -80,7 +80,10 @@ function wp_list_widget_controls( $sidebar, $sidebar_name = '' ) { if ( $sidebar_name ) { ?>