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()}>
<DynamicallySlottable slotHost={Item} {api}>
<Tabs {tabs} activeTab={activeReviewTab} />
<Item>
<SpinBoxRow
bind:value={$config.newPerDay}
defaultValue={defaults.newPerDay}
markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
>
{tr.schedulingNewCardsday()}
</SpinBoxRow>
</Item>
<Tabs {tabs} activeTab={activeReviewTab}>
<Item>
<SpinBoxRow
bind:value={$config.newPerDay}
defaultValue={defaults.newPerDay}
markdownTooltip={tr.deckConfigNewLimitTooltip() + v3Extra}
>
{tr.schedulingNewCardsday()}
</SpinBoxRow>
</Item></Tabs
>
<Item>
<Warning warning={newCardsGreaterThanParent} />
</Item>
<Tabs {tabs} activeTab={activeNewTab} />
<Item>
<SpinBoxRow
bind:value={$config.reviewsPerDay}
defaultValue={defaults.reviewsPerDay}
markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
>
{tr.schedulingMaximumReviewsday()}
</SpinBoxRow>
</Item>
<Tabs {tabs} activeTab={activeNewTab}>
<Item>
<SpinBoxRow
bind:value={$config.reviewsPerDay}
defaultValue={defaults.reviewsPerDay}
markdownTooltip={tr.deckConfigReviewLimitTooltip() + v3Extra}
>
{tr.schedulingMaximumReviewsday()}
</SpinBoxRow>
</Item></Tabs
>
<Item>
<Warning warning={reviewsTooLow} />

View file

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