Changeset 20504

Timestamp:

04/18/2012 02:32:05 PM (13 years ago)

Author:

koopersmith

Message:

Theme Customizer: Improve markup/styles for opened color picker. see #19910.

Location:

trunk/wp-includes

Files:

• class-wp-customize-control.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (4 diffs)
• js/customize-controls.dev.js (modified) (1 diff)

trunk/wp-includes/class-wp-customize-control.php

@@ -220 +220 @@
                         <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

trunk/wp-includes/css/customize-controls.dev.css

@@ -245 +245 @@
     z-index: 1;
 }
+
 .customize-section .color-picker-toggle.open .color-picker-dropdown:after {
     border-color: transparent transparent #ccc transparent;
@@ -250 +251 @@
 }
 
-.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;
 }
 
@@ -280 +271 @@
     display: block;
     margin: 1px -2px 0 0;
-    line-height: 15px;
+    line-height: 16px;
     padding: 3px 0 3px 8px;
     text-align: right;
@@ -288 +279 @@
 
 .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;
 }
 

trunk/wp-includes/js/customize-controls.dev.js

@@ -102 +102 @@
             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;