shelving/ui/block/Definitions.module.css

Toolkit for using data in JavaScript.

@import "../style/base.css";

@layer components {
	.definitions,
	.prose dl {
		display: block;
		margin-inline: 0;
		margin-block: var(--definitions-spacing, var(--spacing-paragraph));
		text-align: var(--definitions-align, left);

		/* Children */
		.pair {
			display: block;
			padding-block: var(--definitions-padding, var(--space-xsmall));
		}
		.pair + .pair {
			/* Gap between successive pairs (first one starts at the top with no extra space). */
			margin-block-start: var(--definitions-gap, var(--space-xsmall));
			padding-block-start: var(--definitions-padding, var(--space-xsmall));
			border-block-start: var(--definitions-thickness, var(--thickness, var(--stroke-normal))) solid
				var(--definitions-color-border, var(--color-vivid));
		}

		.term {
			display: block;
			margin: 0;
			font-weight: var(--definitions-label-weight, var(--weight-strong));
			font-size: var(--definitions-label-size, var(--size-small));
		}

		.value {
			display: block;
			margin: 0;
		}

		/* Variants */
		&.row .pair {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
			gap: var(--definitions-padding, var(--space-xsmall));
			align-items: baseline;
		}

		/* Collapse row layout back to stacked on narrow viewports. */
		@media (max-width: 40rem) {
			&.row .pair {
				display: block;
			}
		}
	}
}

@layer overrides {
	.definitions,
	.prose dl {
		&:first-child {
			margin-block-start: 0;
		}
		&:last-child {
			margin-block-end: 0;
		}
	}
}