Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-22 10:46:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/Toggle: accommodate for rtl layouts

Browse source
This commit is contained in:
wukko 2024-11-20 15:33:09 +06:00
parent 6e81c55fc1
commit 94e5aad6c0
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/components/misc/Toggle.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
export let enabled;
export let enabled: boolean;
</script>
<div class="toggle" class:enabled={enabled}>
<div class="toggle" class:enabled>
<div class="toggle-switcher"></div>
</div>
@ -10,6 +10,7 @@
.toggle {
--base-size: 22px;
--ratio-factor: 0.9;
--enabled-pos: calc(100% * var(--ratio-factor));
display: flex;
justify-content: start;
@ -23,6 +24,10 @@
transition: background 0.2s;
}
.toggle:dir(rtl) {
--enabled-pos: calc(-100% * var(--ratio-factor));
}
.toggle-switcher {
height: var(--base-size);
width: var(--base-size);
@ -37,6 +42,7 @@
}
.toggle.enabled .toggle-switcher {
transform: translateX(calc(100% * var(--ratio-factor)));
transform: translateX(var(--enabled-pos));
}
}
</style>