ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

new button hover effect (#373)

Browse source
This commit is contained in:
ABevier 2023-03-31 19:59:19 -04:00 committed by GitHub
parent 7bf4a0d6b9
commit 5a81d87839
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 89 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
modules/desktop/src/components/package-banner/package-banner.svelte
View file

@ -50,7 +50,7 @@
</Button>
{/if}
{#if pkg.github}
<Button class="border border-gray h-10" onClick={() => {
<Button class="h-10" type="plain" color="black" onClick={() => {
shellOpenExternal(`https://github.com/${pkg.github}`)
}}>View on github</Button>
{/if}

134
modules/ui/src/button/button.svelte
View file

@ -13,63 +13,105 @@
export let loading = false;
</script>
<button
type="button"
class={`w-full p-2 text-gray ${clazz} ${active ? "active" : ""} ${type} ${color} ${
loading ? "animate-pulse" : ""
}`}
on:click={() => onClick && onClick()}
>
<slot />
</button>
<div class="button-container">
<button
type="button"
class={`w-full p-2 text-gray ${clazz} ${active ? "active" : ""} ${type} ${color} ${
loading ? "animate-pulse" : ""
}`}
on:click={() => onClick && onClick()}
>
<slot />
</button>
</div>
<style>
.button-container {
position: relative;
}
/* pseudo element for hover effect - width will transition on hover */
button::before {
position: absolute;
content: "";
transition-duration: 0.2s;
z-index: -1;
inset: 0px auto auto 0px;
width: 0px;
height: 100%;
opacity: 1;
}
button:hover::before {
width: 100%;
height: 100%;
opacity: 1;
}
button {
z-index: 0;
min-width: 100px;
transition: 0.2s ease-in-out;
cursor: auto;
}
button.plain.primary {
background-color: #00ffd0;
color: black;
}
button.plain.secondary {
background-color: #8000ff;
color: white;
}
button.plain.green {
background-color: #00a517;
color: white;
}
button.plain.black {
background-color: #1a1a1a;
color: white;
}
button.active {
color: black;
position: relative;
}
button:hover {
box-shadow: inset 0px 0px 0px 5px #1a1a1a;
background-color: #00ffd0;
color: #1a1a1a;
transition: color 0.3s ease 0s, background 0s ease 0.3s;
}
button.primary:hover {
background-color: #00ffd0;
/* primary */
button.plain.primary {
background: #00ffd0;
border: 1px solid #00ffd0;
color: black;
}
button.secondary:hover {
background-color: #8000ff;
button.plain.primary.active {
background: #01997d;
}
button.green:hover {
background-color: #00a517;
button.primary::before {
background: #0ecaa7;
}
/* secondary */
button.plain.secondary {
background: #8000ff;
border: 1px solid #8000ff;
color: white;
}
button.plain.secondary.active {
background: #410182;
}
button.secondary::before {
background: #6000bf;
}
/* green */
button.plain.green {
background: #00a517;
color: white;
}
button.green::before {
background: #8000ff;
}
/* black */
button.plain.black {
background: #1a1a1a;
color: white;
border: 1px solid white;
}
button.black::before {
background: #e1e1e1;
}
/* black button inverts colors on hover */
button.black:hover {
box-shadow: inset 0px 0px 0px 5px #949494;
background-color: #1a1a1a;
color: #1a1a1a;
background: #e1e1e1;
}
</style>