refactor: ♻️ use more of the webc feature set proper
This commit is contained in:
parent
c0b42b82d0
commit
aa410f916a
21 changed files with 678 additions and 723 deletions
|
@ -1,10 +1,10 @@
|
|||
<div class="quick-info">
|
||||
<div webc:root="override">
|
||||
<h3 class="title">Key Facts</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.quick-info {
|
||||
<style webc:scoped="quick-info">
|
||||
:host {
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
|
@ -19,26 +19,26 @@
|
|||
padding: 1em;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
:host::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: var(--border-thin);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
var(--clr-quick-info-bg-start) 0%,
|
||||
var(--clr-quick-info-bg-end) 50%
|
||||
);
|
||||
border-radius: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
& .title {
|
||||
margin-block: 0 1em;
|
||||
}
|
||||
:host .title {
|
||||
margin-block: 0 1em;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
||||
}
|
||||
:host > :last-child {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue