Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Add tooltip colours to correspond with colour of Icon

Browse Source
This commit is contained in:
Mads Bram Cordes 2022-04-08 00:11:30 +02:00
parent ca705bbf89
commit 039953588e
2 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/routes/__layout.svelte
View File

@ -171,7 +171,7 @@
<a
sveltekit:prefetch
href="/applications"
class="icons tooltip-right bg-coolgray-200 hover:text-green-500"
class="icons tooltip-green-500 tooltip-right bg-coolgray-200 hover:text-green-500"
class:text-green-500={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
@ -199,7 +199,7 @@
<a
sveltekit:prefetch
href="/sources"
class="icons tooltip-right bg-coolgray-200 hover:text-orange-500"
class="icons tooltip-orange-500 tooltip-right bg-coolgray-200 hover:text-orange-500"
class:text-orange-500={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
@ -229,7 +229,7 @@
<a
sveltekit:prefetch
href="/destinations"
class="icons tooltip-right bg-coolgray-200 hover:text-sky-500"
class="icons tooltip-sky-500 tooltip-right bg-coolgray-200 hover:text-sky-500"
class:text-sky-500={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
@ -264,7 +264,7 @@
<a
sveltekit:prefetch
href="/databases"
class="icons tooltip-right bg-coolgray-200 hover:text-purple-500"
class="icons tooltip-purple-500 tooltip-right bg-coolgray-200 hover:text-purple-500"
class:text-purple-500={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
@ -291,7 +291,7 @@
<a
sveltekit:prefetch
href="/services"
class="icons tooltip-right bg-coolgray-200 hover:text-pink-500"
class="icons tooltip-pink-500 tooltip-right bg-coolgray-200 hover:text-pink-500"
class:text-pink-500={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
@ -344,7 +344,7 @@
{:else if updateStatus.success === null}
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-9"
class="h-9 w-8"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
@ -359,7 +359,7 @@
<line x1="16" y1="12" x2="12" y2="8" />
</svg>
{:else if updateStatus.success}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-9 w-8"
><path
fill="#DD2E44"
d="M11.626 7.488c-.112.112-.197.247-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"
@ -404,7 +404,7 @@
/></svg
>
{:else}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="h-9 w-8"
><path
fill="#FFCC4D"
d="M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18"
@ -431,7 +431,7 @@
<a
sveltekit:prefetch
href="/teams"
class="icons tooltip-right bg-coolgray-200 hover:text-cyan-500"
class="icons tooltip-cyan-500 tooltip-right bg-coolgray-200 hover:text-cyan-500"
class:text-cyan-500={$page.url.pathname.startsWith('/teams')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/teams')}
data-tooltip="Teams"
@ -457,7 +457,7 @@
<a
sveltekit:prefetch
href="/settings"
class="icons tooltip-right bg-coolgray-200 hover:text-yellow-500"
class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500"
class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
data-tooltip="Settings"
@ -481,7 +481,7 @@
</a>
{/if}
<div
class="icons tooltip-right bg-coolgray-200 hover:text-red-500"
class="icons tooltip-red-500 tooltip-right bg-coolgray-200 hover:text-red-500"
data-tooltip="Logout"
on:click={logout}
>

50
src/tailwind.css
View File

@ -209,7 +209,55 @@ a {
padding: 8px;
color: #fff;
content: attr(data-tooltip);
@apply min-w-[100px] rounded bg-coollabs text-center font-normal;
@apply min-w-[100px] rounded text-center font-normal;
}
/* Base colours for tooltips */
/* coollabs - default */
.tooltip:after,
[data-tooltip]:after {
@apply bg-coollabs;
}
/* Green 500 */
.tooltip-green-500:after {
@apply bg-green-500;
}
/* Orange 500 */
.tooltip-orange-500:after {
@apply bg-orange-500;
}
/* Sky 500 */
.tooltip-sky-500:after {
@apply bg-sky-500;
}
/* Purple 500 */
.tooltip-purple-500:after {
@apply bg-purple-500;
}
/* Pink 500 */
.tooltip-pink-500:after {
@apply bg-pink-500;
}
/* Cyan 500 */
.tooltip-cyan-500:after {
@apply bg-cyan-500;
}
/* Yellow 500 */
.tooltip-yellow-500:after {
@apply bg-yellow-500;
}
/* Red-500 */
.tooltip-red-500:after {
@apply bg-red-500;
}
/* Directions */