9 lines
1.2 KiB
JavaScript
9 lines
1.2 KiB
JavaScript
|
import{css as e,html as r,Component as o}from"wkit";class a extends o{static props={header:""};static styles=e`:host{display:flex;border-radius:3px}.container{display:flex;flex-direction:column;position:relative;width:100%;border:1px solid var(--wc-card-border-color, var(--color-plain-2));border-radius:inherit;background:#fff;color:var(--color-dark-1);transition:box-shadow .2s ease-in-out;box-shadow:0 0 12px rgba(0,0,0,.12)}.container .header{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--wc-card-header-height, 52px);padding:var(--wc-card-header-padding, 8px 16px);font-size:16px;box-shadow:inset 0 -1px 0 0 var(--color-plain-2);-webkit-user-select:none;user-select:none}.container .content{flex:1;min-height:64px;padding:var(--wc-card-padding, 8px 16px);font-size:14px;color:var(--color-dark-1)}:host([shadow=never]) .container,:host([shadow=hover]) .container{box-shadow:none}:host([shadow=hover]:hover) .container{box-shadow:0 0 12px rgba(0,0,0,.12)}`;render(){return r`
|
||
|
|
<main class="container">
|
||
|
|
<header class="header">
|
||
|
|
<slot name="header">${this.header}</slot>
|
||
|
|
</header>
|
||
|
|
<div class="content"><slot></slot></div>
|
||
|
|
</main>
|
||
|
|
`}}a.reg("card");
|