85 lines
1.8 KiB
CSS
85 lines
1.8 KiB
CSS
@layer components.blocks {
|
|
.callout {
|
|
@mixin my var(--space-9);
|
|
counter-increment: box;
|
|
|
|
display: grid;
|
|
grid-template-columns: var(--slot-box-cell) minmax(0, 1fr);
|
|
|
|
border: var(--border-card) solid var(--color-border-strong);
|
|
|
|
background-color: var(--color-surface-elevated-1);
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
.callout__kind {
|
|
@mixin typo_label;
|
|
@mixin ma var(--size-0);
|
|
@mixin py var(--size-6);
|
|
@mixin px var(--size-7);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
border-inline-end: var(--border-card) solid var(--color-border-strong);
|
|
|
|
color: var(--color-text-primary);
|
|
|
|
background-color: var(--color-surface-base);
|
|
|
|
&::after {
|
|
content: "Box " counter(sec, upper-roman) "." counter(box);
|
|
|
|
font-family: var(--font-mono);
|
|
font-size: var(--type--3);
|
|
font-weight: var(--font-weight-body);
|
|
color: var(--color-text-quarternary);
|
|
}
|
|
}
|
|
|
|
.callout__title {
|
|
@mixin typo_heading-4;
|
|
@mixin mt var(--size-0);
|
|
@mixin mb var(--size-5);
|
|
|
|
font-size: var(--type-0);
|
|
}
|
|
|
|
.callout__body {
|
|
@mixin py var(--size-6);
|
|
@mixin px var(--size-8);
|
|
|
|
& > :first-child {
|
|
margin-block-start: var(--size-0);
|
|
}
|
|
|
|
& > :last-child {
|
|
margin-block-end: var(--size-0);
|
|
}
|
|
}
|
|
|
|
.callout--optional {
|
|
border-width: var(--border-hairline);
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
|
|
& .callout__kind {
|
|
border-inline-end: var(--border-hairline) solid var(--color-border-normal);
|
|
color: var(--color-text-primary);
|
|
background-color: transparent;
|
|
|
|
&::after {
|
|
color: var(--color-text-quiet);
|
|
}
|
|
}
|
|
|
|
& .callout__title {
|
|
@mixin typo_label;
|
|
|
|
font-size: var(--type--2);
|
|
color: var(--color-text-quiet);
|
|
}
|
|
}
|
|
}
|