1
0
Fork 0
mirror of synced 2024-06-29 11:31:06 +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 13f64d5b03
commit dd4162dedf
3 changed files with 21 additions and 44 deletions

View file

@ -48,7 +48,7 @@
<div class="block-label">{block.name}</div>
{#each inputs as [key, value]}
<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}
<Select bind:value={block.inputs[key]} thin secondary>
<option value="">Choose an option</option>
@ -80,15 +80,6 @@
display: grid;
}
.field-label {
color: var(--ink);
margin-bottom: 12px;
display: flex;
font-size: 14px;
font-weight: 500;
font-family: sans-serif;
}
.block-label {
font-weight: 500;
font-size: 14px;

View file

@ -30,46 +30,32 @@
{#if schemaFields.length}
<div class="schema-fields">
{#each schemaFields as [field, schema]}
<div class="capitalise">
{#if schemaHasOptions(schema)}
<div class="field-label">{field}</div>
<Select thin secondary bind:value={value[field]}>
<option value="">Choose an option</option>
{#each schema.constraints.inclusion as option}
<option value={option}>{option}</option>
{/each}
</Select>
{:else if schema.type === 'string' || schema.type === 'number'}
<BindableInput
thin
bind:value={value[field]}
label={field}
type="string"
{bindings} />
{/if}
</div>
{#if schemaHasOptions(schema)}
<Select label={field} thin secondary bind:value={value[field]}>
<option value="">Choose an option</option>
{#each schema.constraints.inclusion as option}
<option value={option}>{option}</option>
{/each}
</Select>
{:else if schema.type === 'string' || schema.type === 'number'}
<BindableInput
thin
bind:value={value[field]}
label={field}
type="string"
{bindings} />
{/if}
{/each}
</div>
{/if}
<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 {
display: grid;
grid-gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.schema-fields :global(label) {
text-transform: capitalize;
}
</style>

View file

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