admin/Odoo-Modules
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(portal): numbered horizontal stepper with state classes

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsinghpal
2026-05-17 02:40:04 -04:00
parent b3a86cd4b9
commit a6ff3054bc
1 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss Normal file
View File

@@ -0,0 +1,88 @@
// ============================================================================
// Fusion Plating — Portal · Numbered stepper
// Horizontal circle+line stepper for job progress on dashboard cards.
// 5 steps fixed (Received / Inspected / Plating / QC / Ship) by default;
// macro accepts variable step count.
// ============================================================================
.o_fp_stepper {
display: flex;
align-items: center;
margin-bottom: .35rem;
.o_fp_step_circle {
width: 24px;
height: 24px;
border-radius: $fp-radius-pill;
display: flex;
align-items: center;
justify-content: center;
font-family: $fp-font;
font-size: .65rem;
font-weight: 700;
flex-shrink: 0;
background: $fp-card-bg;
border: 1.5px solid $fp-card-border;
color: $fp-muted-light;
}
.o_fp_step_done {
background: $fp-gradient-primary;
color: #fff;
border: none;
box-shadow: 0 1px 2px rgba(26, 107, 89, .25);
}
.o_fp_step_active {
background: $fp-card-bg;
color: $fp-teal;
border: 2.5px solid $fp-teal;
box-shadow: $fp-glow-ring-teal;
}
.o_fp_step_active_warn {
// Used when the active step is in QC (amber)
background: $fp-card-bg;
color: $fp-amber-text;
border: 2.5px solid $fp-amber;
box-shadow: $fp-glow-ring-amber;
}
.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
.o_fp_step_labels {
display: flex;
justify-content: space-between;
font-size: .68rem;
.o_fp_step_label {
text-align: center;
flex: 1;
.o_fp_step_label_title {
color: $fp-muted-light;
font-weight: 500;
}
.o_fp_step_label_time {
color: $fp-disabled;
font-size: .6rem;
}
&.o_fp_step_label_done {
.o_fp_step_label_title { color: $fp-text-body; }
.o_fp_step_label_time { color: $fp-muted-light; }
}
&.o_fp_step_label_active {
.o_fp_step_label_title { color: $fp-teal; font-weight: 700; }
.o_fp_step_label_time { color: $fp-teal; }
}
&.o_fp_step_label_active_warn {
.o_fp_step_label_title { color: $fp-amber-text; font-weight: 700; }
.o_fp_step_label_time { color: $fp-amber-text; }
}
}
}