411 lines
11 KiB
CSS
411 lines
11 KiB
CSS
/* =================================================================
|
|
Wheelchair Assessment Form — Dark / Light Compatible
|
|
Uses Bootstrap 5.3 CSS custom properties for full theme support.
|
|
No color-mix(), no absolute connectors, no transform overlap.
|
|
================================================================= */
|
|
|
|
.wc-assessment-form {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Step Indicators — always visible, solid colours, no opacity tricks
|
|
----------------------------------------------------------------- */
|
|
.wc-steps {
|
|
border-bottom: 2px solid var(--bs-border-color, #dee2e6);
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.wc-step-indicator {
|
|
cursor: pointer;
|
|
transition: none;
|
|
}
|
|
|
|
.wc-step-number {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: #e9ecef;
|
|
color: #6c757d;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.wc-step-label {
|
|
font-size: 0.72rem;
|
|
color: #6c757d;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* Active step — blue circle */
|
|
.wc-step-indicator.active .wc-step-number {
|
|
background: #0d6efd;
|
|
color: #fff;
|
|
box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.2);
|
|
}
|
|
|
|
.wc-step-indicator.active .wc-step-label {
|
|
color: #0d6efd;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Completed step — green circle with checkmark */
|
|
.wc-step-indicator.completed .wc-step-number {
|
|
background: #198754;
|
|
color: #fff;
|
|
}
|
|
|
|
.wc-step-indicator.completed .wc-step-label {
|
|
color: #198754;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Step panels — NO animation (animation creates stacking context
|
|
that traps z-index, breaking search dropdowns)
|
|
----------------------------------------------------------------- */
|
|
.wc-step {
|
|
position: relative;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Step 1 Section Cards (Client, Equipment)
|
|
----------------------------------------------------------------- */
|
|
.wc-section-card {
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.wc-section-card > .card-header {
|
|
background: var(--bs-tertiary-bg);
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
padding: 0.65rem 1rem;
|
|
border-radius: 0.75rem 0.75rem 0 0;
|
|
}
|
|
|
|
.wc-section-card > .card-header h5 {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--bs-body-color);
|
|
}
|
|
|
|
.wc-section-card > .card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Radio Buttons as Toggles — hardcoded colours, no CSS variables.
|
|
JS sets inline styles as belt-and-suspenders.
|
|
----------------------------------------------------------------- */
|
|
.wc-radio-btn {
|
|
position: relative;
|
|
padding: 0.5rem 1rem;
|
|
border: 2px solid #0d6efd;
|
|
color: #0d6efd;
|
|
background: transparent;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.wc-radio-btn input[type="radio"] {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Primary variant — selected */
|
|
.wc-radio-btn.active {
|
|
background-color: #0d6efd !important;
|
|
color: #fff !important;
|
|
border-color: #0d6efd !important;
|
|
}
|
|
|
|
/* Secondary variant (.btn-outline-secondary) — unselected */
|
|
.wc-radio-btn.btn-outline-secondary {
|
|
border-color: #6c757d;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Secondary variant — selected */
|
|
.wc-radio-btn.btn-outline-secondary.active {
|
|
background-color: #6c757d !important;
|
|
color: #fff !important;
|
|
border-color: #6c757d !important;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Measurement Fields
|
|
----------------------------------------------------------------- */
|
|
.wc-measurement-field {
|
|
background: var(--bs-tertiary-bg);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
border-radius: 0.5rem !important;
|
|
}
|
|
|
|
.wc-measurement-field:focus-within {
|
|
border-color: var(--bs-primary) !important;
|
|
box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
|
|
}
|
|
|
|
.wc-upcharge-badge {
|
|
white-space: nowrap;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Option Cards (seating sections, ADP options, accessories)
|
|
----------------------------------------------------------------- */
|
|
.wc-option-card {
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: 0.5rem !important;
|
|
background: var(--bs-body-bg);
|
|
}
|
|
|
|
.wc-option-card:hover {
|
|
border-color: rgba(var(--bs-primary-rgb), 0.5);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.wc-option-card.border-primary {
|
|
border-width: 2px !important;
|
|
border-color: var(--bs-primary) !important;
|
|
background-color: var(--bs-primary-bg-subtle) !important;
|
|
}
|
|
|
|
.wc-option-card .card-body {
|
|
padding: 0.625rem 0.75rem !important;
|
|
}
|
|
|
|
/* Option card label */
|
|
.wc-option-label {
|
|
font-size: 0.82rem;
|
|
line-height: 1.4;
|
|
flex: 1;
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Search Containers — z-index must beat ALL sibling content below.
|
|
position:relative creates a stacking context so the absolute
|
|
dropdown inside floats above everything that follows.
|
|
----------------------------------------------------------------- */
|
|
.wc-search-container {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Search Dropdowns (client, frame, section product search)
|
|
position:absolute + high z-index within the search container
|
|
----------------------------------------------------------------- */
|
|
.wc-search-results,
|
|
#clientSearchResults,
|
|
#frameSearchResults {
|
|
position: absolute;
|
|
z-index: 1060;
|
|
width: 100%;
|
|
background: var(--bs-body-bg);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
|
|
border-radius: 0 0 0.5rem 0.5rem;
|
|
border: 1px solid var(--bs-border-color);
|
|
border-top: none;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.wc-search-results .list-group-item,
|
|
#clientSearchResults .list-group-item,
|
|
#frameSearchResults .list-group-item {
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.875rem;
|
|
background: var(--bs-body-bg);
|
|
color: var(--bs-body-color);
|
|
border-color: var(--bs-border-color);
|
|
transition: background 0.1s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wc-search-results .list-group-item:hover,
|
|
#clientSearchResults .list-group-item:hover,
|
|
#frameSearchResults .list-group-item:hover {
|
|
background: var(--bs-tertiary-bg);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Selected Frame Card
|
|
----------------------------------------------------------------- */
|
|
#selectedFrame > .card {
|
|
border-left: 4px solid var(--bs-primary);
|
|
background: var(--bs-primary-bg-subtle);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Frame Configurator Panel
|
|
----------------------------------------------------------------- */
|
|
.wc-configurator-panel {
|
|
background: var(--bs-tertiary-bg);
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.wc-configurator-panel .wc-config-title {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--bs-secondary-color);
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
}
|
|
|
|
.wc-configurator-panel .wc-config-title i {
|
|
color: var(--bs-primary);
|
|
}
|
|
|
|
.wc-config-attr-group {
|
|
margin-bottom: 0.625rem;
|
|
}
|
|
|
|
.wc-config-attr-group .wc-config-attr-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--bs-secondary-color);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.wc-config-attr-group .form-select {
|
|
border-color: var(--bs-border-color);
|
|
background-color: var(--bs-body-bg);
|
|
font-size: 0.875rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.wc-config-attr-group .form-select:focus {
|
|
border-color: var(--bs-primary);
|
|
box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
|
|
}
|
|
|
|
.wc-variant-resolved {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.35em 0.65em;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
background: rgba(var(--bs-success-rgb), 0.1);
|
|
color: var(--bs-success);
|
|
border: 1px solid rgba(var(--bs-success-rgb), 0.25);
|
|
border-radius: 2rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Accordion Sections (Step 4 seating)
|
|
----------------------------------------------------------------- */
|
|
.wc-assessment-form .accordion-button:not(.collapsed) {
|
|
background-color: #e8f0fe;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.wc-assessment-form .accordion-item {
|
|
border-radius: 0.5rem !important;
|
|
margin-bottom: 0.75rem;
|
|
border: 1px solid #dee2e6 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wc-assessment-form .accordion-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.wc-assessment-form .accordion-button {
|
|
border-radius: 0.5rem !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wc-assessment-form .accordion-button:not(.collapsed) {
|
|
border-radius: 0.5rem 0.5rem 0 0 !important;
|
|
}
|
|
|
|
.wc-assessment-form .accordion-body {
|
|
position: relative;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Review Table (Step 6)
|
|
----------------------------------------------------------------- */
|
|
#reviewSummary .table th {
|
|
background: var(--bs-tertiary-bg);
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
|
|
/* Review measurements card */
|
|
.wc-step[data-step="6"] .card {
|
|
border-color: var(--bs-border-color);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.wc-step[data-step="6"] .card-header {
|
|
background: var(--bs-tertiary-bg);
|
|
border-bottom-color: var(--bs-border-color);
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Navigation Buttons
|
|
----------------------------------------------------------------- */
|
|
.wc-assessment-form .border-top {
|
|
border-color: var(--bs-border-color) !important;
|
|
}
|
|
|
|
/* -----------------------------------------------------------------
|
|
Responsive
|
|
----------------------------------------------------------------- */
|
|
@media (max-width: 768px) {
|
|
.wc-step-label {
|
|
display: none;
|
|
}
|
|
|
|
.wc-step-number {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.wc-radio-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.wc-option-label {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.wc-configurator-panel {
|
|
padding: 0.75rem;
|
|
}
|
|
}
|