react-native-basscss/index.ts at master · yvvw/react-native-basscss · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
// border
export const borderTopNone = { borderTopWidth: 0 }
export const borderRightNone = { borderRightWidth: 0 }
export const borderBottomNone = { borderBottomWidth: 0 }
export const borderLeftNone = { borderLeftWidth: 0 }
export const borderNone = {
  borderTopWidth: 0,
  borderRightWidth: 0,
  borderBottomWidth: 0,
  borderLeftWidth: 0
}

// flexbox
export const flexRow = { flexDirection: 'row' }
export const flexRowReverse = { flexDirection: 'row-reverse' }
export const flexColumn = { flexDirection: 'column' }
export const flexColumnReverse = { flexDirection: 'column-reverse' }

export const flexNoShrink = { flex: 0 }

export const flexWrap = { flexWrap: 'wrap' }

export const itemsStart = { alignItems: 'flex-start' }
export const itemsEnd = { alignItems: 'flex-end' }
export const itemsCenter = { alignItems: 'center' }
export const itemsStretch = { alignItems: 'stretch' }
export const itemsBaseline = { alignItems: 'baseline' }

export const selfAuto = { alignSelf: 'auto' }
export const selfStart = { alignSelf: 'flex-start' }
export const selfEnd = { alignSelf: 'flex-end' }
export const selfCenter = { alignSelf: 'center' }
export const selfStretch = { alignSelf: 'stretch' }
export const selfBaseline = { alignSelf: 'baseline' }

export const justifyStart = { justifyContent: 'flex-start' }
export const justifyEnd = { justifyContent: 'flex-end' }
export const justifyCenter = { justifyContent: 'center' }
export const justifyBetween = { justifyContent: 'space-between' }
export const justifyAround = { justifyContent: 'space-around' }
export const justifyEvenly = { justifyContent: 'space-evenly' }

export const contentStart = { alignContent: 'flex-start' }
export const contentEnd = { alignContent: 'flex-end' }
export const contentCenter = { alignContent: 'center' }
export const contentStretch = { alignContent: 'stretch' }
export const contentBetween = { alignContent: 'space-between' }
export const contentAround = { alignContent: 'space-around' }

// hide
export const hide = { display: 'none' }

// layout
export const overflowVisible = { overflow: 'visible' }
export const overflowHidden = { overflow: 'hidden' }
export const overflowScroll = { overflow: 'scroll' }

// position
export const absolute = { position: 'absolute' }
export const relative = { position: 'relative' }

export const top0 = { top: 0 }
export const right0 = { right: 0 }
export const bottom0 = { bottom: 0 }
export const left0 = { left: 0 }

export const z1 = { zIndex: 1 }
export const z2 = { zIndex: 2 }
export const z3 = { zIndex: 3 }
export const z4 = { zIndex: 4 }

// type-scale
export const size10 = { fontSize: 10 }
export const size11 = { fontSize: 11 }
export const size12 = { fontSize: 12 }
export const size13 = { fontSize: 13 }
export const size14 = { fontSize: 14 }
export const size15 = { fontSize: 15 }
export const size16 = { fontSize: 16 }
export const size17 = { fontSize: 17 }
export const size18 = { fontSize: 18 }
export const size19 = { fontSize: 19 }
export const size20 = { fontSize: 20 }
export const size21 = { fontSize: 21 }
export const size22 = { fontSize: 22 }
export const size23 = { fontSize: 23 }
export const size24 = { fontSize: 24 }
export const size25 = { fontSize: 25 }
export const size26 = { fontSize: 26 }
export const size27 = { fontSize: 27 }
export const size28 = { fontSize: 28 }
export const size29 = { fontSize: 29 }
export const size30 = { fontSize: 30 }

// typography
export const italic = { fontStyle: 'italic' }

export const bold = { fontWeight: 'bold' }
export const weight1 = { fontWeight: '100' }
export const weight2 = { fontWeight: '200' }
export const weight3 = { fontWeight: '300' }
export const weight4 = { fontWeight: '400' }
export const weight5 = { fontWeight: '500' }
export const weight6 = { fontWeight: '600' }
export const weight7 = { fontWeight: '700' }
export const weight8 = { fontWeight: '800' }
export const weight9 = { fontWeight: '900' }

export const leftAlign = { textAlign: 'left' }
export const rightAlign = { textAlign: 'right' }
export const center = { textAlign: 'center' }
export const justify = { textAlign: 'justify' }

// @deprecate
// https://facebook.github.io/react-native/docs/layout-props#flex
export const flexAutoGrow = { flexGrow: 1 }