-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid.jic
71 lines (69 loc) · 3.35 KB
/
grid.jic
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
${containerQuery('[data-grid]', el => el.offsetWidth < 400, `
:self [class*=small-col-1] { width: 10%; }
:self [class*=small-col-2] { width: 20%; }
:self [class*=small-col-3] { width: 30%; }
:self [class*=small-col-4] { width: 40%; }
:self [class*=small-col-5] { width: 50%; }
:self [class*=small-col-6] { width: 60%; }
:self [class*=small-col-7] { width: 70%; }
:self [class*=small-col-8] { width: 80%; }
:self [class*=small-col-9] { width: 90%; }
:self [class*=small-col-10] { width: 100%; }
:self [class*=small-split-1] { width: calc(100%/1); }
:self [class*=small-split-2] { width: calc(100%/2); }
:self [class*=small-split-3] { width: calc(100%/3); }
:self [class*=small-split-4] { width: calc(100%/4); }
:self [class*=small-split-5] { width: calc(100%/5); }
:self [class*=small-split-6] { width: calc(100%/6); }
:self [class*=small-split-7] { width: calc(100%/7); }
:self [class*=small-split-8] { width: calc(100%/8); }
:self [class*=small-split-9] { width: calc(100%/9); }
:self [class*=small-split-10] { width: calc(100%/10); }
:self [class*=hide-small] { display: none; }
`)}
${containerQuery('[data-grid]', el => 400 <= el.offsetWidth && el.offsetWidth < 800, `
:self [class*=medium-col-1] { width: 10%; }
:self [class*=medium-col-2] { width: 20%; }
:self [class*=medium-col-3] { width: 30%; }
:self [class*=medium-col-4] { width: 40%; }
:self [class*=medium-col-5] { width: 50%; }
:self [class*=medium-col-6] { width: 60%; }
:self [class*=medium-col-7] { width: 70%; }
:self [class*=medium-col-8] { width: 80%; }
:self [class*=medium-col-9] { width: 90%; }
:self [class*=medium-col-10] { width: 100%; }
:self [class*=medium-split-1] { width: calc(100%/1); }
:self [class*=medium-split-2] { width: calc(100%/2); }
:self [class*=medium-split-3] { width: calc(100%/3); }
:self [class*=medium-split-4] { width: calc(100%/4); }
:self [class*=medium-split-5] { width: calc(100%/5); }
:self [class*=medium-split-6] { width: calc(100%/6); }
:self [class*=medium-split-7] { width: calc(100%/7); }
:self [class*=medium-split-8] { width: calc(100%/8); }
:self [class*=medium-split-9] { width: calc(100%/9); }
:self [class*=medium-split-10] { width: calc(100%/10); }
:self [class*=hide-medium] { display: none; }
`)}
${containerQuery('[data-grid]', el => 800 <= el.offsetWidth, `
:self [class*=large-col-1] { width: 10%; }
:self [class*=large-col-2] { width: 20%; }
:self [class*=large-col-3] { width: 30%; }
:self [class*=large-col-4] { width: 40%; }
:self [class*=large-col-5] { width: 50%; }
:self [class*=large-col-6] { width: 60%; }
:self [class*=large-col-7] { width: 70%; }
:self [class*=large-col-8] { width: 80%; }
:self [class*=large-col-9] { width: 90%; }
:self [class*=large-col-10] { width: 100%; }
:self [class*=large-split-1] { width: calc(100%/1); }
:self [class*=large-split-2] { width: calc(100%/2); }
:self [class*=large-split-3] { width: calc(100%/3); }
:self [class*=large-split-4] { width: calc(100%/4); }
:self [class*=large-split-5] { width: calc(100%/5); }
:self [class*=large-split-6] { width: calc(100%/6); }
:self [class*=large-split-7] { width: calc(100%/7); }
:self [class*=large-split-8] { width: calc(100%/8); }
:self [class*=large-split-9] { width: calc(100%/9); }
:self [class*=large-split-10] { width: calc(100%/10); }
:self [class*=hide-large] { display: none; }
`)}