Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-22 18:56:21 +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"> <script lang="ts">
export let enabled; export let enabled: boolean;
</script> </script>
<div class="toggle" class:enabled={enabled}> <div class="toggle" class:enabled>
<div class="toggle-switcher"></div> <div class="toggle-switcher"></div>
</div> </div>
@ -10,6 +10,7 @@
.toggle { .toggle {
--base-size: 22px; --base-size: 22px;
--ratio-factor: 0.9; --ratio-factor: 0.9;
--enabled-pos: calc(100% * var(--ratio-factor));
display: flex; display: flex;
justify-content: start; justify-content: start;
@ -23,6 +24,10 @@
transition: background 0.2s; transition: background 0.2s;
} }
.toggle:dir(rtl) {
--enabled-pos: calc(-100% * var(--ratio-factor));
}
.toggle-switcher { .toggle-switcher {
height: var(--base-size); height: var(--base-size);
width: var(--base-size); width: var(--base-size);
@ -37,6 +42,7 @@
} }
.toggle.enabled .toggle-switcher { .toggle.enabled .toggle-switcher {
transform: translateX(calc(100% * var(--ratio-factor))); transform: translateX(var(--enabled-pos));
}
} }
</style> </style>