/* * Bootstrap 2 → Bootstrap 4 compatibility shim * * Loaded only on hyper-themed pages (via hyper/header_ng2.php). Legacy * pages have their own Bootstrap 3.3.4 CSS where these classes work * natively, so this shim only kicks in where needed. * * Why this exists: as we migrate older view files to the hyper theme, * many of them still use Bootstrap 2-era grid classes (span16, span12, * etc.) and nav patterns (subnav, nav-pills with bare anchors). Without * shimmed CSS, those views collapse — content gets shoved off-screen by * .row's negative margins because the children have no compensating * padding. * * This file gives those classes Bootstrap 4-compatible behavior so the * views render correctly without per-view edits. Once the codebase * finishes migrating away from BS2 classes, this file can be deleted. */ /* Bootstrap 2 used a 16-column custom grid in this codebase: * span16 = 100%, span12 = 75%, span7 ≈ 44%, span5 ≈ 31%, span1 ≈ 6.25% * * IMPORTANT: span* classes have two different uses in this codebase: * (a) actual BS2 grid columns inside patient profile / migrated views * (b) generic wrapper hooks with no width intent (e.g. census_span.php * starts with
as a styling marker, not a grid col) * * Globally constraining span* width breaks (b). So we scope these rules to * containers we know are migrated BS2-grid views: patient profile * (section#tabs) and explicitly opted-in pages (.he-page-content). Other * pages keep span* as no-op div classes — their natural full-width block * behavior matches the legacy BS3 theme where these classes weren't styled. */ section#tabs .span16, section#tabs .span15, section#tabs .span14, section#tabs .span13, section#tabs .span12, section#tabs .span11, section#tabs .span10, section#tabs .span9, section#tabs .span8, section#tabs .span7, section#tabs .span6, section#tabs .span5, section#tabs .span4, section#tabs .span3, section#tabs .span2, section#tabs .span1, .he-page-content .span16, .he-page-content .span15, .he-page-content .span14, .he-page-content .span13, .he-page-content .span12, .he-page-content .span11, .he-page-content .span10, .he-page-content .span9, .he-page-content .span8, .he-page-content .span7, .he-page-content .span6, .he-page-content .span5, .he-page-content .span4, .he-page-content .span3, .he-page-content .span2, .he-page-content .span1 { box-sizing: border-box; padding-right: 15px; padding-left: 15px; } section#tabs .span16, .he-page-content .span16 { flex: 0 0 100%; max-width: 100%; width: 100%; } section#tabs .span15, .he-page-content .span15 { flex: 0 0 93.75%; max-width: 93.75%; } section#tabs .span14, .he-page-content .span14 { flex: 0 0 87.5%; max-width: 87.5%; } section#tabs .span13, .he-page-content .span13 { flex: 0 0 81.25%; max-width: 81.25%; } section#tabs .span12, .he-page-content .span12 { flex: 0 0 75%; max-width: 75%; width: 100%; } section#tabs .span11, .he-page-content .span11 { flex: 0 0 68.75%; max-width: 68.75%; } section#tabs .span10, .he-page-content .span10 { flex: 0 0 62.5%; max-width: 62.5%; } section#tabs .span9, .he-page-content .span9 { flex: 0 0 56.25%; max-width: 56.25%; } section#tabs .span8, .he-page-content .span8 { flex: 0 0 50%; max-width: 50%; } section#tabs .span7, .he-page-content .span7 { flex: 0 0 43.75%; max-width: 43.75%; } section#tabs .span6, .he-page-content .span6 { flex: 0 0 37.5%; max-width: 37.5%; } section#tabs .span5, .he-page-content .span5 { flex: 0 0 31.25%; max-width: 31.25%; } section#tabs .span4, .he-page-content .span4 { flex: 0 0 25%; max-width: 25%; } section#tabs .span3, .he-page-content .span3 { flex: 0 0 18.75%; max-width: 18.75%; } section#tabs .span2, .he-page-content .span2 { flex: 0 0 12.5%; max-width: 12.5%; } section#tabs .span1, .he-page-content .span1 { flex: 0 0 6.25%; max-width: 6.25%; } /* Patient utility subnav (application/views/patient/subnav.php). * BS2 'subnav-fixed' rendered as a banded toolbar. Recreate the band * appearance with hyper-friendly colors. The inner items are pushed in * to align with the secondary topbar_h menu items above (Patients / * Clinical / Admin), which sit inside .container-fluid + .navbar default * padding (~31px from the page edge under the hyper theme). */ .subnav { background: #f7f8fa; border-bottom: 1px solid #e6e7ea; margin-bottom: 16px; padding: 0; } .subnav .nav-pills { margin: 0; /* Indent matches the topbar_h "Patients" item left edge under the * hyper theme. The hyper-specific padding is more than the BS4 * defaults on .container-fluid + .navbar would produce, so we use a * larger fixed value. Adjust if a future hyper update changes the * topbar_h indent. */ padding: 0 1.5rem 0 6rem; list-style: none; display: flex; flex-wrap: wrap; align-items: center; } .subnav .nav-pills > li { margin: 0; padding: 0; } .subnav .nav-pills > li > a { display: inline-block; padding: 10px 14px; color: #495057; text-decoration: none; border-radius: 4px; margin: 6px 4px; font-size: 13px; transition: background 100ms ease; } .subnav .nav-pills > li > a:hover { background: #e9ecef; text-decoration: none; } .subnav .nav-pills > li.active > a, .subnav .nav-pills > li.active > a:hover { background: #1a5276; color: #fff; } /* Bootstrap 2 'btn-small' (hyper uses 'btn-sm'). */ .btn-small { padding: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1.5; border-radius: 0.2rem; } /* Bare .btn (no color variant) and BS3's .btn-default — neither has a * background/border in BS4. Legacy code uses both as the "neutral * button" pattern. The :not() chain prevents this rule from overriding * BS4 variants like .btn-primary on elements that already have one. */ .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-default):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark), .btn-default { color: #495057; background-color: #fff; border-color: #ced4da; } .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-default):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark):hover, .btn-default:hover { color: #495057; background-color: #e9ecef; border-color: #adb5bd; text-decoration: none; } .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-default):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark):focus, .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-default):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark):active, .btn-default:focus, .btn-default:active { color: #495057; background-color: #dee2e6; border-color: #adb5bd; } /* Bootstrap 2 'pull-left' / 'pull-right' (hyper has 'float-left'/'float-right'). */ .pull-left { float: left !important; } .pull-right { float: right !important; } /* Bootstrap 2 .row inside legacy content under hyper wrapper sometimes * needs the BS4 negative-margin treatment to align correctly with col-* / * span* children that now have padding. Most BS4 pages already include * .row from the framework — this is a safety net for cases where the * page CSS gets overridden. */ .row.row-bs2-compat { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } /* ---------------------------------------------------------------------- * Tab nav: Bootstrap 3-style markup (