wehub-resource-sync
adf0d17497
publish / version_or_publish (push) Has been cancelled
storybook-build / changes (push) Has been cancelled
storybook-build / :storybook-build (push) Has been cancelled
Sync Gradio Skills to Hugging Face / sync-skills (push) Has been cancelled
functional / changes (push) Has been cancelled
functional / build-frontend (push) Has been cancelled
functional / functional-test-SSR=false (push) Has been cancelled
functional / functional-reload (push) Has been cancelled
js / changes (push) Has been cancelled
js / js-test (push) Has been cancelled
docs-build / changes (push) Has been cancelled
docs-build / docs-build (push) Has been cancelled
docs-build / website-build (push) Has been cancelled
functional / functional-test-SSR=true (push) Has been cancelled
hygiene / hygiene-test (push) Has been cancelled
python / changes (push) Has been cancelled
python / build (push) Has been cancelled
python / test-ubuntu-latest-flaky (push) Has been cancelled
python / test-ubuntu-latest-not-flaky (push) Has been cancelled
python / test-windows-latest-flaky (push) Has been cancelled
python / test-windows-latest-not-flaky (push) Has been cancelled
55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
value: boolean;
|
|
disabled: boolean;
|
|
onchange?: (value: boolean) => void;
|
|
}
|
|
|
|
let { value = $bindable(), disabled, onchange }: Props = $props();
|
|
</script>
|
|
|
|
<input
|
|
bind:checked={value}
|
|
oninput={() => onchange?.(!value)}
|
|
type="checkbox"
|
|
{disabled}
|
|
class:disabled={disabled && !value}
|
|
/>
|
|
|
|
<style>
|
|
input {
|
|
--ring-color: transparent;
|
|
position: relative;
|
|
box-shadow: var(--input-shadow);
|
|
border: 1px solid var(--checkbox-border-color);
|
|
border-radius: var(--radius-xs);
|
|
background-color: var(--checkbox-background-color);
|
|
line-height: var(--line-sm);
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
}
|
|
|
|
input:checked,
|
|
input:checked:hover,
|
|
input:checked:focus {
|
|
border-color: var(--checkbox-border-color-selected);
|
|
background-image: var(--checkbox-check);
|
|
background-color: var(--checkbox-background-color-selected);
|
|
}
|
|
|
|
input:hover {
|
|
border-color: var(--checkbox-border-color-hover);
|
|
background-color: var(--checkbox-background-color-hover);
|
|
}
|
|
|
|
input:focus {
|
|
border-color: var(--checkbox-border-color-focus);
|
|
background-color: var(--checkbox-background-color-focus);
|
|
}
|
|
|
|
.disabled {
|
|
opacity: 0.8 !important;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|