/* ============================================================================= Relite Logistics — Design System : BOOTSTRAP 5 COMPAT (P1 Wave 1) ============================================================================= Keeps Bootstrap-4-era markup working on Bootstrap 5. Link this ONLY from layouts that have been moved to Bootstrap 5. It is not loaded globally: panels still on 4.6.2 already get these classes from their own bootstrap.css, and loading it there would be dead weight. This file is a MIGRATION AID, not a permanent layer. Every rule here exists because Bootstrap 5 deleted a class the views still use. As a panel's views are modernised to native BS5 idioms, delete the corresponding rule; when a panel's list empties, drop the . Deliberately NOT shimmed (converted in the markup instead, because a shim cannot fix behaviour — only appearance): data-toggle/target/dismiss -> data-bs-* (BS5's JS reads the bs-prefixed attributes; a CSS shim is useless) .dropdown-menu-right -> .dropdown-menu-end .mr-N and .ml-N -> .me-N and .ms-N (logical properties, RTL-correct) data-toggle="buttons" -> the plugin is gone; needs .btn-check markup .close CHANGED SIDES IN PHASE 587. It is now shimmed (see the Admin section at the bottom) rather than converted. The Angle panels had ~20 uses so rewriting each `` into a .btn-close was cheap; Admin has 607 across 302 files, and .btn-close carries its own SVG icon, so converting also means deleting the × child of every one. BS4's .close is pure appearance — the dismissing is done by data-bs-dismiss, which IS converted — so a shim buys identical behaviour for none of that risk. NOTE: do not write a star followed by a slash anywhere in these comments — it closes the block early and the CSS after it is silently discarded. That exact typo ("mr-star-slash-dot-ml") killed the .form-group rule below once already. Colour/appearance for .badge-* is NOT here — components.css already styles the badge variants from tokens, so BS5 dropping its own .badge-* colour classes has no effect on this app. ============================================================================= */ /* ----------------------------------------------------------------------------- .form-group — removed in Bootstrap 5 (RFS/utility-driven spacing replaced it). 20 uses across the DirectUser views. Restores BS4's exact bottom margin so the forms keep their rhythm; replace with .mb-3 as views are rewritten. -------------------------------------------------------------------------- */ .form-group { margin-bottom: var(--ds-space-4); } /* Bootstrap 4 zeroed the bottom margin of a .form-group inside an inline form. BS5 dropped .form-inline entirely, but keep the pairing coherent if it appears. */ .form-inline .form-group { margin-bottom: 0; } /* ----------------------------------------------------------------------------- .media / .media-body — removed in Bootstrap 5 (flex utilities replaced them). 47 uses across the Member and MemberAdmin views (Phase 574). Restores BS4's exact behaviour: the object row is a flex container and the body takes the remaining space. Replace with d-flex + flex-grow-1 as views are rewritten. -------------------------------------------------------------------------- */ .media { display: flex; align-items: flex-start; } .media-body { flex: 1; } /* ----------------------------------------------------------------------------- .input-group-append / .input-group-prepend — removed in Bootstrap 5, where addons became direct children of .input-group. 107 uses across the two Angle panels (Phase 574), which is far too many to unwrap by hand for no visual gain, so the wrappers are made transparent instead: they become flex items that pass their own children through. `order: -1` on prepend keeps a leading addon leading, because BS5 no longer reorders it. Corner rounding on the very first/last child is left to Bootstrap; a nested wrapper can leave an inner edge square in rare combinations, which is why this is a migration aid and not a permanent fix. Unwrap them view by view and delete this rule when the count reaches zero. -------------------------------------------------------------------------- */ .input-group > .input-group-append, .input-group > .input-group-prepend { display: flex; align-items: stretch; } .input-group > .input-group-prepend { order: -1; } /* ----------------------------------------------------------------------------- Datetime pickers — calendar/clear icon on the TRAILING edge. The flatpickr date fields render their calendar-toggle and clear buttons as `.input-group-prepend` addons, so the `order: -1` rule above parked them to the LEFT of the field: [📅] [✕] [ 30/07/2026 ]. Modern convention (and every other date field the users compare against) puts the calendar on the RIGHT. Push just the flatpickr addons back after the input. Scoped to `.flatpickr` so genuine leading addons elsewhere (currency ₹, etc.) are untouched. With the visual order now [ input ][📅][✕], it also MATCHES the DOM order (input is authored first), so Bootstrap's first/last-child corner rounding lands correctly with no extra radius rules: the input keeps its rounded left edge and the clear button the rounded right edge. -------------------------------------------------------------------------- */ .flatpickr.input-group > .input-group-prepend, .input-group.flatpickr > .input-group-prepend { order: 1; } /* ============================================================================= ADMIN PANEL (Phase 587) ============================================================================= Added when Admin moved off its own Bootstrap 4.6.2 build. Everything below is appearance-only: Bootstrap 5 deleted the class but the rule it applied is still exactly what the markup wants. Behaviour lives in the data-bs-* conversion, not here. Scale matters for these. The Angle panels were small enough to rewrite view by view; Admin is 698 views, and the automated-conversion traps found in Phases 573 and 581 (a custom .dropdown-menu-right-forced renamed in 26 files, a custom data-target read via .data("target")) all came from sweeping markup at that scale. A shim touches one file and cannot mistake a custom class for a Bootstrap one. ============================================================================= */ /* ----------------------------------------------------------------------------- .close — 607 uses / 302 files. BS4's appearance, reproduced. The markup keeps its × child, which is why this is NOT .btn-close (that draws its own SVG and expects an empty button). Dismissal comes from data-bs-dismiss. -------------------------------------------------------------------------- */ .close { float: right; padding: 0; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; background-color: transparent; border: 0; opacity: .5; } .close:hover { color: #000; text-decoration: none; } .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: .75; } /* Placement inside the two containers that position their own dismiss button. float:right does nothing in .modal-header because BS5 makes it a flex row, so without the auto left margin the x renders tight against the title text instead of at the far edge — which is exactly what it did before this rule. */ .modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; } .alert-dismissible .close { position: absolute; top: 0; right: 0; z-index: 2; padding: .75rem 1.25rem; color: inherit; } /* ----------------------------------------------------------------------------- Text alignment — renamed to .text-start / .text-end in BS5 for RTL. 184 uses. This app is LTR-only (en-IN), so the physical properties are equivalent here. -------------------------------------------------------------------------- */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } /* Floats — renamed to .float-start / .float-end. 8 uses. */ .float-left { float: left !important; } .float-right { float: right !important; } /* ----------------------------------------------------------------------------- .btn-block — removed in BS5 in favour of .d-grid on the parent. 26 uses. SHIMMED ON PURPOSE, not renamed: Phase 580 renamed btn-block to w-100 in the Member panel and silently broke the Quick Actions buttons, because a fixed-height rule carried a :not(.btn-block) exemption that the rename voided. Keeping the class name keeps every such exemption across the app intact. -------------------------------------------------------------------------- */ .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: .5rem; } /* .sr-only — renamed to .visually-hidden in BS5. 12 uses. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* .font-weight-bold — renamed to .fw-bold in BS5. 8 uses. */ .font-weight-bold { font-weight: 700 !important; } /* ----------------------------------------------------------------------------- .custom-file / .custom-file-input / .custom-file-label — the Bootstrap 4 styled file input, deleted in Bootstrap 5 (file inputs are plain .form-control there). Left unshimmed, the native input and the label both show, jammed together ("Choose Excel file" + "Browse") — see the bulk-upload box on Create B2B/B2C Order. This restores the BS4 look: the real input is transparent and overlaid, the label is the visible box with a Browse button. Migration aid; unwrap to a plain per view and delete when unused. -------------------------------------------------------------------------- */ .custom-file { position: relative; display: inline-block; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } .input-group > .custom-file { flex: 1 1 auto; width: 1%; align-items: center; } .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; opacity: 0; cursor: pointer; } .custom-file-label { position: absolute; inset: 0 0 auto 0; z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color, #495057); background-color: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #ced4da); border-radius: var(--bs-border-radius, 0.375rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-file-label::after { position: absolute; inset: 0 0 0 auto; z-index: 3; display: block; padding: 0.375rem 0.75rem; line-height: 1.5; color: var(--bs-body-color, #495057); content: "Browse"; background-color: var(--bs-secondary-bg, #e9ecef); border-left: 1px solid var(--bs-border-color, #ced4da); border-radius: 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0; } /* ----------------------------------------------------------------------------- Bootstrap 5 removed .form-group, whose label carried a small bottom margin. Without it, labels sit flush against their control and the forms look cramped. Restore a little breathing room panel-wide (BS5's own .form-label is untouched; .custom-file-label is nested, not a direct child, so it's unaffected). -------------------------------------------------------------------------- */ .form-group > label, .form-group > .control-label { margin-bottom: 0.35rem; } /* ----------------------------------------------------------------------------- .sr-only — renamed to .visually-hidden in Bootstrap 5. Without it, screen- reader-only text (e.g. the "primary" label some buttons carry) becomes VISIBLE. Restore the visually-hidden behaviour. -------------------------------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ----------------------------------------------------------------------------- Breadcrumbs written as Bootstrap 3 markup: `
  1. `. Bootstrap 3 styled the bare
  2. and generated the "/" divider from it. Every version since has required `.breadcrumb-item` on each crumb, and .breadcrumb itself is now display:flex — so a bare
  3. becomes a flex item with no padding and no ::before, and the crumbs render welded together: "HomeSystem Announcements". That is the whole of the reported breadcrumb fault. 511 views carry the legacy form against 21 on .breadcrumb-item, so this is a shim rather than a sweep. Both `:not(.breadcrumb-item)` guards matter: without them a correctly-marked-up crumb would draw the framework's divider AND this one. Divider and spacing are read from whichever prefix the panel's Bootstrap build uses (Inspinia v5 compiled with `--theme-*`, the others with `--bs-*`), falling back to a literal "/" when neither is declared. -------------------------------------------------------------------------- */ .breadcrumb > li:not(.breadcrumb-item) + li:not(.breadcrumb-item) { padding-inline-start: var(--theme-breadcrumb-item-padding-x, var(--bs-breadcrumb-item-padding-x, 0.5rem)); } .breadcrumb > li:not(.breadcrumb-item) + li:not(.breadcrumb-item)::before { float: inline-start; padding-inline-end: var(--theme-breadcrumb-item-padding-x, var(--bs-breadcrumb-item-padding-x, 0.5rem)); color: var(--theme-breadcrumb-divider-color, var(--bs-breadcrumb-divider-color, #6c757d)); content: var(--theme-breadcrumb-divider, var(--bs-breadcrumb-divider, "/")); } /* ----------------------------------------------------------------------------- .dl-horizontal — Bootstrap 3 definition list. REMOVED in Bootstrap 4/5, and no rule for it survived anywhere in the loaded CSS, so every one of these fell back to browser defaults: dt and dd as plain blocks, dd with no indent. That is why the Details screens render as one long ladder of label-above-value with the whole right half of the card empty. 148 views use it, 69 of them Details screens, so this is the lever rather than editing them one by one. Verified absent before adding: a scan of document.styleSheets for /\.dl-horizontal\b/ matched nothing. Grid rather than BS3's float+margin-left, because floats cannot align a value back to the top of a tall label and every one of these lists is label/value pairs in source order — exactly what grid auto-placement is for. -------------------------------------------------------------------------- */ .dl-horizontal { display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); column-gap: 1.5rem; row-gap: 0.65rem; align-items: baseline; margin-bottom: 1.25rem; /* breathing room before the action buttons — see note below */ } /* Two pairs per row once there is room. A details screen is typically 20+ fields; at one pair per row it scrolls for pages while half the card stays empty. */ @media (min-width: 992px) { .dl-horizontal { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) minmax(9rem, 14rem) minmax(0, 1fr); column-gap: 2rem; } } .dl-horizontal > dt { font-weight: 600; /* Not right-aligned like BS3: labels here run to "Is Fuel Sur Charge on Freight", and ragged-left text against its own value is harder to scan than ragged-right. */ text-align: left; opacity: 0.72; overflow-wrap: anywhere; } .dl-horizontal > dd { margin-left: 0; margin-bottom: 0; min-width: 0; /* let long values wrap instead of widening the column */ overflow-wrap: anywhere; } /* Single column on small screens — two pairs per row cannot fit. */ @media (max-width: 575.98px) { .dl-horizontal { grid-template-columns: 1fr; row-gap: 0.15rem; } .dl-horizontal > dt { margin-top: 0.5rem; } } /* ----------------------------------------------------------------------------- Read-only controls inside a definition list. The Details screens render booleans through DisplayForHtmlAttributes, which emits a real and, for tri-state fields, a disabled select2. Both are already disabled — semantically correct — but nothing styled the disabled state, so a switch that cannot be toggled still drew at full strength (the pink pill in the report) and a disabled select2 stretched to the full width of the card as though it were an input to fill in. -------------------------------------------------------------------------- */ .dl-horizontal input[type="checkbox"].js-switch:disabled { opacity: 0.55; cursor: default; } .dl-horizontal input[type="checkbox"].js-switch:disabled::after { /* Kill the coloured knob + glow: this is a value being reported, not a control. */ background: #9aa0a6; box-shadow: none; } .dl-horizontal input[type="checkbox"].js-switch:disabled::before { background: rgba(154, 160, 166, 0.28); } /* A disabled select2 in a details list is a printed value, not a form field. */ .dl-horizontal dd .select2-container--disabled, .dl-horizontal dd select.list-box[disabled] + .select2-container { width: auto !important; max-width: 100%; } /* !important is deliberate and matched, not reflexive: glass-skin.css sets `.glass-skin .select2-container .select2-selection { background/border ... !important }`, so a plain declaration here loses no matter how specific it is. Scoped to a DISABLED select2 inside a definition list, which only ever happens on these read-only screens. */ .dl-horizontal dd .select2-container--disabled .select2-selection { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0; min-height: 0; height: auto; } .dl-horizontal dd .select2-container--disabled .select2-selection__arrow { display: none !important; /* nothing will drop down; !important to beat the theme rule */ } .dl-horizontal dd .select2-container--disabled .select2-selection__rendered { padding-left: 0; color: inherit; } /* The Details screens put Edit / Back to List immediately after the list; without this they sit hard against the last value row. */ /* Spacing before whatever follows the list lives on the LIST, not on the next sibling. `.dl-horizontal + *` matched only the FIRST following element — and these views put two bare in a row, so Edit got margin-top:20px and Back to List got 0, which pushed Edit 10px below its neighbour (they are inline-flex, vertical-align: middle). A margin-bottom on the dl cannot desynchronise siblings. */ /* The rules above are enough outside the glass panels. Inside them glass-skin.css wins on SPECIFICITY, not on !important — `.glass-skin[data-theme="light"] .select2-container .select2-selection` scores (0,4,0) against the (0,3,1) above, so its white pane and its arrow survived. Re-stating the same intent one class heavier settles it. */ .glass-skin .dl-horizontal dd .select2-container--disabled .select2-selection, .glass-skin[data-theme="light"] .dl-horizontal dd .select2-container--disabled .select2-selection, .glass-skin[data-theme="dark"] .dl-horizontal dd .select2-container--disabled .select2-selection { background: transparent !important; border: 0 !important; box-shadow: none !important; } .glass-skin .dl-horizontal dd .select2-container--disabled .select2-selection__arrow, .glass-skin[data-theme="light"] .dl-horizontal dd .select2-container--disabled .select2-selection__arrow, .glass-skin[data-theme="dark"] .dl-horizontal dd .select2-container--disabled .select2-selection__arrow { display: none !important; } /* Action buttons after a definition list sit directly adjacent in the markup, so the only thing separating them is the 4px of collapsed whitespace between two inline-flex boxes — they read as one joined control. 5 of the 71 Details/Delete views paper over it with an inline margin-right:7px on the first button and the other 66 do not, which is why the gap was inconsistent between screens. A uniform margin here covers all of them; on the 5 the inline style still wins at 7px, one pixel off, which is not perceptible. */ .dl-horizontal ~ .btn { margin-right: 0.5rem; } .dl-horizontal ~ .btn:last-child { margin-right: 0; }