database nav section updated

title change
spacing fixed
delete icon aligned right
This commit is contained in:
Joe 2020-04-02 12:25:42 +01:00
parent 124ca5d1f9
commit 72f0f13fc9
3 changed files with 22 additions and 13 deletions

View File

@ -37,7 +37,7 @@
.content { .content {
flex: 1 1 auto; flex: 1 1 auto;
margin: 80px 60px; margin: 40px 40px;
} }
.nav { .nav {

View File

@ -60,9 +60,15 @@
padding: 2rem 1rem 1rem 1rem; padding: 2rem 1rem 1rem 1rem;
} }
.hierarchy-title { .hierarchy-title {
align-items: center;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.85em; font-size: 12px;
font-weight: bold;
opacity: 0.6;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
} }
.hierarchy { .hierarchy {

View File

@ -42,15 +42,14 @@
<CheckIcon /> <CheckIcon />
{/if} {/if}
</span> </span>
<i
class="ri-delete-bin-7-line hoverable uk-margin-small-left"
on:click={() => deleteDatabase(database)} />
<button <button
class:active={database.id === $backendUiStore.selectedDatabase.id} class:active={database.id === $backendUiStore.selectedDatabase.id}
on:click={() => selectDatabase(database)}> on:click={() => selectDatabase(database)}>
{database.name} {database.name}
</button> </button>
<i
class="ri-delete-bin-7-line hoverable alignment"
on:click={() => deleteDatabase(database)} />
</li> </li>
{/each} {/each}
</ul> </ul>
@ -58,12 +57,10 @@
<style> <style>
.root { .root {
padding-bottom: 10px; font-size: 12px;
font-size: 0.9rem; color: var(--secondary100);
color: var(--secondary50);
font-weight: bold;
position: relative; position: relative;
padding-left: 1.8rem; padding-left: 20px;
} }
ul { ul {
@ -72,8 +69,13 @@
list-style: none; list-style: none;
} }
.alignment {
margin-left: auto;
padding-right: 21.5px;
}
li { li {
margin: 0.5rem 0; margin: 0px 0px 10px 0px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -83,10 +85,11 @@
padding: 0; padding: 0;
border: none; border: none;
font-family: Roboto; font-family: Roboto;
font-size: 0.8rem; font-size: 12px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0);
text-rendering: optimizeLegibility;
} }
.active { .active {