mirror of
https://github.com/bitwarden/browser
synced 2024-12-24 17:11:55 +01:00
parent
8bef0883f5
commit
58cd35ef76
@ -44,21 +44,33 @@ export class CheckboxComponent implements BitFormControlAbstraction {
|
||||
|
||||
"checked:tw-bg-primary-500",
|
||||
"checked:tw-border-primary-500",
|
||||
|
||||
"checked:hover:tw-bg-primary-700",
|
||||
"checked:hover:tw-border-primary-700",
|
||||
"[&>label:hover]:checked:tw-bg-primary-700",
|
||||
"[&>label:hover]:checked:tw-border-primary-700",
|
||||
|
||||
"checked:before:tw-bg-text-contrast",
|
||||
"checked:before:tw-mask-image-[var(--mask-image)]",
|
||||
"checked:before:tw-mask-position-[center]",
|
||||
"checked:before:tw-mask-repeat-[no-repeat]",
|
||||
|
||||
"checked:disabled:tw-border-secondary-100",
|
||||
"checked:disabled:tw-bg-secondary-100",
|
||||
|
||||
"checked:disabled:before:tw-bg-text-muted",
|
||||
|
||||
"[&:not(:indeterminate)]:checked:before:tw-mask-image-[var(--mask-image)]",
|
||||
"indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
|
||||
|
||||
"indeterminate:tw-bg-primary-500",
|
||||
"indeterminate:tw-border-primary-500",
|
||||
"indeterminate:hover:tw-bg-primary-700",
|
||||
"indeterminate:hover:tw-border-primary-700",
|
||||
"[&>label:hover]:indeterminate:tw-bg-primary-700",
|
||||
"[&>label:hover]:indeterminate:tw-border-primary-700",
|
||||
"indeterminate:before:tw-bg-text-contrast",
|
||||
"indeterminate:before:tw-mask-position-[center]",
|
||||
"indeterminate:before:tw-mask-repeat-[no-repeat]",
|
||||
"indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
|
||||
"indeterminate:disabled:tw-border-secondary-100",
|
||||
"indeterminate:disabled:tw-bg-secondary-100",
|
||||
"indeterminate:disabled:before:tw-bg-text-muted",
|
||||
];
|
||||
|
||||
constructor(@Optional() @Self() private ngControl?: NgControl) {}
|
||||
@ -66,6 +78,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
|
||||
@HostBinding("style.--mask-image")
|
||||
protected maskImage = `url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
|
||||
|
||||
@HostBinding("style.--indeterminate-mask-image")
|
||||
protected indeterminateImage = `url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="none" viewBox="0 0 13 13"%3E%3Cpath stroke="%23fff" stroke-width="2" d="M2.5 6.5h8"/%3E%3C/svg%3E%0A')`;
|
||||
|
||||
@HostBinding()
|
||||
@Input()
|
||||
get disabled() {
|
||||
|
@ -110,3 +110,12 @@ export const Custom: Story = {
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
export const Indeterminate: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
<input type="checkbox" bitCheckbox [indeterminate]="true">
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user