Skip to content

Commit

Permalink
Customizer: Fix layout issues in customizer accordions.
Browse files Browse the repository at this point in the history
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
  • Loading branch information
desrosj committed Nov 19, 2024
1 parent 5e986ae commit 8a234cc
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 3 deletions.
2 changes: 1 addition & 1 deletion src/wp-admin/css/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 5 additions & 2 deletions src/wp-admin/css/customize-controls.css
Original file line number Diff line number Diff line change
Expand Up @@ -553,17 +553,19 @@ 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;
}

.accordion-section-title button.accordion-trigger {
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) {
Expand All @@ -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,
Expand Down

0 comments on commit 8a234cc

Please sign in to comment.