modal styling
This commit is contained in:
parent
19827a0fae
commit
1c329cac60
|
@ -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)}>Cancel</ActionButton>
|
||||||
<ActionButton alert on:click={() => onFinished(false)}>
|
</footer>
|
||||||
Cancel
|
|
||||||
</ActionButton>
|
|
||||||
</ButtonGroup>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
padding: 20px;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue