mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
Make checkboxes more like other UI elements
This commit is contained in:
parent
6d97f81c32
commit
bccea52b03
1 changed files with 19 additions and 4 deletions
|
@ -259,19 +259,34 @@ export const Checkbox = styled(CheckboxPrimitive.Root, {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
border: '1px solid $teal6',
|
border: '1px solid $gray6',
|
||||||
backgroundColor: '$teal4',
|
backgroundColor: '$gray4',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
backgroundColor: '$teal5',
|
borderColor: '$teal6',
|
||||||
|
backgroundColor: '$gray5',
|
||||||
},
|
},
|
||||||
'&:active': {
|
'&:active': {
|
||||||
background: '$teal6',
|
background: '$gray6',
|
||||||
},
|
},
|
||||||
'&:disabled': {
|
'&:disabled': {
|
||||||
backgroundColor: '$gray4',
|
backgroundColor: '$gray4',
|
||||||
borderColor: '$gray5',
|
borderColor: '$gray5',
|
||||||
color: '$gray8',
|
color: '$gray8',
|
||||||
},
|
},
|
||||||
|
variants: {
|
||||||
|
variation: {
|
||||||
|
primary: {
|
||||||
|
border: '1px solid $teal6',
|
||||||
|
backgroundColor: '$teal4',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: '$teal5',
|
||||||
|
},
|
||||||
|
'&:active': {
|
||||||
|
background: '$teal6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
|
export const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
|
||||||
|
|
Loading…
Reference in a new issue