46 lines
695 B
SCSS
46 lines
695 B
SCSS
// Box
|
|
|
|
.box {
|
|
// Add vertical rhythm margins.
|
|
margin-block: var(--spacing-m);
|
|
padding: var(--spacing-xs);
|
|
border: 5px solid var(--color-border);
|
|
|
|
&__title,
|
|
.title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&--highlight {
|
|
border-color: var(--color-highlight);
|
|
}
|
|
|
|
&--fit {
|
|
width: fit-content;
|
|
}
|
|
|
|
&--gutter {
|
|
padding-inline: var(--gutters);
|
|
}
|
|
|
|
&--inverted {
|
|
@extend %link-inverted;
|
|
background: var(--color-border);
|
|
color: var(--color-text-bg);
|
|
|
|
// Make sure headings etc. also gets inverted.
|
|
* {
|
|
color: var(--color-text-bg);
|
|
}
|
|
}
|
|
|
|
> * {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|