From fc4837eb62c782eaa22a3dab4ecdb62eef8382d3 Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Wed, 18 Apr 2012 14:32:05 +0000
Subject: [PATCH] Theme Customizer: Improve markup/styles for opened color
 picker. see #19910.

git-svn-id: https://develop.svn.wordpress.org/trunk@20504 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-includes/class-wp-customize-control.php | 12 ++----
 wp-includes/css/customize-controls.dev.css | 44 +++++++++++-----------
 wp-includes/js/customize-controls.dev.js   |  2 +-
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php
index a83d0cfab2..785bfe9323 100644
--- a/wp-includes/class-wp-customize-control.php
+++ b/wp-includes/class-wp-customize-control.php
@@ -219,15 +219,11 @@ class WP_Customize_Control {
 						<div class="color-picker-spot"></div>
 						<div class="color-picker-dropdown"></div>
 					</a>
-					<div class="color-picker-controls">
-						<div class="farbtastic-placeholder"></div>
-						<div class="color-picker-details">
-							<div class="color-picker-hex">
-								<span>#</span>
-								<input type="text" <?php $this->link(); ?> />
-							</div>
-						</div>
+					<div class="color-picker-control color-picker-hex">
+						<span>#</span>
+						<input type="text" <?php $this->link(); ?> />
 					</div>
+					<div class="color-picker-control farbtastic-placeholder"></div>
 				</label>
 				<?php
 				break;
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index 02f5b4eaf7..4d826bcb97 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -244,42 +244,33 @@ body {
 	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 {
+.customize-section .color-picker-control {
 	display: none;
-	float: left;
-	margin-top: 10px;
-}
-
-.customize-section .color-picker-controls .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 {
+	float: left;
+	width: 70px;
+	margin-left: 5px;
+	font-family: monospace;
 	background-color: #fff;
-	border: 1px solid #dfdfdf;
+	color: #777;
+	border: 1px solid #ccc;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
-	color: #777;
-	width: 70px;
-	font-family: monospace;
 }
 
 .customize-section .color-picker-hex span {
 	float: left;
 	display: block;
 	margin: 1px -2px 0 0;
-	line-height: 15px;
+	line-height: 16px;
 	padding: 3px 0 3px 8px;
 	text-align: right;
 	-webkit-border-radius: 3px 0 0 3px;
@@ -287,12 +278,23 @@ body {
 }
 
 .customize-section .color-picker-hex input[type="text"] {
+	width: 50px;
+	line-height: 16px;
 	color: #777;
+	background: transparent;
+	border: 0;
 	-webkit-border-radius: 0 3px 3px 0;
 	border-radius: 0 3px 3px 0;
-	width: 50px;
-	border: 0;
-	background: transparent;
+}
+
+.customize-section .color-picker-control.farbtastic-placeholder {
+	width: 235px;
+	margin: 5px 0 10px 25px;
+	float: left;
+}
+
+.customize-section .color-picker-control .farbtastic {
+	margin: 0 auto;
 }
 
 /*
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index e7857713db..ab4a0d4496 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -101,7 +101,7 @@
 
 			toggle = this.container.find( '.color-picker-toggle' );
 			spot   = toggle.find('.color-picker-spot');
-			ui     = this.container.find( '.color-picker-controls' );
+			ui     = this.container.find( '.color-picker-control' );
 			update = function( color ) {
 				color = '#' + color;
 				spot.css( 'background', color );