Fix checkbox indeterminate background

This commit is contained in:
Charles Bochet
2023-08-10 15:58:24 -07:00
parent 285bf773de
commit 20b641bfe6

View File

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