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);
|
color: var(--ink-faint);
|
||||||
}
|
}
|
||||||
.rail-btn {
|
.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;
|
display: inline-block;
|
||||||
margin: 0 0.6rem;
|
margin: 0 var(--rail-btn-inset);
|
||||||
padding: 0.3rem 0.7rem;
|
padding: 0.3rem 0.7rem;
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -228,9 +232,10 @@
|
|||||||
/* Full-width modifier for a rail-foot action (sign in / sign out), composed as
|
/* Full-width modifier for a rail-foot action (sign in / sign out), composed as
|
||||||
class="rail-btn rail-btn-block".
|
class="rail-btn rail-btn-block".
|
||||||
|
|
||||||
The width is explicit — calc(100% - 1.2rem) — and NOT one of the two obvious
|
The width is explicit — 100% minus twice .rail-btn's side inset — and NOT one
|
||||||
shorthands, because a rail foot typically holds BOTH element types: Sign In
|
of the two obvious shorthands, because a rail foot typically holds BOTH element
|
||||||
is an <a>, Sign Out is a form-submit <button>. Each shorthand breaks one:
|
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
|
width: 100% overflows. It resolves against the containing block and then
|
||||||
.rail-btn's 0 0.6rem side margins are ADDED on top, pushing
|
.rail-btn's 0 0.6rem side margins are ADDED on top, pushing
|
||||||
@@ -244,11 +249,20 @@
|
|||||||
operators see.
|
operators see.
|
||||||
|
|
||||||
calc() gets both right (measured 0px short for <a> and <button> alike). The
|
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 {
|
.rail-btn-block {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: calc(100% - 1.2rem);
|
width: calc(100% - 2 * var(--rail-btn-inset, 0.6rem));
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user