mirror of
https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git
synced 2026-11-02 02:00:31 +08:00
Style radio buttons according to design
This commit is contained in:
Rūdolfs Ošiņš
@@ -27,54 +27,34 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { writable } from "svelte/store";
|
||||
import Button from "./Button.svelte";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
background-color: var(--color-fill-ghost);
|
||||
clip-path: var(--2px-corner-fill);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
padding: 0 2px;
|
||||
}
|
||||
button {
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
white-space: nowrap;
|
||||
touch-action: manipulation;
|
||||
clip-path: var(--1px-corner-fill);
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
color: var(--color-foreground-contrast);
|
||||
background-color: var(--color-fill-ghost);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--color-foreground-emphasized);
|
||||
background-color: var(--color-background-dip);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<button
|
||||
class:active={$announce}
|
||||
<Button
|
||||
flatRight
|
||||
variant="ghost"
|
||||
active={$announce}
|
||||
onclick={() => {
|
||||
storeAnnounce(true);
|
||||
}}>
|
||||
Right away
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
class:active={!$announce}
|
||||
<Button
|
||||
flatLeft
|
||||
variant="ghost"
|
||||
active={!$announce}
|
||||
onclick={() => {
|
||||
storeAnnounce(false);
|
||||
}}>
|
||||
Periodically
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
+261
-156
@@ -1,7 +1,12 @@
|
||||
<script lang="ts">
|
||||
export let variant: "primary" | "secondary" | "ghost";
|
||||
export let onclick: (() => void) | undefined = undefined;
|
||||
|
||||
export let disabled: boolean = false;
|
||||
export let active: boolean = false;
|
||||
|
||||
export let flatLeft: boolean = false;
|
||||
export let flatRight: boolean = false;
|
||||
|
||||
$: style =
|
||||
`--button-color-1: var(--color-fill-${variant});` +
|
||||
@@ -12,15 +17,230 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.pixel {
|
||||
background-color: transparent;
|
||||
.container {
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
column-gap: 0;
|
||||
row-gap: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 2px 2px auto 2px 2px;
|
||||
grid-template-rows: 2px 2px auto 2px 2px;
|
||||
grid-template-areas:
|
||||
"p1-1 p1-2 p1-3 p1-4 p1-5"
|
||||
"p2-1 p2-2 p2-3 p2-4 p2-5"
|
||||
"p3-1 p3-2 p3-3 p3-4 p3-5"
|
||||
"p4-1 p4-2 p4-3 p4-4 p4-5"
|
||||
"p5-1 p5-2 p5-3 p5-4 p5-5";
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p1-3,
|
||||
.container:hover:not(.disabled) .p2-2,
|
||||
.container:hover:not(.disabled) .p2-4,
|
||||
.container:hover:not(.disabled) .p3-1,
|
||||
.container:hover:not(.disabled) .p3-3,
|
||||
.container:hover:not(.disabled) .p4-2 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p2-3,
|
||||
.container:hover:not(.disabled) .p3-2 {
|
||||
background-color: var(--button-color-4);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p3-4,
|
||||
.container:hover:not(.disabled) .p3-5,
|
||||
.container:hover:not(.disabled) .p4-3,
|
||||
.container:hover:not(.disabled) .p4-4,
|
||||
.container:hover:not(.disabled) .p5-3 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container.active:not(.disabled) .p1-3,
|
||||
.container.active:not(.disabled) .p2-2,
|
||||
.container.active:not(.disabled) .p2-4,
|
||||
.container.active:not(.disabled) .p3-1,
|
||||
.container.active:not(.disabled) .p3-3,
|
||||
.container.active:not(.disabled) .p3-5,
|
||||
.container.active:not(.disabled) .p4-2,
|
||||
.container.active:not(.disabled) .p4-4,
|
||||
.container.active:not(.disabled) .p5-3,
|
||||
.container:active:not(.disabled) .p1-3,
|
||||
.container:active:not(.disabled) .p2-2,
|
||||
.container:active:not(.disabled) .p2-4,
|
||||
.container:active:not(.disabled) .p3-1,
|
||||
.container:active:not(.disabled) .p3-3,
|
||||
.container:active:not(.disabled) .p3-5,
|
||||
.container:active:not(.disabled) .p4-2,
|
||||
.container:active:not(.disabled) .p4-4,
|
||||
.container:active:not(.disabled) .p5-3 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container.active:not(.disabled) .p2-3,
|
||||
.container.active:not(.disabled) .p3-2,
|
||||
.container:active:not(.disabled) .p2-3,
|
||||
.container:active:not(.disabled) .p3-2 {
|
||||
background-color: var(--button-color-3);
|
||||
}
|
||||
|
||||
.container.active:not(.disabled) .p3-4,
|
||||
.container.active:not(.disabled) .p4-3,
|
||||
.container:active:not(.disabled) .p3-4,
|
||||
.container:active:not(.disabled) .p4-3 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
|
||||
.container.disabled {
|
||||
color: var(--color-foreground-disabled);
|
||||
}
|
||||
|
||||
.disabled .p1-3,
|
||||
.disabled .p2-2,
|
||||
.disabled .p2-3,
|
||||
.disabled .p2-4,
|
||||
.disabled .p3-1,
|
||||
.disabled .p3-2,
|
||||
.disabled .p3-3,
|
||||
.disabled .p3-4,
|
||||
.disabled .p3-5,
|
||||
.disabled .p4-2,
|
||||
.disabled .p4-3,
|
||||
.disabled .p4-4,
|
||||
.disabled .p5-3 {
|
||||
background-color: var(--color-fill-ghost);
|
||||
}
|
||||
|
||||
.flat-right .p1-4,
|
||||
.flat-right .p1-5,
|
||||
.flat-right .p2-5,
|
||||
.flat-right .p3-4 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.flat-right .p2-4 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.flat-right .p4-5,
|
||||
.flat-right .p5-4,
|
||||
.flat-right .p5-5 {
|
||||
background-color: var(--button-color-3);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled).flat-right .p1-4,
|
||||
.container:hover:not(.disabled).flat-right .p1-5,
|
||||
.container:hover:not(.disabled).flat-right .p2-5,
|
||||
.container:hover:not(.disabled).flat-right .p3-4 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:hover:not(.disabled).flat-right .p2-4 {
|
||||
background-color: var(--button-color-4);
|
||||
}
|
||||
.container:hover:not(.disabled).flat-right .p4-5,
|
||||
.container:hover:not(.disabled).flat-right .p5-4,
|
||||
.container:hover:not(.disabled).flat-right .p5-5 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container.active:not(.disabled).flat-right .p1-4,
|
||||
.container.active:not(.disabled).flat-right .p1-5,
|
||||
.container.active:not(.disabled).flat-right .p2-5,
|
||||
.container.active:not(.disabled).flat-right .p3-4,
|
||||
.container.active:not(.disabled).flat-right .p4-5,
|
||||
.container.active:not(.disabled).flat-right .p5-4,
|
||||
.container.active:not(.disabled).flat-right .p5-5,
|
||||
.container:active:not(.disabled).flat-right .p1-4,
|
||||
.container:active:not(.disabled).flat-right .p1-5,
|
||||
.container:active:not(.disabled).flat-right .p2-5,
|
||||
.container:active:not(.disabled).flat-right .p3-4,
|
||||
.container:active:not(.disabled).flat-right .p4-5,
|
||||
.container:active:not(.disabled).flat-right .p5-4,
|
||||
.container:active:not(.disabled).flat-right .p5-5 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container.active:not(.disabled).flat-right .p2-4,
|
||||
.container:active:not(.disabled).flat-right .p2-4 {
|
||||
background-color: var(--button-color-3);
|
||||
}
|
||||
.container.active:not(.disabled).flat-right .p3-5,
|
||||
.container.active:not(.disabled).flat-right .p4-4,
|
||||
.container:active:not(.disabled).flat-right .p3-5,
|
||||
.container:active:not(.disabled).flat-right .p4-4 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
|
||||
.flat-left .p1-1,
|
||||
.flat-left .p1-2,
|
||||
.flat-left .p2-1,
|
||||
.flat-left .p3-2 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.flat-left .p2-2,
|
||||
.flat-left .p3-1 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.flat-left .p4-1,
|
||||
.flat-left .p4-2,
|
||||
.flat-left .p5-1,
|
||||
.flat-left .p5-2 {
|
||||
background-color: var(--button-color-3);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled).flat-left .p1-1,
|
||||
.container:hover:not(.disabled).flat-left .p1-2,
|
||||
.container:hover:not(.disabled).flat-left .p2-1,
|
||||
.container:hover:not(.disabled).flat-left .p3-2 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:hover:not(.disabled).flat-left .p2-2,
|
||||
.container:hover:not(.disabled).flat-left .p3-1 {
|
||||
background-color: var(--button-color-4);
|
||||
}
|
||||
.container:hover:not(.disabled).flat-left .p4-1,
|
||||
.container:hover:not(.disabled).flat-left .p4-2,
|
||||
.container:hover:not(.disabled).flat-left .p5-1,
|
||||
.container:hover:not(.disabled).flat-left .p5-2 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container.active:not(.disabled).flat-left .p1-1,
|
||||
.container.active:not(.disabled).flat-left .p1-2,
|
||||
.container.active:not(.disabled).flat-left .p2-1,
|
||||
.container.active:not(.disabled).flat-left .p3-2,
|
||||
.container.active:not(.disabled).flat-left .p4-1,
|
||||
.container.active:not(.disabled).flat-left .p4-2,
|
||||
.container.active:not(.disabled).flat-left .p5-1,
|
||||
.container.active:not(.disabled).flat-left .p5-2,
|
||||
.container:active:not(.disabled).flat-left .p1-1,
|
||||
.container:active:not(.disabled).flat-left .p1-2,
|
||||
.container:active:not(.disabled).flat-left .p2-1,
|
||||
.container:active:not(.disabled).flat-left .p3-2,
|
||||
.container:active:not(.disabled).flat-left .p4-1,
|
||||
.container:active:not(.disabled).flat-left .p4-2,
|
||||
.container:active:not(.disabled).flat-left .p5-1,
|
||||
.container:active:not(.disabled).flat-left .p5-2 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container.active:not(.disabled).flat-left .p2-2,
|
||||
.container.active:not(.disabled).flat-left .p3-1,
|
||||
.container:active:not(.disabled).flat-left .p2-2,
|
||||
.container:active:not(.disabled).flat-left .p3-1 {
|
||||
background-color: var(--button-color-3);
|
||||
}
|
||||
.container.active:not(.disabled).flat-left .p4-2,
|
||||
.container:active:not(.disabled).flat-left .p4-2 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
|
||||
.p1-1 {
|
||||
grid-area: p1-1;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p1-2 {
|
||||
grid-area: p1-2;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p1-3 {
|
||||
grid-area: p1-3;
|
||||
@@ -28,13 +248,16 @@
|
||||
}
|
||||
.p1-4 {
|
||||
grid-area: p1-4;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p1-5 {
|
||||
grid-area: p1-5;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.p2-1 {
|
||||
grid-area: p2-1;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p2-2 {
|
||||
grid-area: p2-2;
|
||||
@@ -50,6 +273,7 @@
|
||||
}
|
||||
.p2-5 {
|
||||
grid-area: p2-5;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.p3-1 {
|
||||
@@ -79,6 +303,7 @@
|
||||
|
||||
.p4-1 {
|
||||
grid-area: p4-1;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p4-2 {
|
||||
grid-area: p4-2;
|
||||
@@ -94,13 +319,16 @@
|
||||
}
|
||||
.p4-5 {
|
||||
grid-area: p4-5;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.p5-1 {
|
||||
grid-area: p5-1;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p5-2 {
|
||||
grid-area: p5-2;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p5-3 {
|
||||
grid-area: p5-3;
|
||||
@@ -108,176 +336,53 @@
|
||||
}
|
||||
.p5-4 {
|
||||
grid-area: p5-4;
|
||||
background-color: transparent;
|
||||
}
|
||||
.p5-5 {
|
||||
grid-area: p5-5;
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p1-3 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p2-2 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:hover:not(.disabled) .p2-3 {
|
||||
background-color: var(--button-color-4);
|
||||
}
|
||||
.container:hover:not(.disabled) .p2-4 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p3-1 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:hover:not(.disabled) .p3-2 {
|
||||
background-color: var(--button-color-4);
|
||||
}
|
||||
.container:hover:not(.disabled) .p3-3 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:hover:not(.disabled) .p3-4 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container:hover:not(.disabled) .p3-5 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p4-2 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:hover:not(.disabled) .p4-3 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container:hover:not(.disabled) .p4-4 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container:hover:not(.disabled) .p5-3 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container:active:not(.disabled) .p1-3 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container:active:not(.disabled) .p2-2 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container:active:not(.disabled) .p2-3 {
|
||||
background-color: var(--button-color-3);
|
||||
}
|
||||
.container:active:not(.disabled) .p2-4 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container:active:not(.disabled) .p3-1 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container:active:not(.disabled) .p3-2 {
|
||||
background-color: var(--button-color-3);
|
||||
}
|
||||
.container:active:not(.disabled) .p3-3 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container:active:not(.disabled) .p3-4 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:active:not(.disabled) .p3-5 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container:active:not(.disabled) .p4-2 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container:active:not(.disabled) .p4-3 {
|
||||
background-color: var(--button-color-2);
|
||||
}
|
||||
.container:active:not(.disabled) .p4-4 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
.container:active:not(.disabled) .p5-3 {
|
||||
background-color: var(--button-color-1);
|
||||
}
|
||||
|
||||
.container.disabled {
|
||||
color: var(--color-foreground-disabled);
|
||||
}
|
||||
|
||||
.disabled .p1-3,
|
||||
.disabled .p2-2,
|
||||
.disabled .p2-3,
|
||||
.disabled .p2-4,
|
||||
.disabled .p3-1,
|
||||
.disabled .p3-2,
|
||||
.disabled .p3-3,
|
||||
.disabled .p3-4,
|
||||
.disabled .p3-5,
|
||||
.disabled .p4-2,
|
||||
.disabled .p4-3,
|
||||
.disabled .p4-4,
|
||||
.disabled .p5-3 {
|
||||
background-color: var(--color-fill-ghost);
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 32px;
|
||||
white-space: nowrap;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
column-gap: 0;
|
||||
row-gap: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 2px 2px auto 2px 2px;
|
||||
grid-template-rows: 2px 2px auto 2px 2px;
|
||||
grid-template-areas:
|
||||
"p1-1 p1-2 p1-3 p1-4 p1-5"
|
||||
"p2-1 p2-2 p2-3 p2-4 p2-5"
|
||||
"p3-1 p3-2 p3-3 p3-4 p3-5"
|
||||
"p4-1 p4-2 p4-3 p4-4 p4-5"
|
||||
"p5-1 p5-2 p5-3 p5-4 p5-5";
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="container"
|
||||
class="container active"
|
||||
style:cursor={!disabled ? "pointer" : "default"}
|
||||
class:disabled
|
||||
class:active
|
||||
class:flat-right={flatRight}
|
||||
class:flat-left={flatLeft}
|
||||
onclick={!disabled ? onclick : undefined}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
{style}>
|
||||
<div class="pixel p1-1"></div>
|
||||
<div class="pixel p1-2"></div>
|
||||
<div class="pixel p1-3"></div>
|
||||
<div class="pixel p1-4"></div>
|
||||
<div class="pixel p1-5"></div>
|
||||
<div class="p1-1"></div>
|
||||
<div class="p1-2"></div>
|
||||
<div class="p1-3"></div>
|
||||
<div class="p1-4"></div>
|
||||
<div class="p1-5"></div>
|
||||
|
||||
<div class="pixel p2-1"></div>
|
||||
<div class="pixel p2-2"></div>
|
||||
<div class="pixel p2-3"></div>
|
||||
<div class="pixel p2-4"></div>
|
||||
<div class="pixel p2-5"></div>
|
||||
<div class="p2-1"></div>
|
||||
<div class="p2-2"></div>
|
||||
<div class="p2-3"></div>
|
||||
<div class="p2-4"></div>
|
||||
<div class="p2-5"></div>
|
||||
|
||||
<div class="pixel p3-1"></div>
|
||||
<div class="pixel p3-2"></div>
|
||||
<div class="pixel p3-3 txt-semibold txt-small"><slot /></div>
|
||||
<div class="pixel p3-4"></div>
|
||||
<div class="pixel p3-5"></div>
|
||||
<div class="p3-1"></div>
|
||||
<div class="p3-2"></div>
|
||||
<div class="p3-3 txt-semibold txt-small"><slot /></div>
|
||||
<div class="p3-4"></div>
|
||||
<div class="p3-5"></div>
|
||||
|
||||
<div class="pixel p4-1"></div>
|
||||
<div class="pixel p4-2"></div>
|
||||
<div class="pixel p4-3"></div>
|
||||
<div class="pixel p4-4"></div>
|
||||
<div class="pixel p4-5"></div>
|
||||
<div class="p4-1"></div>
|
||||
<div class="p4-2"></div>
|
||||
<div class="p4-3"></div>
|
||||
<div class="p4-4"></div>
|
||||
<div class="p4-5"></div>
|
||||
|
||||
<div class="pixel p5-1"></div>
|
||||
<div class="pixel p5-2"></div>
|
||||
<div class="pixel p5-3"></div>
|
||||
<div class="pixel p5-4"></div>
|
||||
<div class="pixel p5-5"></div>
|
||||
<div class="p5-1"></div>
|
||||
<div class="p5-2"></div>
|
||||
<div class="p5-3"></div>
|
||||
<div class="p5-4"></div>
|
||||
<div class="p5-5"></div>
|
||||
</div>
|
||||
|
||||
@@ -33,13 +33,13 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="main">
|
||||
<Button
|
||||
variant="secondary"
|
||||
flatRight
|
||||
onclick={() => void save(selectedAction["state"])}>
|
||||
{selectedAction["caption"]}
|
||||
</Button>
|
||||
@@ -48,7 +48,12 @@
|
||||
popoverPadding="0"
|
||||
popoverPositionTop="3rem"
|
||||
popoverPositionRight="0">
|
||||
<Button slot="toggle" let:toggle onclick={toggle} variant="secondary">
|
||||
<Button
|
||||
flatLeft
|
||||
slot="toggle"
|
||||
let:toggle
|
||||
onclick={toggle}
|
||||
variant="secondary">
|
||||
<div style:height="22px" class="global-flex">
|
||||
<Icon name="chevron-down" />
|
||||
</div>
|
||||
|
||||
@@ -28,58 +28,38 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
import Icon from "./Icon.svelte";
|
||||
import Button from "./Button.svelte";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
background-color: var(--color-fill-ghost);
|
||||
clip-path: var(--2px-corner-fill);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
padding: 0 2px;
|
||||
}
|
||||
button {
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
white-space: nowrap;
|
||||
touch-action: manipulation;
|
||||
clip-path: var(--1px-corner-fill);
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
color: var(--color-foreground-contrast);
|
||||
background-color: var(--color-fill-ghost);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: var(--color-foreground-emphasized);
|
||||
background-color: var(--color-background-dip);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<button
|
||||
class:active={$theme === "dark"}
|
||||
<Button
|
||||
flatRight
|
||||
active={$theme === "dark"}
|
||||
variant="ghost"
|
||||
onclick={() => {
|
||||
storeTheme("dark");
|
||||
}}>
|
||||
<Icon name="moon" />
|
||||
Dark
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<button
|
||||
class:active={$theme === "light"}
|
||||
<Button
|
||||
flatLeft
|
||||
variant="ghost"
|
||||
active={$theme === "light"}
|
||||
onclick={() => {
|
||||
storeTheme("light");
|
||||
}}>
|
||||
<Icon name="sun" />
|
||||
Light
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user