Add borders to tabs component

This commit is contained in:
RumovZ 2022-07-14 23:26:49 +02:00
parent a361835c03
commit aaaf553893
2 changed files with 34 additions and 23 deletions

View file

@ -48,31 +48,33 @@
<TitledContainer title={tr.deckConfigDailyLimits()}> <TitledContainer title={tr.deckConfigDailyLimits()}>
<DynamicallySlottable slotHost={Item} {api}> <DynamicallySlottable slotHost={Item} {api}>
<Tabs {tabs} activeTab={activeReviewTab} /> <Tabs {tabs} activeTab={activeReviewTab}>
<Item> <Item>
<SpinBoxRow <SpinBoxRow
bind:value={$config.newPerDay} bind:value={$config.newPerDay}
defaultValue={defaults.newPerDay} defaultValue={defaults.newPerDay}
markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra} markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
> >
{tr.schedulingNewCardsday()} {tr.schedulingNewCardsday()}
</SpinBoxRow> </SpinBoxRow>
</Item> </Item></Tabs
>
<Item> <Item>
<Warning warning={newCardsGreaterThanParent} /> <Warning warning={newCardsGreaterThanParent} />
</Item> </Item>
<Tabs {tabs} activeTab={activeNewTab} /> <Tabs {tabs} activeTab={activeNewTab}>
<Item> <Item>
<SpinBoxRow <SpinBoxRow
bind:value={$config.reviewsPerDay} bind:value={$config.reviewsPerDay}
defaultValue={defaults.reviewsPerDay} defaultValue={defaults.reviewsPerDay}
markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra} markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
> >
{tr.schedulingMaximumReviewsday()} {tr.schedulingMaximumReviewsday()}
</SpinBoxRow> </SpinBoxRow>
</Item> </Item></Tabs
>
<Item> <Item>
<Warning warning={reviewsTooLow} /> <Warning warning={reviewsTooLow} />

View file

@ -16,16 +16,25 @@
</li> </li>
{/each} {/each}
</ul> </ul>
<div class="content">
<slot />
</div>
<style lang="scss"> <style lang="scss">
div.content {
border: 1px solid var(--border);
border-radius: 0.25rem;
margin-top: 0;
padding: 0.5rem;
z-index: -1;
}
ul { ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 0;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
list-style: none; list-style: none;
border-bottom: 1px solid var(--border);
} }
span { span {
@ -35,7 +44,7 @@
display: block; display: block;
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
cursor: pointer; cursor: pointer;
margin: 0 8px -1px 0; margin: 0 8px -7px 0;
color: var(--disabled); color: var(--disabled);
} }