Customizer: Use a semantic, accessible element for Remove Header Image button.

Make the button more noticeable on dark, light, and busy images.

props afercia, RDall, melchoyce.
fixes #32227, #31325.
Built from https://develop.svn.wordpress.org/trunk@32382


git-svn-id: http://core.svn.wordpress.org/trunk@32352 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2015-05-06 10:54:27 +00:00
parent 77572cf024
commit 708791aa6b
6 changed files with 24 additions and 38 deletions

View File

@ -764,29 +764,22 @@ p.customize-section-description {
/* Header control: overlay "close" button */ /* Header control: overlay "close" button */
.customize-control-header .uploaded .header-view .close { .customize-control-header .uploaded .header-view .close {
font-size: 2em; font-size: 20px;
color: grey; color: #fff;
background: #555;
background: rgba(0, 0, 0, 0.5);
position: absolute; position: absolute;
visibility: hidden;
top: 10px; top: 10px;
left: 10px; left: -999px;
z-index: 1; z-index: 1;
width: 20px; width: 26px;
height: 20px; height: 26px;
cursor: pointer; cursor: pointer;
} }
.customize-control-header .uploaded .header-view .close:hover { .customize-control-header .header-view:hover .close,
color: black; .customize-control-header .header-view .close:focus {
text-shadow: left: 10px;
1px -1px 0 #fff,
-1px -1px 0 #fff,
1px 1px 0 #fff,
-1px 1px 0 #fff;
}
.customize-control-header .header-view:hover .close {
visibility: visible;
} }
/* Header control: randomiz(s)er */ /* Header control: randomiz(s)er */

File diff suppressed because one or more lines are too long

View File

@ -764,29 +764,22 @@ p.customize-section-description {
/* Header control: overlay "close" button */ /* Header control: overlay "close" button */
.customize-control-header .uploaded .header-view .close { .customize-control-header .uploaded .header-view .close {
font-size: 2em; font-size: 20px;
color: grey; color: #fff;
background: #555;
background: rgba(0, 0, 0, 0.5);
position: absolute; position: absolute;
visibility: hidden;
top: 10px; top: 10px;
right: 10px; right: -999px;
z-index: 1; z-index: 1;
width: 20px; width: 26px;
height: 20px; height: 26px;
cursor: pointer; cursor: pointer;
} }
.customize-control-header .uploaded .header-view .close:hover { .customize-control-header .header-view:hover .close,
color: black; .customize-control-header .header-view .close:focus {
text-shadow: right: 10px;
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
.customize-control-header .header-view:hover .close {
visibility: visible;
} }
/* Header control: randomiz(s)er */ /* Header control: randomiz(s)er */

File diff suppressed because one or more lines are too long

View File

@ -1074,7 +1074,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
<# } else { #> <# } else { #>
<# if (data.type === 'uploaded') { #> <# if (data.type === 'uploaded') { #>
<div class="dashicons dashicons-no close"></div> <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
<# } #> <# } #>
<button type="button" class="choice thumbnail" <button type="button" class="choice thumbnail"

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.3-alpha-32381'; $wp_version = '4.3-alpha-32382';
/** /**
* 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.