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
This commit is contained in:
Helen Hou-Sandi
parent
1b6a8019c3
commit
3a8bd20594
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue