46d19fd581
- Move the call-type select handler into onCallType() — OWL cannot compile a multi-statement inline t-on body (was a render-breaking crash on mount). - Replace color-mix() inside border shorthands with var(--sb-border) (Odoo-19 SCSS drops color-mix in a border shorthand). - Technician placeholder option value '' (not 'false') so the required-tech guard isn't bypassed. - Remove dead setTiming(); null-coalesce the refdata onWillStart load. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
284 lines
9.6 KiB
SCSS
284 lines
9.6 KiB
SCSS
// Fusion Claims — Service Booking wizard component styles.
|
|
//
|
|
// Ported from the mockup (technician-booking-wizard.html) scoped under
|
|
// .o_service_booking. The mockup's CSS custom properties (--page, --card, …)
|
|
// are renamed mechanically to the --sb-* tokens emitted by
|
|
// _service_booking_tokens.scss (which MUST load first in the bundle). The
|
|
// manual .theme-btn dark toggle is dropped — Odoo serves the dark bundle.
|
|
//
|
|
// Surfaces use the explicit-hex tokens (three-layer contrast: page -> card ->
|
|
// field), never var(--bs-*). color-mix() is used only in standalone
|
|
// background / box-shadow properties — never inside a border shorthand (the
|
|
// Odoo 19 SCSS compiler silently drops color-mix in border shorthands).
|
|
|
|
.o_service_booking {
|
|
background: var(--sb-page);
|
|
color: var(--sb-text);
|
|
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
|
|
font-size: 14px;
|
|
min-height: 100%;
|
|
overflow: auto;
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
.wrap { max-width: 1000px; margin: 24px auto; padding: 0 18px; }
|
|
|
|
.dialog {
|
|
background: var(--sb-panel);
|
|
border: 1px solid var(--sb-border);
|
|
border-radius: 16px;
|
|
box-shadow: 0 12px 40px rgba(16, 24, 40, .16);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.topbar {
|
|
background: linear-gradient(135deg, #5ba848 0%, #3a8fb7 60%, #2e7aad 100%);
|
|
padding: 17px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #fff;
|
|
|
|
h1 { font-size: 19px; font-weight: 700; margin: 0; }
|
|
.sub { font-size: 12.5px; opacity: .9; margin-top: 2px; }
|
|
}
|
|
|
|
.stepper {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 11px 24px;
|
|
background: var(--sb-panel);
|
|
border-bottom: 1px solid var(--sb-border);
|
|
flex-wrap: wrap;
|
|
}
|
|
.step {
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--sb-faint);
|
|
padding: 5px 13px;
|
|
border-radius: 20px;
|
|
background: var(--sb-chip);
|
|
}
|
|
.step.active { color: #fff; background: linear-gradient(135deg, #3a8fb7, #2e7aad); }
|
|
.step.draft { margin-left: auto; color: var(--sb-money); background: var(--sb-money-soft); }
|
|
|
|
.body { padding: 20px 24px 6px; }
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
@media (max-width: 780px) { .grid { grid-template-columns: 1fr; } }
|
|
|
|
.card {
|
|
background: var(--sb-card);
|
|
border: 1px solid var(--sb-border);
|
|
border-radius: 13px;
|
|
padding: 16px 17px;
|
|
box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
|
|
}
|
|
.card.span2 { grid-column: 1 / -1; }
|
|
.card h3 {
|
|
margin: 0 0 13px;
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
letter-spacing: .7px;
|
|
text-transform: uppercase;
|
|
color: var(--sb-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.card h3 .dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #5ba848, #2e7aad); }
|
|
.card h3 .tag {
|
|
margin-left: auto;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--sb-money);
|
|
background: var(--sb-money-soft);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
letter-spacing: .3px;
|
|
}
|
|
|
|
label.fl { display: block; font-size: 12px; font-weight: 600; color: var(--sb-muted); margin: 0 0 5px; }
|
|
.row { margin-bottom: 12px; }
|
|
.row:last-child { margin-bottom: 0; }
|
|
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
|
|
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
|
|
|
|
input.f, select.f, textarea.f {
|
|
width: 100%;
|
|
background: var(--sb-field);
|
|
color: var(--sb-text);
|
|
border: 1px solid var(--sb-field-border);
|
|
border-radius: 9px;
|
|
padding: 9px 11px;
|
|
font-size: 13.5px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
transition: border .15s, box-shadow .15s;
|
|
}
|
|
input.f:focus, select.f:focus, textarea.f:focus {
|
|
border-color: var(--sb-field-focus);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-field-focus) 22%, transparent);
|
|
}
|
|
textarea.f { resize: vertical; min-height: 56px; }
|
|
|
|
.hint { font-size: 11px; color: var(--sb-faint); margin-top: 5px; }
|
|
.with-icon { position: relative; }
|
|
.with-icon .pin { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #5ba848; font-size: 16px; }
|
|
|
|
.seg {
|
|
display: inline-flex;
|
|
background: var(--sb-chip);
|
|
border: 1px solid var(--sb-border);
|
|
border-radius: 9px;
|
|
padding: 3px;
|
|
gap: 3px;
|
|
}
|
|
.seg button {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--sb-muted);
|
|
font-weight: 600;
|
|
font-size: 12.5px;
|
|
padding: 6px 14px;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
.seg button.on { background: var(--sb-card); color: var(--sb-accent); box-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06); }
|
|
.seg.full { display: flex; }
|
|
.seg.full button { flex: 1; }
|
|
|
|
.timepick { display: inline-flex; align-items: stretch; gap: 7px; }
|
|
.timepick select.f { width: auto; padding-right: 24px; }
|
|
.ampm { display: inline-flex; background: var(--sb-chip); border: 1px solid var(--sb-border); border-radius: 9px; padding: 3px; }
|
|
.ampm button {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--sb-muted);
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
.ampm button.on { background: var(--sb-accent); color: #fff; }
|
|
.endtime { font-size: 13px; color: var(--sb-muted); margin-top: 7px; }
|
|
.endtime b { color: var(--sb-text); }
|
|
|
|
.avail {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--sb-ok);
|
|
background: color-mix(in srgb, var(--sb-ok) 14%, transparent);
|
|
padding: 3px 9px;
|
|
border-radius: 20px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.opt {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--sb-border);
|
|
}
|
|
.opt:last-child { border-bottom: none; }
|
|
.opt .lab { font-size: 13.5px; font-weight: 500; }
|
|
.opt .lab small { display: block; color: var(--sb-faint); font-weight: 400; font-size: 11.5px; }
|
|
|
|
.sw {
|
|
width: 42px;
|
|
height: 24px;
|
|
border-radius: 20px;
|
|
background: var(--sb-field-border);
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: background .15s;
|
|
flex-shrink: 0;
|
|
}
|
|
.sw::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
top: 3px;
|
|
left: 3px;
|
|
transition: left .15s;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
|
|
}
|
|
.sw.on { background: var(--sb-ok); }
|
|
.sw.on::after { left: 21px; }
|
|
|
|
// fee readout inside Service & Pricing
|
|
.feeline {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--sb-money-soft);
|
|
border: 1px solid var(--sb-border);
|
|
border-radius: 10px;
|
|
padding: 11px 14px;
|
|
margin-top: 4px;
|
|
}
|
|
.feeline .lbl { font-size: 12.5px; font-weight: 600; color: var(--sb-text); }
|
|
.feeline .lbl small { display: block; color: var(--sb-faint); font-weight: 400; font-size: 11px; }
|
|
.feeline .amt { font-size: 20px; font-weight: 800; color: var(--sb-money); }
|
|
|
|
// ESTIMATE strip
|
|
.estimate {
|
|
grid-column: 1 / -1;
|
|
background: var(--sb-money-soft);
|
|
border: 1px solid var(--sb-border);
|
|
border-left: 5px solid var(--sb-money);
|
|
border-radius: 13px;
|
|
padding: 15px 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.estimate .breakdown { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; }
|
|
.estimate .bk .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--sb-faint); }
|
|
.estimate .bk .v { font-size: 15px; font-weight: 700; margin-top: 1px; }
|
|
.estimate .total { text-align: right; }
|
|
.estimate .total .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--sb-money); font-weight: 700; }
|
|
.estimate .total .v { font-size: 27px; font-weight: 800; color: var(--sb-money); line-height: 1; }
|
|
.estimate .total .note { font-size: 11px; color: var(--sb-faint); margin-top: 3px; }
|
|
|
|
.foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 11px;
|
|
padding: 16px 24px;
|
|
background: var(--sb-panel);
|
|
border-top: 1px solid var(--sb-border);
|
|
}
|
|
.foot .spacer { margin-right: auto; font-size: 12px; color: var(--sb-faint); }
|
|
|
|
.btn {
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 11px 18px;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
.btn.ghost { background: transparent; color: var(--sb-muted); border: 1px solid var(--sb-border); }
|
|
.btn.primary {
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #5ba848, #2e7aad);
|
|
box-shadow: 0 3px 10px color-mix(in srgb, #2e7aad 40%, transparent);
|
|
}
|
|
.btn[disabled] { opacity: .6; cursor: not-allowed; }
|
|
|
|
.hide { display: none !important; }
|
|
}
|