-
Notifications
You must be signed in to change notification settings - Fork 42
/
index.js
61 lines (56 loc) · 1.35 KB
/
index.js
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
54
55
56
57
58
59
60
61
import {
fonts,
spacing,
colours,
editionBreakpoints
} from "@times-components/styleguide";
const fontSizeResolver = {
[editionBreakpoints.small]: 18,
[editionBreakpoints.medium]: 18,
[editionBreakpoints.wide]: 20,
[editionBreakpoints.huge]: 22
};
const sharedStyles = {
container: {
flex: 1,
backgroundColor: colours.functional.darkSupplement,
padding: spacing(2)
},
flagColour: {
color: colours.functional.greyLabel
},
headlineStyle: {
color: colours.functional.white,
fontFamily: fonts.headline
},
summaryContainer: {
flex: 1
}
};
const smallBreakpointStyles = breakpoint => ({
...sharedStyles,
container: {
...sharedStyles.container,
paddingHorizontal: 12,
marginRight: spacing(1)
},
headlineStyle: {
...sharedStyles.headlineStyle,
fontSize: fontSizeResolver[breakpoint],
lineHeight: fontSizeResolver[breakpoint],
marginBottom: 11
}
});
const mediumBreakpointStyles = breakpoint => ({
...sharedStyles,
headlineStyle: {
...sharedStyles.headlineStyle,
fontSize: fontSizeResolver[breakpoint],
lineHeight: fontSizeResolver[breakpoint],
marginTop: breakpoint === editionBreakpoints.huge ? spacing(1) : 0
}
});
export default breakpoint =>
breakpoint === editionBreakpoints.small
? smallBreakpointStyles(breakpoint)
: mediumBreakpointStyles(breakpoint);