Update automation page with new form styles
This commit is contained in:
parent
4b0de71c10
commit
49ccf8ebc8
3 changed files with 21 additions and 44 deletions
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue