modal styling

This commit is contained in:
Martin McKeaveney 2020-03-22 14:05:13 +00:00
parent 19827a0fae
commit 1c329cac60
3 changed files with 45 additions and 14 deletions

View File

@ -138,12 +138,19 @@
{/if} {/if}
</form> </form>
<div class="uk-modal-footer uk-text-right"> <footer>
<ButtonGroup>
<ActionButton primary on:click={save}>Save</ActionButton> <ActionButton primary on:click={save}>Save</ActionButton>
<ActionButton alert on:click={() => onFinished(false)}> <ActionButton alert on:click={() => onFinished(false)}>Cancel</ActionButton>
Cancel </footer>
</ActionButton>
</ButtonGroup>
</div>
</div> </div>
<style>
footer {
position: absolute;
padding: 20px;
width: 100%;
bottom: 0;
left: 0;
background: #fafafa;
}
</style>

View File

@ -18,8 +18,21 @@
<section> <section>
Database Name Database Name
<input class="uk-input" type="text" bind:value={databaseName} /> <input class="uk-input" type="text" bind:value={databaseName} />
<div class="actions"> <footer>
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
<ActionButton disabled={!databaseName} on:click={createDatabase}>Save</ActionButton> <ActionButton disabled={!databaseName} on:click={createDatabase}>
</div> Save
</ActionButton>
</footer>
</section> </section>
<style>
footer {
position: absolute;
padding: 20px;
width: 100%;
bottom: 0;
left: 0;
background: #fafafa;
}
</style>

View File

@ -63,7 +63,7 @@
</div> </div>
{/each} {/each}
</form> </form>
<div class="actions"> <footer>
<ActionButton alert on:click={onClosed}>Cancel</ActionButton> <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
<ActionButton <ActionButton
on:click={async () => { on:click={async () => {
@ -79,6 +79,17 @@
}}> }}>
Save Save
</ActionButton> </ActionButton>
</div> </footer>
</div> </div>
</div> </div>
<style>
footer {
position: absolute;
padding: 20px;
width: 100%;
bottom: 0;
left: 0;
background: #fafafa;
}
</style>