fix(portal): restore .o_fp_step_line nesting inside .o_fp_stepper

Regression from the pulse-animation commit: the @media (prefers-
reduced-motion) block had crept up and swallowed the .o_fp_step_line
rule, so the connector lines only got flex:1 when the user had
reduce-motion enabled. Everywhere else they had zero width and the
circles clustered on the left of the row with no visible gaps.

Moved .o_fp_step_line back inside the parent .o_fp_stepper { } where
it belongs. Added a comment so the next person doesn't make the same
mistake when editing the surrounding rules.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-17 04:00:47 -04:00
parent 49013c64fb
commit a63fbe1558

View File

@@ -46,6 +46,18 @@
box-shadow: $fp-glow-ring-amber; box-shadow: $fp-glow-ring-amber;
animation: fp-pulse-amber 1.8s ease-in-out infinite; animation: fp-pulse-amber 1.8s ease-in-out infinite;
} }
// Connector lines that flex-grow to fill the row between circles.
// MUST stay nested inside .o_fp_stepper or flex:1 doesn't apply
// (and the circles cluster on the left with no gaps).
.o_fp_step_line {
flex: 1;
height: 2px;
margin: 0 3px;
background: $fp-card-border;
&.o_fp_step_line_done { background: $fp-teal; }
&.o_fp_step_line_warn { background: $fp-amber; }
}
} }
// Pulsing glow for the active step indicator. Kept subtle - the ring // Pulsing glow for the active step indicator. Kept subtle - the ring
@@ -69,15 +81,6 @@
.o_fp_timeline_active .o_fp_timeline_dot { .o_fp_timeline_active .o_fp_timeline_dot {
animation: none; animation: none;
} }
.o_fp_step_line {
flex: 1;
height: 2px;
margin: 0 3px;
background: $fp-card-border;
&.o_fp_step_line_done { background: $fp-teal; }
&.o_fp_step_line_warn { background: $fp-amber; }
}
} }
// Step labels row below the stepper // Step labels row below the stepper