kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nav): isolate publish chip width with grid + button toggle

Browse Source 
Render multi-type 发布 as button, size wrapper with inline-grid so the
absolute menu cannot widen the chip on click/focus-within.
This commit is contained in:
kate522
2026-07-22 09:39:16 +08:00
parent aa05c6c81b
commit 57fa97bf9b
2 changed files with 84 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/nav/header-menu-buttons.css
+78 -72
View File
@@ -25,21 +25,22 @@
max-width: none;
}
/* CTA paint only on actual anchors/buttons — never on hover wrappers */
/* CTA paint only on real controls — never on hover wrappers / menu items */
.navbar-but-cluster a.navbar-cta,
.navbar-but-cluster a.btn-primary,
.navbar-but-cluster a.but.btn-primary,
.navbar-but-cluster a.navbar-newposts.but,
.navbar-but-cluster a.but:not(.newadd-btns__item),
.navbar-but-cluster button.navbar-cta {
.navbar-but-cluster button.navbar-cta,
.navbar-but-cluster button.newadd-btns__toggle,
.navbar-but-cluster a.but:not(.newadd-btns__item) {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 14px;
height: 34px;
min-height: 34px;
max-height: 34px;
padding: 0 14px !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
border-radius: var(--navbar-cta-radius, 20px);
background: var(--color-primary, #2f6df6);
color: #fff !important;
@@ -50,17 +51,27 @@
white-space: nowrap;
box-sizing: border-box;
vertical-align: middle;
flex: 0 0 auto;
flex: 0 0 auto !important;
width: auto !important;
max-width: none;
min-width: 0;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
font-family: inherit;
}
.navbar-but-cluster a.navbar-cta > i,
.navbar-but-cluster a.but > i,
.navbar-but-cluster a.btn-primary > i,
.navbar-but-cluster button.navbar-cta > i,
.navbar-but-cluster button.newadd-btns__toggle > i,
.navbar-but-cluster a.navbar-cta .navbar-cta-text,
.navbar-but-cluster a.navbar-cta > span:not(.badge) {
.navbar-but-cluster a.navbar-cta > span:not(.badge),
.navbar-but-cluster button.navbar-cta .navbar-cta-text,
.navbar-but-cluster button.newadd-btns__toggle .navbar-cta-text,
.navbar-but-cluster button.newadd-btns__toggle > span {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -73,36 +84,35 @@
.navbar-but-cluster a.navbar-cta > i,
.navbar-but-cluster a.but > i,
.navbar-but-cluster a.btn-primary > i {
.navbar-but-cluster a.btn-primary > i,
.navbar-but-cluster button.navbar-cta > i,
.navbar-but-cluster button.newadd-btns__toggle > i {
width: 1em;
height: 1em;
font-size: 1em;
line-height: 1;
}
/* Multi-type toggle keeps fixed CTA size when menu opens (focus-within). */
.navbar-but-cluster .newadd-btns__toggle.navbar-cta,
.navbar-but-cluster a.newadd-btns__toggle {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
/* Parent shell must not expand with absolute dropdown */
.navbar-but-cluster .navbar-but {
/* Parent shell: shrink-wrap chip only */
.navbar-but-cluster .navbar-but,
.navbar-but-cluster .navbar-vip {
position: relative;
overflow: visible;
overflow: visible !important;
display: inline-flex !important;
align-items: center;
width: auto !important;
max-width: fit-content;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
height: 34px;
}
.navbar-but-cluster .payvip-icon.but,
.navbar-but-cluster a.payvip-icon {
background: linear-gradient(90deg, #ff6b6b, #f04494);
color: #fff;
padding: 6px 12px;
padding: 0 12px !important;
height: 34px !important;
border-radius: var(--navbar-cta-radius, 20px);
text-decoration: none;
font-size: 13px;
@@ -112,22 +122,20 @@
margin-left: 0;
}
/* Publish multi-type dropdown
*
* Wrapper MUST be inline-block (not flex): an absolute dropdown as a flex
* child can still inflate the parent's used width on open/focus-within.
* Size the wrapper strictly to the toggle chip; menu never contributes.
*
* Hover bridge (zibll parity):
* - panel at top:100% (no gap)
* - transparent padding-top = bridge
* - solid plate via ::before under the bridge
/*
* Publish multi-type dropdown
* inline-grid with one max-content column sized ONLY by the in-flow toggle.
* Absolute dropdown is out of track sizing so open cannot widen the chip.
*/
.navbar-but-cluster .navbar-but .newadd-btns.hover-show,
.navbar-but-cluster .newadd-btns.hover-show,
.newadd-btns.hover-show {
position: relative !important;
display: inline-block !important; /* not flex — isolates absolute menu width */
display: inline-grid !important;
grid-template-columns: max-content;
grid-template-rows: 34px;
justify-items: stretch;
align-items: center;
vertical-align: middle;
z-index: 40;
background: transparent !important;
@@ -136,24 +144,25 @@
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
/* Shrink-wrap to toggle only; never grow with open menu */
width: fit-content !important;
max-width: fit-content !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: 34px !important;
max-height: 34px !important;
line-height: 0;
line-height: 0 !important;
overflow: visible !important;
flex: 0 0 auto !important;
align-self: center;
white-space: nowrap;
float: none !important;
}
/* Toggle: fixed chip — click/focus must not change size */
.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle,
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle,
.navbar-but-cluster button.newadd-btns__toggle,
.navbar-but-cluster a.newadd-btns__toggle,
.navbar-but-cluster .newadd-btns__toggle.navbar-cta,
a.newadd-btns__toggle.navbar-cta {
.navbar-but-cluster .newadd-btns__toggle.navbar-cta {
grid-column: 1;
grid-row: 1;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
@@ -164,43 +173,44 @@ a.newadd-btns__toggle.navbar-cta {
padding: 0 14px !important;
margin: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 auto !important;
min-width: 0 !important;
box-sizing: border-box !important;
white-space: nowrap !important;
vertical-align: middle;
/* Prevent focus outline from looking like width growth */
outline-offset: 2px;
position: relative;
z-index: 2;
justify-self: start;
}
.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus,
.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:focus-visible,
.navbar-but-cluster .newadd-btns > a.newadd-btns__toggle:active,
.navbar-but-cluster .newadd-btns.hover-show:focus-within > a.newadd-btns__toggle {
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus,
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:focus-visible,
.navbar-but-cluster .newadd-btns > .newadd-btns__toggle:active,
.navbar-but-cluster .newadd-btns.hover-show:hover > .newadd-btns__toggle,
.navbar-but-cluster .newadd-btns.hover-show:focus-within > .newadd-btns__toggle {
width: auto !important;
max-width: none !important;
padding: 0 14px !important;
height: 34px !important;
transform: none !important;
opacity: 1;
}
/* Menu is purely out-of-flow; fixed min width independent of toggle */
.navbar-but-cluster .newadd-btns .drop-newadd,
.navbar-but-cluster .newadd-btns > .drop-newadd,
.navbar-but-cluster .newadd-btns .hover-show-con.drop-newadd,
.newadd-btns .drop-newadd,
.newadd-btns > .drop-newadd,
.newadd-btns .hover-show-con.drop-newadd {
grid-column: 1;
grid-row: 1;
display: block !important;
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
float: none !important;
/* Fixed width so open state never reads as "button got longer" */
width: 168px !important;
min-width: 168px !important;
max-width: min(168px, 80vw) !important;
max-width: 168px !important;
margin: 0 !important;
/* Transparent hover bridge — part of the panel hit area */
padding: 10px 0 6px !important;
background: transparent !important;
border: 0 !important;
@@ -210,21 +220,19 @@ a.newadd-btns__toggle.navbar-cta {
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 1200;
z-index: 1200 !important;
pointer-events: none;
box-sizing: border-box !important;
/* Absolute: never affect parent inline-size */
inset-inline-end: 0;
justify-self: end;
}
/* Solid readable plate under the bridge */
.navbar-but-cluster .newadd-btns .drop-newadd::before,
.newadd-btns .drop-newadd::before,
.newadd-btns .hover-show-con.drop-newadd::before {
content: "" !important;
display: block !important;
position: absolute;
inset: 8px 0 0 0; /* sit below the transparent bridge */
inset: 8px 0 0 0;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
@@ -233,14 +241,12 @@ a.newadd-btns__toggle.navbar-cta {
pointer-events: none;
}
.navbar-but-cluster .newadd-btns.hover-show:hover .drop-newadd,
.navbar-but-cluster .newadd-btns.hover-show:hover > .drop-newadd,
.navbar-but-cluster .newadd-btns.hover-show:focus-within > .drop-newadd,
.navbar-but-cluster .newadd-btns.hover-show:hover .hover-show-con.drop-newadd,
.navbar-but-cluster .newadd-btns.hover-show:focus-within .drop-newadd,
.navbar-but-cluster .newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd,
.newadd-btns.hover-show:hover .drop-newadd,
.newadd-btns.hover-show:hover .hover-show-con.drop-newadd,
.newadd-btns.hover-show:focus-within .drop-newadd,
.newadd-btns.hover-show:focus-within .hover-show-con.drop-newadd {
.newadd-btns.hover-show:hover > .drop-newadd,
.newadd-btns.hover-show:focus-within > .drop-newadd {
opacity: 1;
visibility: visible;
transform: translateY(0);
inc/helpers/aksrt-header-menu-buttons.php
+6 -4
View File
@@ -186,12 +186,14 @@ if (!function_exists('aksrt_render_new_add_btns')) :
}
$html = '<span class="' . esc_attr(trim(implode(' ', $wrap_tokens) . ' hover-show')) . '">';
$html .= '<a href="javascript:;" class="' . esc_attr(trim('but newadd-btns__toggle navbar-cta ' . $cta_class)) . '" rel="nofollow">'
// type=button keeps focus without navigating; avoids link min-width quirks.
$html .= '<button type="button" class="' . esc_attr(trim('but newadd-btns__toggle navbar-cta ' . $cta_class)) . '">'
. $label_html
. ' <i class="fas fa-caret-down" aria-hidden="true"></i></a>';
$html .= '<div class="hover-show-con dropdown-menu drop-newadd">';
. ' <i class="fas fa-caret-down" aria-hidden="true"></i></button>';
// Sibling dropdown (not a flex child of the painted chip).
$html .= '<div class="hover-show-con drop-newadd" role="menu">';
foreach ($actions as $a) {
$html .= '<a rel="nofollow" class="newadd-btns__item" href="' . esc_url($a['url']) . '">';
$html .= '<a rel="nofollow" class="newadd-btns__item" role="menuitem" href="' . esc_url($a['url']) . '">';
$html .= '<i class="' . esc_attr($a['icon']) . '" aria-hidden="true"></i> '
. '<span>' . esc_html($a['label']) . '</span>';
$html .= '</a>';