153 lines
3.1 KiB
CSS
153 lines
3.1 KiB
CSS
@layer components.blocks {
|
|
.terms {
|
|
@mixin ma var(--size-0);
|
|
|
|
display: grid;
|
|
}
|
|
|
|
.term {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-8);
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.term__name {
|
|
@mixin typo_heading-3;
|
|
hyphens: auto;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.term__kind {
|
|
@mixin typo_label;
|
|
|
|
font-size: var(--type--2);
|
|
color: var(--color-text-quarternary);
|
|
}
|
|
|
|
.term__body {
|
|
@mixin typo_body;
|
|
@mixin ma var(--size-0);
|
|
}
|
|
|
|
:where(.term__body p) {
|
|
@mixin my var(--size-0);
|
|
}
|
|
|
|
.term__see {
|
|
@mixin typo_label;
|
|
@mixin mt var(--size-8);
|
|
@mixin mb var(--size-0);
|
|
@mixin pt var(--size-5);
|
|
@mixin border-t var(--border-hairline), solid, var(--color-border-subtle);
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-5);
|
|
|
|
font-size: var(--type--2);
|
|
color: var(--color-text-quarternary);
|
|
}
|
|
|
|
.term__see-label::after {
|
|
content: " ⟫";
|
|
}
|
|
|
|
.terms .term__link {
|
|
color: var(--color-text-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: var(--size-2);
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.terms--cross {
|
|
@mixin my var(--space-9);
|
|
|
|
grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
|
|
gap: var(--border-card);
|
|
border: var(--border-card) solid var(--color-border-strong);
|
|
background-color: var(--color-border-strong);
|
|
}
|
|
|
|
.terms--cross .term {
|
|
@mixin py var(--size-8);
|
|
@mixin px var(--size-9);
|
|
|
|
color: var(--color-text-primary);
|
|
background-color: var(--color-surface-base);
|
|
|
|
&:not(:first-of-type) {
|
|
box-shadow: 0 calc(-1 * var(--border-card)) 0 var(--color-border-normal);
|
|
}
|
|
}
|
|
|
|
.terms--cross .term:target {
|
|
color: var(--color-text-on-accent);
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
.terms--cross .term:target .term__kind {
|
|
color: var(--color-text-on-accent);
|
|
}
|
|
|
|
.terms--cross .term__body {
|
|
@mixin py var(--size-8);
|
|
@mixin px var(--size-9);
|
|
|
|
background-color: var(--color-surface-elevated-1);
|
|
}
|
|
|
|
.terms--compact {
|
|
@mixin my var(--space-9);
|
|
@mixin border-t var(--border-hairline), solid, var(--color-border-strong);
|
|
|
|
grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
|
|
column-gap: var(--size-9);
|
|
}
|
|
|
|
.terms--compact .term,
|
|
.terms--compact .term__body {
|
|
@mixin py var(--size-5);
|
|
@mixin border-b var(--border-hairline), solid, var(--color-border-subtle);
|
|
}
|
|
|
|
.terms--compact .term {
|
|
gap: var(--size-2);
|
|
justify-content: start;
|
|
}
|
|
|
|
.terms--compact .term__name {
|
|
@mixin typo_heading-5;
|
|
}
|
|
|
|
.terms--compact .term__body {
|
|
@mixin typo_definition-data;
|
|
}
|
|
|
|
.terms--compact .term__see {
|
|
@mixin mt var(--size-3);
|
|
|
|
padding-block-start: var(--size-0);
|
|
border-block-start: none;
|
|
}
|
|
|
|
.terms--compact .term:target .term__name {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
@media (--bp-tablet-down) {
|
|
.terms--compact {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.terms--compact .term {
|
|
padding-block-end: var(--size-0);
|
|
border-block-end: none;
|
|
}
|
|
}
|
|
}
|