WordPress.org

Make WordPress Core

Changeset 20504


Ignore:
Timestamp:
04/18/12 14:32:05 (2 years ago)
Author:
koopersmith
Message:

Theme Customizer: Improve markup/styles for opened color picker. see #19910.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

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

    r20497 r20504  
    220220                        <div class="color-picker-dropdown"></div> 
    221221                    </a> 
    222                     <div class="color-picker-controls"> 
    223                         <div class="farbtastic-placeholder"></div> 
    224                         <div class="color-picker-details"> 
    225                             <div class="color-picker-hex"> 
    226                                 <span>#</span> 
    227                                 <input type="text" <?php $this->link(); ?> /> 
    228                             </div> 
    229                         </div> 
     222                    <div class="color-picker-control color-picker-hex"> 
     223                        <span>#</span> 
     224                        <input type="text" <?php $this->link(); ?> /> 
    230225                    </div> 
     226                    <div class="color-picker-control farbtastic-placeholder"></div> 
    231227                </label> 
    232228                <?php 
  • trunk/wp-includes/css/customize-controls.dev.css

    r20497 r20504  
    245245    z-index: 1; 
    246246} 
     247 
    247248.customize-section .color-picker-toggle.open .color-picker-dropdown:after { 
    248249    border-color: transparent transparent #ccc transparent; 
     
    250251} 
    251252 
    252 .customize-section .color-picker-controls { 
     253.customize-section .color-picker-control { 
    253254    display: none; 
    254     float: left; 
    255     margin-top: 10px; 
    256 } 
    257  
    258 .customize-section .color-picker-controls .farbtastic-placeholder { 
    259     height: 195px; 
    260     width: 195px; 
    261     border: 4px solid #fff; 
    262     box-shadow: 0 0 20px rgba( 0, 0, 0, 0.2 ); 
    263  
    264     -webkit-border-radius: 50%; 
    265     border-radius: 50%; 
    266255} 
    267256 
    268257.customize-section .color-picker-hex { 
     258    float: left; 
     259    width: 70px; 
     260    margin-left: 5px; 
     261    font-family: monospace; 
    269262    background-color: #fff; 
    270     border: 1px solid #dfdfdf; 
     263    color: #777; 
     264    border: 1px solid #ccc; 
    271265    -webkit-border-radius: 3px; 
    272266    border-radius: 3px; 
    273     color: #777; 
    274     width: 70px; 
    275     font-family: monospace; 
    276267} 
    277268 
     
    280271    display: block; 
    281272    margin: 1px -2px 0 0; 
    282     line-height: 15px; 
     273    line-height: 16px; 
    283274    padding: 3px 0 3px 8px; 
    284275    text-align: right; 
     
    288279 
    289280.customize-section .color-picker-hex input[type="text"] { 
     281    width: 50px; 
     282    line-height: 16px; 
    290283    color: #777; 
     284    background: transparent; 
     285    border: 0; 
    291286    -webkit-border-radius: 0 3px 3px 0; 
    292287    border-radius: 0 3px 3px 0; 
    293     width: 50px; 
    294     border: 0; 
    295     background: transparent; 
     288} 
     289 
     290.customize-section .color-picker-control.farbtastic-placeholder { 
     291    width: 235px; 
     292    margin: 5px 0 10px 25px; 
     293    float: left; 
     294} 
     295 
     296.customize-section .color-picker-control .farbtastic { 
     297    margin: 0 auto; 
    296298} 
    297299 
  • trunk/wp-includes/js/customize-controls.dev.js

    r20497 r20504  
    102102            toggle = this.container.find( '.color-picker-toggle' ); 
    103103            spot   = toggle.find('.color-picker-spot'); 
    104             ui     = this.container.find( '.color-picker-controls' ); 
     104            ui     = this.container.find( '.color-picker-control' ); 
    105105            update = function( color ) { 
    106106                color = '#' + color; 
Note: See TracChangeset for help on using the changeset viewer.