gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-30 01:17:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

simplified list item layout

Browse Source
This commit is contained in:
PavelLaptev 2023-12-03 17:12:56 +01:00 committed by GitButler
parent a93ef1dd71
commit 4f59715f52
1 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/ui/src/routes/[projectId]/navigation/ListItem.svelte
View File

@ -9,36 +9,29 @@
const dispatch = createEventDispatcher();
</script>
<button
disabled={selected}
class="button text-base-14 font-bold"
class:selected
on:click={() => dispatch('click')}
>
<slot />
<button disabled={selected} class="button" class:selected on:click={() => dispatch('click')}>
<span class="text-base-14 text-bold">
<slot />
</span>
{#if icon}
<div class="button__icon">
<Icon name={icon} />
</div>
<Icon name={icon} class="button__icon" />
{/if}
</button>
<style lang="postcss">
.button {
display: flex;
align-items: center;
color: var(--clr-theme-scale-ntrl-10);
font-weight: 700;
padding-top: var(--space-8);
padding-bottom: var(--space-8);
padding-left: var(--space-10);
padding-right: var(--space-10);
padding: var(--space-10) var(--space-10);
justify-content: space-between;
border-radius: var(--radius-m);
width: 100%;
&:hover:enabled,
&:focus:enabled {
background-color: var(--clr-theme-container-pale);
& .button__icon {
& :global(.button__icon) {
color: var(--clr-theme-scale-ntrl-40);
}
}
@ -47,7 +40,8 @@
color: var(--clr-theme-scale-ntrl-50);
}
}
.button__icon {
.button :global(.button__icon) {
color: var(--clr-theme-scale-ntrl-50);
}
</style>