mirror of
https://github.com/garraflavatra/rolens.git
synced 2024-12-01 13:20:54 +00:00
Dismiss buttons for database/collection modals
This commit is contained in:
parent
7d16261bff
commit
98608a6cc8
@ -74,8 +74,9 @@
|
|||||||
<label class="field">
|
<label class="field">
|
||||||
<input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
|
<input type="text" spellcheck="false" bind:value={newDb.name} use:input placeholder="New collection name" bind:this={newDbInput} />
|
||||||
</label>
|
</label>
|
||||||
<p>
|
<p class="modal-actions">
|
||||||
<button class="btn create" type="submit" disabled={!newDb.name?.trim()}>Create database</button>
|
<button class="btn create" type="submit" disabled={!newDb.name?.trim()}>Create database</button>
|
||||||
|
<button class="btn secondary" type="button" on:click={() => newDb = undefined}>Cancel</button>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
@ -89,9 +90,17 @@
|
|||||||
<label class="field">
|
<label class="field">
|
||||||
<input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
|
<input type="text" spellcheck="false" bind:value={newColl.name} use:input placeholder="New collection name" bind:this={newCollInput} />
|
||||||
</label>
|
</label>
|
||||||
<p>
|
<p class="modal-actions">
|
||||||
<button class="btn create" type="submit" disabled={!newColl.name?.trim()}>Create collection</button>
|
<button class="btn create" type="submit" disabled={!newColl.name?.trim()}>Create collection</button>
|
||||||
|
<button class="btn secondary" type="button" on:click={() => newColl = undefined}>Cancel</button>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -105,6 +105,7 @@ p strong {
|
|||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
background-color: #00008b;
|
background-color: #00008b;
|
||||||
|
border: 1px solid #00008b;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@ -119,6 +120,17 @@ p strong {
|
|||||||
.btn.danger:focus {
|
.btn.danger:focus {
|
||||||
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
|
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
.btn.secondary {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #fff;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.btn.secondary:hover {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
.btn.secondary:active {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
.btn:disabled {
|
.btn:disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
Loading…
Reference in New Issue
Block a user