fix(nav): isolate publish chip width with grid + button toggle
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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user