Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: overhaul of the visual style with CSS

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-11 02:17:41 +02:00
parent a1f5032232
commit 7f1e8d3f9c
37 changed files with 1280 additions and 741 deletions
Download patch file Download diff file Expand all files Collapse all files

21
UI/Base/TabbedGroup.svelte
View file

@ -19,10 +19,10 @@
<div class="tabbedgroup w-full h-full">
<TabGroup class="h-full w-full flex flex-col" defaultIndex={1}
on:change={(e) =>{if(e.detail >= 0){tab.setData( e.detail); }} }>
<div class="tablist flex bg-gray-300 items-center justify-between sticky top-0">
<div class="interactive flex items-center justify-between sticky top-0">
<TabList class="flex flex-wrap">
{#if $$slots.title1}
<Tab class={({selected}) => "tab "+(selected ? "tab-selected" : "tab-unselected")}>
<Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
<div bind:this={tabElements[0]} class="flex">
<slot name="title0">
Tab 0
@ -31,28 +31,28 @@
</Tab>
{/if}
{#if $$slots.title1}
<Tab class={({selected}) => "tab "+(selected ? "tab-selected" : "tab-unselected")}>
<Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
<div bind:this={tabElements[1]} class="flex">
<slot name="title1"/>
</div>
</Tab>
{/if}
{#if $$slots.title2}
<Tab class={({selected}) => "tab "+(selected ? "tab-selected" : "tab-unselected")}>
<Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
<div bind:this={tabElements[2]} class="flex">
<slot name="title2"/>
</div>
</Tab>
{/if}
{#if $$slots.title3}
<Tab class={({selected}) => "tab "+(selected ? "tab-selected" : "tab-unselected")}>
<Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
<div bind:this={tabElements[3]} class="flex">
<slot name="title3"/>
</div>
</Tab>
{/if}
{#if $$slots.title4}
<Tab class={({selected}) => "tab "+(selected ? "tab-selected" : "tab-unselected")}>
<Tab class={({selected}) => "tab "+(selected ? "selected" : "secondary")}>
<div bind:this={tabElements[4]} class="flex">
<slot name="title4"/>
</div>
@ -110,15 +110,6 @@
display: flex;
}
:global(.tab-selected) {
/**
For some reason, the exported tailwind style takes priority in production (but not in development)
As the tabs are buttons, tailwind restyles them
*/
background-color: var(--catch-detail-color) !important;
color: var(--catch-detail-color-contrast) !important;
}
:global(.tab-selected svg) {
fill: var(--catch-detail-color-contrast);
}