refactor(theme): rail-btn inset as --rail-btn-inset so .rail-btn and .rail-btn-block cannot drift
Unreleased — behaviourally identical to the published 0.4.1 (browser-verified: composed <a> and <button> both fill the rail foot exactly, 0.00px short). The var() carries a 0.6rem fallback because --rail-btn-inset is declared on .rail-btn, so rail-btn-block used alone would otherwise have an undefined var, invalidating the whole width declaration at computed-value time and silently reverting to width:auto — the exact <button> shrink-wrap bug 0.4.1 fixed.
This commit is contained in:
@@ -209,8 +209,12 @@
|
||||
color: var(--ink-faint);
|
||||
}
|
||||
.rail-btn {
|
||||
/* Side inset, declared once. The full-width modifier below subtracts it from
|
||||
100%, so the two MUST agree; keeping it in a custom property means the rail
|
||||
inset can be changed here alone. */
|
||||
--rail-btn-inset: 0.6rem;
|
||||
display: inline-block;
|
||||
margin: 0 0.6rem;
|
||||
margin: 0 var(--rail-btn-inset);
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
@@ -228,9 +232,10 @@
|
||||
/* Full-width modifier for a rail-foot action (sign in / sign out), composed as
|
||||
class="rail-btn rail-btn-block".
|
||||
|
||||
The width is explicit — calc(100% - 1.2rem) — and NOT one of the two obvious
|
||||
shorthands, because a rail foot typically holds BOTH element types: Sign In
|
||||
is an <a>, Sign Out is a form-submit <button>. Each shorthand breaks one:
|
||||
The width is explicit — 100% minus twice .rail-btn's side inset — and NOT one
|
||||
of the two obvious shorthands, because a rail foot typically holds BOTH element
|
||||
types: Sign In is an <a>, Sign Out is a form-submit <button>. Each shorthand
|
||||
breaks one:
|
||||
|
||||
width: 100% overflows. It resolves against the containing block and then
|
||||
.rail-btn's 0 0.6rem side margins are ADDED on top, pushing
|
||||
@@ -244,11 +249,20 @@
|
||||
operators see.
|
||||
|
||||
calc() gets both right (measured 0px short for <a> and <button> alike). The
|
||||
1.2rem must stay in step with .rail-btn's side margins above. */
|
||||
inset is read from .rail-btn's own --rail-btn-inset rather than restated here,
|
||||
so the two rules cannot drift apart if the rail inset ever changes.
|
||||
|
||||
The 0.6rem fallback is NOT decoration. --rail-btn-inset is declared on
|
||||
.rail-btn, so it only resolves for the documented `rail-btn rail-btn-block`
|
||||
composition; on `rail-btn-block` alone the var() would be undefined, which
|
||||
makes the WHOLE width declaration invalid at computed-value time and silently
|
||||
drops it back to width:auto — i.e. it would resurrect the exact shrink-wrap
|
||||
bug this rule exists to fix, and only on <button>. The fallback degrades to
|
||||
the correct literal instead. */
|
||||
.rail-btn-block {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - 1.2rem);
|
||||
width: calc(100% - 2 * var(--rail-btn-inset, 0.6rem));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user