Customize: Improve styling of date/time Customizer control.
* Let date `legend` be screen reader text when time is not included. * Skip rendering containers for label (title) and description when not supplied in registered control. * Fix margins and padding. Amends [41670]. Props westonruter, afercia, sayedwp. Fixes #42022. git-svn-id: https://develop.svn.wordpress.org/trunk@41672 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
e8e027e7a6
commit
32a6ac3918
|
@ -270,9 +270,8 @@ body.trashing #publish-settings {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.date-time-fields {
|
||||
padding-top: 10px;
|
||||
padding-bottom:10px;
|
||||
.customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-date_time .date-time-fields .date-input,
|
||||
|
@ -280,6 +279,9 @@ body.trashing #publish-settings {
|
|||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.customize-control.customize-control-date_time .date-time-fields .date-input.day {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.date-time-fields .date-input.month {
|
||||
width: auto;
|
||||
|
|
|
@ -112,14 +112,18 @@ class WP_Customize_Date_Time_Control extends WP_Customize_Control {
|
|||
<# _.defaults( data, <?php echo wp_json_encode( $data ); ?> ); #>
|
||||
<# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
|
||||
|
||||
<span class="customize-control-title">
|
||||
{{ data.label }}
|
||||
</span>
|
||||
<# if ( data.label ) { #>
|
||||
<span class="customize-control-title">
|
||||
{{ data.label }}
|
||||
</span>
|
||||
<# } #>
|
||||
<div class="customize-control-notifications-container"></div>
|
||||
<span class="description customize-control-description">{{ data.description }}</span>
|
||||
<div class="date-time-fields">
|
||||
<# if ( data.description ) { #>
|
||||
<span class="description customize-control-description">{{ data.description }}</span>
|
||||
<# } #>
|
||||
<div class="date-time-fields {{ data.includeTime ? 'includes-time' : '' }}">
|
||||
<fieldset class="day-row">
|
||||
<legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
|
||||
<legend class="title-day {{ ! data.includeTime ? 'screen-reader-text' : '' }}"><?php esc_html_e( 'Date' ); ?></legend>
|
||||
<div class="day-fields clear">
|
||||
<label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
|
||||
<select id="{{ idPrefix }}date-time-month" class="date-input month" data-component="month">
|
||||
|
|
Loading…
Reference in New Issue