53 lines
1.1 KiB
Text
53 lines
1.1 KiB
Text
<div webc:root="override">
|
|
<h3 class="title">Key Facts</h3>
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<style webc:scoped="quick-info">
|
|
:host {
|
|
--gradient-dir: to bottom right;
|
|
--gradient-start: var(--clr-box-gradient-start);
|
|
--gradient-end: var(--clr-box-gradient-end);
|
|
|
|
position: relative;
|
|
background: linear-gradient(
|
|
var(--gradient-dir),
|
|
var(--gradient-start) 0%,
|
|
var(--gradient-end) 50%
|
|
);
|
|
|
|
box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
|
|
|
|
margin-block: 1em;
|
|
border-radius: 1em;
|
|
padding: 1em;
|
|
|
|
z-index: 1;
|
|
}
|
|
|
|
:host::before {
|
|
--gradient-dir: ellipse at bottom right;
|
|
--gradient-start: var(--clr-quick-info-gradient-end);
|
|
--gradient-end: var(--clr-quick-info-gradient-start);
|
|
|
|
content: '';
|
|
position: absolute;
|
|
inset: var(--border-thin);
|
|
|
|
background: radial-gradient(
|
|
var(--gradient-dir),
|
|
var(--gradient-start) 70%,
|
|
var(--gradient-end) 100%
|
|
);
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
}
|
|
|
|
:host .title {
|
|
margin-block: 0 1em;
|
|
}
|
|
|
|
:host > :last-child {
|
|
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
|
}
|
|
</style>
|