diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index eb869c6610..984d4d8c2b 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -453,6 +453,16 @@ body.more-filters-opened .more-filters:focus:before { 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 { @@ -472,6 +482,8 @@ body.more-filters-opened .more-filters:focus:before { 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; diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index f92389e0d8..a753d2ef5b 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -170,6 +170,22 @@ body { 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; @@ -190,11 +206,23 @@ body { 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 { @@ -217,17 +245,6 @@ body { 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; diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 13076cbf6f..0b4a65eeb4 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -1617,9 +1617,83 @@ body.full-overlay-active { 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 */ @@ -1704,19 +1778,6 @@ body.full-overlay-active { 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, @@ -1845,19 +1906,22 @@ body.full-overlay-active { 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 { diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php index 7e69d13488..7d1aa47b58 100644 --- a/src/wp-admin/customize.php +++ b/src/wp-admin/customize.php @@ -112,8 +112,8 @@ do_action( 'customize_controls_print_scripts' ); submit_button( $save_text, 'primary save', 'save', false ); ?> - - + + diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index a550d3e9bc..53a11678a6 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -916,7 +916,7 @@ 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. @@ -1044,15 +1044,15 @@ 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 ); } }); @@ -1091,7 +1091,7 @@ event.preventDefault(); }); - backBtn.keydown( function( event ) { + closeBtn.keydown( function( event ) { if ( 9 === event.which ) // tab return; if ( 13 === event.which ) // enter @@ -1121,7 +1121,7 @@ // 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' ); }); @@ -1206,7 +1206,7 @@ api.trigger( 'ready' ); // Make sure left column gets focus - topFocus = backBtn; + topFocus = closeBtn; topFocus.focus(); setTimeout(function () { topFocus.focus(); diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index 19b9828abe..d7e2dbfb84 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -225,7 +225,9 @@ if ( $tab ) {