admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix checkbox indeterminate background

Browse Source
This commit is contained in:
Charles Bochet
2023-08-10 15:58:24 -07:00
parent 285bf773de
commit 20b641bfe6
1 changed files with 4 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/modules/ui/input/checkbox/components/Checkbox.tsx
View File

@ -59,10 +59,10 @@ const StyledInput = styled.input<{
& + label:before { & + label:before {
--size: ${({ checkboxSize }) => --size: ${({ checkboxSize }) =>
checkboxSize === CheckboxSize.Large ? '18px' : '12px'}; checkboxSize === CheckboxSize.Large ? '18px' : '12px'};
background: ${({ theme, indeterminate }) => background: ${({ theme, indeterminate, isChecked }) =>
indeterminate ? theme.color.blue : 'transparent'}; indeterminate || isChecked ? theme.color.blue : 'transparent'};
border-color: ${({ theme, indeterminate, variant }) => border-color: ${({ theme, indeterminate, isChecked, variant }) =>
indeterminate indeterminate || isChecked
? theme.color.blue ? theme.color.blue
: variant === CheckboxVariant.Primary : variant === CheckboxVariant.Primary
? theme.border.color.inverted ? theme.border.color.inverted
@ -80,13 +80,6 @@ const StyledInput = styled.input<{
width: var(--size); width: var(--size);
} }
& + label:before {
background: ${({ theme, isChecked }) =>
isChecked ? theme.color.blue : 'inherit'};
border-color: ${({ theme, isChecked }) =>
isChecked ? theme.color.blue : 'inherit'};
}
& + label > svg { & + label > svg {
--padding: ${({ checkboxSize }) => --padding: ${({ checkboxSize }) =>
checkboxSize === CheckboxSize.Large ? '2px' : '1px'}; checkboxSize === CheckboxSize.Large ? '2px' : '1px'};