Simplify tag structure in ButtonGroup

This commit is contained in:
Henrik Giesel 2021-04-23 21:42:44 +02:00
parent 8ecd4f8c95
commit 9629d3201b

View file

@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
overflow-y: auto; overflow-y: auto;
padding-inline-start: 0; padding-inline-start: 0;
margin: 0 0 calc(var(--toolbar-size) / 10); margin: 0 calc(var(--toolbar-size) / 8) calc(var(--toolbar-size) / 8) 0;
&.border-overlap-group { &.border-overlap-group {
:global(button), :global(button),
@ -35,10 +35,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
margin-left: -1px; margin-left: -1px;
} }
} }
&.gap-group {
:global(button),
:global(select) {
margin-left: 1px;
}
}
} }
li { li {
display: inline-block; display: contents;
> :global(button), > :global(button),
> :global(select) { > :global(select) {
@ -65,17 +72,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
border-bottom-right-radius: calc(var(--toolbar-size) / 7.5); border-bottom-right-radius: calc(var(--toolbar-size) / 7.5);
} }
} }
&.gap-item:not(:nth-child(1)) {
margin-left: 1px;
}
} }
</style> </style>
<ul {id} class={className} class:border-overlap-group={!nightMode}> <ul
{id}
class={className}
class:border-overlap-group={!nightMode}
class:gap-group={nightMode}>
{#each items as button} {#each items as button}
{#if !button.hidden} {#if !button.hidden}
<li class:gap-item={nightMode}> <li>
<svelte:component this={button.component} {...filterHidden(button)} /> <svelte:component this={button.component} {...filterHidden(button)} />
</li> </li>
{/if} {/if}