dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-07-06 11:30:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

button improvements

Browse source
This commit is contained in:
Daniel Bulant 2022-08-24 16:57:27 +02:00
parent a53ad6ee2c
commit ca27819b84
3 changed files with 26 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/lib/components/button.svelte
View file

@ -6,46 +6,43 @@
</script> </script>
{#if href} {#if href}
<a href={href} class="button" class:text class:dark={$darkmode}><slot /></a> <a href={href} tabindex="0" class="button" class:text class:dark={$darkmode}><slot /></a>
{:else} {:else}
<button on:click class:text class:dark={$darkmode}><slot /></button> <button class="button" on:click class:text class:dark={$darkmode}><slot /></button>
{/if} {/if}
<style> <style>
button, .button {
.button {
background: #006db3; background: #006db3;
border-radius: 5px; border-radius: 5px;
padding: 10px 15px; padding: 10px 15px;
color: white; color: white;
cursor: pointer; cursor: pointer;
} position: relative;
.button:hover {
text-decoration: none;
}
.button {
display: inline-block;
}
button {
border: 1px solid transparent; border: 1px solid transparent;
} transition: border-color .2s;
button:active, .button:active {
background: #007bc7;
}
button:focus, .button:focus, button:hover {
border-color: black;
}
button.dark:focus, .button.dark:focus, button.dark:hover {
border-color: white;
} }
.text { .text {
background: transparent; background: transparent;
color: black; color: black;
border-color: transparent;
} }
.dark.text { .dark.text {
color: white; color: white;
} }
.button:hover, .button:focus {
text-decoration: none;
border-color: black;
}
.button.dark:hover, .button.dark:focus {
border-color: white;
}
.button {
display: inline-block;
}
.button:active {
background: #007bc710;
}
</style> </style>

6
src/lib/components/navbar.svelte
View file

@ -14,8 +14,10 @@
<a href="/"><h3>Daniel Bulant</h3></a> <a href="/"><h3>Daniel Bulant</h3></a>
<Split /> <Split />
<Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button> <Button text on:click={toggle}>{$darkmode ? "Light" : "Dark"} mode</Button>
<a href="/#contact" class="big">Contact</a> <div class="big">
<a href="/posts" class="big">Blog</a> <Button text href="/#contact" class="big">Contact</Button>
<Button text href="/posts" class="big">Blog</Button>
</div>
</Bar> </Bar>
</div> </div>

4
src/routes/+layout.svelte
View file

@ -2,8 +2,8 @@
import Navbar from "$lib/components/navbar.svelte"; import Navbar from "$lib/components/navbar.svelte";
import PageTransition from "$lib/components/pageTransition.svelte"; import PageTransition from "$lib/components/pageTransition.svelte";
import "virtual:windi.css"; import "virtual:windi.css";
import { browser } from "$app/env"; import { browser, dev } from "$app/env";
if (browser) import("virtual:windi-devtools"); if (browser && dev) import("virtual:windi-devtools");
export let data; export let data;
</script> </script>