Theme Customizer: Improve sidebar CSS. Display most elements inline, refine padding/line-heights. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20181 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/class-wp-customize-section.php

@@ -72,7 +72,7 @@ class WP_Customize_Section {
 				<?php endif; ?>
 
 				<?php foreach ( $this->settings as $setting ) : ?>
-				<li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control">
+				<li id="customize-control-<?php echo esc_attr( $setting->id ); ?>" class="customize-control customize-control-<?php echo esc_attr( $setting->control ); ?>">
 					<?php $setting->_render(); ?>
 				</li>
 				<?php endforeach; ?>

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

@@ -336,7 +336,8 @@ class WP_Customize_Setting {
 		switch( $this->control ) {
 			case 'text':
 				?>
-				<label><?php echo esc_html( $this->label ); ?><br/>
+				<label>
+					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
 					<input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
 				</label>
 				<?php
@@ -344,7 +345,7 @@ class WP_Customize_Setting {
 			case 'color':
 				?>
 				<label>
-					<span><?php echo esc_html( $this->label ); ?></span>
+					<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->name(); ?> />
 						<a href="#"></a>
@@ -364,8 +365,8 @@ class WP_Customize_Setting {
 			case 'checkbox':
 				?>
 				<label>
-					<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); checked( $this->value() ); ?> />
+					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<?php echo esc_html( $this->label ); ?>
+					<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); checked( $this->value() ); ?> class="customize-control-content" />
 				</label>
 				<?php
 				break;
@@ -373,7 +374,9 @@ class WP_Customize_Setting {
 				if ( empty( $this->choices ) )
 					return;
 
-				echo esc_html( $this->label ) . '<br/>';
+				?>
+				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+				<?php
 				foreach ( $this->choices as $value => $label ) :
 					?>
 					<label>
@@ -388,21 +391,26 @@ class WP_Customize_Setting {
 					return;
 
 				?>
-				<label><?php echo esc_html( $this->label ); ?><br/>
+				<label>
-				<select <?php $this->name(); ?>>
+					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<?php
+					<select <?php $this->name(); ?> class="customize-control-content">
-					foreach ( $this->choices as $value => $label )
+						<?php
-						echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
+						foreach ( $this->choices as $value => $label )
-					?>
+							echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
-				</select>
+						?>
+					</select>
+				</label>
 				<?php
 				break;
 			case 'upload':
 				?>
-				<label><?php echo esc_html( $this->label ); ?><br/>
+				<label>
-					<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
+					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
+					<div>
-					<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
+						<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
+						<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
+						<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
+					</div>
 				</label>
 				<?php
 				break;

wp-includes/class-wp-customize.php

@@ -588,7 +588,7 @@ final class WP_Customize {
 		) );
 
 		$this->add_setting( 'page_on_front', array(
-			'label'          => __( 'Front page:' ),
+			'label'          => __( 'Front page' ),
 		//	'theme_supports' => 'static-front-page',
 			'section'        => 'static_front_page',
 			'control'        => 'dropdown-pages',
@@ -597,7 +597,7 @@ final class WP_Customize {
 		) );
 
 		$this->add_setting( 'page_for_posts', array(
-			'label'          => __( 'Posts page:' ),
+			'label'          => __( 'Posts page' ),
 		//	'theme_supports' => 'static-front-page',
 			'section'        => 'static_front_page',
 			'control'        => 'dropdown-pages',

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

@@ -31,6 +31,7 @@ body {
 .customize-section-content {
 	display: none;
 	padding: 0 20px 15px;
+	overflow: hidden;
 }
 
 .customize-section.open .customize-section-content {
@@ -107,6 +108,62 @@ body {
 	margin: 0;
 }
 
+.customize-control {
+	float: left;
+	clear: both;
+}
+
+.customize-control-title {
+	clear: left;
+	float: left;
+	min-width: 110px;
+	margin-right: 10px;
+	line-height: 28px;
+}
+.customize-control-text input,
+.customize-control-select select,
+.customize-control-checkbox input,
+.customize-control-color .color-picker,
+.customize-control-upload div {
+	float: left;
+	clear: right;
+	line-height: 28px;
+}
+
+.customize-control-text input {
+	width: 138px;
+	line-height: 18px;
+	margin: 1px 1px 5px;
+}
+
+.customize-control-select select {
+	width: 138px;
+	height: 28px;
+	line-height: 28px;
+}
+
+.customize-control-checkbox input {
+	margin-top: 8px;
+}
+
+.customize-control-radio {
+	padding: 10px 0;
+}
+
+.customize-control-radio .customize-control-title {
+	margin-bottom: 0;
+	line-height: 22px;
+}
+
+.customize-control-radio label {
+	float: left;
+	clear: both;
+	line-height: 20px;
+}
+.customize-control-radio input {
+	margin-right: 5px;
+}
+
 #customize-preview {
 	position: fixed;
 	left: 300px;
@@ -188,10 +245,6 @@ body {
  * Color Picker
  */
 
-.customize-section .color-picker {
-	margin-top: 4px;
-}
-
 .customize-section .color-picker a {
 	display: block;
 	height: 20px;