From c7c8d0a2d62c8f6b5c8ab5a0bf7e76d043f0b812 Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Tue, 17 Apr 2012 22:58:58 +0000
Subject: [PATCH] Theme Customizer: Improve color picker toggle styles and
 markup. see #19910.

git-svn-id: https://develop.svn.wordpress.org/trunk@20497 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-includes/class-wp-customize-control.php | 20 ++++----
 wp-includes/css/customize-controls.dev.css | 59 +++++++++++++++++++---
 wp-includes/js/customize-controls.dev.js   | 16 +++---
 3 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/wp-includes/class-wp-customize-control.php b/wp-includes/class-wp-customize-control.php
index 3115c5f936..a83d0cfab2 100644
--- a/wp-includes/class-wp-customize-control.php
+++ b/wp-includes/class-wp-customize-control.php
@@ -215,16 +215,16 @@ class WP_Customize_Control {
 				?>
 				<label>
 					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<div class="color-picker">
-						<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
-						<a href="#"></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>
+					<a href="#" class="color-picker-toggle">
+						<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>
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index eeb53679ab..02f5b4eaf7 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -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;
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index ee8da2fea8..e7857713db 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -97,22 +97,24 @@
 	api.ColorControl = api.Control.extend({
 		ready: function() {
 			var control = this,
-				picker, ui, text, toggle, update;
+				toggle, spot, ui, text, update;
 
-			picker = this.container.find( '.color-picker' );
-			ui     = picker.find( '.color-picker-controls' );
-			toggle = picker.find( 'a' );
+			toggle = this.container.find( '.color-picker-toggle' );
+			spot   = toggle.find('.color-picker-spot');
+			ui     = this.container.find( '.color-picker-controls' );
 			update = function( color ) {
 				color = '#' + color;
-				toggle.css( 'background', color );
+				spot.css( 'background', color );
 				control.farbtastic.setColor( color );
 			};
 
-			picker.on( 'click', 'a', function() {
+			toggle.on( 'click', function( event ) {
 				ui.toggle();
+				toggle.toggleClass( 'open' );
+				event.preventDefault();
 			});
 
-			this.farbtastic = $.farbtastic( picker.find('.farbtastic-placeholder'), function( color ) {
+			this.farbtastic = $.farbtastic( this.container.find('.farbtastic-placeholder'), function( color ) {
 				control.setting.set( color.replace( '#', '' ) );
 			});