Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-12 13:17:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/settings: replace checkbox with toggle

Browse Source 
- equal font size & padding for all subtexts in settings
- equal padding & border radius for all settings components

it just looks way better now
This commit is contained in:
wukko
2024-06-29 22:51:24 +06:00
parent c7befcb100
commit ad6539e3bd
9 changed files with 139 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/components/misc/Toggle.svelte Normal file
View File

@ -0,0 +1,42 @@
<script lang="ts">
export let enabled;
</script>
<div class="toggle" class:enabled={enabled}>
<div class="toggle-switcher"></div>
</div>
<style>
.toggle {
--base-size: 20px;
--ratio-factor: 0.9;
display: flex;
justify-content: start;
align-items: center;
min-width: calc(var(--base-size) * (1 + var(--ratio-factor)));
padding: 2px;
aspect-ratio: 2/1;
border-radius: 5px;
border-radius: 100px;
background: var(--toggle-bg);
transition: background 0.2s;
}
.toggle-switcher {
height: var(--base-size);
width: var(--base-size);
background: var(--white);
border-radius: 100px;
transform: translateX(0%);
transition: transform 0.2s;
}
.toggle.enabled {
background: var(--toggle-bg-enabled);
}
.toggle.enabled .toggle-switcher {
transform: translateX(calc(100% * var(--ratio-factor)));
}
</style>