66 lines
1.5 KiB
Svelte
66 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function onClick() {
|
|
dispatch('click');
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
flex: 2 1 15em;
|
|
padding: .5em 2.5em 2em 2.5em;
|
|
background: var(--bg-grad);
|
|
border-radius: .5em;
|
|
scroll-snap-align: start;
|
|
transition: all 0.2s;
|
|
}
|
|
.card:hover {
|
|
box-shadow: .5em .5em .5em var(--cyan);
|
|
}
|
|
|
|
.card .card-header :global(div) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0em;
|
|
width: 100%;
|
|
}
|
|
|
|
.card .card-content :global(div) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.card .card-footer :global(div){
|
|
margin-bottom: 1em;
|
|
display: flex;
|
|
gap: 1em;
|
|
max-width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div class="card" on:click={onClick}>
|
|
<div class="card-header">
|
|
<slot name="header"></slot>
|
|
</div>
|
|
<hr />
|
|
<div class="card-content">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
<hr class="not-required"/>
|
|
<div class="card-footer">
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div> |