Customizer: Improve input field widths and alignment for date/time controls.

This changeset fixes some issues where Select fields were misaligned with neighboring elements, creating visual inconsistency in the customizer.

Props rkradadiya, mukesh27, laxman-prajapati, dlh, karmatosed, ankitkumarshah, sabernhardt.
Fixes #51249.



git-svn-id: https://develop.svn.wordpress.org/trunk@59942 602fd350-edb4-49c9-b593-d223f7449a82

Author: audrasjb

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

@@ -365,6 +365,10 @@ body.trashing #publish-settings {
 	width: 46px;
 }
 
+.customize-control-date_time select {
+	vertical-align: top;
+}
+
 .date-time-fields .date-input.year {
 	width: 65px;
 }

src/wp-includes/customize/class-wp-customize-date-time-control.php

@@ -154,7 +154,7 @@ public function content_template() {
 						esc_html_e( 'Day' );
 						?>
 					</label>
-					<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day" data-component="day" min="1" max="31" />
+					<input id="{{ idPrefix }}date-time-day" type="number" size="2" autocomplete="off" class="date-input day tiny-text" data-component="day" min="1" max="31" />
 					<?php $day_field = trim( ob_get_clean() ); ?>
 
 					<?php ob_start(); ?>
@@ -164,7 +164,7 @@ public function content_template() {
 						esc_html_e( 'Year' );
 						?>
 					</label>
-					<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
+					<input id="{{ idPrefix }}date-time-year" type="number" size="4" autocomplete="off" class="date-input year tiny-text" data-component="year" min="{{ data.minYear }}" max="{{ data.maxYear }}">
 					<?php $year_field = trim( ob_get_clean() ); ?>
 
 					<?php printf( $date_format, $year_field, $month_field, $day_field ); ?>
@@ -182,15 +182,15 @@ public function content_template() {
 						</label>
 						<# var maxHour = data.twelveHourFormat ? 12 : 23; #>
 						<# var minHour = data.twelveHourFormat ? 1 : 0; #>
-						<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
+						<input id="{{ idPrefix }}date-time-hour" type="number" size="2" autocomplete="off" class="date-input hour tiny-text" data-component="hour" min="{{ minHour }}" max="{{ maxHour }}">
 						:
 						<label for="{{ idPrefix }}date-time-minute" class="screen-reader-text">
 							<?php
 							/* translators: Hidden accessibility text. */
 							esc_html_e( 'Minute' );
 							?>
 						</label>
-						<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute" data-component="minute" min="0" max="59">
+						<input id="{{ idPrefix }}date-time-minute" type="number" size="2" autocomplete="off" class="date-input minute tiny-text" data-component="minute" min="0" max="59">
 						<# if ( data.twelveHourFormat ) { #>
 							<label for="{{ idPrefix }}date-time-meridian" class="screen-reader-text">
 								<?php