refactor: ♻️ use more of the webc feature set proper

This commit is contained in:
Sebin Nyshkim 2025-04-25 00:15:50 +02:00
parent c0b42b82d0
commit aa410f916a
21 changed files with 678 additions and 723 deletions

View file

@ -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>