diff --git a/wp-admin/css/customize-controls.css b/wp-admin/css/customize-controls.css index 05b3ace80d..14f6f212d1 100644 --- a/wp-admin/css/customize-controls.css +++ b/wp-admin/css/customize-controls.css @@ -121,6 +121,36 @@ body { height: 100%; } +#customize-theme-controls .accordion-section-title:hover:after, +#customize-theme-controls .accordion-section-title:focus:after { + border-color: #eee transparent; +} + +#customize-theme-controls .control-section:hover .accordion-section-title, +#customize-theme-controls .control-section .accordion-section-title:hover, +#customize-theme-controls .control-section.open .accordion-section-title, +#customize-theme-controls .control-section .accordion-section-title:focus { + color: #fff; + text-shadow: 0 -1px 0 #333; + background: #808080; + background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); + background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); + background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); + background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); + background-image: linear-gradient(to top, #6d6d6d, #808080); + border-left: 1px solid #808080; + border-right: 1px solid #808080; +} + +#customize-theme-controls .control-section.accordion-section:hover, +#customize-theme-controls .control-section.accordion-section.open { + border-top-color: #808080; +} + +#customize-theme-controls .control-section.open .accordion-section-title { + border-bottom: 1px solid #6d6d6d; +} + /* * Style for custom settings */ diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css index 6b415f725f..33e709b28e 100644 --- a/wp-admin/css/wp-admin.css +++ b/wp-admin/css/wp-admin.css @@ -9047,6 +9047,7 @@ a.widget-control-edit { .control-section .accordion-section-title { padding: 10px 20px; + color: #464646; font-size: 15px; font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; font-weight: normal; @@ -9063,34 +9064,21 @@ a.widget-control-edit { top: 15px; } -.control-section .accordion-section-title:hover:after, -.control-section .accordion-section-title:focus:after { - border-color: #eee transparent; -} - .js .control-section:hover .accordion-section-title, .js .control-section .accordion-section-title:hover, .js .control-section.open .accordion-section-title, .js .control-section .accordion-section-title:focus { - color: #fff; - text-shadow: 0 -1px 0 #333; - background: #808080; - background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); - background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); - background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); - background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); - background-image: linear-gradient(to top, #6d6d6d, #808080); - border-left: 1px solid #808080; - border-right: 1px solid #808080; -} - -.js .control-section.accordion-section:hover, -.control-section.accordion-section.open { - border-top-color: #808080; + color: #000; + background: #f9f9f9; + background-image: -webkit-gradient(linear, left bottom, left top, from(#ececec), to(#f9f9f9)); + background-image: -webkit-linear-gradient(bottom, #ececec, #f9f9f9); + background-image: -moz-linear-gradient(bottom, #ececec, #f9f9f9); + background-image: -o-linear-gradient(bottom, #ececec, #f9f9f9); + background-image: linear-gradient(to top, #ececec, #f9f9f9); } .control-section.open .accordion-section-title { - border-bottom: 1px solid #6d6d6d; + border-bottom: 1px solid #dfdfdf; } /* =Media Queries diff --git a/wp-admin/customize.php b/wp-admin/customize.php index a02b3e2bf1..a9e05c2fd5 100644 --- a/wp-admin/customize.php +++ b/wp-admin/customize.php @@ -46,7 +46,7 @@ do_action( 'customize_controls_enqueue_scripts' ); wp_user_settings(); _wp_admin_html_begin(); -$body_class = 'wp-core-ui'; +$body_class = 'wp-core-ui js'; if ( wp_is_mobile() ) : $body_class .= ' mobile'; @@ -90,8 +90,8 @@ do_action( 'customize_controls_print_scripts' ); $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') ); ?> -
-
+
+
-
    +
      sections() as $section ) $section->maybe_render(); diff --git a/wp-admin/includes/template.php b/wp-admin/includes/template.php index 61080c2012..2b461c041d 100644 --- a/wp-admin/includes/template.php +++ b/wp-admin/includes/template.php @@ -1000,6 +1000,7 @@ function do_accordion_sections( $screen, $context, $object ) {
        -
      • +

      • diff --git a/wp-admin/js/accordion.js b/wp-admin/js/accordion.js index 5e524782c4..7bc99ccca8 100644 --- a/wp-admin/js/accordion.js +++ b/wp-admin/js/accordion.js @@ -9,10 +9,9 @@ e.preventDefault(); // Keep this AFTER the key filter above accordionSwitch( $( this ) ); - accordionCorners(); }); - // Refresh selected accordion option when screen options are toggled + // Re-initialize accordion when screen options are toggled $( '.hide-postbox-tog' ).click( function () { accordionInit(); }); @@ -22,33 +21,35 @@ var accordionOptions = $( '.accordion-container li.accordion-section' ), sectionContent = $( '.accordion-section-content' ); - // Rounded corners - function accordionCorners () { + function accordionInit () { + // Rounded corners accordionOptions.removeClass( 'top bottom' ); accordionOptions.filter( ':visible' ).first().addClass( 'top' ); - accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass('bottom'); - }; - - function accordionInit () { - accordionSwitch( accordionOptions.filter( ':visible' ).first() ); - accordionCorners(); + accordionOptions.filter( ':visible' ).last().addClass( 'bottom' ).find( sectionContent ).addClass( 'bottom' ); } function accordionSwitch ( el ) { var section = el.closest( '.accordion-section' ), - siblings = section.parent().find( '.open' ), - content = section.find( sectionContent ); + siblings = section.closest( '.accordion-container' ).find( '.open' ), + content = section.find( sectionContent ); if ( section.hasClass( 'cannot-expand' ) ) return; - siblings.removeClass( 'open' ); - siblings.find( sectionContent ).show().slideUp( 150 ); - content.toggle( section.hasClass( 'open' ) ).slideToggle( 150 ); - section.toggleClass( 'open' ); + if ( section.hasClass( 'open' ) ) { + section.toggleClass( 'open' ); + content.toggle( true ).slideToggle( 150 ); + } else { + siblings.removeClass( 'open' ); + siblings.find( sectionContent ).show().slideUp( 150 ); + content.toggle( false ).slideToggle( 150 ); + section.toggleClass( 'open' ); + } + + accordionInit(); } - // Show the first accordion option by default + // Initialize the accordion (currently just corner fixes) accordionInit(); })(jQuery);