1
0
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:
Romein van Buren 2023-01-18 14:05:45 +01:00
parent 7d16261bff
commit 98608a6cc8
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
2 changed files with 23 additions and 2 deletions

View File

@ -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>

View File

@ -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;