WordPress.org

Make WordPress Core

Changeset 20133


Ignore:
Timestamp:
03/07/2012 03:19:35 AM (7 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.