🐛 Formatted and fixed stuff

This commit is contained in:
Mawoka
2022-04-14 15:45:17 +02:00
parent b726e021b5
commit 0ea8e06f1d
10 changed files with 3996 additions and 3012 deletions
+38 -41
View File
@@ -4,59 +4,56 @@
let expanded = false;
</script>
<div class='collapsible'>
<div class="collapsible">
<h3>
<button aria-expanded={expanded} on:click={() => expanded = !expanded}>{headerText}
<svg viewBox='0 0 20 20' fill='none'>
<path class='vert' d='M10 1V19' stroke='black' stroke-width='2' />
<path d='M1 10L19 10' stroke='black' stroke-width='2' />
<button aria-expanded={expanded} on:click={() => (expanded = !expanded)}
>{headerText}
<svg viewBox="0 0 20 20" fill="none">
<path class="vert" d="M10 1V19" stroke="black" stroke-width="2" />
<path d="M1 10L19 10" stroke="black" stroke-width="2" />
</svg>
</button>
</h3>
<div class='contents' class:hidden={!expanded}>
<slot></slot>
<div class="contents" class:hidden={!expanded}>
<slot />
</div>
</div>
<style>
.collapsible {
border-bottom: 1px solid var(--gray-light, #eee);
}
.collapsible {
border-bottom: 1px solid var(--gray-light, #eee);
}
h3 {
margin: 0;
}
h3 {
margin: 0;
}
button {
background-color: var(--background, #fff);
color: var(--gray-darkest, #282828);
display: flex;
justify-content: space-between;
width: 100%;
border: none;
margin: 0;
padding: 1em 0.5em;
}
button {
background-color: var(--background, #fff);
color: var(--gray-darkest, #282828);
display: flex;
justify-content: space-between;
width: 100%;
border: none;
margin: 0;
padding: 1em 0.5em;
}
button[aria-expanded="true"] {
border-bottom: 1px solid var(--gray-light, #eee);
}
button[aria-expanded='true'] {
border-bottom: 1px solid var(--gray-light, #eee);
}
button[aria-expanded="true"] .vert {
display: none;
}
button[aria-expanded='true'] .vert {
display: none;
}
button:focus svg {
outline: 2px solid;
}
button:focus svg {
outline: 2px solid;
}
button [aria-expanded="true"] rect {
fill: currentColor;
}
svg {
height: 0.7em;
width: 0.7em;
}
</style>
svg {
height: 0.7em;
width: 0.7em;
}
</style>