This commit is contained in:
gsinghpal
2026-04-26 15:05:17 -04:00
parent 160198edb1
commit d9f58b9851
110 changed files with 6210 additions and 1182 deletions

View File

@@ -0,0 +1,518 @@
// =============================================================================
// Fusion Plating — Mobile QC Checklist styles
// Copyright 2026 Nexa Systems Inc. · License OPL-1
//
// Built on the shop-floor design system tokens (_fp_shopfloor_tokens.scss).
// Same language as Tablet Station / Plant Overview: no borders, shadow-
// based elevation, 48 px touch targets, three-layer contrast.
// =============================================================================
.o_fp_qc {
background-color: $fp-page;
color: $fp-ink;
min-height: 100vh;
padding: $fp-space-4;
font-family: $fp-font-stack;
font-size: $fp-text-base;
// ---------- State ----------
.o_fp_qc_state_loading,
.o_fp_qc_state_error {
max-width: 480px;
margin: $fp-space-10 auto;
@include fp-card($fp-elev-2);
padding: $fp-space-7;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: $fp-space-3;
.fa {
font-size: $fp-text-2xl;
color: $fp-ink-mute;
}
p { color: $fp-ink-soft; margin: 0; }
}
.o_fp_qc_state_error .fa { color: $fp-bad; }
// ---------- Header ----------
.o_fp_qc_header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: $fp-space-4;
margin-bottom: $fp-space-5;
.o_fp_qc_header_left {
display: flex;
gap: $fp-space-3;
align-items: flex-start;
flex: 1;
min-width: 0;
}
.o_fp_qc_back {
width: $fp-touch-min;
height: $fp-touch-min;
border-radius: $fp-radius-md;
background-color: $fp-card;
box-shadow: $fp-elev-1;
border: none;
color: $fp-ink-soft;
font-size: $fp-text-md;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow $fp-dur $fp-ease;
@include fp-hover-only {
&:hover { box-shadow: $fp-elev-2; }
}
}
.o_fp_qc_title_block {
min-width: 0;
flex: 1;
}
.o_fp_qc_breadcrumb {
color: $fp-ink-mute;
font-size: $fp-text-sm;
margin-bottom: $fp-space-1;
}
.o_fp_qc_title {
font-size: $fp-text-2xl;
font-weight: $fp-weight-semibold;
margin: 0 0 $fp-space-1 0;
color: $fp-ink;
line-height: 1.2;
}
.o_fp_qc_sub {
color: $fp-ink-mute;
font-size: $fp-text-sm;
}
.o_fp_qc_sep {
margin: 0 $fp-space-2;
color: $fp-ink-faint;
}
.o_fp_qc_ref { font-weight: $fp-weight-medium; }
}
.o_fp_qc_state_chip {
padding: $fp-space-2 $fp-space-4;
border-radius: $fp-radius-pill;
font-size: $fp-text-sm;
font-weight: $fp-weight-semibold;
letter-spacing: 0.02em;
white-space: nowrap;
&.o_fp_qc_chip_draft { @include fp-pill('--bs-info'); }
&.o_fp_qc_chip_in_progress { @include fp-pill('--bs-warning'); }
&.o_fp_qc_chip_passed { @include fp-pill('--bs-success'); }
&.o_fp_qc_chip_failed { @include fp-pill('--bs-danger'); }
&.o_fp_qc_chip_rework { @include fp-pill('--bs-secondary'); }
}
// ---------- Progress card ----------
.o_fp_qc_progress_card {
@include fp-card($fp-elev-2);
padding: $fp-space-5 $fp-space-6;
margin-bottom: $fp-space-5;
}
.o_fp_qc_progress_numbers {
display: flex;
justify-content: space-between;
align-items: center;
gap: $fp-space-6;
flex-wrap: wrap;
margin-bottom: $fp-space-4;
}
.o_fp_qc_progress_big {
font-size: $fp-text-3xl;
font-weight: $fp-weight-bold;
color: $fp-accent;
line-height: 1;
}
.o_fp_qc_progress_break {
display: flex;
gap: $fp-space-6;
flex-wrap: wrap;
}
.o_fp_qc_counter {
display: flex;
flex-direction: column;
align-items: flex-end;
.o_fp_qc_counter_n {
font-size: $fp-text-xl;
font-weight: $fp-weight-bold;
line-height: 1.1;
}
.o_fp_qc_counter_l {
font-size: $fp-text-xs;
color: $fp-ink-mute;
text-transform: uppercase;
letter-spacing: 0.05em;
}
&.o_fp_qc_counter_pass .o_fp_qc_counter_n { color: $fp-ok; }
&.o_fp_qc_counter_fail .o_fp_qc_counter_n { color: $fp-bad; }
&.o_fp_qc_counter_pending .o_fp_qc_counter_n { color: $fp-ink-mute; }
}
.o_fp_qc_progress_bar {
height: 6px;
background-color: $fp-card-soft;
border-radius: $fp-radius-pill;
overflow: hidden;
}
.o_fp_qc_progress_fill {
height: 100%;
background-color: $fp-accent;
border-radius: $fp-radius-pill;
transition: width $fp-dur $fp-ease;
}
// ---------- Thickness card ----------
.o_fp_qc_thickness_card {
@include fp-card($fp-elev-1);
padding: $fp-space-4 $fp-space-5;
margin-bottom: $fp-space-5;
}
.o_fp_qc_thickness_head {
display: flex;
justify-content: space-between;
align-items: center;
gap: $fp-space-4;
flex-wrap: wrap;
}
.o_fp_qc_thickness_title {
font-size: $fp-text-md;
font-weight: $fp-weight-semibold;
.fa { color: $fp-accent; margin-right: $fp-space-2; }
}
.o_fp_qc_thickness_sub {
font-size: $fp-text-sm;
color: $fp-ink-mute;
margin-top: $fp-space-1;
}
// ---------- Checklist ----------
.o_fp_qc_list {
display: flex;
flex-direction: column;
gap: $fp-space-3;
margin-bottom: $fp-space-6;
}
.o_fp_qc_item {
@include fp-card($fp-elev-1);
overflow: hidden;
transition: box-shadow $fp-dur $fp-ease,
transform $fp-dur $fp-ease;
&.o_fp_qc_item_pass {
// Left accent strip — subtle indicator that doesn't scream at you
background:
linear-gradient(to right, $fp-ok 4px, transparent 4px) $fp-card;
}
&.o_fp_qc_item_fail {
background:
linear-gradient(to right, $fp-bad 4px, transparent 4px) $fp-card;
}
&.o_fp_qc_item_na {
background:
linear-gradient(to right, $fp-ink-faint 4px, transparent 4px) $fp-card;
}
&.o_fp_qc_item_open { box-shadow: $fp-elev-2; }
}
.o_fp_qc_item_row {
display: flex;
align-items: center;
gap: $fp-space-4;
padding: $fp-space-4 $fp-space-5;
min-height: $fp-touch-min + $fp-space-3;
cursor: pointer;
@include fp-hover-only {
&:hover { background-color: color-mix(in srgb, #{$fp-accent} 4%, transparent); }
}
}
.o_fp_qc_item_icon {
width: 40px;
height: 40px;
border-radius: $fp-radius-md;
background-color: $fp-card-soft;
display: flex;
align-items: center;
justify-content: center;
color: $fp-ink-soft;
font-size: $fp-text-md;
flex-shrink: 0;
}
.o_fp_qc_item_body {
flex: 1;
min-width: 0;
}
.o_fp_qc_item_name {
font-size: $fp-text-md;
font-weight: $fp-weight-medium;
color: $fp-ink;
line-height: 1.3;
}
.o_fp_qc_item_optional {
margin-left: $fp-space-2;
font-size: $fp-text-xs;
color: $fp-ink-mute;
font-weight: normal;
}
.o_fp_qc_item_meta {
display: flex;
gap: $fp-space-3;
align-items: center;
margin-top: $fp-space-1;
flex-wrap: wrap;
}
.o_fp_qc_item_value {
font-size: $fp-text-sm;
color: $fp-ink-soft;
font-variant-numeric: tabular-nums;
}
.o_fp_qc_item_photo_ind {
color: $fp-accent;
font-size: $fp-text-sm;
}
.o_fp_qc_badge {
display: inline-block;
padding: 2px $fp-space-2;
font-size: $fp-text-xs;
font-weight: $fp-weight-semibold;
border-radius: $fp-radius-sm;
letter-spacing: 0.04em;
}
.o_fp_qc_badge_pass { @include fp-pill('--bs-success'); }
.o_fp_qc_badge_fail { @include fp-pill('--bs-danger'); }
.o_fp_qc_badge_na { @include fp-pill('--bs-secondary'); }
.o_fp_qc_badge_pending { @include fp-pill('--bs-info'); }
.o_fp_qc_chevron {
color: $fp-ink-mute;
font-size: $fp-text-sm;
flex-shrink: 0;
}
// ---------- Expanded detail ----------
.o_fp_qc_item_detail {
padding: $fp-space-4 $fp-space-5 $fp-space-5;
border-top: 1px solid color-mix(in srgb, #{$fp-border} 60%, transparent);
display: flex;
flex-direction: column;
gap: $fp-space-4;
}
.o_fp_qc_guidance {
background-color: $fp-card-soft;
padding: $fp-space-3 $fp-space-4;
border-radius: $fp-radius-md;
color: $fp-ink-soft;
font-size: $fp-text-sm;
line-height: 1.5;
white-space: pre-wrap;
}
.o_fp_qc_value_row,
.o_fp_qc_notes_row,
.o_fp_qc_photo_row {
display: flex;
flex-direction: column;
gap: $fp-space-2;
label {
font-size: $fp-text-xs;
font-weight: $fp-weight-semibold;
text-transform: uppercase;
letter-spacing: 0.05em;
color: $fp-ink-mute;
}
}
.o_fp_qc_value_input {
display: flex;
align-items: center;
gap: $fp-space-3;
input {
flex: 1;
height: $fp-touch-min;
padding: 0 $fp-space-4;
font-size: $fp-text-lg;
font-variant-numeric: tabular-nums;
background-color: $fp-card-soft;
border: none;
border-radius: $fp-radius-md;
color: $fp-ink;
&:focus { @include fp-focus-ring; }
}
.o_fp_qc_uom {
color: $fp-ink-mute;
font-size: $fp-text-md;
min-width: 40px;
}
}
.o_fp_qc_range {
font-size: $fp-text-xs;
color: $fp-ink-mute;
}
.o_fp_qc_notes_row textarea {
width: 100%;
padding: $fp-space-3 $fp-space-4;
font-size: $fp-text-base;
background-color: $fp-card-soft;
border: none;
border-radius: $fp-radius-md;
color: $fp-ink;
font-family: inherit;
resize: vertical;
&:focus { @include fp-focus-ring; }
}
.o_fp_qc_actions_row {
display: flex;
gap: $fp-space-3;
flex-wrap: wrap;
}
// ---------- Buttons ----------
.o_fp_qc_btn {
display: inline-flex;
align-items: center;
gap: $fp-space-2;
min-height: $fp-touch-min;
padding: 0 $fp-space-5;
font-size: $fp-text-md;
font-weight: $fp-weight-semibold;
border: none;
border-radius: $fp-radius-md;
cursor: pointer;
transition: transform $fp-dur-fast $fp-ease,
box-shadow $fp-dur $fp-ease,
background-color $fp-dur $fp-ease;
&:active:not([disabled]) { transform: scale(0.97); }
&[disabled] { opacity: 0.5; cursor: not-allowed; }
.fa { font-size: $fp-text-md; }
}
.o_fp_qc_btn_primary {
background-color: $fp-accent;
color: white;
box-shadow: $fp-elev-1;
@include fp-hover-only {
&:hover:not([disabled]) { box-shadow: $fp-elev-2; }
}
}
.o_fp_qc_btn_pass,
.o_fp_qc_btn_pass_lg {
background-color: $fp-ok;
color: white;
box-shadow: $fp-elev-1;
@include fp-hover-only {
&:hover:not([disabled]) { box-shadow: $fp-elev-2; }
}
}
.o_fp_qc_btn_fail,
.o_fp_qc_btn_fail_lg {
background-color: $fp-bad;
color: white;
box-shadow: $fp-elev-1;
@include fp-hover-only {
&:hover:not([disabled]) { box-shadow: $fp-elev-2; }
}
}
.o_fp_qc_btn_ghost,
.o_fp_qc_btn_ghost_lg {
background-color: $fp-card-soft;
color: $fp-ink-soft;
@include fp-hover-only {
&:hover:not([disabled]) {
background-color: color-mix(in srgb, #{$fp-ink-soft} 10%, $fp-card-soft);
}
}
}
.o_fp_qc_btn_pass_lg,
.o_fp_qc_btn_fail_lg,
.o_fp_qc_btn_ghost_lg {
flex: 1;
min-height: 60px;
font-size: $fp-text-lg;
justify-content: center;
}
// ---------- Sign-off footer ----------
.o_fp_qc_footer {
position: sticky;
bottom: $fp-space-4;
background: color-mix(in srgb, $fp-page 85%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: $fp-space-4;
border-radius: $fp-radius-lg;
box-shadow: $fp-elev-2;
display: flex;
gap: $fp-space-3;
flex-wrap: wrap;
}
// ---------- Responsive ----------
@media (max-width: 640px) {
padding: $fp-space-3;
.o_fp_qc_header .o_fp_qc_title { font-size: $fp-text-xl; }
.o_fp_qc_progress_big { font-size: $fp-text-2xl; }
.o_fp_qc_footer {
flex-direction: column;
.o_fp_qc_btn_pass_lg,
.o_fp_qc_btn_fail_lg,
.o_fp_qc_btn_ghost_lg { width: 100%; }
}
}
}