Changeset 26435

Timestamp:

11/27/2013 07:50:48 PM (10 years ago)

Author:

iammattthomas

Message:

Design fixes to the color picker:

• Apply top: 0 to .wp-color-result (open and closed).
• Reduce text size in hex-value field.
• Move hex-value-field styles to color-picker.css.

Fixes #26289, props mattheu.

Location:

trunk/src/wp-admin/css

Files:

• color-picker.css (modified) (2 diffs)
• customize-controls.css (modified) (1 diff)

trunk/src/wp-admin/css/color-picker.css

@@ -60 +60 @@
 }
 
-.wp-color-result.wp-picker-open {
+.wp-color-result {
     top: 0;
 }
@@ -97 +97 @@
 
 .wp-picker-container .iris-picker {
+    border-radius: 0;
     border-color: #dfdfdf;
     margin-top: 6px;
 }
 
-input[type="text"].iris-error {
+.wp-picker-container input[type="text"].wp-color-picker {
+    width: 65px;
+    font-size: 12px;
+    font-family: monospace;
+    text-align: center;
+    line-height: 16px;
+    margin: 0;
+}
+
+.wp-picker-container input[type="text"].wp-color-picker:focus::-webkit-input-placeholder {
+    color: transparent;
+}
+
+.wp-picker-container input[type="text"].wp-color-picker:-moz-placeholder {
+    color: #999;
+}
+
+.wp-picker-container input[type="text"].iris-error {
     background-color: #ffebe8;
     border-color: #c00;

trunk/src/wp-admin/css/customize-controls.css

@@ -314 +314 @@
 }
 
-.customize-control-color .iris-picker {
-    border-radius: 0 !important;
-}
-
-.accordion-section input[type="text"].color-picker-hex {
-    width: 65px;
-    font-family: monospace;
-    text-align: center;
-    line-height: 16px;
-}
-
-/* The centered cursor overlaps the placeholder in webkit. Hide it when selected. */
-.accordion-section input[type="text"].color-picker-hex:focus::-webkit-input-placeholder {
-    color: transparent;
-}
-
-.accordion-section input[type="text"].color-picker-hex:-moz-placeholder {
-    color: #999;
-}
-
 /*
  * Image Picker