Increase table title size and padding around table headers

This commit is contained in:
Andrew Kingston 2022-04-08 10:28:07 +01:00
parent 620008fc42
commit 526805d7e7
2 changed files with 11 additions and 3 deletions

View File

@ -470,6 +470,13 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
user-select: none; user-select: none;
border-top: var(--table-border);
}
.spectrum-Table-headCell:first-of-type {
border-left: var(--table-border);
}
.spectrum-Table-headCell:last-of-type {
border-right: var(--table-border);
} }
.spectrum-Table-headCell--alignCenter { .spectrum-Table-headCell--alignCenter {
justify-content: center; justify-content: center;

View File

@ -118,10 +118,10 @@
</script> </script>
<Layout noPadding gap="S"> <Layout noPadding gap="S">
<div> <Layout noPadding gap="XS">
{#if title} {#if title}
<div class="table-title"> <div class="table-title">
<Heading size="S">{title}</Heading> <Heading size="M">{title}</Heading>
{#if loading} {#if loading}
<div transition:fade|local> <div transition:fade|local>
<Spinner size="10" /> <Spinner size="10" />
@ -135,7 +135,7 @@
<DeleteRowsButton on:updaterows {selectedRows} {deleteRows} /> <DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
{/if} {/if}
</div> </div>
</div> </Layout>
{#key tableId} {#key tableId}
<div class="table-wrapper"> <div class="table-wrapper">
<Table <Table
@ -180,6 +180,7 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-top: var(--spacing-m);
} }
.table-title > div { .table-title > div {
margin-left: var(--spacing-xs); margin-left: var(--spacing-xs);