mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
|
|
import { styled, theme } from './theme';
|
|
|
|
export const Toolbar = styled(ToolbarPrimitive.Root, {
|
|
display: 'flex',
|
|
padding: '0.4rem',
|
|
margin: '0.5rem 0',
|
|
width: '100%',
|
|
minWidth: 'max-content',
|
|
borderRadius: theme.borderRadius.toolbar,
|
|
backgroundColor: '$gray2',
|
|
alignItems: 'center',
|
|
});
|
|
|
|
const itemStyles = {
|
|
all: 'unset',
|
|
flex: '0 0 auto',
|
|
color: '$gray12',
|
|
padding: '0.6rem 0.8rem',
|
|
borderRadius: theme.borderRadius.form,
|
|
display: 'flex',
|
|
fontSize: '0.9rem',
|
|
lineHeight: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
userSelect: 'none',
|
|
};
|
|
|
|
export const ToolbarButton = styled(ToolbarPrimitive.Button, {
|
|
...itemStyles,
|
|
cursor: 'pointer',
|
|
backgroundColor: '$gray4',
|
|
border: '1px solid $gray6',
|
|
});
|
|
|
|
export const ToolbarComboBox = styled('select', {
|
|
flex: '0 0 auto',
|
|
color: '$gray12',
|
|
display: 'inline-flex',
|
|
lineHeight: 1,
|
|
fontSize: '0.9rem',
|
|
margin: 0,
|
|
fontWeight: '300',
|
|
border: '1px solid $gray6',
|
|
padding: '0.5rem 0.25rem',
|
|
borderRadius: theme.borderRadius.form,
|
|
backgroundColor: '$gray2',
|
|
'&:hover': {
|
|
borderColor: '$teal7',
|
|
},
|
|
'&:focus': {
|
|
borderColor: '$teal7',
|
|
backgroundColor: '$gray3',
|
|
},
|
|
'&:disabled': {
|
|
backgroundColor: '$gray4',
|
|
borderColor: '$gray5',
|
|
color: '$gray8',
|
|
},
|
|
});
|