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.
78 lines
1.5 KiB
78 lines
1.5 KiB
<script>
|
|
import Icon from '../components/Icon.svelte';
|
|
</script>
|
|
<style>
|
|
content {
|
|
display: flex;
|
|
flex: flex-shrink;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid #eee;
|
|
width: min-content;
|
|
}
|
|
|
|
panel top {
|
|
width: 480px; /* sets a header for display */
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
panel middle {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
panel bottom {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
panel bottom button {
|
|
display: flex;
|
|
margin: 0;
|
|
border-radius: unset;
|
|
width: 100%;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
button:hover {
|
|
filter: invert(20%);
|
|
}
|
|
|
|
button#cancel {
|
|
background: unset;
|
|
color: var(--color-text);
|
|
}
|
|
</style>
|
|
|
|
<content>
|
|
<panel>
|
|
<top>
|
|
<h1>Panel is a Card</h1>
|
|
</top>
|
|
|
|
<middle>
|
|
<h4>
|
|
Panel Example
|
|
</h4>
|
|
<p>Not sure what the big deal is with the difference between panels and cards
|
|
but I'm doing all the things so here's a panel. Let's say, buttons on a panel
|
|
are different to demonstrate how to make a button strip. </p>
|
|
</middle>
|
|
|
|
<bottom>
|
|
<button id="cancel"><Icon name="x-circle" color="var(--color-text)" size="24"/> CANCEL</button>
|
|
<button><Icon name="check-circle" color="var(--color-bg)" size="24" /> OK</button>
|
|
</bottom>
|
|
</panel>
|
|
</content>
|
|
|
|
|