dohertj2/scadaproj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): upstream the Bootstrap .btn sizing block into the kit (0.4.0)

Browse Source 
Bootstrap hard-codes --bs-btn-font-size: 1rem, oversized against the kit's
0.9rem body. All five consuming apps had independently written the identical
block into their own stylesheets (ignitionoee app.css, OtOpcUa site.css, mxgw
site.css, HistorianGateway site.css, ScadaBridge site.css), each carrying a
'delete this when the kit ships a .btn rule' comment. This is that release.

Sized by CSS-variable override only, never by redeclaring box properties:
Bootstrap's .btn-group seam/radius machinery reads the same variables, so a
literal font-size at equal specificity flattens .btn-sm into a padding-only
difference. That was a real defect in mxgw's local copy, so the rationale is
recorded in the CSS to stop it being 'simplified' back.

Lands in layout.css, which ThemeHead emits after theme.css and both after
Bootstrap, so the override wins on source order at equal specificity.

Ships in the same 0.4.0 release as rail-btn-block. Consumers get the sizing on
bump (not opt-in, unlike rail-btn-block) and should delete their local copies
in the same change. Build 0 errors, 48/48 tests, packed asset verified to carry
.btn, .btn-sm/.btn-group-sm and rail-btn-block with no literal font-size.
This commit is contained in:
Joseph Doherty
2026-08-11 02:17:16 -04:00
parent 5fc75d93fd
commit e7a126a9fc
2 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ZB.MOM.WW.Theme/README.md
+9 -1
View File
@@ -80,7 +80,15 @@ Served at `_content/ZB.MOM.WW.Theme/…` by the ASP.NET static-web-asset pipelin
| Path | Contents |
|---|---|
| `css/theme.css` | Design tokens (`--accent`, `--ok`, `--warn`, …), typography, utility helpers |
| `css/layout.css` | Side-rail shell layout, collapsible nav, `StatusPill` variants, card/field helpers |
| `css/layout.css` | Side-rail shell layout, collapsible nav, `StatusPill` variants, card/field helpers, Bootstrap `.btn` sizing |
**Bootstrap button sizing (new in 0.4.0).** The kit now normalizes `.btn` / `.btn-sm` against its
0.9rem body via `--bs-btn-*` variable overrides, because Bootstrap hard-codes
`--bs-btn-font-size: 1rem`. All five consuming apps had written this same block into their own
stylesheets; **delete the local copy when you bump to 0.4.0** (each carries a comment saying so).
Size buttons by overriding the `--bs-btn-*` variables, never by redeclaring box properties — the
`.btn-group` seam and radius machinery reads those variables, so a literal `font-size` at equal
specificity silently reduces `.btn-sm` to a padding-only difference.
Rail-footer actions: `class="rail-btn"` is the inline default; add `rail-btn-block`
(`class="rail-btn rail-btn-block"`) for a full-width footer button. Use the modifier rather than
ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css
+28
View File
@@ -1,6 +1,34 @@
/* ZB.MOM.WW.Theme — side-rail + login layout
Tokens live in theme.css; this sheet carries only layout + the side rail. */
/* ── Bootstrap button sizing ─────────────────────────────────────────────────
Bootstrap hard-codes --bs-btn-font-size: 1rem, which is oversized against
this kit's 0.9rem body. Every consuming app had independently written this
same block into its own stylesheet (ignitionoee app.css, OtOpcUa site.css,
mxgw site.css, HistorianGateway site.css, ScadaBridge site.css) — it is
upstreamed here in 0.4.0, and those local copies can be deleted on bump.
Sized by CSS-variable override ONLY — never by redeclaring box properties.
Bootstrap's .btn-group seam and radius machinery reads these same variables,
so a literal `font-size` here at equal specificity would flatten .btn-sm into
a no-op that differs only in padding. That was a real defect found in mxgw's
local copy; do not "simplify" this back into literals.
ThemeHead emits this sheet after theme.css and both after Bootstrap, so the
override wins on source order at equal specificity. */
.btn {
--bs-btn-font-size: .85rem;
--bs-btn-padding-y: .35rem;
--bs-btn-padding-x: .8rem;
--bs-btn-line-height: 1.4;
}
.btn-group-sm > .btn,
.btn-sm {
--bs-btn-font-size: .78rem;
--bs-btn-padding-y: .25rem;
--bs-btn-padding-x: .6rem;
}
/* ── App shell: side rail + page ─────────────────────────────────────────── */
/* The shell is a native <details> disclosure so the narrow-viewport hamburger
toggle works with NO JavaScript (no Bootstrap collapse bundle): below lg the