mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-27 02:30:17 +08:00
65437ce832
* changes * add changeset * changes * changes * add changeset * changes * changes * changes * changes * changes * Update gradio/components/file_explorer.py Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update gradio/components/file_explorer.py Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update demo/file_explorer_component_events/run.py Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * changes * changes * changes --------- Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
52 lines
1.2 KiB
Svelte
52 lines
1.2 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}
|
|
on:input={() => dispatch("change", !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>
|