Add a background to each of the options

This commit is contained in:
Oliver-Akins 2021-12-25 23:56:54 -07:00
parent 1e8ae8e99f
commit c282ec0378

View file

@ -103,15 +103,17 @@ function toggleOption(e: CustomEvent<string>) {
<h2>Options</h2> <h2>Options</h2>
<div class="options-box"> <div class="options-box">
{#each visibleOptions as option} {#each visibleOptions as option}
<SciFiCheckbox <div>
name="{option.name}" <SciFiCheckbox
id="{option.id}" name="{option.name}"
disabled="{!$isHost}" id="{option.id}"
bind:state="{option.active}" disabled="{!$isHost}"
on:toggle="{toggleOption}" bind:state="{option.active}"
> on:toggle="{toggleOption}"
{option.name} >
</SciFiCheckbox> {option.name}
</SciFiCheckbox>
</div>
{/each} {/each}
</div> </div>
</div> </div>
@ -183,6 +185,13 @@ h1 {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap; flex-wrap: wrap;
> div {
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
padding: 3px 7px;
margin-bottom: 10px;
}
} }
.info-button-container { .info-button-container {