WordPress.org

Make WordPress Core

Changeset 20504


Ignore:
Timestamp:
04/18/2012 02:32:05 PM (7 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.