mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-12 10:34:32 +08:00
d7a1a65590
* fix dir overflow and add keyboard navigation * add changeset * tweak * tweak * deep equal * tweak * prevent icon going super small * empty padding tweak * formatting --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
63 lines
1.5 KiB
Svelte
63 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from "svelte";
|
|
export let value: boolean;
|
|
export let disabled: boolean;
|
|
|
|
const dispatch = createEventDispatcher<{ change: boolean }>();
|
|
</script>
|
|
|
|
<input
|
|
bind:checked={value}
|
|
type="checkbox"
|
|
on:click={() => dispatch("change", value)}
|
|
on:keydown={({ key }) =>
|
|
(key === " " || key === "Enter") && dispatch("change", value)}
|
|
{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 {
|
|
cursor: not-allowed;
|
|
border-color: var(--checkbox-border-color-hover);
|
|
background-color: var(--checkbox-background-color-hover);
|
|
}
|
|
|
|
input:disabled:checked,
|
|
input:disabled:checked:hover,
|
|
.disabled:checked:focus {
|
|
opacity: 0.8 !important;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|