Changeset 59409

Timestamp:

11/18/2024 02:53:51 AM (2 weeks ago)

Author:

joedolson

Message:

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].

Props laurelfulford, wildworks, domainsupport, sabernhardt, rcreators, desrosj, sainathpoojary.
Fixes #62313, #62335.

Location:

trunk/src/wp-admin/css

Files:

• common.css (modified) (1 diff)
• customize-controls.css (modified) (3 diffs)

trunk/src/wp-admin/css/common.css

@@ -2463 +2463 @@
 .nav-menus-php .metabox-holder .accordion-section-title span.dashicons.dashicons-arrow-down::before {
     position: relative;
-    left: -1px
+    left: -1px;
 }
 

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

@@ -554 +554 @@
 }
 
-.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;
 }
@@ -562 +563 @@
     width: 100%;
     height: 100%;
-    padding: 10px 10px 11px 14px;
+    padding: 10px 30px 11px 14px;
     display: flex;
     align-items: center;
+    box-sizing: border-box;
 }
 
@@ -588 +590 @@
     content: "\f345";
     color: #a7aaad;
+    pointer-events: none;
 }