66 lines
1.1 KiB
CSS
66 lines
1.1 KiB
CSS
/* Box */
|
|
|
|
@layer components {
|
|
.box {
|
|
/* Add vertical rhythm margins. */
|
|
margin-block: var(--spacing-m);
|
|
padding: var(--spacing-xs);
|
|
border: 5px solid var(--color-border);
|
|
|
|
.box__title,
|
|
.title {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
& > * {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box--highlight {
|
|
border-color: var(--color-highlight);
|
|
}
|
|
|
|
.box--fit {
|
|
width: fit-content;
|
|
}
|
|
|
|
.box--gutter {
|
|
padding-inline: var(--gutters);
|
|
}
|
|
|
|
.box--inverted {
|
|
background: var(--color-border);
|
|
color: var(--color-text-bg);
|
|
|
|
/* Make sure headings etc. also gets inverted. */
|
|
* {
|
|
color: var(--color-text-bg);
|
|
}
|
|
|
|
a {
|
|
&:link {
|
|
color: var(--color-link-inverted);
|
|
}
|
|
|
|
&:visited {
|
|
color: var(--color-link-visited-inverted);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: var(--color-link-hover-inverted);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--color-link-active-inverted);
|
|
}
|
|
}
|
|
}
|
|
}
|