onFocus={onFocus}
type="checkbox"
/>
- {!loading && (
- <StyledCheckbox aria-hidden data-clickable="true" title={title}>
- <CheckboxIcon checked={checked} thirdState={thirdState} />
- </StyledCheckbox>
- )}
- <Spinner loading={loading} />
+ <div>
+ <Spinner loading={loading}>
+ <StyledCheckbox aria-hidden data-clickable="true" title={title}>
+ <CheckboxIcon checked={checked} thirdState={thirdState} />
+ </StyledCheckbox>
+ </Spinner>
+ </div>
{!right && children}
</CheckboxContainer>
);
&:focus,
&:active {
- &:not(:disabled) + ${StyledCheckbox} {
+ &:not(:disabled) + div > ${StyledCheckbox} {
outline: ${themeBorder('focus', 'primary')};
}
}
&:checked {
- & + ${StyledCheckbox} {
+ & + div > ${StyledCheckbox} {
background: ${themeColor('primary')};
}
- &:disabled + ${StyledCheckbox} {
+ &:disabled + div > ${StyledCheckbox} {
background: ${themeColor('checkboxDisabledChecked')};
}
}
&:hover {
- &:not(:disabled) + ${StyledCheckbox} {
+ &:not(:disabled) + div > ${StyledCheckbox} {
background: ${themeColor('checkboxHover')};
border: ${themeBorder('default', 'primary')};
}
- &:checked:not(:disabled) + ${StyledCheckbox} {
+ &:checked:not(:disabled) + div > ${StyledCheckbox} {
background: ${themeColor('checkboxCheckedHover')};
border: ${themeBorder('default', 'checkboxCheckedHover')};
}
}
- &:disabled + ${StyledCheckbox} {
+ &:disabled + div > ${StyledCheckbox} {
background: ${themeColor('checkboxDisabled')};
color: ${themeColor('checkboxDisabled')};
border: ${themeBorder('default', 'checkboxDisabledChecked')};