diff --git a/ZB.MOM.WW.Theme/README.md b/ZB.MOM.WW.Theme/README.md index 6ef8a2b..a5747ba 100644 --- a/ZB.MOM.WW.Theme/README.md +++ b/ZB.MOM.WW.Theme/README.md @@ -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 diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css index ef18046..f5b0509 100644 --- a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css +++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css @@ -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
disclosure so the narrow-viewport hamburger toggle works with NO JavaScript (no Bootstrap collapse bundle): below lg the