Tidy up options drawer styles
This commit is contained in:
parent
ac850fdc19
commit
e274eeffce
|
@ -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>
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Reference in New Issue