/* ========================================================================== EDIC Layout & Utilities -------------------------------------------------------------------------- The grid, spacing and display utilities the portal actually uses, owned by the portal instead of by Bootstrap. Bootstrap defines 2031 classes; the templates use 78 of them. This file covers the layout subset, and bootstrap.min.css and its separate 227 KB RTL twin are now gone from the project entirely. WHY THE BOOTSTRAP NAMES ARE KEPT .d-none is not only markup. It is the show/hide handle that the report and daily-report scripts toggle at twenty call sites. Renaming would mean rewriting all of that in the same change that swaps the implementation underneath it. The names stay; only the owner changes. Renaming to an ed- prefix later is a mechanical follow-up. WHY ONLY THE DISPLAY UTILITIES KEEP !important Those twenty call sites drop .d-none onto elements whose component rule already sets a display -- .ed-badge is inline-flex, .ed-btn is inline-flex, a hidden table row is display: table-row -- and some of those rules are more specific than a single utility class. The utility has to win, so the ten display declarations keep it. Nothing else does. The flex, sizing and spacing utilities are static template classes: no script touches them, and with Bootstrap gone there is nothing left for them to out-rank. Dropping it from those took this file from 34 !important declarations to 10. Breakpoints match Bootstrap's (768/992/1200) on purpose, so nothing reflows at a different width than it does today. No RTL mirror is needed: the grid flows with `direction`, and every spacing utility is logical (ms- is margin-inline-start). ========================================================================== */ /* -------------------------------------------------------------------------- GRID Bootstrap's .row is flex with negative margins and per-column padding. This is a real grid with a gap, which lands in the same place because no column in this project carries a background or border that the padding would inset. -------------------------------------------------------------------------- */ .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ed-space-6); row-gap: 0; } /* Gutter modifiers, matching Bootstrap's 1rem and 1.5rem steps. */ .row.g-3 { gap: var(--ed-space-4); } .row.g-4 { gap: var(--ed-space-6); } /* Every column is full width until a breakpoint says otherwise. These share one specificity with the breakpoint rules below, so source order decides. */ .col-12, .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-lg-5, .col-lg-6, .col-lg-7, .col-xl-3, .col-xl-4 { grid-column: span 12; min-inline-size: 0; } @media (min-width: 768px) { .col-md-2 { grid-column: span 2; } .col-md-3 { grid-column: span 3; } .col-md-4 { grid-column: span 4; } .col-md-6 { grid-column: span 6; } .col-md-8 { grid-column: span 8; } } @media (min-width: 992px) { .col-lg-5 { grid-column: span 5; } .col-lg-6 { grid-column: span 6; } .col-lg-7 { grid-column: span 7; } } @media (min-width: 1200px) { .col-xl-3 { grid-column: span 3; } .col-xl-4 { grid-column: span 4; } } /* -------------------------------------------------------------------------- DISPLAY The only utilities in this file that still carry !important, for the reason set out at the top. The responsive variants are declared after the base ones so .d-none .d-xl-flex resolves to flex above 1200px. -------------------------------------------------------------------------- */ .d-none { display: none !important; } .d-block { display: block !important; } .d-inline { display: inline !important; } .d-inline-flex { display: inline-flex !important; } .d-flex { display: flex !important; } @media (min-width: 576px) { .d-sm-inline { display: inline !important; } } @media (min-width: 768px) { .d-md-inline { display: inline !important; } .d-md-none { display: none !important; } } @media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-flex { display: flex !important; } } /* -------------------------------------------------------------------------- FLEX -------------------------------------------------------------------------- */ .flex-column { flex-direction: column; } .flex-grow-1 { flex-grow: 1; } .align-items-center { align-items: center; } .align-items-end { align-items: flex-end; } .align-items-stretch { align-items: stretch; } .justify-content-start { justify-content: flex-start; } .justify-content-center { justify-content: center; } .justify-content-end { justify-content: flex-end; } .justify-content-between { justify-content: space-between; } .gap-2 { gap: var(--ed-space-2); } .gap-3 { gap: var(--ed-space-4); } /* -------------------------------------------------------------------------- SIZING .h-100 is what makes two cards in one .row match height; it only does anything because .align-items-stretch gives the grid item full height for the card inside it to fill. -------------------------------------------------------------------------- */ .h-100 { block-size: 100%; } /* -------------------------------------------------------------------------- SPACING Bootstrap's step 3 is 1rem and step 4 is 1.5rem, which are --ed-space-4 and --ed-space-6 here. The numbers deliberately do not match; the values do. -------------------------------------------------------------------------- */ .p-0 { padding: 0; } .pt-1 { padding-block-start: var(--ed-space-1); } .pt-4 { padding-block-start: var(--ed-space-6); } .mb-0 { margin-block-end: 0; } .mb-3 { margin-block-end: var(--ed-space-4); } .mb-4 { margin-block-end: var(--ed-space-6); } .mt-1 { margin-block-start: var(--ed-space-1); } .mt-2 { margin-block-start: var(--ed-space-2); } .mt-3 { margin-block-start: var(--ed-space-4); } .my-3 { margin-block-start: var(--ed-space-4); margin-block-end: var(--ed-space-4); } .ms-1 { margin-inline-start: var(--ed-space-1); }