Tidy up options drawer styles

This commit is contained in:
Andrew Kingston 2021-08-17 11:33:09 +01:00
parent ac850fdc19
commit e274eeffce
2 changed files with 34 additions and 35 deletions

View File

@ -29,13 +29,11 @@
<DrawerContent>
<div class="container">
<Layout noPadding>
<Body size="S">
<Layout noPadding gap="S">
{#if !options.length}
Add an option to get started.
<Body size="S">Add an option to get started.</Body>
{/if}
</Body>
{#if options?.length}
<div class="options">
{#each options as option (option.id)}
<Input
@ -58,10 +56,11 @@
/>
{/each}
</div>
{/if}
<div>
<Button icon="AddCircle" size="M" on:click={addOption} secondary
>Add Option</Button
>
<Button icon="AddCircle" size="M" on:click={addOption} secondary>
Add Option
</Button>
</div>
</Layout>
</div>
@ -70,7 +69,7 @@
<style>
.container {
width: 100%;
max-width: 1000px;
max-width: 800px;
margin: 0 auto;
}
.options {
@ -78,6 +77,6 @@
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
align-items: center;
grid-template-columns: auto auto 20px;
grid-template-columns: 1fr 1fr auto;
}
</style>

View File

@ -22,7 +22,7 @@
<ActionButton on:click={drawer.show}>Define Options</ActionButton>
<Drawer bind:this={drawer} title="Options">
<svelte:fragment slot="description">
Add custom picker options
Define the options for this picker.
</svelte:fragment>
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<OptionsDrawer bind:options={tempValue} slot="body" />