Changeset 20130

Timestamp:

03/06/2012 11:55:16 PM (13 years ago)

Author:

koopersmith

Message:

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

Location:

trunk/wp-includes

Files:

• class-wp-customize-setting.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (1 diff)

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

@@ -348 +348 @@
                         <div class="color-picker-controls">
                             <div class="farbtastic-placeholder"></div>
-                            <span>#</span>
-                            <input type="text" />
+                            <div class="color-picker-details">
+                                <div class="color-picker-hex">
+                                    <span>#</span>
+                                    <input type="text" />
+                                </div>
+                            </div>
                         </div>
                     </div>

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

@@ -249 +249 @@
     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;
     display: block;
     margin: 1px -2px 0 0;
     line-height: 15px;
-    padding: 3px 5px;
-    color: #777;
-    text-align: center;
-    background-color: #fff;
-    border: 1px solid #dfdfdf;
+    padding: 3px 0 3px 8px;
+    text-align: right;
     -webkit-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;
     border-radius: 0 3px 3px 0;
-    width: 150px;
-}
+    width: 50px;
+    border: 0;
+    background: transparent;
+}