Theme Customizer: Improve color picker toggle styles and markup. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20497 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith
2012-04-17 22:58:58 +00:00
parent 9df0620d89
commit 1c19b69eeb
3 changed files with 70 additions and 25 deletions

View File

@@ -197,22 +197,65 @@ body {
/*
* Color Picker
*/
.customize-section .color-picker a {
.customize-section .color-picker-toggle {
float: left;
display: block;
height: 20px;
width: 40px;
border: solid 3px rgba( 0, 0, 0, 0.1 );
background-color: #fff;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.customize-section .color-picker .color-picker-controls {
display: none;
.customize-section .color-picker-spot,
.customize-section .color-picker-dropdown {
float: left;
height: 24px;
line-height: 24px;
}
.customize-section .color-picker .farbtastic-placeholder {
.customize-section .color-picker-spot {
min-width: 30px;
padding: 0 5px;
background-color: #fff;
border: 1px solid rgba( 0, 0, 0, 0.15 );
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.customize-section .color-picker-dropdown {
position: relative;
width: 15px;
border-color: #ccc;
border-style: solid;
border-width: 1px 1px 1px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.customize-section .color-picker-dropdown:after {
content: '';
width: 0;
height: 0;
border-color: #ccc transparent transparent transparent;
border-style: solid;
border-width: 4px;
position: absolute;
top: 11px;
right: 4px;
z-index: 1;
}
.customize-section .color-picker-toggle.open .color-picker-dropdown:after {
border-color: transparent transparent #ccc transparent;
top: 6px;
}
.customize-section .color-picker-controls {
display: none;
float: left;
margin-top: 10px;
}
.customize-section .color-picker-controls .farbtastic-placeholder {
height: 195px;
width: 195px;
border: 4px solid #fff;