Fix app list in user details page styles
This commit is contained in:
parent
7c4bf7aedd
commit
a6a1d2226c
2 changed files with 22 additions and 22 deletions
|
@ -9,11 +9,12 @@
|
|||
export let avatar = false
|
||||
export let title = null
|
||||
export let subtitle = null
|
||||
export let hoverable = false
|
||||
|
||||
$: initials = avatar ? title?.[0] : null
|
||||
</script>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item" class:hoverable on:click>
|
||||
<div class="left">
|
||||
{#if icon}
|
||||
<div class="icon" style="background: {iconBackground || `transparent`};">
|
||||
|
@ -39,11 +40,12 @@
|
|||
.list-item {
|
||||
padding: 0 16px;
|
||||
height: 56px;
|
||||
background: var(--spectrum-alias-background-color-tertiary);
|
||||
background: var(--spectrum-global-color-gray-50);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
transition: background 130ms ease-out;
|
||||
}
|
||||
.list-item:not(:first-child) {
|
||||
border-top: none;
|
||||
|
@ -56,6 +58,10 @@
|
|||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.hoverable:hover {
|
||||
cursor: pointer;
|
||||
background: var(--spectrum-global-color-gray-75);
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
|
|
|
@ -345,14 +345,12 @@
|
|||
<List>
|
||||
{#if allAppList.length}
|
||||
{#each allAppList as app}
|
||||
<div
|
||||
class="pointer"
|
||||
on:click={$goto(`../../overview/${app.devId}`)}
|
||||
>
|
||||
<ListItem
|
||||
title={app.name}
|
||||
iconBackground={app?.icon?.color || ""}
|
||||
icon={app?.icon?.name || "Apps"}
|
||||
hoverable
|
||||
on:click={$goto(`../../overview/${app.devId}`)}
|
||||
>
|
||||
<div class="title ">
|
||||
<StatusLight
|
||||
|
@ -363,7 +361,6 @@
|
|||
</StatusLight>
|
||||
</div>
|
||||
</ListItem>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<ListItem icon="Apps" title="No apps" />
|
||||
|
@ -384,9 +381,6 @@
|
|||
</Modal>
|
||||
|
||||
<style>
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.fields {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-m);
|
||||
|
|
Loading…
Reference in a new issue