SIG SELECT: FLIP→SPIN rename; stage-card reversal JS — TDD
- Template: FLIP btn label → SPIN; .btn-reverse class + .sig-flip-btn kept - _button-pad.scss: .btn-reverse restyled w. cyan (--priCy/--terCy); .btn-tip removed; button section comments added (BIG, BYE, FYI, OK, SPIN etc.) - sig-select.js: SPIN/FLIP handler also toggles .stage-card--reversed on stageCard; updateStage() populates .fan-card-reversal-name (data-reversal) + .fan-card-reversal-qualifier (polarity qualifier); resets .stage-card--reversed on each new hover — TDD - SigSelectSpec.js: SPIN card animation describe block (7 specs); spec descriptions updated FLIP→SPIN; fixture gains reversal elements + data-reversal attr; 235 Jasmine specs green Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -24,6 +24,7 @@
|
||||
border: 0.18rem solid rgba(var(--priUser), 1);
|
||||
}
|
||||
|
||||
// BIG btn
|
||||
&.btn-primary {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
@@ -70,6 +71,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// BYE btn
|
||||
&.btn-abandon {
|
||||
color: rgba(var(--priBl), 1);
|
||||
border-color: rgba(var(--priBl), 1);
|
||||
@@ -105,6 +107,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// DEL btn
|
||||
&.btn-cancel {
|
||||
color: rgba(var(--priOr), 1);
|
||||
border-color: rgba(var(--priOr), 1);
|
||||
@@ -139,6 +142,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// FYI btn
|
||||
&.btn-caution {
|
||||
color: rgba(var(--priYl), 1);
|
||||
border-color: rgba(var(--priYl), 1);
|
||||
@@ -174,6 +178,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// OK btn
|
||||
&.btn-confirm {
|
||||
color: rgba(var(--priGn), 1);
|
||||
border-color: rgba(var(--priGn), 1);
|
||||
@@ -209,6 +214,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// DEL btn
|
||||
&.btn-danger {
|
||||
color: rgba(var(--priRd), 1);
|
||||
background-color: rgba(var(--terRd), 1);
|
||||
@@ -286,6 +292,7 @@
|
||||
font-size: 0.75rem; // 0.63rem × 1.2
|
||||
}
|
||||
|
||||
// PRV btn
|
||||
&.btn-nav-left {
|
||||
color: rgba(var(--priFs), 1);
|
||||
border-color: rgba(var(--priFs), 1);
|
||||
@@ -321,6 +328,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// NXT btn
|
||||
&.btn-nav-right {
|
||||
color: rgba(var(--priLm), 1);
|
||||
border-color: rgba(var(--priLm), 1);
|
||||
@@ -356,6 +364,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// DON btn
|
||||
&.btn-equip {
|
||||
color: rgba(var(--priTk), 1);
|
||||
border-color: rgba(var(--priTk), 1);
|
||||
@@ -391,6 +400,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// DOFF btn
|
||||
&.btn-unequip {
|
||||
color: rgba(var(--priMe), 1);
|
||||
border-color: rgba(var(--priMe), 1);
|
||||
@@ -426,7 +436,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-reverse {
|
||||
// FLIP btn
|
||||
&.btn-reveal {
|
||||
color: rgba(var(--priCy), 1);
|
||||
border-color: rgba(var(--priCy), 1);
|
||||
background-color: rgba(var(--terCy), 1);
|
||||
@@ -461,37 +472,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-tip {
|
||||
color: rgba(var(--priLm), 1);
|
||||
border-color: rgba(var(--priLm), 1);
|
||||
background-color: rgba(var(--terLm), 1);
|
||||
// SPIN btn
|
||||
&.btn-reverse {
|
||||
color: rgba(var(--priCy), 1);
|
||||
border-color: rgba(var(--priCy), 1);
|
||||
background-color: rgba(var(--terCy), 1);
|
||||
box-shadow:
|
||||
0.1rem 0.1rem 0.12rem rgba(var(--terLm), 0.25),
|
||||
0.1rem 0.1rem 0.12rem rgba(var(--terCy), 0.25),
|
||||
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
0.25rem 0.25rem 0.25rem rgba(var(--terLm), 0.12)
|
||||
0.25rem 0.25rem 0.25rem rgba(var(--terCy), 0.12)
|
||||
;
|
||||
|
||||
&:hover {
|
||||
text-shadow:
|
||||
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
||||
0 0 1rem rgba(var(--priLm), 1)
|
||||
0 0 1rem rgba(var(--priCy), 1)
|
||||
;
|
||||
box-shadow:
|
||||
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priLm), 0.12)
|
||||
0 0 0.5rem rgba(var(--priCy), 0.12)
|
||||
;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 0.18rem solid rgba(var(--priLm), 1);
|
||||
border: 0.18rem solid rgba(var(--priCy), 1);
|
||||
text-shadow:
|
||||
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.12rem rgba(var(--priLm), 1)
|
||||
0 0 0.12rem rgba(var(--priCy), 1)
|
||||
;
|
||||
box-shadow:
|
||||
-0.1rem -0.1rem 0.12rem rgba(var(--terLm), 0.25),
|
||||
-0.1rem -0.1rem 0.12rem rgba(var(--terCy), 0.25),
|
||||
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priLm), 0.12)
|
||||
0 0 0.5rem rgba(var(--priCy), 0.12)
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user