1
0
Fork 0
mirror of synced 2024-08-28 00:12:02 +12:00

Update automation page with new form styles

This commit is contained in:
Andrew Kingston 2020-09-30 09:28:18 +01:00
parent 4b0de71c10
commit 49ccf8ebc8
3 changed files with 21 additions and 44 deletions

View file

@ -48,7 +48,7 @@
<div class="block-label">{block.name}</div> <div class="block-label">{block.name}</div>
{#each inputs as [key, value]} {#each inputs as [key, value]}
<div class="bb-margin-xl block-field"> <div class="bb-margin-xl block-field">
<div class="field-label">{value.title}</div> <Label extraSmall grey>{value.title}</Label>
{#if value.type === 'string' && value.enum} {#if value.type === 'string' && value.enum}
<Select bind:value={block.inputs[key]} thin secondary> <Select bind:value={block.inputs[key]} thin secondary>
<option value="">Choose an option</option> <option value="">Choose an option</option>
@ -80,15 +80,6 @@
display: grid; display: grid;
} }
.field-label {
color: var(--ink);
margin-bottom: 12px;
display: flex;
font-size: 14px;
font-weight: 500;
font-family: sans-serif;
}
.block-label { .block-label {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;

View file

@ -30,10 +30,8 @@
{#if schemaFields.length} {#if schemaFields.length}
<div class="schema-fields"> <div class="schema-fields">
{#each schemaFields as [field, schema]} {#each schemaFields as [field, schema]}
<div class="capitalise">
{#if schemaHasOptions(schema)} {#if schemaHasOptions(schema)}
<div class="field-label">{field}</div> <Select label={field} thin secondary bind:value={value[field]}>
<Select thin secondary bind:value={value[field]}>
<option value="">Choose an option</option> <option value="">Choose an option</option>
{#each schema.constraints.inclusion as option} {#each schema.constraints.inclusion as option}
<option value={option}>{option}</option> <option value={option}>{option}</option>
@ -47,29 +45,17 @@
type="string" type="string"
{bindings} /> {bindings} />
{/if} {/if}
</div>
{/each} {/each}
</div> </div>
{/if} {/if}
<style> <style>
.field-label {
color: var(--ink);
margin-bottom: 12px;
display: flex;
font-size: 14px;
font-weight: 500;
font-family: sans-serif;
}
.capitalise :global(label),
.field-label {
text-transform: capitalize;
}
.schema-fields { .schema-fields {
display: grid; display: grid;
grid-gap: var(--spacing-xl); grid-gap: var(--spacing-xl);
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }
.schema-fields :global(label) {
text-transform: capitalize;
}
</style> </style>

View file

@ -42,8 +42,8 @@
height: 24px; height: 24px;
width: 24px; width: 24px;
background: var(--grey-4); background: var(--grey-4);
right: 7px; right: var(--spacing-s);
bottom: 7px; bottom: 9px;
} }
button:hover { button:hover {
background: var(--grey-5); background: var(--grey-5);