tldraw/components/shared.tsx

61 lines
1,008 B
TypeScript
Raw Normal View History

import styled from 'styles'
2021-05-17 10:01:11 +00:00
export const IconButton = styled('button', {
height: '32px',
width: '32px',
backgroundColor: '$panel',
borderRadius: '4px',
padding: '0',
margin: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
outline: 'none',
border: 'none',
pointerEvents: 'all',
cursor: 'pointer',
2021-05-17 10:01:11 +00:00
'&:hover:not(:disabled)': {
backgroundColor: '$hover',
2021-05-17 10:01:11 +00:00
},
'&:disabled': {
opacity: '0.5',
2021-05-17 10:01:11 +00:00
},
'& > svg': {
height: '16px',
width: '16px',
// strokeWidth: '2px',
// stroke: '$text',
},
variants: {
size: {
medium: {
height: 44,
width: 44,
'& svg': {
height: 16,
width: 16,
strokeWidth: 0,
},
},
large: {
height: 44,
width: 44,
'& svg': {
height: 24,
width: 24,
strokeWidth: 0,
},
},
},
isActive: {
true: {
color: '$selected',
},
},
2021-05-17 10:01:11 +00:00
},
})