-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
InlineInput.styles.ts
53 lines (44 loc) · 1.34 KB
/
InlineInput.styles.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { createStyles, MantineSize } from '@mantine/styles';
const sizes = {
xs: 16,
sm: 20,
md: 24,
lg: 30,
xl: 36,
};
export interface InlineInputStylesParams {
size: MantineSize;
labelPosition: 'left' | 'right';
}
export default createStyles((theme, { labelPosition, size }: InlineInputStylesParams) => ({
root: {},
body: {
display: 'inline-flex',
},
labelWrapper: {
...theme.fn.fontStyles(),
display: 'inline-flex',
flexDirection: 'column',
WebkitTapHighlightColor: 'transparent',
fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
lineHeight: `${theme.fn.size({ size, sizes })}px`,
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
cursor: theme.cursorType,
order: labelPosition === 'left' ? 1 : 2,
},
description: {
marginTop: `calc(${theme.spacing.xs}px / 2)`,
[labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
},
error: {
marginTop: `calc(${theme.spacing.xs}px / 2)`,
[labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
},
label: {
cursor: theme.cursorType,
[labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
'&[data-disabled]': {
color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
},
},
}));