Sig Select countdown numeral: enlarge via a class so it doubles at every breakpoint — TDD

The 12s countdown numeral set its size with an inline style.fontSize='2em',
but .btn-primary carries `font-size: 0.625rem !important` inside its small
landscape/short-portrait down-size media query — and an !important declaration
beats an inline style. So on phones / short viewports the numeral stayed
button-sized instead of doubling.

Fix: sig-select.js now toggles a `.sig-take-sig-btn--counting` class instead of
the inline font-size (in _showCountdown / _hideCountdown / the unready path),
and a new `.sig-stage .sig-take-sig-btn.sig-take-sig-btn--counting` rule in
_card-deck.scss re-asserts `font-size: 2em !important` at (0,3,0) specificity —
strictly beating the (0,2,0) btn-primary media-query !important at all queries.
em stays parent-relative so the doubling tracks the stage font across sizes.

2 Jasmine specs (class present + no inline override on show; class cleared on
countdown_cancel) added to SigSelectSpec; SpecRunner green; SCSS compiles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-05 14:39:52 -04:00
parent faaa4ecfb0
commit f3f509a59a
4 changed files with 55 additions and 3 deletions

View File

@@ -665,6 +665,15 @@
// 80% stage height × 5/8) via --sig-card-w CSS variable — libsass can't handle
// container query units inside min().
// The polarity-countdown numeral must read large at EVERY breakpoint. The
// .btn-primary down-size media query (`font-size: 0.625rem !important` on small
// landscape / short portrait) otherwise out-!importants the countdown's enlarge
// and the numeral stayed button-sized on phones / short viewports. Re-assert the
// 2em doubling with matching !important at (0,3,0) so it wins at all queries.
.sig-stage .sig-take-sig-btn.sig-take-sig-btn--counting {
font-size: 2em !important;
}
.sig-stage {
flex: 1;
min-height: 0;