UNPKG

style-forge.media

Version:

Style-Forge.Media: comprehensive CSS media query helpers for responsive web design.

style-forge.github.io/media/

Style-Forge/media

141 lines (118 loc) • 6.83 kB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@media only screen and (min-width: 601px) and (max-width: 1024px) { [class*='cols'].\@tab\:reverse:not(.ltr), [class*='cols'].\@tab\:reverse\:wrap:not(.ltr) { direction: rtl } [class*='cols'].\@tab\:reverse > *:not(.rtl), [class*='cols'].\@tab\:reverse\:wrap > *:not(.rtl) { direction: ltr } /* flex */ .\@tab\:d\:f[class*='cols'], .\@tab\:d\:f\:x[class*='cols'], .\@tab\:d\:f\:y[class*='cols'] { margin: 0 } .\@tab\:d\:f[class*="cols"] > [class*="col"], .\@tab\:d\:f\:x[class*="cols"] > [class*="col"], .\@tab\:d\:f\:y[class*="cols"] > [class*="col"] { width: calc(var(--col, 1) / var(--cols, 12) * 100%) } .\@tab\:d\:f[class*="cols"] > [class*="col:start"], .\@tab\:d\:f\:x[class*="cols"] > [class*="col:start"], .\@tab\:d\:f\:y[class*="cols"] > [class*="col:start"] { margin-left: calc((var(--cs, 1) - 1) / var(--cols, 12) * 100%) } .\@tab\:d\:f[class*="cols"] > [class*="col:end"], .\@tab\:d\:f\:x[class*="cols"] > [class*="col:end"], .\@tab\:d\:f\:y[class*="cols"] > [class*="col:end"] { margin-right: calc((var(--ce, 1) - 1) / var(--cols, 12) * 100%) } [class*='cols'].reverse.\@tab\:d\:f:not(.rtl), [class*='cols'].reverse.\@tab\:d\:f\:x:not(.rtl), [class*='cols'].reverse.\@tab\:d\:f\:y:not(.rtl), [class*='cols'].reverse\:wrap.\@tab\:d\:f:not(.rtl), [class*='cols'].reverse\:wrap.\@tab\:d\:f\:x:not(.rtl), [class*='cols'].reverse\:wrap.\@tab\:d\:f\:y:not(.rtl), [class*='cols'].\@tab\:reverse.d\:f:not(.rtl), [class*='cols'].\@tab\:reverse.d\:f\:x:not(.rtl), [class*='cols'].\@tab\:reverse.d\:f\:y:not(.rtl), [class*='cols'].\@tab\:reverse\:wrap.d\:f:not(.rtl), [class*='cols'].\@tab\:reverse\:wrap.d\:f\:x:not(.rtl), [class*='cols'].\@tab\:reverse\:wrap.d\:f\:y:not(.rtl), [class*='cols'].\@tab\:reverse.\@tab\:d\:f:not(.rtl), [class*='cols'].\@tab\:reverse.\@tab\:d\:f\:x:not(.rtl), [class*='cols'].\@tab\:reverse.\@tab\:d\:f\:y:not(.rtl), [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:f:not(.rtl), [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:f\:x:not(.rtl), [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:f\:y:not(.rtl) { direction: ltr } /* grid */ .\@tab\:d\:g[class*='cols'], .\@tab\:d\:g\:x[class*='cols'], .\@tab\:d\:g\:y[class*='cols'] { margin: 0 } .\@tab\:d\:g[class*='cols'] > *, .\@tab\:d\:g\:x[class*='cols'] > *, .\@tab\:d\:g\:y[class*='cols'] > *, .\@tab\:d\:g[class*='rows'] > *, .\@tab\:d\:g\:x[class*='rows'] > *, .\@tab\:d\:g\:y[class*='rows'] > * { --sf-grid-width: auto; width: var(--sf-grid-width); margin-top: calc(var(--sf-gap-y) * 0); margin-left: calc(var(--sf-gap-x) * 0); margin-right: calc(var(--sf-gap-x) * 0); padding-top: calc(var(--sf-gap-y) * 0); padding-left: calc(var(--sf-gap-x) * 0); } /* /// */ html.var [class*='cols'].reverse.\@tab\:d\:f\:y:not(.ltr), html.var [class*='cols'].reverse\:wrap.\@tab\:d\:f\:y:not(.ltr), html.var [class*='cols'].\@tab\:reverse.d\:f\:y:not(.ltr), html.var [class*='cols'].\@tab\:reverse\:wrap.d\:f\:y:not(.ltr), html.var [class*='cols'].\@tab\:reverse.\@tab\:d\:f\:y:not(.ltr), html.var [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:f\:y:not(.ltr), html.flex [class*='cols'].reverse.\@tab\:d\:f:not(.ltr), html.flex [class*='cols'].reverse.\@tab\:d\:f\:x:not(.ltr), html.flex [class*='cols'].reverse.\@tab\:d\:f\:y:not(.ltr), html.flex [class*='cols'].reverse\:wrap.\@tab\:d\:f:not(.ltr), html.flex [class*='cols'].reverse\:wrap.\@tab\:d\:f\:x:not(.ltr), html.flex [class*='cols'].reverse\:wrap.\@tab\:d\:f\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.d\:f:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.d\:f\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.d\:f\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.d\:f:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.d\:f\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.d\:f\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.\@tab\:d\:f:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.\@tab\:d\:f\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.\@tab\:d\:f\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:f:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:f\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:f\:y:not(.ltr) { direction: rtl } html.grid [class*='cols'].reverse.\@tab\:d\:g:not(.rtl), html.grid [class*='cols'].reverse.\@tab\:d\:g\:x:not(.rtl), html.grid [class*='cols'].reverse.\@tab\:d\:g\:y:not(.rtl), html.grid [class*='cols'].reverse\:wrap.\@tab\:d\:g:not(.rtl), html.grid [class*='cols'].reverse\:wrap.\@tab\:d\:g\:x:not(.rtl), html.grid [class*='cols'].reverse\:wrap.\@tab\:d\:g\:y:not(.rtl), html.grid [class*='cols'].\@tab\:reverse.d\:g:not(.rtl), html.grid [class*='cols'].\@tab\:reverse.d\:g\:x:not(.rtl), html.grid [class*='cols'].\@tab\:reverse.d\:g\:y:not(.rtl), html.grid [class*='cols'].\@tab\:reverse\:wrap.d\:g:not(.rtl), html.grid [class*='cols'].\@tab\:reverse\:wrap.d\:g\:x:not(.rtl), html.grid [class*='cols'].\@tab\:reverse\:wrap.d\:g\:y:not(.rtl), html.grid [class*='cols'].\@tab\:reverse.\@tab\:d\:g:not(.rtl), html.grid [class*='cols'].\@tab\:reverse.\@tab\:d\:g\:x:not(.rtl), html.grid [class*='cols'].\@tab\:reverse.\@tab\:d\:g\:y:not(.rtl), html.grid [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:g:not(.rtl), html.grid [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:g\:x:not(.rtl), html.grid [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:g\:y:not(.rtl) { direction: ltr } html.flex [class*='cols'].reverse.\@tab\:d\:g:not(.ltr), html.flex [class*='cols'].reverse.\@tab\:d\:g\:x:not(.ltr), html.flex [class*='cols'].reverse.\@tab\:d\:g\:y:not(.ltr), html.flex [class*='cols'].reverse\:wrap.\@tab\:d\:g:not(.ltr), html.flex [class*='cols'].reverse\:wrap.\@tab\:d\:g\:x:not(.ltr), html.flex [class*='cols'].reverse\:wrap.\@tab\:d\:g\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.d\:g:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.d\:g\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.d\:g\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.d\:g:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.d\:g\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.d\:g\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.\@tab\:d\:g:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.\@tab\:d\:g\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse.\@tab\:d\:g\:y:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:g:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:g\:x:not(.ltr), html.flex [class*='cols'].\@tab\:reverse\:wrap.\@tab\:d\:g\:y:not(.ltr) { direction: rtl } }