Sebin Nyshkim
71afaa324c
In order for box shadows to render as intended the slider needs to be able to fill the full width of the page content container. This also necessitates a different approach to layouting all other page content children and removes the need for a layouting container element
103 lines
2 KiB
Text
103 lines
2 KiB
Text
<div webc:root="override">
|
|
<div class="icon-box">
|
|
<icon :icon="icon"></icon>
|
|
</div>
|
|
<div class="content">
|
|
<h3 class="title">
|
|
<slot name="title"></slot>
|
|
</h3>
|
|
<p>
|
|
<slot></slot>
|
|
</p>
|
|
</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: 2em 1em;
|
|
margin-inline: var(--spacing-inline);
|
|
|
|
@media (min-width: 40em) {
|
|
--spacing-inline: 4.5em;
|
|
}
|
|
}
|
|
|
|
:host .icon-box {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
left: 2.75em;
|
|
|
|
width: 3em;
|
|
height: 3em;
|
|
background: linear-gradient(
|
|
to bottom right,
|
|
var(--clr-box-gradient-start) 0%,
|
|
var(--clr-box-gradient-end) 50%
|
|
);
|
|
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
|
|
border-radius: 0.5em;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
:host .icon-box > * {
|
|
margin: var(--border-thin);
|
|
background-color: var(--clr-box-background);
|
|
border-radius: inherit;
|
|
}
|
|
|
|
:host svg {
|
|
padding: 0.625em;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
|
|
: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;
|
|
margin-block-start: 0.5em;
|
|
}
|
|
</style>
|