anki/ts/deck-options/ConfigInput.svelte
Matthias Metelka 264561cd0d
Redesign deck options screen, swap tooltips for help modals (#2139)
* Redesign deck config, swap tooltips for help modals, link to manual

* Replace canvas-inset with canvas-code for custom scheduling

* Make section header link to manual too

* Include elevation Sass library

* Remove two unused exports

* Fix tabbed spinboxes

* Update ftl/core/deck-config.ftl

* Update ftl/core/deck-config.ftl

* Fix format

* Make border-radius and box-shadow more subtle

* Fix margin for vertical aspect ratio

* Make direct hover on info badge apply effect instantly

* Add redirect line to manual underneath chapter
2022-10-25 16:18:50 +10:00

39 lines
819 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">
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" bind:clientWidth={width}>
<slot name="revert" />
</div>
<slot />
</div>
<style lang="scss">
.revert {
position: absolute;
right: var(--offset);
color: var(--fg-faint);
}
.config-input {
&:hover,
&:focus-within {
.revert {
color: var(--fg-subtle);
}
}
.revert:hover {
color: var(--fg);
}
}
</style>