-
Notifications
You must be signed in to change notification settings - Fork 39
/
css.ts
94 lines (91 loc) · 2.02 KB
/
css.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
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
import { ColCss } from './types';
let css: ColCss = {
col: (column: any, gridColumns: number) => {
switch(column){
case true:
return `
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
`;
case 'auto':
return `
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto;
max-width: none;
`;
default:
const singleCol: number = 100 / gridColumns;
const colFlexBasis: number = singleCol * column;
return `
-ms-flex: 0 0 ${colFlexBasis}%;
flex: 0 0 ${colFlexBasis}%;
max-width: ${colFlexBasis}%;
`;
}
},
offset: (offset: any, gridColumns: number) => {
const singleCol: number = 100 / gridColumns;
const offsetFlexBasis: number = singleCol * offset;
const offsetUnit: string = offsetFlexBasis > 0 ? '%' : '';
return `margin-left: ${offsetFlexBasis}${offsetUnit};`;
},
order: (order: any) => {
switch(order){
case 'first':
return `
-ms-flex-order: -1;
order: -1;
`;
case 'last':
return `
-ms-flex-order: 13;
order: 13;
`;
default:
return `
-ms-flex-order: ${order};
order: ${order};
`;
}
},
alignSelf: {
auto: `
-ms-flex-item-align: auto;
align-self: auto;
`,
start: `
-ms-flex-item-align: start;
align-self: flex-start;
`,
end: `
-ms-flex-item-align: end;
align-self: flex-end;
`,
center: `
-ms-flex-item-align: center;
align-self: center;
`,
baseline: `
-ms-flex-item-align: baseline;
align-self: baseline;
`,
stretch: `
-ms-flex-item-align: stretch;
align-self: stretch;
`,
},
display: {
none: `
display: none;
`,
},
noGutter: `
padding-right: 0;
padding-left: 0;
`,
};
export default css;