SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 💄 update style of trait card component

Browse source 
Takes less space, less code and has a more subtle effect
This commit is contained in:
Sebin Nyshkim 2025-07-19 21:12:43 +02:00
parent c7e9fdba95
commit 40930e1d8e
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
1 changed files with 17 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/trait-card.webc
View file

@ -1,7 +1,4 @@
<div webc:root="override"> <div webc:root="override">
<div class="icon-box">
<icon :icon="icon"></icon>
</div>
<div class="content"> <div class="content">
<h3 class="title"> <h3 class="title">
<slot name="title"></slot> <slot name="title"></slot>
@ -9,18 +6,20 @@
<p> <p>
<slot></slot> <slot></slot>
</p> </p>
<icon :icon="icon"></icon>
</div> </div>
</div> </div>
<style webc:scoped="trait-card"> <style webc:scoped="trait-card">
:host { :host {
--spacing-inline: 0.75em; --spacing-inline: 0.75em;
position: relative; position: relative;
display: grid; display: grid;
font-size: 0.875em; font-size: 0.875em;
border-radius: 1em; border-radius: 1em;
padding-block: 2em 1em; padding-block: 1em;
margin-inline: var(--spacing-inline); margin-inline: var(--spacing-inline);
@media (min-width: 40em) { @media (min-width: 40em) {
@ -28,34 +27,6 @@
} }
} }
: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 { :host .content {
--gradient-dir: to bottom right; --gradient-dir: to bottom right;
--gradient-start: var(--clr-box-gradient-start); --gradient-start: var(--clr-box-gradient-start);
@ -75,6 +46,8 @@
box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow); box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
z-index: 0; z-index: 0;
overflow: clip;
} }
:host .content::before { :host .content::before {
@ -98,6 +71,17 @@
:host .title { :host .title {
font-size: 1.75em; font-size: 1.75em;
margin-block-start: 0.5em; }
:host .icon {
position: absolute;
right: 0;
bottom: 0;
width: 18em;
height: 18em;
opacity: 0.15;
transform: translate(1.75em, 5em);
} }
</style> </style>