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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user