anki/ts/components/Switch.svelte
Matthias Metelka e109c62aa9
Improve hover feedback on various widgets (#2079)
* Use cursor: pointer on QCheckBoxes too and exclude disabled widgets

* Left-align all QCheckBoxes to make hover-area and clickable area the same

Altough the clickable area has always been restricted to the label, the widget itself stretched all the way. This became a problem with the new cursor-pointer for checkboxes.

* Remove Switch duplicate from deck-options

* Add cursor: pointer to Switch and RevertButton

* Add cursor: pointer to bottom toolbar buttons

* Add cursor: pointer to gears

* Add cursor: pointer to radio and checkbox inputs of graphs page

* Improve button appearance in stats screen

* Add cursor: pointer to QTabBar and QToolButton

* Add cursor: pointer to non-editable QComboBox

* Center settings-will-take-effect-after notice in preferences screen

* Use public without_qt5_compat_wrapper() function

* Run prettier
2022-09-20 16:34:15 +10:00

49 lines
1.1 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { pageTheme } from "../sveltelib/theme";
export let id: string | undefined;
export let value: boolean;
export let disabled = false;
</script>
<div class="form-check form-switch">
<input
{id}
type="checkbox"
class="form-check-input"
class:nightMode={$pageTheme.isDark}
bind:checked={value}
{disabled}
/>
</div>
<style lang="scss">
.form-switch {
/* bootstrap adds a default 2.5em left pad, which causes */
/* text to wrap prematurely */
padding-left: 0.5em;
}
.form-check-input {
-webkit-appearance: none;
height: 1.6em;
/* otherwise the switch circle shows slightly off-centered */
margin-top: 0;
.form-switch & {
width: 3em;
margin-left: 1.5em;
cursor: pointer;
}
}
.nightMode:not(:checked) {
background-color: var(--canvas-elevated);
border-color: var(--border);
}
</style>