feat(theme): rail-btn-block full-width rail-footer modifier (0.4.0)
HistorianGateway hand-rolled a .rail-btn override purely to make the rail-foot sign-out button span the rail; its own comment flagged folding it into the kit. Adds a composable modifier instead: class="rail-btn rail-btn-block". Uses display:block + width:auto, NOT width:100%. The hand-rolled overrides set width:100%, which resolves against the containing block and then adds .rail-btn's 0 0.6rem side margins on top, overflowing the rail by 1.2rem. width:auto fills the same inset correctly. Scope note: the app overrides that motivated this do more than full-width (they also restyle font-size, padding, border, background and hover). Adopting the modifier removes the width hack; whether to also drop the restyle is each app's call, since it changes their rail appearance. Version 0.3.1 -> 0.4.0 (additive). Build 0 errors, 48/48 tests, nupkg verified to carry the new rule in staticwebassets/css/layout.css. Not yet published.
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
<Nullable>enable</Nullable>
|
<Nullable>enable</Nullable>
|
||||||
<ImplicitUsings>enable</ImplicitUsings>
|
<ImplicitUsings>enable</ImplicitUsings>
|
||||||
<LangVersion>latest</LangVersion>
|
<LangVersion>latest</LangVersion>
|
||||||
<Version>0.3.1</Version>
|
<Version>0.4.0</Version>
|
||||||
<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
|
<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
</Project>
|
</Project>
|
||||||
|
|||||||
@@ -81,6 +81,13 @@ Served at `_content/ZB.MOM.WW.Theme/…` by the ASP.NET static-web-asset pipelin
|
|||||||
|---|---|
|
|---|---|
|
||||||
| `css/theme.css` | Design tokens (`--accent`, `--ok`, `--warn`, …), typography, utility helpers |
|
| `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 |
|
||||||
|
|
||||||
|
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
|
||||||
|
redeclaring `.rail-btn` in an app stylesheet — a local override that sets `width: 100%` overflows
|
||||||
|
the rail, because the width resolves against the containing block and the inline version's
|
||||||
|
`0 0.6rem` side margins are then added on top.
|
||||||
|
|
||||||
| `fonts/ibm-plex-sans-400.woff2` | IBM Plex Sans Regular |
|
| `fonts/ibm-plex-sans-400.woff2` | IBM Plex Sans Regular |
|
||||||
| `fonts/ibm-plex-sans-600.woff2` | IBM Plex Sans SemiBold |
|
| `fonts/ibm-plex-sans-600.woff2` | IBM Plex Sans SemiBold |
|
||||||
| `fonts/ibm-plex-mono-500.woff2` | IBM Plex Mono Medium |
|
| `fonts/ibm-plex-mono-500.woff2` | IBM Plex Mono Medium |
|
||||||
|
|||||||
@@ -197,6 +197,17 @@
|
|||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
/* Full-width modifier for a rail-foot action (sign in / sign out), composed as
|
||||||
|
class="rail-btn rail-btn-block". Block + width:auto fills the rail inside the
|
||||||
|
same 0.6rem inset .rail-btn already carries. Deliberately NOT width:100% —
|
||||||
|
that resolves against the containing block and then *adds* the 1.2rem of side
|
||||||
|
margin, overflowing the rail. Apps that hand-rolled this override hit exactly
|
||||||
|
that. */
|
||||||
|
.rail-btn-block {
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Login card centring ─────────────────────────────────────────────────── */
|
/* ── Login card centring ─────────────────────────────────────────────────── */
|
||||||
.login-wrap {
|
.login-wrap {
|
||||||
|
|||||||
Reference in New Issue
Block a user