mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-23 05:15:00 +02:00
Accessibility: Improve the color picker UI accessibility, interaction, and generated markup.
- Refactors the UI controls around the Iris color picker to output valid and semantic markup - Simplifies the way elements visibility gets toggled - Properly associates the visually hidden label with the color input field - Makes the toggle button a real button - Adds `aria-expanded` to the toggle button - Keeps focus on the toggle button instead of moving it to the color input field - Adds `aria-label` attributes to give better context to some controls - Removes a redundant title attribute - Keeps the toggle button text to "Select Color" instead of changing it to "Current Color" when a color is selected - Slightly improves the responsive view - CSS clean-up Fixes #39662. Built from https://develop.svn.wordpress.org/trunk@41329 git-svn-id: http://core.svn.wordpress.org/trunk@41160 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
e38ec0f485
commit
b43ddef0bc
|
|
@ -6,40 +6,23 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.wp-color-result {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
/* Needs higher specificiity. */
|
||||
.wp-picker-container .wp-color-result.button {
|
||||
height: 24px;
|
||||
margin: 0 0px 6px 6px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
padding-right: 30px;
|
||||
box-shadow: 0 1px 0 #ccc;
|
||||
padding: 0 30px 0 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.wp-color-result:after {
|
||||
.wp-color-result-text {
|
||||
background: #f7f7f7;
|
||||
border-radius: 2px 0 0 2px;
|
||||
border-right: 1px solid #ccc;
|
||||
color: #555;
|
||||
content: attr( title );
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
line-height: 22px;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-color-result:hover,
|
||||
|
|
@ -56,17 +39,8 @@
|
|||
border-right: 1px solid #999;
|
||||
}
|
||||
|
||||
.wp-color-result {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-color-result.wp-picker-open:after {
|
||||
content: attr( data-current );
|
||||
}
|
||||
|
||||
.wp-picker-container, .wp-picker-container:active {
|
||||
.wp-picker-containers {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.wp-color-result:focus {
|
||||
|
|
@ -74,13 +48,29 @@
|
|||
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
}
|
||||
|
||||
.wp-color-result:active {
|
||||
/* See Trac ticket #39662 */
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.wp-picker-open + .wp-picker-input-wrap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-picker-container .button {
|
||||
margin-right: 6px;
|
||||
.wp-picker-input-wrap label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
|
||||
.form-table .wp-picker-input-wrap label {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.wp-picker-input-wrap .button,
|
||||
.wp-customizer .wp-picker-input-wrap .button {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
|
||||
|
|
@ -99,6 +89,7 @@
|
|||
font-family: monospace;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-color-picker::-webkit-input-placeholder {
|
||||
|
|
@ -127,9 +118,55 @@
|
|||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.iris-picker .iris-palette:focus {
|
||||
box-shadow:
|
||||
inset 0 0 5px rgba(0,0,0,.4),
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 782px ) {
|
||||
.wp-picker-container input[type="text"].wp-color-picker {
|
||||
margin-left: 6px;
|
||||
padding: 3px 5px;
|
||||
width: 80px;
|
||||
padding: 6px 5px 5px;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
|
||||
padding: 5px 5px 4px;
|
||||
}
|
||||
|
||||
.wp-picker-container .wp-color-result.button {
|
||||
height: auto;
|
||||
padding: 0 40px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container .wp-color-result.button {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.wp-picker-container .wp-color-result-text {
|
||||
padding: 0 14px;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container .wp-color-result-text {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 640px ) {
|
||||
.wp-customizer .wp-picker-container .wp-color-result.button {
|
||||
font-size: 14px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
|
||||
padding: 6px 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
wp-admin/css/color-picker-rtl.min.css
vendored
2
wp-admin/css/color-picker-rtl.min.css
vendored
|
|
@ -1,2 +1,2 @@
|
|||
/*! This file is auto-generated */
|
||||
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-color-result{background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;cursor:pointer;height:22px;margin:0 0 6px 6px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;display:inline-block;padding-right:30px;box-shadow:0 1px 0 #ccc;top:0}.wp-color-result:after{background:#f7f7f7;border-radius:2px 0 0 2px;border-right:1px solid #ccc;color:#555;content:attr(title);display:block;font-size:11px;line-height:22px;padding:0 6px;position:relative;left:0;text-align:center;top:0}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-right:1px solid #999}.wp-color-result.wp-picker-open:after{content:attr(data-current)}.wp-picker-container,.wp-picker-container:active{display:inline-block;outline:0}.wp-color-result:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-container .button{margin-right:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{margin-left:6px;padding:3px 5px}}
|
||||
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-picker-container .wp-color-result.button{height:24px;margin:0 0 6px 6px;padding:0 30px 0 0;font-size:11px}.wp-color-result-text{background:#f7f7f7;border-radius:2px 0 0 2px;border-right:1px solid #ccc;color:#555;display:block;line-height:22px;padding:0 6px;text-align:center}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-right:1px solid #999}.wp-picker-containers{display:inline-block}.wp-color-result:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-color-result:active{transform:none!important}.wp-picker-input-wrap label,.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.form-table .wp-picker-input-wrap label{margin:0!important}.wp-customizer .wp-picker-input-wrap .button,.wp-picker-input-wrap .button{margin-right:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0;vertical-align:top}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}.iris-picker .iris-palette:focus{box-shadow:inset 0 0 5px rgba(0,0,0,.4),0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{width:80px;padding:6px 5px 5px;font-size:16px;line-height:18px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:5px 5px 4px}.wp-picker-container .wp-color-result.button{height:auto;padding:0 40px 0 0;font-size:14px;line-height:29px}.wp-customizer .wp-picker-container .wp-color-result.button{font-size:13px;line-height:26px}.wp-picker-container .wp-color-result-text{padding:0 14px;font-size:inherit;line-height:inherit}.wp-customizer .wp-picker-container .wp-color-result-text{padding:0 10px}}@media screen and (max-width:640px){.wp-customizer .wp-picker-container .wp-color-result.button{font-size:14px;line-height:29px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:6px 5px}}
|
||||
|
|
@ -6,40 +6,23 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.wp-color-result {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
/* Needs higher specificiity. */
|
||||
.wp-picker-container .wp-color-result.button {
|
||||
height: 24px;
|
||||
margin: 0 6px 6px 0px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
padding-left: 30px;
|
||||
box-shadow: 0 1px 0 #ccc;
|
||||
padding: 0 0 0 30px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.wp-color-result:after {
|
||||
.wp-color-result-text {
|
||||
background: #f7f7f7;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-left: 1px solid #ccc;
|
||||
color: #555;
|
||||
content: attr( title );
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
line-height: 22px;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-color-result:hover,
|
||||
|
|
@ -56,17 +39,8 @@
|
|||
border-left: 1px solid #999;
|
||||
}
|
||||
|
||||
.wp-color-result {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-color-result.wp-picker-open:after {
|
||||
content: attr( data-current );
|
||||
}
|
||||
|
||||
.wp-picker-container, .wp-picker-container:active {
|
||||
.wp-picker-containers {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.wp-color-result:focus {
|
||||
|
|
@ -74,13 +48,29 @@
|
|||
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
}
|
||||
|
||||
.wp-color-result:active {
|
||||
/* See Trac ticket #39662 */
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.wp-picker-open + .wp-picker-input-wrap {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-picker-container .button {
|
||||
margin-left: 6px;
|
||||
.wp-picker-input-wrap label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
|
||||
.form-table .wp-picker-input-wrap label {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.wp-picker-input-wrap .button,
|
||||
.wp-customizer .wp-picker-input-wrap .button {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
|
||||
|
|
@ -99,6 +89,7 @@
|
|||
font-family: monospace;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-color-picker::-webkit-input-placeholder {
|
||||
|
|
@ -127,9 +118,55 @@
|
|||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
.iris-picker .iris-palette:focus {
|
||||
box-shadow:
|
||||
inset 0 0 5px rgba(0,0,0,.4),
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 782px ) {
|
||||
.wp-picker-container input[type="text"].wp-color-picker {
|
||||
margin-right: 6px;
|
||||
padding: 3px 5px;
|
||||
width: 80px;
|
||||
padding: 6px 5px 5px;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
|
||||
padding: 5px 5px 4px;
|
||||
}
|
||||
|
||||
.wp-picker-container .wp-color-result.button {
|
||||
height: auto;
|
||||
padding: 0 0 0 40px;
|
||||
font-size: 14px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container .wp-color-result.button {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.wp-picker-container .wp-color-result-text {
|
||||
padding: 0 14px;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container .wp-color-result-text {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ( max-width: 640px ) {
|
||||
.wp-customizer .wp-picker-container .wp-color-result.button {
|
||||
font-size: 14px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
|
||||
padding: 6px 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
wp-admin/css/color-picker.min.css
vendored
2
wp-admin/css/color-picker.min.css
vendored
|
|
@ -1,2 +1,2 @@
|
|||
/*! This file is auto-generated */
|
||||
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-color-result{background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;cursor:pointer;height:22px;margin:0 6px 6px 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:bottom;display:inline-block;padding-left:30px;box-shadow:0 1px 0 #ccc;top:0}.wp-color-result:after{background:#f7f7f7;border-radius:0 2px 2px 0;border-left:1px solid #ccc;color:#555;content:attr(title);display:block;font-size:11px;line-height:22px;padding:0 6px;position:relative;right:0;text-align:center;top:0}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-left:1px solid #999}.wp-color-result.wp-picker-open:after{content:attr(data-current)}.wp-picker-container,.wp-picker-container:active{display:inline-block;outline:0}.wp-color-result:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.wp-picker-container .button{margin-left:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{margin-right:6px;padding:3px 5px}}
|
||||
.wp-color-picker{width:80px}.wp-picker-container .hidden{display:none}.wp-picker-container .wp-color-result.button{height:24px;margin:0 6px 6px 0;padding:0 0 0 30px;font-size:11px}.wp-color-result-text{background:#f7f7f7;border-radius:0 2px 2px 0;border-left:1px solid #ccc;color:#555;display:block;line-height:22px;padding:0 6px;text-align:center}.wp-color-result:focus,.wp-color-result:hover{background:#fafafa;border-color:#999;color:#23282d}.wp-color-result:focus:after,.wp-color-result:hover:after{color:#23282d;border-color:#a0a5aa;border-left:1px solid #999}.wp-picker-containers{display:inline-block}.wp-color-result:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.wp-color-result:active{transform:none!important}.wp-picker-input-wrap label,.wp-picker-open+.wp-picker-input-wrap{display:inline-block;vertical-align:top}.form-table .wp-picker-input-wrap label{margin:0!important}.wp-customizer .wp-picker-input-wrap .button,.wp-picker-input-wrap .button{margin-left:6px}.wp-picker-container .iris-square-slider .ui-slider-handle:focus{background-color:#555}.wp-picker-container .iris-picker{border-radius:0;border-color:#ddd;margin-top:6px}.wp-picker-container input[type=text].wp-color-picker{width:65px;font-size:12px;font-family:monospace;line-height:16px;margin:0;vertical-align:top}.wp-color-picker::-webkit-input-placeholder{color:#72777c}.wp-color-picker::-moz-placeholder{color:#72777c;opacity:1}.wp-color-picker:-ms-input-placeholder{color:#72777c}.wp-picker-container input[type=text].iris-error{background-color:#ffebe8;border-color:#c00;color:#000}.iris-picker .iris-strip .ui-slider-handle:focus,.iris-picker .ui-square-handle:focus{box-shadow:0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}.iris-picker .iris-palette:focus{box-shadow:inset 0 0 5px rgba(0,0,0,.4),0 0 0 1px #5b9dd9,0 0 2px 1px rgba(30,140,190,.8)}@media screen and (max-width:782px){.wp-picker-container input[type=text].wp-color-picker{width:80px;padding:6px 5px 5px;font-size:16px;line-height:18px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:5px 5px 4px}.wp-picker-container .wp-color-result.button{height:auto;padding:0 0 0 40px;font-size:14px;line-height:29px}.wp-customizer .wp-picker-container .wp-color-result.button{font-size:13px;line-height:26px}.wp-picker-container .wp-color-result-text{padding:0 14px;font-size:inherit;line-height:inherit}.wp-customizer .wp-picker-container .wp-color-result-text{padding:0 10px}}@media screen and (max-width:640px){.wp-customizer .wp-picker-container .wp-color-result.button{font-size:14px;line-height:29px}.wp-customizer .wp-picker-container input[type=text].wp-color-picker{padding:6px 5px}}
|
||||
|
|
@ -3578,17 +3578,6 @@ img {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wp-color-result {
|
||||
height: auto;
|
||||
padding-right: 45px;
|
||||
}
|
||||
|
||||
.wp-color-result:after {
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
/* Feedback Messages */
|
||||
.notice,
|
||||
.wrap div.updated,
|
||||
|
|
|
|||
2
wp-admin/css/common-rtl.min.css
vendored
2
wp-admin/css/common-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -3578,17 +3578,6 @@ img {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wp-color-result {
|
||||
height: auto;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.wp-color-result:after {
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
/* Feedback Messages */
|
||||
.notice,
|
||||
.wrap div.updated,
|
||||
|
|
|
|||
2
wp-admin/css/common.min.css
vendored
2
wp-admin/css/common.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -858,15 +858,6 @@ p.customize-section-description {
|
|||
max-width: 112px;
|
||||
}
|
||||
|
||||
/* Color Picker */
|
||||
.customize-control-color .color-picker-hex {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-control-color.open .color-picker-hex {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-control-color .dropdown {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
|
|
|||
2
wp-admin/css/customize-controls-rtl.min.css
vendored
2
wp-admin/css/customize-controls-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -858,15 +858,6 @@ p.customize-section-description {
|
|||
max-width: 112px;
|
||||
}
|
||||
|
||||
/* Color Picker */
|
||||
.customize-control-color .color-picker-hex {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-control-color.open .color-picker-hex {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-control-color .dropdown {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
|
|
|||
2
wp-admin/css/customize-controls.min.css
vendored
2
wp-admin/css/customize-controls.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,13 @@
|
|||
/* global wpColorPickerL10n */
|
||||
( function( $, undef ){
|
||||
( function( $, undef ) {
|
||||
|
||||
var ColorPicker,
|
||||
_before = '<a tabindex="0" class="wp-color-result" />',
|
||||
_before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
|
||||
_after = '<div class="wp-picker-holder" />',
|
||||
_wrap = '<div class="wp-picker-container" />',
|
||||
_button = '<input type="button" class="button button-small hidden" />';
|
||||
_button = '<input type="button" class="button button-small" />',
|
||||
_wrappingLabel = '<label></label>',
|
||||
_wrappingLabelText = '<span class="screen-reader-text"></span>';
|
||||
|
||||
/**
|
||||
* @summary Creates a jQuery UI color picker.
|
||||
|
|
@ -101,20 +103,67 @@
|
|||
|
||||
self.initialValue = el.val();
|
||||
|
||||
// Set up HTML structure and hide the color picker.
|
||||
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
|
||||
self.wrap = el.parent();
|
||||
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
|
||||
self.pickerContainer = $( _after ).insertAfter( el );
|
||||
self.button = $( _button );
|
||||
// Add a CSS class to the input field.
|
||||
el.addClass( 'wp-color-picker' );
|
||||
|
||||
if ( self.options.defaultColor ) {
|
||||
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
|
||||
} else {
|
||||
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
|
||||
/*
|
||||
* Check if there's already a wrapping label, e.g. in the Customizer.
|
||||
* If there's no label, add a default one to match the Customizer template.
|
||||
*/
|
||||
if ( ! el.parent( 'label' ).length ) {
|
||||
// Wrap the input field in the default label.
|
||||
el.wrap( _wrappingLabel );
|
||||
// Insert the default label text.
|
||||
self.wrappingLabelText = $( _wrappingLabelText )
|
||||
.insertBefore( el )
|
||||
.text( wpColorPickerL10n.defaultLabel );
|
||||
}
|
||||
|
||||
el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button );
|
||||
/*
|
||||
* At this point, either it's the standalone version or the Customizer
|
||||
* one, we have a wrapping label to use as hook in the DOM, let's store it.
|
||||
*/
|
||||
self.wrappingLabel = el.parent();
|
||||
|
||||
// Wrap the label in the main wrapper.
|
||||
self.wrappingLabel.wrap( _wrap );
|
||||
// Store a reference to the main wrapper.
|
||||
self.wrap = self.wrappingLabel.parent();
|
||||
// Set up the toggle button and insert it before the wrapping label.
|
||||
self.toggler = $( _before )
|
||||
.insertBefore( self.wrappingLabel )
|
||||
.css( { backgroundColor: self.initialValue } );
|
||||
// Set the toggle button span element text.
|
||||
self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
|
||||
// Set up the Iris container and insert it after the wrapping label.
|
||||
self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
|
||||
// Store a reference to the Clear/Default button.
|
||||
self.button = $( _button );
|
||||
|
||||
// Set up the Clear/Default button.
|
||||
if ( self.options.defaultColor ) {
|
||||
self.button
|
||||
.addClass( 'wp-picker-default' )
|
||||
.val( wpColorPickerL10n.defaultString )
|
||||
.attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
|
||||
} else {
|
||||
self.button
|
||||
.addClass( 'wp-picker-clear' )
|
||||
.val( wpColorPickerL10n.clear )
|
||||
.attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
|
||||
}
|
||||
|
||||
// Wrap the wrapping label in its wrapper and append the Clear/Default button.
|
||||
self.wrappingLabel
|
||||
.wrap( '<span class="wp-picker-input-wrap hidden" />' )
|
||||
.after( self.button );
|
||||
|
||||
/*
|
||||
* The input wrapper now contains the label+input+Clear/Default button.
|
||||
* Store a reference to the input wrapper: we'll use this to toggle
|
||||
* the controls visibility.
|
||||
*/
|
||||
self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
|
||||
|
||||
el.iris( {
|
||||
target: self.pickerContainer,
|
||||
|
|
@ -215,25 +264,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @summary Enables the user to open the color picker with their keyboard.
|
||||
*
|
||||
* Enables the user to open the color picker with their keyboard.
|
||||
* This is possible by using the space or enter key.
|
||||
*
|
||||
* @since 3.5.0
|
||||
*
|
||||
* @param {Event} event The event that's being called.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
self.toggler.on( 'keyup', function( event ) {
|
||||
if ( event.keyCode === 13 || event.keyCode === 32 ) {
|
||||
event.preventDefault();
|
||||
self.toggler.trigger( 'click' ).next().focus();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @summary Enables the user to clear or revert the color in the color picker.
|
||||
*
|
||||
|
|
@ -266,10 +296,12 @@
|
|||
* @returns {void}
|
||||
*/
|
||||
open: function() {
|
||||
this.element.show().iris( 'toggle' ).focus();
|
||||
this.button.removeClass( 'hidden' );
|
||||
this.element.iris( 'toggle' );
|
||||
this.inputWrapper.removeClass( 'hidden' );
|
||||
this.wrap.addClass( 'wp-picker-active' );
|
||||
this.toggler.addClass( 'wp-picker-open' );
|
||||
this.toggler
|
||||
.addClass( 'wp-picker-open' )
|
||||
.attr( 'aria-expanded', 'true' );
|
||||
$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
|
||||
},
|
||||
/**
|
||||
|
|
@ -280,10 +312,12 @@
|
|||
* @returns {void}
|
||||
*/
|
||||
close: function() {
|
||||
this.element.hide().iris( 'toggle' );
|
||||
this.button.addClass( 'hidden' );
|
||||
this.element.iris( 'toggle' );
|
||||
this.inputWrapper.addClass( 'hidden' );
|
||||
this.wrap.removeClass( 'wp-picker-active' );
|
||||
this.toggler.removeClass( 'wp-picker-open' );
|
||||
this.toggler
|
||||
.removeClass( 'wp-picker-open' )
|
||||
.attr( 'aria-expanded', 'false' );
|
||||
$( 'body' ).off( 'click.wpcolorpicker', this.close );
|
||||
},
|
||||
/**
|
||||
|
|
|
|||
2
wp-admin/js/color-picker.min.js
vendored
2
wp-admin/js/color-picker.min.js
vendored
|
|
@ -1 +1 @@
|
|||
!function(a,b){var c,d='<a tabindex="0" class="wp-color-result" />',e='<div class="wp-picker-holder" />',f='<div class="wp-picker-container" />',g='<input type="button" class="button button-small hidden" />';c={options:{defaultColor:!1,change:!1,clear:!1,hide:!0,palettes:!0,width:255,mode:"hsv",type:"full",slider:"horizontal"},_createHueOnly:function(){var b,c=this,d=c.element;d.hide(),b="hsl("+d.val()+", 100, 50)",d.iris({mode:"hsl",type:"hue",hide:!1,color:b,change:function(b,d){a.isFunction(c.options.change)&&c.options.change.call(this,b,d)},width:c.options.width,slider:c.options.slider})},_create:function(){if(a.support.iris){var b=this,c=b.element;if(a.extend(b.options,c.data()),"hue"===b.options.type)return b._createHueOnly();b.close=a.proxy(b.close,b),b.initialValue=c.val(),c.addClass("wp-color-picker").hide().wrap(f),b.wrap=c.parent(),b.toggler=a(d).insertBefore(c).css({backgroundColor:b.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),b.pickerContainer=a(e).insertAfter(c),b.button=a(g),b.options.defaultColor?b.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString):b.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),c.wrap('<span class="wp-picker-input-wrap" />').after(b.button),c.iris({target:b.pickerContainer,hide:b.options.hide,width:b.options.width,mode:b.options.mode,palettes:b.options.palettes,change:function(c,d){b.toggler.css({backgroundColor:d.color.toString()}),a.isFunction(b.options.change)&&b.options.change.call(this,c,d)}}),c.val(b.initialValue),b._addListeners(),b.options.hide||b.toggler.click()}},_addListeners:function(){var b=this;b.wrap.on("click.wpcolorpicker",function(a){a.stopPropagation()}),b.toggler.click(function(){b.toggler.hasClass("wp-picker-open")?b.close():b.open()}),b.element.change(function(c){var d=a(this),e=d.val();""!==e&&"#"!==e||(b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c))}),b.toggler.on("keyup",function(a){13!==a.keyCode&&32!==a.keyCode||(a.preventDefault(),b.toggler.trigger("click").next().focus())}),b.button.click(function(c){var d=a(this);d.hasClass("wp-picker-clear")?(b.element.val(""),b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c)):d.hasClass("wp-picker-default")&&b.element.val(b.options.defaultColor).change()})},open:function(){this.element.show().iris("toggle").focus(),this.button.removeClass("hidden"),this.wrap.addClass("wp-picker-active"),this.toggler.addClass("wp-picker-open"),a("body").trigger("click.wpcolorpicker").on("click.wpcolorpicker",this.close)},close:function(){this.element.hide().iris("toggle"),this.button.addClass("hidden"),this.wrap.removeClass("wp-picker-active"),this.toggler.removeClass("wp-picker-open"),a("body").off("click.wpcolorpicker",this.close)},color:function(a){return a===b?this.element.iris("option","color"):void this.element.iris("option","color",a)},defaultColor:function(a){return a===b?this.options.defaultColor:void(this.options.defaultColor=a)}},a.widget("wp.wpColorPicker",c)}(jQuery);
|
||||
!function(a,b){var c,d='<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',e='<div class="wp-picker-holder" />',f='<div class="wp-picker-container" />',g='<input type="button" class="button button-small" />',h="<label></label>",i='<span class="screen-reader-text"></span>';c={options:{defaultColor:!1,change:!1,clear:!1,hide:!0,palettes:!0,width:255,mode:"hsv",type:"full",slider:"horizontal"},_createHueOnly:function(){var b,c=this,d=c.element;d.hide(),b="hsl("+d.val()+", 100, 50)",d.iris({mode:"hsl",type:"hue",hide:!1,color:b,change:function(b,d){a.isFunction(c.options.change)&&c.options.change.call(this,b,d)},width:c.options.width,slider:c.options.slider})},_create:function(){if(a.support.iris){var b=this,c=b.element;if(a.extend(b.options,c.data()),"hue"===b.options.type)return b._createHueOnly();b.close=a.proxy(b.close,b),b.initialValue=c.val(),c.addClass("wp-color-picker"),c.parent("label").length||(c.wrap(h),b.wrappingLabelText=a(i).insertBefore(c).text(wpColorPickerL10n.defaultLabel)),b.wrappingLabel=c.parent(),b.wrappingLabel.wrap(f),b.wrap=b.wrappingLabel.parent(),b.toggler=a(d).insertBefore(b.wrappingLabel).css({backgroundColor:b.initialValue}),b.toggler.find(".wp-color-result-text").text(wpColorPickerL10n.pick),b.pickerContainer=a(e).insertAfter(b.wrappingLabel),b.button=a(g),b.options.defaultColor?b.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString).attr("aria-label",wpColorPickerL10n.defaultAriaLabel):b.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear).attr("aria-label",wpColorPickerL10n.clearAriaLabel),b.wrappingLabel.wrap('<span class="wp-picker-input-wrap hidden" />').after(b.button),b.inputWrapper=c.closest(".wp-picker-input-wrap"),c.iris({target:b.pickerContainer,hide:b.options.hide,width:b.options.width,mode:b.options.mode,palettes:b.options.palettes,change:function(c,d){b.toggler.css({backgroundColor:d.color.toString()}),a.isFunction(b.options.change)&&b.options.change.call(this,c,d)}}),c.val(b.initialValue),b._addListeners(),b.options.hide||b.toggler.click()}},_addListeners:function(){var b=this;b.wrap.on("click.wpcolorpicker",function(a){a.stopPropagation()}),b.toggler.click(function(){b.toggler.hasClass("wp-picker-open")?b.close():b.open()}),b.element.change(function(c){var d=a(this),e=d.val();""!==e&&"#"!==e||(b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c))}),b.button.click(function(c){var d=a(this);d.hasClass("wp-picker-clear")?(b.element.val(""),b.toggler.css("backgroundColor",""),a.isFunction(b.options.clear)&&b.options.clear.call(this,c)):d.hasClass("wp-picker-default")&&b.element.val(b.options.defaultColor).change()})},open:function(){this.element.iris("toggle"),this.inputWrapper.removeClass("hidden"),this.wrap.addClass("wp-picker-active"),this.toggler.addClass("wp-picker-open").attr("aria-expanded","true"),a("body").trigger("click.wpcolorpicker").on("click.wpcolorpicker",this.close)},close:function(){this.element.iris("toggle"),this.inputWrapper.addClass("hidden"),this.wrap.removeClass("wp-picker-active"),this.toggler.removeClass("wp-picker-open").attr("aria-expanded","false"),a("body").off("click.wpcolorpicker",this.close)},color:function(a){return a===b?this.element.iris("option","color"):void this.element.iris("option","color",a)},defaultColor:function(a){return a===b?this.options.defaultColor:void(this.options.defaultColor=a)}},a.widget("wp.wpColorPicker",c)}(jQuery);
|
||||
|
|
@ -99,21 +99,21 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
|
|||
}
|
||||
defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
|
||||
} #>
|
||||
<label>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div class="customize-control-content">
|
||||
<# if ( isHueSlider ) { #>
|
||||
<input class="color-picker-hue" type="text" data-type="hue" />
|
||||
<# } else { #>
|
||||
<input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
|
||||
<# } #>
|
||||
</div>
|
||||
</label>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">{{{ data.label }}}</span>
|
||||
<# } #>
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{{ data.description }}}</span>
|
||||
<# } #>
|
||||
<div class="customize-control-content">
|
||||
<label><span class="screen-reader-text">{{{ data.label }}}</span>
|
||||
<# if ( isHueSlider ) { #>
|
||||
<input class="color-picker-hue" type="text" data-type="hue" />
|
||||
<# } else { #>
|
||||
<input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
|
||||
<# } #>
|
||||
</label>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -796,10 +796,12 @@ function wp_default_scripts( &$scripts ) {
|
|||
$scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
|
||||
$scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
|
||||
did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
|
||||
'clear' => __( 'Clear' ),
|
||||
'defaultString' => __( 'Default' ),
|
||||
'pick' => __( 'Select Color' ),
|
||||
'current' => __( 'Current Color' ),
|
||||
'clear' => __( 'Clear' ),
|
||||
'clearAriaLabel' => __( 'Clear color' ),
|
||||
'defaultString' => __( 'Default' ),
|
||||
'defaultAriaLabel' => __( 'Select default color' ),
|
||||
'pick' => __( 'Select Color' ),
|
||||
'defaultLabel' => __( 'Color value' ),
|
||||
) );
|
||||
|
||||
$scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y' ), false, 1 );
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.9-alpha-41328';
|
||||
$wp_version = '4.9-alpha-41329';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user