fix(nav): hard-lock CTA chips at 34px for bare navbar-but markup
Live header uses .navbar-form.navbar-but without .navbar-but-cluster; remove em padding/height:auto/min-height calc that grew chips on press and override .but.radius padding so publish/VIP stay fixed size.
This commit is contained in:
kate522 committed
1 parent
4c18910dc4
commit
77150afe38
3 files changed
+168
-67
No files matched your search
@@ -1,9 +1,66 @@
|
||||
/**
|
||||
* Header multi-function publish cluster + VIP CTA + hover VIP cards.
|
||||
*
|
||||
* Live header often uses .navbar-form.navbar-but / .navbar-vip WITHOUT
|
||||
* .navbar-but-cluster. Mirror the 34px chip lock for those roots too.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
/* Shared CTA chip (cluster OR bare navbar-but / navbar-vip forms) */
|
||||
.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 button.navbar-cta,
|
||||
.navbar-but-cluster button.newadd-btns__toggle,
|
||||
.navbar-but-cluster a.but:not(.newadd-btns__item),
|
||||
.navbar-top .navbar-form.navbar-but a.but,
|
||||
.navbar-top .navbar-form.navbar-but a.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-vip a.navbar-cta,
|
||||
.navbar-top .navbar-form.navbar-vip a.payvip-icon,
|
||||
.navbar-top a.newadd-btns.navbar-cta,
|
||||
.navbar-top a.navbar-newposts.but.navbar-cta,
|
||||
.navbar-top a.payvip-icon.navbar-cta {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 0 14px !important;
|
||||
height: 34px !important;
|
||||
min-height: 34px !important;
|
||||
max-height: 34px !important;
|
||||
border-radius: var(--navbar-cta-radius, 20px);
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
font-size: 13px !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box !important;
|
||||
vertical-align: middle;
|
||||
flex: 0 0 auto !important;
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !important;
|
||||
min-width: 0 !important;
|
||||
margin: 0 4px !important;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Paint for publish / VIP when not already gradient-colored by jb-* */
|
||||
.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 button.navbar-cta,
|
||||
.navbar-but-cluster button.newadd-btns__toggle {
|
||||
background: var(--color-primary, #2f6df6);
|
||||
}
|
||||
|
||||
.navbar-but-cluster {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -25,44 +82,6 @@
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* 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 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 !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;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
flex: 0 0 auto !important;
|
||||
/* fit-content: chip hugs label; never stretch to parent/menu */
|
||||
width: fit-content !important;
|
||||
max-width: fit-content !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,
|
||||
|
||||
@@ -293,14 +293,19 @@ badge.top,
|
||||
}
|
||||
|
||||
.navbar-top .navbar-but .but {
|
||||
font-size: 0.8em;
|
||||
padding: 0.3em 1em !important;
|
||||
margin: 0.4em;
|
||||
font-size: 13px;
|
||||
padding: 0 14px !important;
|
||||
margin: 0 4px;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.44;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
height: 34px;
|
||||
min-height: 34px;
|
||||
max-height: 34px;
|
||||
box-sizing: border-box;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-but .but.hover-show {
|
||||
|
||||
Reference in new issue
Block a user