58 lines
4.8 KiB
CSS
58 lines
4.8 KiB
CSS
/* Compliance Engine UI. Shared tokens only; no status or severity colour. */
|
|
|
|
/* `Map ISO controls` window, sized like the Accepted Risk window. */
|
|
.dialog-window.regulatory-mapping-dialog { width: min(1040px, 100%); }
|
|
.regulatory-mapping-panel.is-embedded { margin-top: 0; padding: 0; border: 0; background: transparent; }
|
|
|
|
/* Finding Reader section, read like `Description`. */
|
|
.finding-iso-controls ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
|
|
.finding-iso-controls li { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--type-body-size); line-height: 1.5; }
|
|
.finding-iso-controls li strong { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
|
|
|
|
/* Client Info `Compliance` row; its tiles use the environment tile geometry. */
|
|
.client-compliance { margin-block: var(--space-6) var(--space-8); color: var(--text-primary); min-width: 0; }
|
|
.client-compliance > h2 { margin: 0; font-size: var(--type-h3-size); font-weight: var(--fw-semibold); }
|
|
.iso-controls__error { margin: var(--space-2) 0 0; font-size: var(--type-table-body-size); }
|
|
/* The theme facts are this tile's purpose, so they stay visible where narrow environment tiles show two facts. */
|
|
.client-compliance-grid .client-env-facts > div:nth-child(n + 3) { display: grid; }
|
|
/* A theme fact with hits is one click target over its whole cell; hover changes the surface only. */
|
|
.client-compliance-grid .iso-tile-theme.is-actionable { position: relative; cursor: pointer; }
|
|
.client-compliance-grid .iso-tile-theme.is-actionable:hover { background: var(--tile-surface-hover); }
|
|
.client-compliance-grid .iso-tile-theme.is-actionable:has(button:focus-visible) { outline: var(--bw-emphasis) solid var(--focus-ring); outline-offset: calc(var(--bw-emphasis) * -1); }
|
|
.iso-tile-theme button {
|
|
padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer;
|
|
}
|
|
.iso-tile-theme button::after { content: ''; position: absolute; inset: 0; }
|
|
.iso-tile-theme button:focus-visible { outline: none; }
|
|
|
|
/* ISO Results window: accepted controls grouped by ISO 27002 theme as ranked rows. */
|
|
.iso-controls { color: var(--text-primary); min-width: 0; }
|
|
.iso-controls__total { margin: 0; font-size: var(--type-body-size); font-weight: var(--fw-regular); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
|
|
.iso-controls__empty { margin: 0; font-size: var(--type-body-size); color: var(--text-secondary); }
|
|
.iso-controls__themes { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
|
|
.iso-controls__group { display: grid; gap: var(--space-1); min-width: 0; }
|
|
/* Rows fill columns of twice the compact tile width; a partial last row keeps its track width. */
|
|
.iso-controls__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--tile-compact-width) * 2)), 1fr)); gap: var(--space-1) var(--space-3); }
|
|
.iso-controls__theme {
|
|
display: flex; align-items: baseline; justify-content: flex-start; gap: var(--space-4); flex-wrap: wrap;
|
|
padding: var(--space-2) var(--space-1); border: 0; border-bottom: var(--bw-hairline) solid var(--tile-divider);
|
|
background: transparent; color: var(--text-primary); font-family: inherit; text-align: left;
|
|
}
|
|
button.iso-controls__theme { cursor: pointer; }
|
|
button.iso-controls__theme:hover .iso-controls__theme-name { text-decoration: underline; }
|
|
.iso-controls__theme-name { font-size: var(--type-body-size); font-weight: var(--fw-semibold); }
|
|
.iso-controls__theme-count { font-size: var(--type-table-body-size); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
|
|
.iso-controls__row {
|
|
display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3); border: var(--bw-hairline) solid var(--tile-border); border-radius: var(--radius-sm);
|
|
background: var(--tile-surface); color: var(--text-primary); font-family: inherit; text-align: left; cursor: pointer;
|
|
}
|
|
.iso-controls__row:hover { background: var(--tile-surface-hover); }
|
|
.iso-controls__row:focus-visible, button.iso-controls__theme:focus-visible { outline: var(--bw-emphasis) solid var(--focus-ring); outline-offset: var(--bw-emphasis); }
|
|
.iso-controls__id { font-size: var(--type-table-body-size); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
.iso-controls__title { font-size: var(--type-body-size); line-height: var(--lh-ui); overflow-wrap: break-word; }
|
|
.iso-controls__amount { font-size: var(--type-body-size); font-weight: var(--fw-semibold); text-align: right; font-variant-numeric: tabular-nums; }
|
|
.regulatory-earlier-controls { margin-top: 16px; }
|
|
.regulatory-earlier-controls > h4 { margin-bottom: 4px; }
|
|
.regulatory-earlier-controls > p { color: var(--text-muted); }
|