From 8a234cc0614a1fb30bd7d21aaa7149f0660686d9 Mon Sep 17 00:00:00 2001 From: Jonathan Desrosiers Date: Tue, 19 Nov 2024 13:41:44 +0000 Subject: [PATCH] Customizer: Fix layout issues in customizer accordions. Adjust some CSS characteristics in the customizer accordions to avoid a slight horizontal scroll, allow the chevron icon to be part of the clickable control surface, and resolve a pre-existing padding issue allowing overflow on accordion headings. Follow up to [59224]. Reviewed by desrosj, joedolson. Merges [59409] to the 6.7 branch. Props laurelfulford, wildworks, domainsupport, sabernhardt, rcreators, desrosj, sainathpoojary. Fixes #62313, #62335. git-svn-id: https://develop.svn.wordpress.org/branches/6.7@59420 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 2 +- src/wp-admin/css/customize-controls.css | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index c7082137d5..6d24705d54 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2462,7 +2462,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ } .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before { position: relative; - left: -1px + left: -1px; } .nav-menus-php .metabox-holder .accordion-section.open .accordion-section-title span.dashicons.dashicons-arrow-down { diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 59905ea902..8149c28d13 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -553,7 +553,8 @@ body.trashing #publish-settings { .15s border-color ease-in-out; } -.accordion-section-title:has(button.accordion-trigger) { +.accordion-section-title:has(button.accordion-trigger), +#customize-controls .current-panel .control-section > h3.accordion-section-title:has(button.accordion-trigger) { padding: 0; } @@ -561,9 +562,10 @@ body.trashing #publish-settings { all: unset; width: 100%; height: 100%; - padding: 10px 10px 11px 14px; + padding: 10px 30px 11px 14px; display: flex; align-items: center; + box-sizing: border-box; } .accordion-section-title button.accordion-trigger:has(.menu-in-location) { @@ -587,6 +589,7 @@ body.trashing #publish-settings { #customize-outer-theme-controls .accordion-section-title:after { content: "\f345"; color: #a7aaad; + pointer-events: none; } #customize-theme-controls .accordion-section-content,