mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
996 B
65 lines
996 B
<script>
|
|
export let title;
|
|
export let tasksCompleted = 0;
|
|
export let totalTasks = 0;
|
|
</script>
|
|
|
|
<article class:has-discussion={$$slots.comments}>
|
|
<div>
|
|
<h2>{title}</h2>
|
|
<p>{tasksCompleted}/{totalTasks} tasks completed</p>
|
|
</div>
|
|
{#if $$slots.comments}
|
|
<div class="discussion">
|
|
<h3>Comments</h3>
|
|
<slot name="comments" />
|
|
</div>
|
|
{/if}
|
|
</article>
|
|
|
|
<style>
|
|
article {
|
|
border: 1px #ccc solid;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
article > div {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
article.has-discussion::after {
|
|
content: '';
|
|
background-color: #ff3e00;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
height: 20px;
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -10px;
|
|
width: 20px;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
p {
|
|
color: #777;
|
|
margin: 0;
|
|
}
|
|
|
|
.discussion {
|
|
background-color: #eee;
|
|
border-top: 1px #ccc solid;
|
|
}
|
|
</style>
|