vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[CL-80] feat: indeterminate checkbox (#6357) 

* add indeterminate svg
This commit is contained in:
Will Martin 2023-09-28 09:04:16 -04:00 committed by GitHub
parent 8bef0883f5
commit 58cd35ef76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
libs/components/src/checkbox/checkbox.component.ts
View File

@ -44,21 +44,33 @@ export class CheckboxComponent implements BitFormControlAbstraction {
"checked:tw-bg-primary-500", "checked:tw-bg-primary-500",
"checked:tw-border-primary-500", "checked:tw-border-primary-500",
"checked:hover:tw-bg-primary-700", "checked:hover:tw-bg-primary-700",
"checked:hover:tw-border-primary-700", "checked:hover:tw-border-primary-700",
"[&>label:hover]:checked:tw-bg-primary-700", "[&>label:hover]:checked:tw-bg-primary-700",
"[&>label:hover]:checked:tw-border-primary-700", "[&>label:hover]:checked:tw-border-primary-700",
"checked:before:tw-bg-text-contrast", "checked:before:tw-bg-text-contrast",
"checked:before:tw-mask-image-[var(--mask-image)]",
"checked:before:tw-mask-position-[center]", "checked:before:tw-mask-position-[center]",
"checked:before:tw-mask-repeat-[no-repeat]", "checked:before:tw-mask-repeat-[no-repeat]",
"checked:disabled:tw-border-secondary-100", "checked:disabled:tw-border-secondary-100",
"checked:disabled:tw-bg-secondary-100", "checked:disabled:tw-bg-secondary-100",
"checked:disabled:before:tw-bg-text-muted", "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) {} constructor(@Optional() @Self() private ngControl?: NgControl) {}
@ -66,6 +78,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
@HostBinding("style.--mask-image") @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')`; 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() @HostBinding()
@Input() @Input()
get disabled() { get disabled() {

9
libs/components/src/checkbox/checkbox.stories.ts
View File

@ -110,3 +110,12 @@ export const Custom: Story = {
`, `,
}), }),
}; };
export const Indeterminate: Story = {
render: (args) => ({
props: args,
template: `
<input type="checkbox" bitCheckbox [indeterminate]="true">
`,
}),
};