feat(sub12b): shared SCSS for Move/Rack/Timer dialogs (Task 14)
3-column grid layout for field rows (label / input / hint). Compliance prompts + Blockers blocks have their own backgrounds. Soft blockers amber + left border, hard blockers red + left border — matches the spec's protocol. Token pattern + dark-mode @if branch (CLAUDE.md rule: Odoo 19 doesn't flip dark mode via runtime DOM class; we branch at SCSS compile time on $o-webclient-color-scheme). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,131 @@
|
||||
// Sub 12b — shared SCSS for Move Parts / Move Rack / Rack Parts /
|
||||
// Stop Timer dialogs. Tokens follow the existing fp_shopfloor pattern
|
||||
// with a dark-mode SCSS @if branch (CLAUDE.md rule for Odoo 19 dark
|
||||
// mode — runtime DOM class flips do not work in 19; we branch at SCSS
|
||||
// compile time on $o-webclient-color-scheme).
|
||||
|
||||
$o-webclient-color-scheme: bright !default;
|
||||
|
||||
$_fp_md_card_hex: #ffffff;
|
||||
$_fp_md_border_hex: #d8dadd;
|
||||
$_fp_md_accent_hex: #2e7d6b;
|
||||
$_fp_md_muted_hex: #6b7280;
|
||||
$_fp_md_warn_hex: #fff3cd;
|
||||
$_fp_md_danger_hex: #f8d7da;
|
||||
$_fp_md_page_hex: #f3f4f6;
|
||||
|
||||
@if $o-webclient-color-scheme == dark {
|
||||
$_fp_md_card_hex: #22262d !global;
|
||||
$_fp_md_border_hex: #3a3f47 !global;
|
||||
$_fp_md_warn_hex: #4a3a1a !global;
|
||||
$_fp_md_danger_hex: #4a1f1f !global;
|
||||
$_fp_md_page_hex: #1a1d21 !global;
|
||||
}
|
||||
|
||||
$fp-md-card: var(--fp-card-bg, #{$_fp_md_card_hex});
|
||||
$fp-md-border: var(--fp-border-color, #{$_fp_md_border_hex});
|
||||
$fp-md-accent: var(--fp-accent, #{$_fp_md_accent_hex});
|
||||
$fp-md-muted: var(--fp-muted, #{$_fp_md_muted_hex});
|
||||
$fp-md-warn: var(--fp-warn-bg, #{$_fp_md_warn_hex});
|
||||
$fp-md-danger: var(--fp-danger-bg, #{$_fp_md_danger_hex});
|
||||
$fp-md-page: var(--fp-page-bg, #{$_fp_md_page_hex});
|
||||
|
||||
.o_fp_move_dialog,
|
||||
.o_fp_rack_dialog,
|
||||
.o_fp_timer_dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .75rem;
|
||||
|
||||
.o_fp_move_field {
|
||||
display: grid;
|
||||
grid-template-columns: 9rem 1fr auto;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
padding: .375rem .5rem;
|
||||
border: 1px solid $fp-md-border;
|
||||
border-radius: 4px;
|
||||
background: $fp-md-card;
|
||||
font-size: .9rem;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
textarea { min-height: 4rem; }
|
||||
}
|
||||
|
||||
.o_fp_compliance_prompts,
|
||||
.o_fp_blockers {
|
||||
margin-top: .5rem;
|
||||
padding: .75rem;
|
||||
border: 1px solid $fp-md-border;
|
||||
border-radius: 4px;
|
||||
background: $fp-md-page;
|
||||
|
||||
h5 {
|
||||
margin: 0 0 .5rem 0;
|
||||
color: $fp-md-accent;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_blocker_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
margin-bottom: .25rem;
|
||||
border-radius: 4px;
|
||||
|
||||
&.o_fp_blocker_soft {
|
||||
background: $fp-md-warn;
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
&.o_fp_blocker_hard {
|
||||
background: $fp-md-danger;
|
||||
border-left: 4px solid #dc2626;
|
||||
}
|
||||
|
||||
.o_fp_blocker_icon { font-size: 1.25rem; }
|
||||
.o_fp_blocker_msg { flex: 1; font-size: .9rem; }
|
||||
}
|
||||
|
||||
.o_fp_rack_parts_list {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
li { font-size: .9rem; line-height: 1.6; }
|
||||
}
|
||||
|
||||
.o_fp_billed_inputs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
input { width: 4rem; }
|
||||
}
|
||||
}
|
||||
|
||||
.o_fp_rack_tag_chip {
|
||||
display: inline-block;
|
||||
padding: .125rem .5rem;
|
||||
margin-right: .25rem;
|
||||
border-radius: 999px;
|
||||
font-size: .75rem;
|
||||
background: $fp-md-card;
|
||||
border: 1px solid $fp-md-border;
|
||||
}
|
||||
|
||||
.o_fp_timer_summary {
|
||||
padding: .5rem;
|
||||
background: $fp-md-page;
|
||||
border-radius: 4px;
|
||||
color: $fp-md-muted;
|
||||
font-size: .875rem;
|
||||
border-left: 4px solid $fp-md-accent;
|
||||
}
|
||||
Reference in New Issue
Block a user