sanifae/src/lib/components/Area.svelte

67 lines
1.1 KiB
Svelte
Raw Normal View History

2023-01-30 16:17:58 -05:00
<style>
#content {
2023-02-10 20:08:34 -05:00
background: var(--light-1);
box-shadow: 0px 3px 5px 3px var(--dark-2);
2023-01-30 16:17:58 -05:00
width: min(700px, 90vw);
padding: 20px;
padding-top: 8px;
margin: 25px;
border-radius: 25px;
display: flex;
flex-direction: column;
}
#header {
font-weight: bold;
font-size: 2rem;
width: 100%;
padding: 0;
}
2023-02-10 20:08:34 -05:00
#header {
border-bottom: var(--dark-2) solid 2px;
}
2023-01-30 16:17:58 -05:00
#main {
min-height: 250px;
max-height: 500px;
overflow-y: scroll;
2023-01-30 16:17:58 -05:00
}
2023-02-01 19:22:43 -05:00
#main.tiny {
min-height: initial;
height: 100px;
overflow: hidden;
}
2023-01-30 16:17:58 -05:00
</style>
2023-02-01 19:22:43 -05:00
<script>
export let tiny = false;
2023-02-03 21:54:01 -05:00
let form;
2023-02-01 19:22:43 -05:00
</script>
2023-01-30 16:17:58 -05:00
<div id='content'>
<div id='header'>
<slot name="header">
Header
</slot>
</div>
2023-02-01 19:22:43 -05:00
<div id='main' class='{tiny ? "tiny" : ""}'>
2023-01-30 16:17:58 -05:00
<slot name="main">
<p>Content</p>
</slot>
</div>
<div id='footer'>
<slot name="footer">
<p>Footer</p>
</slot>
</div>
</div>