From 3a8bd20594adb1ea4c6ba2009a333f7f7e335f43 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Thu, 15 Oct 2015 18:52:24 +0000 Subject: [PATCH] Circular focus styling for widgets and menus in the customizer. see #33808. git-svn-id: https://develop.svn.wordpress.org/trunk@35207 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/customize-nav-menus.css | 111 ++++++++++++----------- src/wp-admin/css/customize-widgets.css | 3 - 2 files changed, 56 insertions(+), 58 deletions(-) diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index ebe90efdcf..7990debfd7 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -219,30 +219,6 @@ cursor: pointer; } -.customize-control-nav_menu_item .item-edit:focus { - color: #0073aa; - -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); -} - -/* rework the arrow indicator implementation for NVDA bug same as #32715 */ -.wp-customizer .menu-item .item-edit .toggle-indicator { - display: inline-block; - font-size: 20px; - line-height: 1; -} - -.wp-customizer .menu-item .item-edit .toggle-indicator:after { - content: "\f140"; - font: normal 20px/1 dashicons; - color: #a0a5aa; - vertical-align: top; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:after { content: "\f142"; } @@ -358,6 +334,36 @@ line-height: 30px; } +/* rework the arrow indicator implementation for NVDA bug same as #32715 */ +.wp-customizer .toggle-indicator { + display: inline-block; + font-size: 20px; + line-height: 1; + text-indent: -1px; /* account for the dashicon alignment */ +} + +.wp-customizer .toggle-indicator:after { + content: "\f140"; + speak: none; + vertical-align: top; + -webkit-border-radius: 50%; + border-radius: 50%; + color: #a0a5aa; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-decoration: none !important; +} + +.wp-customizer button:focus .toggle-indicator: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); +} + #accordion-panel-nav_menus .field-link-target, #accordion-panel-nav_menus .field-attr-title, #accordion-panel-nav_menus .field-css-classes, @@ -545,12 +551,14 @@ .menu-item-bar .item-delete:before { content: "\f335"; - font: normal 20px/1 dashicons; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; position: absolute; top: 9px; left: 5px; + -webkit-border-radius: 50%; + border-radius: 50%; + font: normal 20px/1 dashicons; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .ie8 .menu-item-bar .item-delete:before { @@ -562,9 +570,13 @@ color: #f00; } -.menu-item-bar .item-delete:focus { - -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-item-bar .item-delete: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); } .adding-menu-items .menu-item-bar .item-edit { @@ -623,23 +635,6 @@ content: none !important; } -#available-menu-items .accordion-section-title .toggle-indicator { - display: inline-block; - font-size: 20px; - line-height: 1; -} - -#available-menu-items .accordion-section-title .toggle-indicator:after { - content: "\f140"; - font: normal 20px/1 dashicons; - color: #a0a5aa; - vertical-align: top; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-decoration: none !important; -} - #available-menu-items .accordion-section-title:hover .toggle-indicator:after { color: #777; } @@ -676,11 +671,6 @@ button.not-a-button { cursor: pointer; } -#available-menu-items .accordion-section-title button:focus { - -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); -} - #available-menu-items .accordion-section-title .no-items, #available-menu-items .cannot-expand .accordion-section-title .spinner, #available-menu-items .cannot-expand .accordion-section-title > button { @@ -789,16 +779,27 @@ button.not-a-button { #available-menu-items .menu-item-handle .item-add:focus { color: #23282d; - -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); } #available-menu-items .item-add:before { content: "\f543"; - font: normal 20px/1 dashicons; position: relative; left: 2px; top: 3px; + display: inline-block; + height: 20px; + -webkit-border-radius: 50%; + border-radius: 50%; + font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */ +} + +#available-menu-items .item-add: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); } #available-menu-items .menu-item-handle.item-added .item-type, diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css index d63e806c8d..c02fdd6c34 100644 --- a/src/wp-admin/css/customize-widgets.css +++ b/src/wp-admin/css/customize-widgets.css @@ -628,9 +628,6 @@ body.adding-widget #customize-preview { .widget-title h3 { padding: 13px 15px; } - .widget-top a.widget-action:after { - padding-top: 9px; - } .widget-reorder-nav span { height: 39px; }