28655.4.diff on Ticket #28655 – Attachment – WordPress Trac

src/wp-admin/css/colors/_admin.scss

         color: $menu-highlight-text;
+}
+.theme-install-overlay .close-full-overlay:hover,
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:hover,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:hover,
+.theme-install-overlay .next-theme:focus {
+        background-color: $menu-highlight-background;
+        color: $menu-highlight-text;
+}
 /* Widgets */
 .widgets-chooser li.widgets-chooser-selected {
 …
         color: $menu-highlight-text;
+}
+.customize-controls-close:focus,
+.customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
         background-color: $menu-highlight-background;

src/wp-admin/css/customize-controls.css

         width: 100%;
+}
+.customize-controls-close {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 45px;
+        height: 45px;
+        padding-right: 2px;
+        background: #eee;
+        border-right: 1px solid #ddd;
+        color: #444;
+        cursor: pointer;
+        -webkit-transition: color ease-in .1s;
+        transition: color ease-in .1s;
+}
 .control-panel-back {
         display: block;
         position: fixed;
 …
         display: none;
+}
+.customize-controls-close:focus,
+.customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
         background-color: #0074a2;
         color: #fff;
         outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+}
+.customize-controls-close:before {
+        font: normal 32px/1 dashicons;
+        content: "\f335";
+        position: relative;
+        top: 8px;
+        left: 8px;
+}
 .control-panel-back:before {
         font: normal 29px/1 dashicons;
         content: "\f340";
 …
         height: 22px;
+}
-#customize-header-actions a.back {
-        position: relative;
-        left: 0;
-        -webkit-transition: left ease-in-out .18s;
-        transition: left ease-in-out .18s;
+}
-.in-sub-panel #customize-header-actions a.back {
-        left: -120px;
+}
 .wp-full-overlay-sidebar .wp-full-overlay-header {
         -webkit-transition: padding ease-in-out .18s;
         transition: padding ease-in-out .18s;

src/wp-admin/css/themes.css

         overflow: auto;
+}
+/* Close Link */
+.wp-full-overlay .close-full-overlay {
+/* Close & Navigation Links */
+.theme-install-overlay .wp-full-overlay-sidebar .wp-full-overlay-header {
+        padding: 0;
+}
+.theme-install-overlay .close-full-overlay,
+.theme-install-overlay .previous-theme,
+.theme-install-overlay .next-theme {
+        display: block;
+        position: relative;
+        float: left;
+        width: 45px;
+        height: 45px;
+        padding-right: 2px;
+        background: #eee;
+        border-right: 1px solid #ddd;
+        color: #444;
+        cursor: pointer;
         text-decoration: none;
+        -webkit-transition: color ease-in .1s;
+        transition: color ease-in .1s;
+}
+.theme-install-overlay .close-full-overlay:hover,
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:hover,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:hover,
+.theme-install-overlay .next-theme:focus {
+        background-color: #0074a2;
+        color: #fff;
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+}
+.theme-install-overlay .close-full-overlay:before {
+        font: normal 30px/1 dashicons;
+        content: "\f335";
+        position: relative;
+        top: 9px;
+        left: 9px;
+}
+.theme-install-overlay .previous-theme:before {
+        font: normal 20px/1 dashicons;
+        content: "\f340";
+        position: relative;
+        top: 6px;
+        left: 14px;
+}
+.theme-install-overlay .next-theme:before {
+        font: normal 20px/1 dashicons;
+        content: "\f344";
+        position: relative;
+        top: 6px;
+        left: 13px;
+}
+.theme-install-overlay .previous-theme.disabled,
+.theme-install-overlay .next-theme.disabled,
+.theme-install-overlay .previous-theme.disabled:hover,
+.theme-install-overlay .previous-theme.disabled:focus,
+.theme-install-overlay .next-theme.disabled:hover,
+.theme-install-overlay .next-theme.disabled:focus {
+        color: #bbb;
+        background: #eee;
+        cursor: default;
+}
+.rtl .theme-install-overlay .previous-theme:before {
+        content: "\f344";
+}
+.rtl .theme-install-overlay .next-theme:before {
+        content: "\f340";
+}
 /* Collapse Button */
 .wp-full-overlay a.collapse-sidebar {
         position: absolute;
 …
         display: none;
+}
-.wp-full-overlay .theme-navigation {
-        padding: 10px 20px;
-        position: absolute;
-                bottom: 10px;
-        text-align: left;
+}
-.wp-full-overlay .theme-navigation .next-theme {
-        float: right;
+}
-.wp-full-overlay.no-navigation .theme-navigation {
-        display: none;
+}
 /* Animations */
 .wp-full-overlay,
 .wp-full-overlay-sidebar,
 …
         max-width: 100%;
+}
-.theme-install-overlay .wp-full-overlay-header {
-        margin-top: 9px;
+}
 .theme-install-overlay .wp-full-overlay-header .theme-install {
         float: right;
+        margin: 8px 10px 0 0;
         /* For when .theme-install is a span rather than a.button-primary (already installed theme) */
         line-height: 26px;
+}
 .theme-install-overlay .wp-full-overlay-sidebar {
         background: #EEE;
         border-right: 1px solid #DDD;
+        background: #eee;
+        border-right: 1px solid #ddd;
+}
+.theme-install-overlay .wp-full-overlay-sidebar-content {
+        background: #fff;
+        border-top: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+}
 .theme-install-overlay .wp-full-overlay-main {
         background: #fff url(../images/spinner.gif) no-repeat center center;
         -webkit-background-size: 20px 20px;

src/wp-admin/customize.php

                                 submit_button( $save_text, 'primary save', 'save', false );
                         ?>
                         <span class="spinner"></span>
                         <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
                                 <?php _e( 'Cancel' ); ?>
+                        <a class="customize-controls-close" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
+                                <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
                         </a>
                 </div>

src/wp-admin/js/customize-controls.js

                 var previewer, parent, topFocus,
                         body = $( document.body ),
                         overlay = body.children( '.wp-full-overlay' ),
                         backBtn = $( '.back' ),
+                        closeBtn = $( '.customize-controls-close' ),
                         saveBtn = $( '#save' );
                 // Prevent the form from saving when enter is pressed on an input or select element.
 …
                         state.bind( 'change', function() {
                                 if ( ! activated() ) {
                                         saveBtn.val( api.l10n.activate ).prop( 'disabled', false );
                                         backBtn.text( api.l10n.cancel );
+                                        closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
                                 } else if ( saved() ) {
                                         saveBtn.val( api.l10n.saved ).prop( 'disabled', true );
                                         backBtn.text( api.l10n.close );
+                                        closeBtn.find( '.screen-reader-text' ).text( api.l10n.close );
                                 } else {
                                         saveBtn.val( api.l10n.save ).prop( 'disabled', false );
                                         backBtn.text( api.l10n.cancel );
+                                        closeBtn.find( '.screen-reader-text' ).text( api.l10n.cancel );
+                                }
                         });
 …
                         event.preventDefault();
                 });
                 backBtn.keydown( function( event ) {
+                closeBtn.keydown( function( event ) {
                         if ( 9 === event.which ) // tab
                                 return;
                         if ( 13 === event.which ) // enter
 …
                 // If we receive a 'back' event, we're inside an iframe.
                 // Send any clicks to the 'Return' link to the parent page.
                 parent.bind( 'back', function() {
                         backBtn.on( 'click.back', function( event ) {
+                        closeBtn.on( 'click.customize-controls-close', function( event ) {
                                 event.preventDefault();
                                 parent.send( 'close' );
                         });
 …
                 api.trigger( 'ready' );
                 // Make sure left column gets focus
                 topFocus = backBtn;
+                topFocus = closeBtn;
                 topFocus.focus();
                 setTimeout(function () {
                         topFocus.focus();

src/wp-admin/theme-install.php

 <script id="tmpl-theme-preview" type="text/template">
         <div class="wp-full-overlay-sidebar">
                 <div class="wp-full-overlay-header">
+                        <a href="#" class="close-full-overlay button-secondary"><?php _e( 'Close' ); ?></a>
+                        <a href="#" class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></a>
+                        <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
+                        <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
                 <# if ( data.installed ) { #>
                         <a href="#" class="button button-primary theme-install disabled"><?php _ex( 'Installed', 'theme' ); ?></a>
                 <# } else { #>
 …
                                 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
                                 <span class="collapse-sidebar-arrow"></span>
                         </a>
-                        <div class="theme-navigation">
-                                <a class="previous-theme button" href="#"><?php _ex( 'Previous', 'Button label for a theme' ); ?></a>
-                                <a class="next-theme button" href="#"><?php _ex( 'Next', 'Button label for a theme' ); ?></a>
-                        </div>
                 </div>
         </div>
         <div class="wp-full-overlay-main">

Make WordPress Core

Context Navigation

Ticket #28655: 28655.4.diff

src/wp-admin/css/colors/_admin.scss

src/wp-admin/css/customize-controls.css

src/wp-admin/css/themes.css

src/wp-admin/customize.php

src/wp-admin/js/customize-controls.js

src/wp-admin/theme-install.php

Download in other formats: