87 lines
1.6 KiB
Text
87 lines
1.6 KiB
Text
<div webc:root="override">
|
|
<div class="content">
|
|
<h3 class="title">
|
|
<slot name="title"></slot>
|
|
</h3>
|
|
<p>
|
|
<slot></slot>
|
|
</p>
|
|
<icon :icon="icon"></icon>
|
|
</div>
|
|
</div>
|
|
|
|
<style webc:scoped="trait-card">
|
|
:host {
|
|
--spacing-inline: 0.75em;
|
|
|
|
position: relative;
|
|
display: grid;
|
|
font-size: 0.875em;
|
|
|
|
border-radius: 1em;
|
|
padding-block: 1em;
|
|
margin-inline: var(--spacing-inline);
|
|
|
|
@media (min-width: 40em) {
|
|
--spacing-inline: 4.5em;
|
|
}
|
|
}
|
|
|
|
:host .content {
|
|
--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%
|
|
);
|
|
|
|
border-radius: inherit;
|
|
padding: 1.5em;
|
|
|
|
box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
|
|
|
|
z-index: 0;
|
|
|
|
overflow: clip;
|
|
}
|
|
|
|
:host .content::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 {
|
|
font-size: 1.75em;
|
|
}
|
|
|
|
:host .icon {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
width: 18em;
|
|
height: 18em;
|
|
|
|
opacity: 0.15;
|
|
transform: translate(1.75em, 5em);
|
|
}
|
|
</style>
|