WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Theme Customizer: Color picker markup/CSS improvements. Part 1. see #19910. 

git-svn-id: http://svn.automattic.com/wordpress/trunk@20130 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-03-06 23:55:16 +00:00
parent ffa1d350f2
commit 28ee213574
2 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
wp-includes/class-wp-customize-setting.php
View File

@ -347,8 +347,12 @@ class WP_Customize_Setting {
<a href="#"></a> <a href="#"></a>
<div class="color-picker-controls"> <div class="color-picker-controls">
<div class="farbtastic-placeholder"></div> <div class="farbtastic-placeholder"></div>
<span>#</span> <div class="color-picker-details">
<input type="text" /> <div class="color-picker-hex">
<span>#</span>
<input type="text" />
</div>
</div>
</div> </div>
</div> </div>
</label> </label>

39
wp-includes/css/customize-controls.dev.css
View File

@ -248,22 +248,45 @@ body {
.customize-section .color-picker .color-picker-controls { .customize-section .color-picker .color-picker-controls {
display: none; display: none;
} }
.customize-section .color-picker span {
.customize-section .color-picker .farbtastic-placeholder {
height: 195px;
width: 195px;
border: 4px solid #fff;
box-shadow: 0 0 20px rgba( 0, 0, 0, 0.2 );
-webkit-border-radius: 50%;
border-radius: 50%;
}
.customize-section .color-picker-hex {
background-color: #fff;
border: 1px solid #dfdfdf;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #777;
width: 70px;
font-family: monospace;
}
.customize-section .color-picker-hex span {
float: left; float: left;
display: block; display: block;
margin: 1px -2px 0 0; margin: 1px -2px 0 0;
line-height: 15px; line-height: 15px;
padding: 3px 5px; padding: 3px 0 3px 8px;
color: #777; text-align: right;
text-align: center;
background-color: #fff;
border: 1px solid #dfdfdf;
-webkit-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
.customize-section .color-picker input[type="text"] { .customize-section .color-picker-hex input[type="text"] {
color: #777;
-webkit-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
width: 150px; width: 50px;
border: 0;
background: transparent;
} }