Make clearer which parts of ButtonGroup css are theming related

This commit is contained in:
Henrik Giesel 2021-04-16 18:24:43 +02:00
parent b60f9cd05d
commit caa052e37e

View file

@ -27,14 +27,13 @@ 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) / 15); margin: 0 0 calc(var(--toolbar-size) / 10);
} }
.border-group { .border-overlap-group {
/* buttons' borders exactly overlap each other */
:global(button), :global(button),
:global(select) { :global(select) {
margin-left: -2px; margin-left: -1px;
} }
} }
@ -67,16 +66,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
} }
&:not(:nth-child(1)) { &.gap-item:not(:nth-child(1)) {
margin-left: 1px; margin-left: 1px;
} }
} }
</style> </style>
<ul {id} class={className} class:border-group={!nightMode}> <ul {id} class={className} class:border-overlap-group={!nightMode}>
{#each buttons as button} {#each buttons as button}
{#if !button.hidden} {#if !button.hidden}
<li> <li class:gap-item={nightMode}>
<svelte:component this={button.component} {...filterHidden(button)} /> <svelte:component this={button.component} {...filterHidden(button)} />
</li> </li>
{/if} {/if}