WordPress.org

Make WordPress Core

Changeset 20777


Ignore:
Timestamp:
05/12/2012 12:48:20 AM (7 years ago)
Author:
koopersmith
Message:

Theme Customizer: Flex-width friendly UI, improved typographical hierarchy. see #19910.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-control.php

    r20761 r20777  
    173173                ?>
    174174                <label>
    175                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    176175                    <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
     176                    <?php echo esc_html( $this->label ); ?>
    177177                </label>
    178178                <?php
  • trunk/wp-includes/css/customize-controls-rtl.dev.css

    r20674 r20777  
    2222    margin-right: 0;
    2323    margin-left: 10px;
    24 }
    25 
    26 .customize-control-content {
    27     float: left;
    28 }
    29 
    30 .customize-control-text input,
    31 .customize-control-select select,
    32 .customize-control-checkbox input,
    33 .customize-control-color .color-picker,
    34 .customize-control-upload div {
    35     float: right;
    36     clear: left;
    3724}
    3825
  • trunk/wp-includes/css/customize-controls.dev.css

    r20761 r20777  
    3535}
    3636
    37 .control-section {
    38     border: 0;
    39 }
    40 
    4137.control-section .customize-section-title {
    42     padding: 8px 20px;
    43     border-top: 1px solid #fff;
    44     border-bottom: 1px solid #dfdfdf;
    45     font-size: 13px;
     38    padding: 10px 20px;
     39    font-size: 15px;
     40    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
     41    font-weight: normal;
     42    text-shadow: 0 1px 0 #fff;
     43
     44    background-color: #f5f5f5;
     45    background-image: -webkit-linear-gradient( top, #f5f5f5, #eee );
     46    background-image:    -moz-linear-gradient( top, #f5f5f5, #eee );
     47    background-image:     -ms-linear-gradient( top, #f5f5f5, #eee );
     48    background-image:      -o-linear-gradient( top, #f5f5f5, #eee );
     49    background-image:         linear-gradient( top, #f5f5f5, #eee );
    4650}
    4751
    4852.control-section .customize-section-title:hover {
    49     background-color: #efefef;
    50     background-image: -webkit-linear-gradient( top, #f5f5f5, #eee );
    51     background-image: -moz-linear-gradient( top, #f5f5f5, #eee );
    52     background-image: -ms-linear-gradient( top, #f5f5f5, #eee );
    53     background-image: -o-linear-gradient( top, #f5f5f5, #eee );
    54     background-image: linear-gradient( top, #f5f5f5, #eee );
    55     box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
     53    color: #222;
     54    background-color: #f9f9f9;
     55    background-image: -webkit-linear-gradient( top, #f9f9f9, #f1f1f1 );
     56    background-image:    -moz-linear-gradient( top, #f9f9f9, #f1f1f1 );
     57    background-image:     -ms-linear-gradient( top, #f9f9f9, #f1f1f1 );
     58    background-image:      -o-linear-gradient( top, #f9f9f9, #f1f1f1 );
     59    background-image:         linear-gradient( top, #f9f9f9, #f1f1f1 );
    5660}
    5761
    5862.control-section .customize-section-content {
    59     border-top: 1px solid #fff;
     63
     64}
     65.control-section.open .customize-section-title {
     66    border-bottom: 1px solid #e5e5e5;
     67}
     68.control-section.open .customize-section-title:hover {
    6069    border-bottom: 1px solid #dfdfdf;
    6170}
     
    6978    width: 0;
    7079    height: 0;
    71     border-color: #ccc transparent transparent transparent;
     80    border-color: #ccc transparent;
    7281    border-style: solid;
    73     border-width: 6px;
     82    border-width: 6px 6px 0;
    7483    position: absolute;
    7584    top: 25px;
     
    7988
    8089.customize-section.open .customize-section-title:after {
    81     margin-top: -7px;
    82     border-color: transparent transparent #ccc transparent;
     90    margin-top: -1px;
     91    border-width: 0 6px 6px;
     92}
     93
     94.customize-section-title:hover:after {
     95    border-color: #aaa transparent;
    8396}
    8497
    8598.control-section .customize-section-title:after {
    86     top: 13px;
     99    top: 15px;
    87100}
    88101
     
    141154
    142155.customize-control {
     156    width: 100%;
    143157    float: left;
    144158    clear: both;
    145     margin-bottom: 4px;
     159    margin-bottom: 8px;
    146160}
    147161
    148162.customize-control-title {
    149     clear: left;
    150     float: left;
    151     min-width: 110px;
    152     margin-right: 10px;
     163    display: block;
     164    line-height: 24px;
     165    font-weight: bold;
     166}
     167
     168.customize-control select,
     169.customize-control input[type="text"],
     170.customize-control input[type="radio"],
     171.customize-control input[type="checkbox"],
     172.customize-control-color .color-picker,
     173.customize-control-checkbox label,
     174.customize-control-upload div {
    153175    line-height: 28px;
    154176}
    155177
    156 .customize-control-content {
    157     float: right;
    158     width: 140px;
    159 }
    160 
    161 .customize-control-text input,
    162 .customize-control-select select,
    163 .customize-control-checkbox input,
    164 .customize-control-color .color-picker,
    165 .customize-control-upload div {
    166     float: left;
    167     clear: right;
    168     line-height: 28px;
    169 }
    170 
    171 .customize-control-text input {
    172     float: right;
    173     width: 138px;
     178.customize-control input[type="text"] {
     179    width: 98%;
    174180    line-height: 18px;
    175     margin: 1px;
    176 }
    177 
    178 .customize-control-select select {
    179     width: 138px;
     181    margin: 0;
     182}
     183
     184.customize-control select {
     185    min-width: 50%;
     186    max-width: 100%;
    180187    height: 28px;
    181188    line-height: 28px;
     
    183190
    184191.customize-control-checkbox input {
    185     margin-top: 8px;
     192    margin-right: 5px;
    186193}
    187194
     
    213220 * Style for custom settings
    214221 */
    215 .customize-section select {
    216     max-width: 150px;
    217 }
    218222
    219223/*
     
    357361
    358362.customize-control-color .farbtastic-placeholder {
    359     width: 235px;
    360     margin: 5px 0 10px 25px;
     363    width: 100%;
     364    margin: 5px 0 10px;
    361365    float: left;
    362366}
Note: See TracChangeset for help on using the changeset viewer.