anki/ts/deck-options/ConfigInput.svelte
Matthias Metelka 27eff12235
Fix various RTL issues (#2172)
* Fix RTL issues in deck browser

* Fix RTL issues in deck options

* Fix QMenu indicator being cutoff in RTL mode
2022-11-02 21:47:07 +10:00

45 lines
999 B
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
export let grow = true;
let width = 0;
</script>
<div
class="config-input position-relative justify-content-end"
class:flex-grow-1={grow}
style:--offset="-{width}px"
>
<div class="revert" class:rtl bind:clientWidth={width}>
<slot name="revert" />
</div>
<slot />
</div>
<style lang="scss">
.revert {
position: absolute;
right: var(--offset);
color: var(--fg-faint);
&.rtl {
right: unset;
left: var(--offset);
}
}
.config-input {
&:hover,
&:focus-within {
.revert {
color: var(--fg-subtle);
}
}
.revert:hover {
color: var(--fg);
}
}
</style>