fix(header): stop the nav midline chip rule from collapsing the quick-login buttons
The top-nav guest popover rendered its quick-login buttons as 29px circles
with zero gap: github, gitee and qq were touching. The user-card widget, which
uses the same .social_loginbar markup, was fine at 32px with 10px gaps.
header-userbox.css carries an AKSRT-specific rule, absent from the reference
theme, that gives every .toggle-radius inside .navbar-form a 29px midline
circle:
.navbar-top .navbar-form .toggle-radius { flex: 0 0 29px; margin: 0; }
It exists for the account-row .badg chips, the theme toggle and the language
toggle. The popover social buttons are .toggle-radius too and also sit inside
.navbar-form, so they were caught by it. Two independent mechanisms broke the
geometry: flex-basis outranks width in a flex container, so flex: 0 0 29px beat
the .social_loginbar .social-login-item width: 32px !important; and the rule
(0,3,0) specificity outranked the (0,2,0) margin: 3px 5px.
Exempt the social buttons with :not(). The chips, the theme toggle and the
language toggle still match, and the popover buttons fall back to the
.social_loginbar geometry ported 1:1 from the reference.
Verified on the live site by measuring computed styles in headless Edge: the
popover buttons go from 29px/0px margins/0px gap to 32px/5px margins/10px gap,
the user-card widget is unchanged, and the account-row chips keep 29px (theme
toggle) and 36px (.badg). Rebuilt the public bundle so the exemption survives
the build, and contract-locked the selector plus the bundle copy.
Verification: node --test across widget-system, navigation, admin,
asset-ledger, dev, front-submit and visual (615 tests).
This commit is contained in:
1 parent
0bee2c605e
commit
5641c40958
4 files changed
+32
-3
No files matched your search
@@ -180,6 +180,23 @@ test('guest account member VIP and publish contracts share reference header DOM'
|
||||
assert.match(userboxCss, /\.aksrt-header-userbox\s*>\s*\.mt6\.em09\s*>\s*\.but\.block\s*\{[^}]*display:\s*block;[^}]*box-sizing:\s*border-box;[^}]*width:\s*100%;/s);
|
||||
});
|
||||
|
||||
test('the top-nav midline chip rule leaves the popover social buttons alone', () => {
|
||||
const userboxCss = read('assets/css/frontend/header-userbox.css');
|
||||
const publicCss = read('assets/css/build/public.css');
|
||||
|
||||
// The account-row chips, the theme toggle and the language toggle all want a
|
||||
// 29px midline circle. The popover's quick-login buttons are .toggle-radius
|
||||
// too and also live inside .navbar-form, but they must keep the
|
||||
// .social_loginbar geometry from main.css. flex-basis outranks width in a
|
||||
// flex container and the bare rule is (0,3,0) against (0,2,0), so an
|
||||
// unscoped selector collapses the buttons to 29px and zeroes their margins.
|
||||
assert.match(userboxCss, /\.navbar-top \.navbar-form \.toggle-radius:not\(\.social-login-item\):not\(\.xh-social-item\)\s*\{[^}]*flex:\s*0 0 29px;[^}]*margin:\s*0;/s);
|
||||
assert.doesNotMatch(userboxCss, /\.navbar-top \.navbar-form \.toggle-radius\s*\{/);
|
||||
// header-userbox.css is also folded into the public bundle, so the exemption
|
||||
// has to survive the build.
|
||||
assert.match(publicCss, /\.navbar-top \.navbar-form \.toggle-radius:not\(\.social-login-item\):not\(\.xh-social-item\)/);
|
||||
});
|
||||
|
||||
test('route and feature modules do not restyle the legacy top-nav chips', () => {
|
||||
// Route and feature modules may not restyle the legacy .but colour modifiers
|
||||
// without an enclosing scope. The top-nav chips ride the legacy geometry
|
||||
|
||||
Reference in new issue
Block a user