@utrecht/components
Version:
Components for the Municipality of Utrecht based on the NL Design System architecture
84 lines (78 loc) • 3.17 kB
CSS
/**
* @license EUPL-1.2
* Copyright (c) 2021-2022 Gemeente Utrecht
* Copyright (c) 2021-2022 Frameless B.V.
*/
/**
* @license EUPL-1.2
* Copyright (c) 2021-2022 Gemeente Utrecht
* Copyright (c) 2021-2022 Frameless B.V.
*/
/* `@mixin utrecht-data-list--html-dl` is not necessary.
* Default styles include only `display` and `margin`, and those properties are configured by default.
*/
/* `@mixin utrecht-data-list__item-key--html-dt` is not necessary, `<dt>` has no default styles. */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
.utrecht-data-list {
/* also set `margin-block` to reset browser styling of <dl> */
display: block;
margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-start, 0));
}
.utrecht-data-list__item-key {
color: var(--utrecht-data-list-item-key-color);
font-size: var(--utrecht-data-list-item-key-font-size);
font-weight: var(--utrecht-data-list-item-key-font-weight);
line-height: var(--utrecht-data-list-item-key-line-height);
}
.utrecht-data-list__item-value {
/* configure `min-block-size` in case the value is empty */
color: var(--utrecht-data-list-item-value-color);
font-size: var(--utrecht-data-list-item-value-font-size);
font-weight: var(--utrecht-data-list-item-value-font-weight);
line-height: var(--utrecht-data-list-item-value-line-height);
min-block-size: calc(var(--utrecht-data-list-item-value-line-height) * 1rem);
}
.utrecht-data-list__actions--html-dd {
/* reset browser styling of <dd> */
margin-inline-start: 0;
}
.utrecht-data-list__item-value--html-dd {
/* reset browser styling of <dd> */
margin-inline-start: 0;
}
.utrecht-data-list__item-value--multiline {
white-space: pre-line;
}
.utrecht-data-list--rows .utrecht-data-list__actions {
align-items: baseline;
display: flex;
grid-column: -1;
grid-row: 1;
justify-content: flex-end;
}
.utrecht-data-list--rows .utrecht-data-list__item {
--_utrecht-minmax: max(
var(--utrecht-data-list-rows-column-min-inline-size, 25ch),
var(--utrecht-data-list-rows-column-inline-size, 80%)
);
--_utrecht-auto-col: minmax(var(--_utrecht-minmax), max-content);
border-block-end-color: var(--utrecht-data-list-rows-border-bottom-color, transparent);
border-block-end-style: solid;
border-block-end-width: var(--utrecht-data-list-rows-border-bottom-width, 0);
column-gap: var(--utrecht-data-list-rows-gap);
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: repeat(auto-fit, var(--_utrecht-auto-col));
margin-block-start: var(--utrecht-data-list-rows-item-margin-block-start);
padding-block-end: var(--utrecht-data-list-rows-item-padding-block-end);
padding-block-start: var(--utrecht-data-list-rows-item-padding-block-start);
row-gap: 0;
}
.utrecht-data-list--rows .utrecht-data-list__item:first-of-type {
margin-block-start: 0;
}
.utrecht-data-list--rows .utrecht-data-list__item-value {
margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
}