/* * `@awc-ui/showcase-kit/credit-risk/app.css` * * Page furniture only, shared by all six framework builds of the Credit Risk * Console. Every component on every screen is an `md-*` element that styles * itself; what is left is the grid the screens sit on, and that is written * entirely in `--md-sys-*` tokens so it themes, densifies and mirrors with the * library rather than beside it. * * It lives in the kit for the same reason the derived series do: six copies of * a grid drift, and the first spacing fix would land in one build and quietly * make the screenshots incomparable. Nothing here is framework-specific — it is * class selectors over plain elements, which is all any of the six emit. * * There is not one hard-coded colour, radius, shadow or font stack in this file. * All spacing is logical (`inline-start`, `block-end`), so `dir="rtl"` — which * the dock sets on — mirrors the layout without a single RTL override. */ * { box-sizing: border-box; } html { /* The dock also writes lang/dir/data-theme/data-density here. */ color-scheme: light dark; } body { margin: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-medium-font); /* is position: fixed and publishes its measured height here. Without this the last row of every screen sits under the bar. */ padding-block-end: var(--awc-dock-height, 0px); } a { color: inherit; } /* ------------------------------------------------------------------- shell */ /* Full width on purpose. A risk console is read across, not down: the counterparty table alone carries ten columns, and capping the shell at a reading measure only forced horizontal scrolling inside the tables while leaving the screen empty on both sides. Wide viewports get the columns; the inline padding keeps content off the edges. */ .shell { width: 100%; padding-inline: var(--md-sys-spacing-inset-xl, 24px); padding-block: var(--md-sys-spacing-inset-lg, 16px) var(--md-sys-spacing-inset-xl, 24px); display: flex; flex-direction: column; gap: var(--md-sys-spacing-gap-lg, 16px); } /* * One bar: identity, section nav, and the reporting context, on a single row. * * `align-items: center` rather than `baseline`, because the nav's buttons sit * in here now. Baseline alignment lines up the text inside a button with the * text beside it, which pushes the button's own box visibly low — fine for a * row of pure text, wrong the moment a control joins it. */ .shell__masthead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-gap-sm, 8px) var(--md-sys-spacing-gap-md, 12px); padding-block-end: var(--md-sys-spacing-inset-sm, 8px); border-block-end: 1px solid var(--md-sys-color-outline-variant); } .shell__brand { font: var(--md-sys-typescale-title-medium-font); color: var(--md-sys-color-primary); margin: 0; } /* * Pushed to the far end, and it is the ONLY thing with an auto margin — so * whatever sits between the brand and it (today the nav) stays left-aligned * beside the identity, and the reporting context stays anchored opposite. * When the row wraps on a narrow viewport the auto margin applies per line, * so the meta drops to its own line and stays end-aligned rather than * colliding with the nav. */ .shell__meta { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-gap-md, 12px); font: var(--md-sys-typescale-label-medium-font); color: var(--md-sys-color-on-surface-variant); } .shell__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-gap-sm, 8px); /* Separates the sections from the product name without a divider glyph. */ margin-inline-start: var(--md-sys-spacing-gap-sm, 8px); } /* * A positioning context for a badge that sits BESIDE a control rather than * inside it. `md-badge` anchors absolutely and translates itself past its * host's corner, which needs a positioned ancestor — and `md-button` clips a * slotted badge, because its own box is `overflow: hidden` with no * accommodation for one. */ .badge-anchor { position: relative; display: inline-flex; } /* * Pull the badge back onto the button so it overlaps the edge. * * md-badge anchors at its parent's top/right corner and translates itself by * (50%, -50%), which centres it exactly ON that corner. That is right for a * rectangular host, but this host is a PILL: the bounding-box corner sits * outside the visible shape, so the default offsets leave the badge floating * clear of it with a visible gap. Smaller offsets put it back on the arc. */ .badge-anchor md-badge { --md-badge-offset-x: 8%; --md-badge-offset-y: -35%; } /* * The breadcrumb row, whose HEIGHT is reserved whether or not it has a trail * in it. * * The trail only appears on the drill path; the three section screens get their * "where am I" from the highlighted nav button instead, so a trail there would * only repeat it. But an empty row still has to occupy the same space as a full * one, because a row that comes and goes moved the heading and every panel * under it by 52px on each navigation — which is exactly what "jumpy" was. * * `min-block-size` rather than a fixed height, so a trail that wraps on a * narrow viewport can still grow. */ .shell__trail { display: flex; align-items: center; min-block-size: 36px; } /* ------------------------------------------------------------- screen head */ .screen-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--md-sys-spacing-gap-md, 12px); } .screen-head__text { min-inline-size: 0; flex: 1 1 260px; } .screen-head h1 { font: var(--md-sys-typescale-headline-medium-font); margin: 0; } .screen-head p { font: var(--md-sys-typescale-body-medium-font); color: var(--md-sys-color-on-surface-variant); margin: var(--md-sys-spacing-gap-xs, 4px) 0 0; } .screen-head__aside { display: flex; align-items: center; gap: var(--md-sys-spacing-gap-sm, 8px); flex-wrap: wrap; } /* ------------------------------------------------------------------- cards */ .panel { display: block; } .panel__inner { padding: var(--md-sys-spacing-inset-lg, 16px); display: flex; flex-direction: column; gap: var(--md-sys-spacing-gap-md, 12px); min-inline-size: 0; } .panel__title { font: var(--md-sys-typescale-title-small-font); margin: 0; } .panel__sub { font: var(--md-sys-typescale-body-small-font); color: var(--md-sys-color-on-surface-variant); margin: 0; } .panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--md-sys-spacing-gap-sm, 8px); flex-wrap: wrap; } /* --------------------------------------------------------------- kpi tiles */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--md-sys-spacing-gap-md, 12px); } .kpi { display: flex; flex-direction: column; gap: var(--md-sys-spacing-gap-xs, 4px); padding: var(--md-sys-spacing-inset-lg, 16px); min-inline-size: 0; } .kpi__label { font: var(--md-sys-typescale-label-medium-font); color: var(--md-sys-color-on-surface-variant); margin: 0; } .kpi__value { font: var(--md-sys-typescale-headline-small-font); color: var(--md-sys-color-on-surface); margin: 0; font-variant-numeric: tabular-nums; } .kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-spacing-gap-sm, 8px); font: var(--md-sys-typescale-body-small-font); color: var(--md-sys-color-on-surface-variant); } .kpi__spark { margin-block-start: var(--md-sys-spacing-gap-xs, 4px); } /* ------------------------------------------------------------------ layout */ /* * Cards in a row share a height — `stretch`, not `start`. * * With `start` each card is only as tall as its own content, so two panels side * by side end at different heights and the row reads as ragged rather than as a * pair. Stretching costs a little whitespace inside the shorter card and buys * an aligned bottom edge, which is what makes them look like one row. * * `.panel` is `display: block` and its inner is a flex column, so the extra * height lands as card background under the content rather than stretching the * content itself. */ .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--md-sys-spacing-gap-md, 12px); align-items: stretch; } .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--md-sys-spacing-gap-md, 12px); align-items: stretch; } .stack { display: flex; flex-direction: column; gap: var(--md-sys-spacing-gap-md, 12px); } .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--md-sys-spacing-gap-sm, 8px); } /* ------------------------------------------------------------------- links */ .drill { color: var(--md-sys-color-primary); text-decoration: none; font-weight: 500; border-radius: var(--md-sys-shape-corner-extra-small); } .drill:hover { text-decoration: underline; } .drill:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; } /* --------------------------------------------------------------- data bits */ .num { font-variant-numeric: tabular-nums; } .muted { color: var(--md-sys-color-on-surface-variant); } .dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--md-sys-spacing-gap-md, 12px); margin: 0; } .dl > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; } .dl dt { font: var(--md-sys-typescale-label-small-font); color: var(--md-sys-color-on-surface-variant); } .dl dd { font: var(--md-sys-typescale-body-large-font); margin: 0; font-variant-numeric: tabular-nums; } /* * A fact grid whose values are all figures — money, percentages, counts. * * Right-aligned, label and value together, for the same reason the tables are: * digits compare by place value, so a column of them is only readable when the * units line up under the units. `tabular-nums` above already gives every digit * the same width; this is what makes that pay off. * * The label moves with the value rather than staying left, so each pair still * reads as one unit instead of splitting to opposite edges of its cell. * * Applied per grid, NOT to `.dl` as a whole: the relationship-manager and group * panels are dates and proper nouns, and right-aligning prose only makes it * harder to scan. */ .dl--numeric dt, .dl--numeric dd { text-align: end; } .covenant { display: flex; flex-direction: column; gap: var(--md-sys-spacing-gap-xs, 4px); padding: var(--md-sys-spacing-inset-md, 12px); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); } .covenant__head { display: flex; align-items: center; justify-content: space-between; gap: var(--md-sys-spacing-gap-sm, 8px); flex-wrap: wrap; } .covenant__name { font: var(--md-sys-typescale-title-small-font); margin: 0; } .covenant__figures { display: flex; gap: var(--md-sys-spacing-gap-md, 12px); font: var(--md-sys-typescale-body-small-font); color: var(--md-sys-color-on-surface-variant); flex-wrap: wrap; } .empty { padding: var(--md-sys-spacing-inset-xl, 24px); text-align: center; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium-font); } .empty p { margin: 0; } .empty p + p { margin-block-start: var(--md-sys-spacing-gap-xs, 4px); font: var(--md-sys-typescale-body-small-font); } /* The chart elements own their own box; this only keeps them from collapsing before the runtime upgrades them. */ md-bar-chart, md-line-chart, md-area-chart, md-pie-chart { display: block; min-block-size: 240px; } md-organization-chart { display: block; min-block-size: 200px; } /* Pin the rows-per-page select's width. * * md-table-pagination derives it from the density scale — * max(56px, calc(80px + var(--md-sys-density-scale) * 4px)) — so the box * changes size as the rung changes while the label ("10", "25", "All") and the * caret do not shrink in step. Coming back from rung -4 to 0 the value could * end up clipped ("1(") until a reload re-measured it. A fixed width that fits * the longest option plus the caret at every rung sidesteps the dependency. */ md-table-pagination { --md-table-pagination-select-width: 5.5rem; }