2
0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-18 10:44:33 +08:00
gradio/ui/packages/form/src/Checkbox.svelte

84 lines
1.8 KiB
Svelte
Raw Normal View History

2022-03-03 00:42:43 +08:00
<script lang="ts">
import { createEventDispatcher } from "svelte";
2022-03-12 00:00:48 +08:00
2022-03-03 00:42:43 +08:00
export let value: boolean;
2022-03-12 00:00:48 +08:00
export let disabled: boolean = false;
export let label: string;
2022-03-03 00:42:43 +08:00
const dispatch = createEventDispatcher<{ change: boolean }>();
function handle_change(value: boolean) {
dispatch("change", value);
2022-03-03 00:42:43 +08:00
}
$: handle_change(value);
2022-03-03 00:42:43 +08:00
</script>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class:disabled>
<input
bind:checked={value}
{disabled}
type="checkbox"
name="test"
data-testid="checkbox"
/>
<span class="ml-2">{label}</span>
</label>
<style>
label {
display: flex;
align-items: center;
cursor: pointer;
Python backend to theming (#2931) * add theme + theme atoms * audio * buttons * chatbot * forms * start file * complete file * fixup workbench * gallery * highlighted text * label * json * upload * 3d model * atoms * chart * md + html * image * plot + build * table * tabs * tooltip * upload * tweaks * tweaks + more tooling * tweaks to padding/ lineheight * app components _ start api docs * format, more api docs * finish api docs * interpretation * todos * tweaks + cleanup * tweaks + cleanup * revert range tweaks * fix notebooks * fix test * remove tw * cleanup + login * fix gitignore * fix types * run css script * fix progress + tweaks * update demos * add css build to static check workflow * tweak ci * fix tests * tweak markdown * tweak chatbot + file * fix tabs * tweak tabs * cleanup * fix api docs * fix example gallery * add gradient to toast * fix min height for interfaces * revert tab changes * update notebooks * changes * changes * change * changes * changes * changes * changes * changes * changes * changes * changes * change * changes * changes * changes * changes * changes * changes * changes * fix * changes * changes * changes * changes * changes * changes * undo radius * undo radius * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * change * undo * Add absolute imports * mock theme in tests * clean * changes * changes --------- Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2023-03-07 04:52:31 +08:00
color: var(--body-text-color);
font-weight: var(--checkbox-label-text-weight);
font-size: var(--checkbox-label-text-size);
line-height: var(--line-md);
}
label > * + * {
margin-left: var(--size-2);
}
input {
--ring-color: transparent;
position: relative;
Python backend to theming (#2931) * add theme + theme atoms * audio * buttons * chatbot * forms * start file * complete file * fixup workbench * gallery * highlighted text * label * json * upload * 3d model * atoms * chart * md + html * image * plot + build * table * tabs * tooltip * upload * tweaks * tweaks + more tooling * tweaks to padding/ lineheight * app components _ start api docs * format, more api docs * finish api docs * interpretation * todos * tweaks + cleanup * tweaks + cleanup * revert range tweaks * fix notebooks * fix test * remove tw * cleanup + login * fix gitignore * fix types * run css script * fix progress + tweaks * update demos * add css build to static check workflow * tweak ci * fix tests * tweak markdown * tweak chatbot + file * fix tabs * tweak tabs * cleanup * fix api docs * fix example gallery * add gradient to toast * fix min height for interfaces * revert tab changes * update notebooks * changes * changes * change * changes * changes * changes * changes * changes * changes * changes * changes * change * changes * changes * changes * changes * changes * changes * changes * fix * changes * changes * changes * changes * changes * changes * undo radius * undo radius * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * change * undo * Add absolute imports * mock theme in tests * clean * changes * changes --------- Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2023-03-07 04:52:31 +08:00
box-shadow: var(--input-shadow);
border: 1px solid var(--checkbox-border-color);
border-radius: var(--checkbox-border-radius);
Python backend to theming (#2931) * add theme + theme atoms * audio * buttons * chatbot * forms * start file * complete file * fixup workbench * gallery * highlighted text * label * json * upload * 3d model * atoms * chart * md + html * image * plot + build * table * tabs * tooltip * upload * tweaks * tweaks + more tooling * tweaks to padding/ lineheight * app components _ start api docs * format, more api docs * finish api docs * interpretation * todos * tweaks + cleanup * tweaks + cleanup * revert range tweaks * fix notebooks * fix test * remove tw * cleanup + login * fix gitignore * fix types * run css script * fix progress + tweaks * update demos * add css build to static check workflow * tweak ci * fix tests * tweak markdown * tweak chatbot + file * fix tabs * tweak tabs * cleanup * fix api docs * fix example gallery * add gradient to toast * fix min height for interfaces * revert tab changes * update notebooks * changes * changes * change * changes * changes * changes * changes * changes * changes * changes * changes * change * changes * changes * changes * changes * changes * changes * changes * fix * changes * changes * changes * changes * changes * changes * undo radius * undo radius * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * changes * change * undo * Add absolute imports * mock theme in tests * clean * changes * changes --------- Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2023-03-07 04:52:31 +08:00
background-color: var(--checkbox-background);
line-height: var(--line-sm);
}
input:checked {
border-color: var(--checkbox-border-color-selected);
background-color: var(--checkbox-background-selected);
}
input:hover {
border-color: var(--checkbox-border-color-hover);
background-color: var(--checkbox-background-hover);
}
input:focus {
border-color: var(--checkbox-border-color-focus);
background-color: var(--checkbox-background-focus);
}
input:checked:focus {
border-color: var(--checkbox-background-selected);
background-color: var(--checkbox-background-selected);
}
input:checked:hover {
border-color: var(--checkbox-background-selected);
background-color: var(--checkbox-background-selected);
}
input[disabled],
.disabled {
cursor: not-allowed;
}
</style>