fix: always show gap on stackingstatusicon and use border radius css variable

This commit is contained in:
ndom91 2024-10-11 16:36:17 +02:00 committed by Nico Domino
parent 2bdac25646
commit a38c3cc5c1
3 changed files with 5 additions and 10 deletions

View File

@ -89,7 +89,6 @@
icon={branchType === 'integrated' ? 'tick-small' : 'remote-branch-small'}
iconColor="#fff"
color={lineColor}
gap={false}
lineTop
/>
<div class="text-14 text-bold branch-info__name">

View File

@ -56,7 +56,7 @@
<Spacer />
{/if}
<section class="card__action" class:showDetails={!$showStackingCardDetails}>
<StackingStatusIcon icon="plus-small" gap={true} />
<StackingStatusIcon icon="plus-small" />
<Button grow style="neutral" {loading} onclick={() => createRefModal.show()}>
Add a branch to the stack
</Button>

View File

@ -7,14 +7,13 @@
icon: 'plus-small' | 'tick-small' | 'remote-branch-small';
iconColor?: string;
color?: string;
gap?: boolean;
lineTop?: boolean;
}
const { icon, iconColor, color = FALLBACK_COLOR, gap = false, lineTop = false }: Props = $props();
const { icon, iconColor, color = FALLBACK_COLOR, lineTop = false }: Props = $props();
</script>
<div class="stack__status gap" class:gap>
<div class="stack__status gap">
{#if lineTop}
<div class="stack__status--bar" style:--bg-color={color}></div>
{/if}
@ -30,10 +29,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
&.gap {
gap: 0.25rem;
}
gap: 0.25rem;
& .stack__status--icon {
display: flex;
@ -41,7 +37,7 @@
justify-content: center;
width: 21px;
height: 28px;
border-radius: 30%;
border-radius: var(--radius-m);
background-color: var(--bg-color);
color: var(--icon-color, var(--clr-text-1));
}