3440e4b7c6
Aggressive sheet override: flex-basis 100%%, !important on width and max-width to beat parent flex/media-query constraints. Also overrides the o_form_sheet_bg wrapper. Layout at xl (>=1200px) now splits into 3 columns: - Col 1 (3/12): Your Activities + Bottlenecks - Col 2 (5/12): ADP Pre + ADP Post + MOD - Col 3 (4/12): Aging + Other Funders + Recent ADP Exports Falls back to 5/7 on lg (Col 3 wraps below as full row) and stacked single column on md and below. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
283 lines
8.6 KiB
SCSS
283 lines
8.6 KiB
SCSS
// =============================================================================
|
|
// Fusion Claims Dashboard — Layout & Section Styles
|
|
// Consumes tokens from _fc_dashboard_tokens.scss (must load FIRST in bundle).
|
|
// =============================================================================
|
|
|
|
// =============================================================================
|
|
// Force full-width sheet on the dashboard. The sheet defaults to ~1100-1300px
|
|
// max-width via `flex: 1 1 <fixed>` plus a CSS max-width. We override both
|
|
// at every possible nesting level + use !important to beat media-query rules.
|
|
// =============================================================================
|
|
|
|
// 1. The sheet itself
|
|
.o_fc_dashboard_sheet,
|
|
.o_form_sheet.o_fc_dashboard_sheet,
|
|
.o_form_view .o_fc_dashboard_sheet,
|
|
.o_form_renderer .o_fc_dashboard_sheet {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
flex: 1 1 100% !important;
|
|
flex-basis: 100% !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
// 2. The sheet-bg wrapper around the sheet
|
|
.o_form_view:has(.o_fc_dashboard_sheet) .o_form_sheet_bg,
|
|
.o_form_renderer:has(.o_fc_dashboard_sheet) .o_form_sheet_bg,
|
|
.o_form_sheet_bg:has(> .o_fc_dashboard_sheet) {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
flex: 1 1 100% !important;
|
|
}
|
|
|
|
// 3. The form view itself
|
|
.o_form_view.o_fc_dashboard,
|
|
.o_form_view:has(.o_fc_dashboard_sheet) {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
// 4. Legacy fallback (older Odoo selector pattern)
|
|
.o_fc_dashboard .o_form_sheet {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
flex: 1 1 100% !important;
|
|
}
|
|
|
|
.o_fc_dashboard {
|
|
// Re-export tokens as CSS custom properties for devtools inspection
|
|
--fc-page-bg: #{$_fc-page-bg};
|
|
--fc-card-bg: #{$_fc-card-bg};
|
|
--fc-card-border: #{$_fc-card-border};
|
|
--fc-text: #{$_fc-text};
|
|
--fc-text-muted: #{$_fc-text-muted};
|
|
--fc-banner-from: #{$_fc-banner-from};
|
|
--fc-banner-to: #{$_fc-banner-to};
|
|
--fc-banner-border: #{$_fc-banner-border};
|
|
--fc-banner-text: #{$_fc-banner-text};
|
|
--fc-deadline-text: #{$_fc-deadline-text};
|
|
--fc-kpi-bg: #{$_fc-kpi-bg};
|
|
--fc-kpi-border: #{$_fc-kpi-border};
|
|
--fc-kpi-num: #{$_fc-kpi-num};
|
|
--fc-action-bg: #{$_fc-action-bg};
|
|
--fc-action-border: #{$_fc-action-border};
|
|
--fc-action-text: #{$_fc-action-text};
|
|
--fc-tile-bg: #{$_fc-tile-bg};
|
|
--fc-tile-border: #{$_fc-tile-border};
|
|
--fc-tile-num: #{$_fc-tile-num};
|
|
--fc-urgent-bg: #{$_fc-urgent-bg};
|
|
--fc-urgent-border: #{$_fc-urgent-border};
|
|
--fc-urgent-num: #{$_fc-urgent-num};
|
|
--fc-urgent-text: #{$_fc-urgent-text};
|
|
--fc-activity-bg: #{$_fc-activity-bg};
|
|
--fc-activity-border: #{$_fc-activity-border};
|
|
--fc-bottleneck-bg: #{$_fc-bottleneck-bg};
|
|
--fc-bottleneck-border: #{$_fc-bottleneck-border};
|
|
|
|
background: var(--fc-page-bg);
|
|
color: $_fc-text;
|
|
|
|
.o_fc_banner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: linear-gradient(90deg, var(--fc-banner-from), var(--fc-banner-to));
|
|
border: 1px solid var(--fc-banner-border);
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
font-weight: 600;
|
|
color: var(--fc-banner-text);
|
|
}
|
|
.o_fc_banner__deadline { font-weight: 700; }
|
|
|
|
.o_fc_kpi {
|
|
background: var(--fc-kpi-bg);
|
|
border: 1px solid var(--fc-kpi-border);
|
|
border-radius: 8px;
|
|
padding: 14px 10px;
|
|
text-align: center;
|
|
transition: transform 0.15s ease;
|
|
|
|
&:hover { transform: translateY(-2px); }
|
|
}
|
|
.o_fc_kpi__num {
|
|
display: block;
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: var(--fc-kpi-num);
|
|
}
|
|
.o_fc_kpi__lbl {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--fc-text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
// Secondary KPI variant — smaller, denser. Used for "This Month" and
|
|
// "Pipeline by stage" tile strips.
|
|
.o_fc_kpi--secondary {
|
|
padding: 10px 6px;
|
|
.o_fc_kpi__num { font-size: 1.15rem; }
|
|
.o_fc_kpi__lbl { font-size: 0.68rem; }
|
|
}
|
|
|
|
.o_fc_actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.o_fc_pill {
|
|
background: var(--fc-action-bg);
|
|
border: 1px solid var(--fc-action-border);
|
|
color: var(--fc-action-text);
|
|
border-radius: 16px;
|
|
padding: 5px 12px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
|
|
&:hover { background: var(--fc-action-border); }
|
|
}
|
|
|
|
.o_fc_section {
|
|
background: var(--fc-card-bg);
|
|
border: 1px solid var(--fc-card-border);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.o_fc_h6 {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
color: var(--fc-text);
|
|
}
|
|
.o_fc_tag {
|
|
display: inline-block;
|
|
font-size: 0.65rem;
|
|
padding: 2px 7px;
|
|
border-radius: 4px;
|
|
background: var(--fc-banner-border);
|
|
color: var(--fc-banner-text);
|
|
margin-left: 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.o_fc_tile {
|
|
background: var(--fc-tile-bg);
|
|
border: 1px solid var(--fc-tile-border);
|
|
border-radius: 6px;
|
|
padding: 8px 6px;
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
line-height: 1.3;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
|
|
&:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
.o_fc_tile__num {
|
|
display: block;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: var(--fc-tile-num);
|
|
margin-bottom: 2px;
|
|
}
|
|
.o_fc_tile--urgent {
|
|
background: var(--fc-urgent-bg);
|
|
border-color: var(--fc-urgent-border);
|
|
color: var(--fc-urgent-text);
|
|
|
|
.o_fc_tile__num { color: var(--fc-urgent-num); }
|
|
}
|
|
|
|
.o_fc_activities {
|
|
background: var(--fc-activity-bg);
|
|
border: 1px solid var(--fc-activity-border);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
.o_fc_activity_row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 4px 0;
|
|
border-bottom: 1px dashed var(--fc-card-border);
|
|
font-size: 0.85rem;
|
|
|
|
&:last-child { border-bottom: none; }
|
|
}
|
|
.o_fc_activity_overdue {
|
|
color: var(--fc-urgent-text);
|
|
font-weight: 600;
|
|
}
|
|
.o_fc_activity_deadline { color: var(--fc-text-muted); }
|
|
.o_fc_empty {
|
|
color: var(--fc-text-muted);
|
|
font-style: italic;
|
|
text-align: center;
|
|
padding: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
.o_fc_bottleneck {
|
|
background: var(--fc-bottleneck-bg);
|
|
border: 1px solid var(--fc-bottleneck-border);
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
.o_fc_bottleneck_row {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 4px 0;
|
|
color: var(--fc-text);
|
|
text-decoration: none;
|
|
|
|
&:hover { color: var(--fc-urgent-num); text-decoration: underline; }
|
|
}
|
|
|
|
// Recent ADP Exports list rows
|
|
.o_fc_export_row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
border-bottom: 1px dashed var(--fc-card-border);
|
|
font-size: 0.85rem;
|
|
|
|
&:last-child { border-bottom: none; }
|
|
}
|
|
.o_fc_export_label small {
|
|
color: var(--fc-text-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
.o_fc_export_amount {
|
|
font-weight: 700;
|
|
color: var(--fc-kpi-num);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
// Countdown widget colour levels (driven by OWL state)
|
|
.o_fc_countdown {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
}
|
|
.o_fc_countdown--info { color: var(--fc-banner-text); }
|
|
.o_fc_countdown--warning { color: #d97706; } // amber (intentional fixed hex)
|
|
.o_fc_countdown--danger { color: var(--fc-urgent-num); }
|
|
.o_fc_countdown--muted { color: var(--fc-text-muted); font-style: italic; }
|
|
}
|