Update table hover colours

This commit is contained in:
Andrew Kingston 2022-12-20 17:07:14 +00:00
parent 7ca61c8bca
commit 75af4cbfbf
2 changed files with 32 additions and 44 deletions

View File

@ -558,10 +558,7 @@
display: contents; display: contents;
} }
.spectrum-Table-row:hover .spectrum-Table-cell { .spectrum-Table-row:hover .spectrum-Table-cell {
/*background-color: var(--hover-bg) !important;*/ background-color: var(--spectrum-global-color-gray-100);
}
.spectrum-Table-row:hover .spectrum-Table-cell:after {
background-color: var(--spectrum-alias-highlight-hover);
} }
.wrapper--quiet .spectrum-Table-row { .wrapper--quiet .spectrum-Table-row {
border-left: none; border-left: none;
@ -594,24 +591,13 @@
border-bottom: 1px solid var(--spectrum-alias-border-color-mid); border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
background-color: var(--table-bg); background-color: var(--table-bg);
z-index: auto; z-index: auto;
transition: background-color 130ms ease-out;
} }
.spectrum-Table-cell--edit { .spectrum-Table-cell--edit {
position: sticky; position: sticky;
left: 0; left: 0;
z-index: 2; z-index: 2;
} }
.spectrum-Table-cell:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: transparent;
top: 0;
left: 0;
pointer-events: none;
transition: background-color
var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
}
/* Placeholder */ /* Placeholder */
.placeholder { .placeholder {

View File

@ -166,36 +166,38 @@
</Layout> </Layout>
<Divider /> <Divider />
<Layout noPadding gap="L"> <Layout noPadding gap="L">
<Layout noPadding gap="S"> {#if $usersFetch.loaded}
<div class="title"> <Layout noPadding gap="S">
<Heading size="S">Users</Heading> <div class="title">
<Button secondary on:click={assignmentModal.show}>Assign user</Button> <Heading size="S">Users</Heading>
</div> <Button secondary on:click={assignmentModal.show}>Assign user</Button>
<Table
customPlaceholder
data={appUsers}
schema={userSchema}
allowEditRows={false}
{customRenderers}
>
<div class="placeholder" slot="placeholder">
<Heading size="S">You have no users assigned yet</Heading>
</div> </div>
</Table> <Table
{#if $usersFetch.hasPrevPage || $usersFetch.hasNextPage} customPlaceholder
<div class="pagination"> data={appUsers}
<Pagination schema={userSchema}
page={$usersFetch.pageNumber + 1} allowEditRows={false}
hasPrevPage={$usersFetch.hasPrevPage} {customRenderers}
hasNextPage={$usersFetch.hasNextPage} >
goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage} <div class="placeholder" slot="placeholder">
goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage} <Heading size="S">You have no users assigned yet</Heading>
/> </div>
</div> </Table>
{/if} {#if $usersFetch.hasPrevPage || $usersFetch.hasNextPage}
</Layout> <div class="pagination">
<Pagination
page={$usersFetch.pageNumber + 1}
hasPrevPage={$usersFetch.hasPrevPage}
hasNextPage={$usersFetch.hasNextPage}
goToPrevPage={$usersFetch.loading ? null : usersFetch.prevPage}
goToNextPage={$usersFetch.loading ? null : usersFetch.nextPage}
/>
</div>
{/if}
</Layout>
{/if}
{#if $licensing.groupsEnabled && appGroups.length} {#if $usersFetch.loaded && $licensing.groupsEnabled && appGroups.length}
<Layout noPadding gap="S"> <Layout noPadding gap="S">
<div class="title"> <div class="title">
<Heading size="S">Groups</Heading> <Heading size="S">Groups</Heading>