-
Notifications
You must be signed in to change notification settings - Fork 1.9k
/
Group.styles.ts
44 lines (40 loc) · 1.22 KB
/
Group.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
import React from 'react';
import { createStyles, MantineNumberSize } from '@mantine/styles';
export type GroupPosition = 'right' | 'center' | 'left' | 'apart';
export interface GroupStylesParams {
position: GroupPosition;
noWrap: boolean;
grow: boolean;
spacing: MantineNumberSize;
align: React.CSSProperties['alignItems'];
count: number;
}
export const GROUP_POSITIONS = {
left: 'flex-start',
center: 'center',
right: 'flex-end',
apart: 'space-between',
};
export default createStyles(
(theme, { spacing, position, noWrap, grow, align, count }: GroupStylesParams) => ({
root: {
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
alignItems: align || 'center',
flexWrap: noWrap ? 'nowrap' : 'wrap',
justifyContent: GROUP_POSITIONS[position],
gap: theme.fn.size({ size: spacing, sizes: theme.spacing }),
'& > *': {
boxSizing: 'border-box',
maxWidth: grow
? `calc(${100 / count}% - ${
theme.fn.size({ size: spacing, sizes: theme.spacing }) -
theme.fn.size({ size: spacing, sizes: theme.spacing }) / count
}px)`
: undefined,
flexGrow: grow ? 1 : 0,
},
},
})
);