WordPress.org
Get WordPress

Make WordPress Core

Changeset 20133


Ignore:
Timestamp:
03/07/2012 03:19:35 AM (15 years ago)
Author:
koopersmith
Message:

Theme Customizer: Move contents of customize.loader.css to wp-admin.css. Make markup/CSS for the full-screen overlay modular. see #19910.

Location:
trunk
Files:
2 deleted
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/wp-admin.dev.css

    r20114 r20133  
    404021.0 - Admin Footer
    414122.0 - About Pages
    42 23.0 - Misc
     4223.0 - Full Overlay w/ Sidebar
     4324.0 - Customize Loader
     4425.0 - Misc
    4345
    4446------------------------------------------------------------------------*/
    … …  
    52065208
    52075209/*------------------------------------------------------------------------------
    5208   23.0 - Misc
     5210  23.0 - Full Overlay w/ Sidebar
     5211------------------------------------------------------------------------------*/
     5212
     5213body.full-overlay-active {
     5214        overflow: hidden;
     5215}
     5216
     5217.wp-full-overlay {
     5218        background: #fff;
     5219        z-index: 500000;
     5220        position: fixed;
     5221        top: 0;
     5222        bottom: 0;
     5223        left: 0;
     5224        right: 0;
     5225}
     5226
     5227.wp-full-overlay.collapsed {
     5228        left: -302px;
     5229}
     5230
     5231.wp-full-overlay-sidebar {
     5232        width: 300px;
     5233        height: 100%;
     5234        padding: 0;
     5235        margin: 0;
     5236        z-index: 10;
     5237        position: relative;
     5238        overflow: auto;
     5239        background: #f5f5f5;
     5240        box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
     5241        border-right: 1px solid rgba( 0, 0, 0, 0.2 );
     5242}
     5243
     5244.wp-full-overlay-main {
     5245        position: fixed;
     5246        left: 300px;
     5247        right: 0;
     5248        top: 0;
     5249        bottom: 0;
     5250}
     5251
     5252.wp-full-overlay-sidebar div.wp-full-overlay-header,
     5253.wp-full-overlay-sidebar div.wp-full-overlay-footer {
     5254        position: fixed;
     5255        left: 0;
     5256        width: 260px;
     5257        padding: 15px 20px;
     5258        min-height: 16px;
     5259        margin: 0;
     5260        z-index: 10;
     5261        background: #f5f5f5;
     5262}
     5263
     5264.wp-full-overlay-sidebar div.wp-full-overlay-header {
     5265        top: 0;
     5266        border-top: 0;
     5267        border-bottom: 1px solid #fff;
     5268        box-shadow:
     5269                inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
     5270                inset 0 -1px 0 0px #dfdfdf;
     5271}
     5272
     5273.wp-full-overlay-sidebar div.wp-full-overlay-footer {
     5274        bottom: 0;
     5275        border-bottom: 0;
     5276        border-top: 1px solid #dfdfdf;
     5277        box-shadow:
     5278                inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
     5279                inset 0 1px 0 0px #fff;
     5280}
     5281
     5282/* Return and close buttons. */
     5283.wp-full-overlay .collapse-sidebar,
     5284.wp-full-overlay .close-full-overlay {
     5285        z-index: 50;
     5286        position: absolute;
     5287        text-decoration: none;
     5288}
     5289
     5290.wp-full-overlay .close-full-overlay {
     5291        top: 15px;
     5292        left: 20px;
     5293}
     5294
     5295/* Collapse Button */
     5296.wp-full-overlay .collapse-sidebar {
     5297        position: absolute;
     5298        top: 13px;
     5299        left: 265px;
     5300        z-index: 50;
     5301        display: block;
     5302        width: 19px;
     5303        height: 19px;
     5304        padding: 0;
     5305        border-radius: 50%;
     5306}
     5307.wp-full-overlay.collapsed .collapse-sidebar {
     5308        position: absolute;
     5309        left: 315px;
     5310}
     5311.wp-full-overlay .collapse-sidebar span {
     5312        margin-top: 2px;
     5313        margin-left: 2px;
     5314        display: block;
     5315        width: 15px;
     5316        height: 15px;
     5317        background: transparent url('../../wp-admin/images/arrows.png') no-repeat 0 -72px;
     5318}
     5319.wp-full-overlay.collapsed .collapse-sidebar span {
     5320        background-position: 0 -108px;
     5321}
     5322
     5323/* Animations */
     5324.wp-full-overlay,
     5325.wp-full-overlay .collapse-sidebar {
     5326        -moz-transition-property: left, right, top, bottom;
     5327        -webkit-transition-property: left, right, top, bottom;
     5328        -o-transition-property: left, right, top, bottom;
     5329        -ms-transition-property: left, right, top, bottom;
     5330        transition-property: left, right, top, bottom;
     5331        -moz-transition-duration: 0.2s;
     5332        -webkit-transition-duration: 0.2s;
     5333        -o-transition-duration: 0.2s;
     5334        -ms-transition-duration: 0.2s;
     5335        transition-duration: 0.2s;
     5336}
     5337
     5338/*------------------------------------------------------------------------------
     5339  24.0 - Customize Loader
     5340------------------------------------------------------------------------------*/
     5341
     5342#customize-container {
     5343        display: none;
     5344}
     5345
     5346.customize-active #customize-container {
     5347        display: block;
     5348}
     5349
     5350#customize-container iframe {
     5351        height: 100%;
     5352        width: 100%;
     5353        z-index: 20;
     5354}
     5355
     5356/*------------------------------------------------------------------------------
     5357  25.0 - Misc
    52095358------------------------------------------------------------------------------*/
    52105359

  • trunk/wp-includes/class-wp-customize.php

    r20123 r20133  
    262262
    263263                wp_enqueue_script( 'customize-loader' );
    264                 wp_enqueue_style( 'customize-loader' );
    265264
    266265                if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
    … …  
    288287        public function admin_footer() {
    289288                ?>
    290                 <div id="customize-container">
     289                <div id="customize-container" class="wp-full-overlay">
    291290                        <input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
    292                         <a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
     291                        <a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
    293292                        <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
    294293                </div>

  • trunk/wp-includes/css/customize-controls.dev.css

    r20130 r20133  
    11body {
    22        overflow: hidden;
    3 }
    4 
    5 #customize-controls {
    6         width: 300px;
    7         height: 100%;
    8         padding: 0;
    9         margin: 0;
    10         z-index: 10;
    11         position: relative;
    12         overflow: auto;
    13         background: #f5f5f5;
    14         box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
    15         border-right: 1px solid rgba( 0, 0, 0, 0.2 );
    163}
    174
    … …  
    121108}
    122109
    123 #customize-header-actions,
    124 #customize-footer-actions {
    125         position: fixed;
    126         left: 0;
    127         width: 260px;
    128         padding: 15px 20px;
    129         margin: 0;
    130         z-index: 10;
    131         background: #f5f5f5;
    132 }
    133 
    134 #customize-header-actions {
    135         top: 0;
    136         border-top: 0;
    137         border-bottom: 1px solid #fff;
    138         box-shadow:
    139                 inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
    140                 inset 0 -1px 0 0px #dfdfdf;
    141 }
    142 
    143 #customize-footer-actions {
    144         bottom: 0;
    145         border-bottom: 0;
    146         border-top: 1px solid #dfdfdf;
    147         box-shadow:
    148                 inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
    149                 inset 0 1px 0 0px #fff;
    150 }
    151 
    152110#customize-preview {
    153111        position: fixed;

  • trunk/wp-includes/customize-controls.php

    r20128 r20133  
    4444?>
    4545</head>
    46 <body>
    47         <form id="customize-controls" method="post" class="wrap" target="_parent" action="<?php echo esc_url( add_query_arg( 'save', '1', admin_url( 'themes.php' ) ) ); ?>">
     46<body class="wp-full-overlay">
     47        <form id="customize-controls" method="post" class="wrap wp-full-overlay-sidebar" target="_parent" action="<?php echo esc_url( add_query_arg( 'save', '1', admin_url( 'themes.php' ) ) ); ?>">
    4848                <?php wp_nonce_field( 'customize_controls' ); ?>
    4949                <input type="hidden" name="customize" value="on" />
    … …  
    5151                <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
    5252
    53                 <div id="customize-header-actions" class="customize-section">&nbsp;</div>
     53                <div id="customize-header-actions" class="customize-section wp-full-overlay-header">&nbsp;</div>
    5454
    5555                <div id="customize-info" class="customize-section">
    … …  
    7979                </ul></div>
    8080
    81                 <div id="customize-footer-actions" class="customize-section">
     81                <div id="customize-footer-actions" class="customize-section wp-full-overlay-footer">
    8282                        <?php
    8383                        submit_button( __( 'Save' ), 'primary', 'save', false );
    … …  
    8585                </div>
    8686        </form>
    87         <div id="customize-preview">
     87        <div id="customize-preview" class="wp-full-overlay-main">
    8888                <iframe name="customize-target"></iframe>
    8989        </div>

  • trunk/wp-includes/js/customize-loader.dev.js

    r19995 r20133  
    1010                        this.doc_title = $( document ).attr( 'title' );
    1111
    12                         this.element.on( 'click', '.return-to-admin', function() {
     12                        this.element.on( 'click', '.close-full-overlay', function() {
    1313                                Loader.close();
    1414                                return false;
    … …  
    3232
    3333                        this.element.fadeIn( 200, function() {
    34                                 Loader.body.addClass( 'customize-active' );
     34                                Loader.body.addClass( 'customize-active full-overlay-active' );
    3535                        });
    3636                },
    … …  
    3939                                Loader.iframe.remove();
    4040                                Loader.iframe = null;
    41                                 Loader.body.removeClass( 'customize-active' );
     41                                Loader.body.removeClass( 'customize-active full-overlay-active' );
    4242                                $( document ).attr( 'title', Loader.doc_title );
    4343                        });

  • trunk/wp-includes/script-loader.php

    r20060 r20133  
    472472        $styles->add( 'editor-buttons', "/wp-includes/css/editor-buttons$suffix.css" );
    473473        $styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css" );
    474         $styles->add( 'customize-loader', "/wp-includes/css/customize-loader$suffix.css" );
    475474        $styles->add( 'customize-controls', "/wp-includes/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie' ) );
    476475
Note: See TracChangeset for help on using the changeset viewer.