react-responsive-tools 2.1.4 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
@@ -12,12 +12,12 @@ const __dirname = path.dirname(__filename);
|
|
12
12
|
const generateHorizontalSCSS = (breakpoints) => {
|
13
13
|
const beforeMixins = Object.keys(breakpoints).map(bp => `
|
14
14
|
/**
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
15
|
+
* @mixin for-${bp}
|
16
|
+
* @description Mixin for applying styles for screens greater than or equal to ${breakpoints[bp]}px.
|
17
|
+
* @example
|
18
|
+
* @include for-${bp} {
|
19
19
|
* // your styles here
|
20
|
-
*
|
20
|
+
* }
|
21
21
|
*/
|
22
22
|
@mixin for-${bp}() {
|
23
23
|
@include mob-first(${bp}) {
|
@@ -27,12 +27,12 @@ const generateHorizontalSCSS = (breakpoints) => {
|
|
27
27
|
|
28
28
|
const afterMixins = Object.keys(breakpoints).map(bp => `
|
29
29
|
/**
|
30
|
-
*
|
31
|
-
*
|
32
|
-
*
|
33
|
-
*
|
30
|
+
* @mixin before-${bp}
|
31
|
+
* @description Mixin for applying styles for screens less than ${breakpoints[bp]}px.
|
32
|
+
* @example
|
33
|
+
* @include before-${bp} {
|
34
34
|
* // your styles here
|
35
|
-
*
|
35
|
+
* }
|
36
36
|
*/
|
37
37
|
@mixin before-${bp}() {
|
38
38
|
@include desk-first(${bp}) {
|
@@ -53,12 +53,12 @@ ${afterMixins}
|
|
53
53
|
const generateVerticalSCSS = (breakpoints) => {
|
54
54
|
const beforeMixins = Object.keys(breakpoints).map(bp => `
|
55
55
|
/**
|
56
|
-
*
|
57
|
-
*
|
58
|
-
*
|
59
|
-
*
|
56
|
+
* @mixin v-for-${bp}
|
57
|
+
* @description Mixin for applying styles for screens with height greater than or equal to ${breakpoints[bp]}px.
|
58
|
+
* @example
|
59
|
+
* @include v-for-${bp} {
|
60
60
|
* // your styles here
|
61
|
-
*
|
61
|
+
* }
|
62
62
|
*/
|
63
63
|
@mixin v-for-${bp}() {
|
64
64
|
@include v-mob-first(${bp}) {
|
@@ -68,12 +68,12 @@ const generateVerticalSCSS = (breakpoints) => {
|
|
68
68
|
|
69
69
|
const afterMixins = Object.keys(breakpoints).map(bp => `
|
70
70
|
/**
|
71
|
-
*
|
72
|
-
*
|
73
|
-
*
|
74
|
-
*
|
71
|
+
* @mixin v-before-${bp}
|
72
|
+
* @description Mixin for applying styles for screens with height less than ${breakpoints[bp]}px.
|
73
|
+
* @example
|
74
|
+
* @include v-before-${bp} {
|
75
75
|
* // your styles here
|
76
|
-
*
|
76
|
+
* }
|
77
77
|
*/
|
78
78
|
@mixin v-before-${bp}() {
|
79
79
|
@include v-desk-first(${bp}) {
|
@@ -3,12 +3,12 @@
|
|
3
3
|
|
4
4
|
|
5
5
|
/**
|
6
|
-
*
|
7
|
-
*
|
8
|
-
*
|
9
|
-
*
|
6
|
+
* @mixin for-xs
|
7
|
+
* @description Mixin for applying styles for screens greater than or equal to 320pxpx.
|
8
|
+
* @example
|
9
|
+
* @include for-xs {
|
10
10
|
* // your styles here
|
11
|
-
*
|
11
|
+
* }
|
12
12
|
*/
|
13
13
|
@mixin for-xs() {
|
14
14
|
@include mob-first(xs) {
|
@@ -16,13 +16,14 @@
|
|
16
16
|
}
|
17
17
|
}
|
18
18
|
|
19
|
+
|
19
20
|
/**
|
20
|
-
*
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*
|
21
|
+
* @mixin for-sm
|
22
|
+
* @description Mixin for applying styles for screens greater than or equal to 576pxpx.
|
23
|
+
* @example
|
24
|
+
* @include for-sm {
|
24
25
|
* // your styles here
|
25
|
-
*
|
26
|
+
* }
|
26
27
|
*/
|
27
28
|
@mixin for-sm() {
|
28
29
|
@include mob-first(sm) {
|
@@ -31,12 +32,12 @@
|
|
31
32
|
}
|
32
33
|
|
33
34
|
/**
|
34
|
-
*
|
35
|
-
*
|
36
|
-
*
|
37
|
-
*
|
35
|
+
* @mixin for-md
|
36
|
+
* @description Mixin for applying styles for screens greater than or equal to 768pxpx.
|
37
|
+
* @example
|
38
|
+
* @include for-md {
|
38
39
|
* // your styles here
|
39
|
-
*
|
40
|
+
* }
|
40
41
|
*/
|
41
42
|
@mixin for-md() {
|
42
43
|
@include mob-first(md) {
|
@@ -45,12 +46,12 @@
|
|
45
46
|
}
|
46
47
|
|
47
48
|
/**
|
48
|
-
*
|
49
|
-
*
|
50
|
-
*
|
51
|
-
*
|
49
|
+
* @mixin for-lg
|
50
|
+
* @description Mixin for applying styles for screens greater than or equal to 992pxpx.
|
51
|
+
* @example
|
52
|
+
* @include for-lg {
|
52
53
|
* // your styles here
|
53
|
-
*
|
54
|
+
* }
|
54
55
|
*/
|
55
56
|
@mixin for-lg() {
|
56
57
|
@include mob-first(lg) {
|
@@ -59,12 +60,12 @@
|
|
59
60
|
}
|
60
61
|
|
61
62
|
/**
|
62
|
-
*
|
63
|
-
*
|
64
|
-
*
|
65
|
-
*
|
63
|
+
* @mixin for-lt
|
64
|
+
* @description Mixin for applying styles for screens greater than or equal to 1024pxpx.
|
65
|
+
* @example
|
66
|
+
* @include for-lt {
|
66
67
|
* // your styles here
|
67
|
-
*
|
68
|
+
* }
|
68
69
|
*/
|
69
70
|
@mixin for-lt() {
|
70
71
|
@include mob-first(lt) {
|
@@ -73,12 +74,12 @@
|
|
73
74
|
}
|
74
75
|
|
75
76
|
/**
|
76
|
-
*
|
77
|
-
*
|
78
|
-
*
|
79
|
-
*
|
77
|
+
* @mixin for-ltm
|
78
|
+
* @description Mixin for applying styles for screens greater than or equal to 1200pxpx.
|
79
|
+
* @example
|
80
|
+
* @include for-ltm {
|
80
81
|
* // your styles here
|
81
|
-
*
|
82
|
+
* }
|
82
83
|
*/
|
83
84
|
@mixin for-ltm() {
|
84
85
|
@include mob-first(ltm) {
|
@@ -87,12 +88,12 @@
|
|
87
88
|
}
|
88
89
|
|
89
90
|
/**
|
90
|
-
*
|
91
|
-
*
|
92
|
-
*
|
93
|
-
*
|
91
|
+
* @mixin for-ltl
|
92
|
+
* @description Mixin for applying styles for screens greater than or equal to 1440pxpx.
|
93
|
+
* @example
|
94
|
+
* @include for-ltl {
|
94
95
|
* // your styles here
|
95
|
-
*
|
96
|
+
* }
|
96
97
|
*/
|
97
98
|
@mixin for-ltl() {
|
98
99
|
@include mob-first(ltl) {
|
@@ -101,12 +102,12 @@
|
|
101
102
|
}
|
102
103
|
|
103
104
|
/**
|
104
|
-
*
|
105
|
-
*
|
106
|
-
*
|
107
|
-
*
|
105
|
+
* @mixin for-xl
|
106
|
+
* @description Mixin for applying styles for screens greater than or equal to 1920pxpx.
|
107
|
+
* @example
|
108
|
+
* @include for-xl {
|
108
109
|
* // your styles here
|
109
|
-
*
|
110
|
+
* }
|
110
111
|
*/
|
111
112
|
@mixin for-xl() {
|
112
113
|
@include mob-first(xl) {
|
@@ -115,12 +116,12 @@
|
|
115
116
|
}
|
116
117
|
|
117
118
|
/**
|
118
|
-
*
|
119
|
-
*
|
120
|
-
*
|
121
|
-
*
|
119
|
+
* @mixin for-xxl
|
120
|
+
* @description Mixin for applying styles for screens greater than or equal to 2560pxpx.
|
121
|
+
* @example
|
122
|
+
* @include for-xxl {
|
122
123
|
* // your styles here
|
123
|
-
*
|
124
|
+
* }
|
124
125
|
*/
|
125
126
|
@mixin for-xxl() {
|
126
127
|
@include mob-first(xxl) {
|
@@ -129,12 +130,12 @@
|
|
129
130
|
}
|
130
131
|
|
131
132
|
/**
|
132
|
-
*
|
133
|
-
*
|
134
|
-
*
|
135
|
-
*
|
133
|
+
* @mixin for-qxl
|
134
|
+
* @description Mixin for applying styles for screens greater than or equal to 3840pxpx.
|
135
|
+
* @example
|
136
|
+
* @include for-qxl {
|
136
137
|
* // your styles here
|
137
|
-
*
|
138
|
+
* }
|
138
139
|
*/
|
139
140
|
@mixin for-qxl() {
|
140
141
|
@include mob-first(qxl) {
|
@@ -144,12 +145,12 @@
|
|
144
145
|
|
145
146
|
|
146
147
|
/**
|
147
|
-
*
|
148
|
-
*
|
149
|
-
*
|
150
|
-
*
|
148
|
+
* @mixin before-xs
|
149
|
+
* @description Mixin for applying styles for screens less than 320pxpx.
|
150
|
+
* @example
|
151
|
+
* @include before-xs {
|
151
152
|
* // your styles here
|
152
|
-
*
|
153
|
+
* }
|
153
154
|
*/
|
154
155
|
@mixin before-xs() {
|
155
156
|
@include desk-first(xs) {
|
@@ -158,12 +159,12 @@
|
|
158
159
|
}
|
159
160
|
|
160
161
|
/**
|
161
|
-
*
|
162
|
-
*
|
163
|
-
*
|
164
|
-
*
|
162
|
+
* @mixin before-sm
|
163
|
+
* @description Mixin for applying styles for screens less than 576pxpx.
|
164
|
+
* @example
|
165
|
+
* @include before-sm {
|
165
166
|
* // your styles here
|
166
|
-
*
|
167
|
+
* }
|
167
168
|
*/
|
168
169
|
@mixin before-sm() {
|
169
170
|
@include desk-first(sm) {
|
@@ -172,12 +173,12 @@
|
|
172
173
|
}
|
173
174
|
|
174
175
|
/**
|
175
|
-
*
|
176
|
-
*
|
177
|
-
*
|
178
|
-
*
|
176
|
+
* @mixin before-md
|
177
|
+
* @description Mixin for applying styles for screens less than 768pxpx.
|
178
|
+
* @example
|
179
|
+
* @include before-md {
|
179
180
|
* // your styles here
|
180
|
-
*
|
181
|
+
* }
|
181
182
|
*/
|
182
183
|
@mixin before-md() {
|
183
184
|
@include desk-first(md) {
|
@@ -186,12 +187,12 @@
|
|
186
187
|
}
|
187
188
|
|
188
189
|
/**
|
189
|
-
*
|
190
|
-
*
|
191
|
-
*
|
192
|
-
*
|
190
|
+
* @mixin before-lg
|
191
|
+
* @description Mixin for applying styles for screens less than 992pxpx.
|
192
|
+
* @example
|
193
|
+
* @include before-lg {
|
193
194
|
* // your styles here
|
194
|
-
*
|
195
|
+
* }
|
195
196
|
*/
|
196
197
|
@mixin before-lg() {
|
197
198
|
@include desk-first(lg) {
|
@@ -200,12 +201,12 @@
|
|
200
201
|
}
|
201
202
|
|
202
203
|
/**
|
203
|
-
*
|
204
|
-
*
|
205
|
-
*
|
206
|
-
*
|
204
|
+
* @mixin before-lt
|
205
|
+
* @description Mixin for applying styles for screens less than 1024pxpx.
|
206
|
+
* @example
|
207
|
+
* @include before-lt {
|
207
208
|
* // your styles here
|
208
|
-
*
|
209
|
+
* }
|
209
210
|
*/
|
210
211
|
@mixin before-lt() {
|
211
212
|
@include desk-first(lt) {
|
@@ -214,12 +215,12 @@
|
|
214
215
|
}
|
215
216
|
|
216
217
|
/**
|
217
|
-
*
|
218
|
-
*
|
219
|
-
*
|
220
|
-
*
|
218
|
+
* @mixin before-ltm
|
219
|
+
* @description Mixin for applying styles for screens less than 1200pxpx.
|
220
|
+
* @example
|
221
|
+
* @include before-ltm {
|
221
222
|
* // your styles here
|
222
|
-
*
|
223
|
+
* }
|
223
224
|
*/
|
224
225
|
@mixin before-ltm() {
|
225
226
|
@include desk-first(ltm) {
|
@@ -228,12 +229,12 @@
|
|
228
229
|
}
|
229
230
|
|
230
231
|
/**
|
231
|
-
*
|
232
|
-
*
|
233
|
-
*
|
234
|
-
*
|
232
|
+
* @mixin before-ltl
|
233
|
+
* @description Mixin for applying styles for screens less than 1440pxpx.
|
234
|
+
* @example
|
235
|
+
* @include before-ltl {
|
235
236
|
* // your styles here
|
236
|
-
*
|
237
|
+
* }
|
237
238
|
*/
|
238
239
|
@mixin before-ltl() {
|
239
240
|
@include desk-first(ltl) {
|
@@ -242,12 +243,12 @@
|
|
242
243
|
}
|
243
244
|
|
244
245
|
/**
|
245
|
-
*
|
246
|
-
*
|
247
|
-
*
|
248
|
-
*
|
246
|
+
* @mixin before-xl
|
247
|
+
* @description Mixin for applying styles for screens less than 1920pxpx.
|
248
|
+
* @example
|
249
|
+
* @include before-xl {
|
249
250
|
* // your styles here
|
250
|
-
*
|
251
|
+
* }
|
251
252
|
*/
|
252
253
|
@mixin before-xl() {
|
253
254
|
@include desk-first(xl) {
|
@@ -256,12 +257,12 @@
|
|
256
257
|
}
|
257
258
|
|
258
259
|
/**
|
259
|
-
*
|
260
|
-
*
|
261
|
-
*
|
262
|
-
*
|
260
|
+
* @mixin before-xxl
|
261
|
+
* @description Mixin for applying styles for screens less than 2560pxpx.
|
262
|
+
* @example
|
263
|
+
* @include before-xxl {
|
263
264
|
* // your styles here
|
264
|
-
*
|
265
|
+
* }
|
265
266
|
*/
|
266
267
|
@mixin before-xxl() {
|
267
268
|
@include desk-first(xxl) {
|
@@ -270,12 +271,12 @@
|
|
270
271
|
}
|
271
272
|
|
272
273
|
/**
|
273
|
-
*
|
274
|
-
*
|
275
|
-
*
|
276
|
-
*
|
274
|
+
* @mixin before-qxl
|
275
|
+
* @description Mixin for applying styles for screens less than 3840pxpx.
|
276
|
+
* @example
|
277
|
+
* @include before-qxl {
|
277
278
|
* // your styles here
|
278
|
-
*
|
279
|
+
* }
|
279
280
|
*/
|
280
281
|
@mixin before-qxl() {
|
281
282
|
@include desk-first(qxl) {
|
@@ -3,12 +3,12 @@
|
|
3
3
|
|
4
4
|
|
5
5
|
/**
|
6
|
-
*
|
7
|
-
*
|
8
|
-
*
|
9
|
-
*
|
6
|
+
* @mixin v-for-xs
|
7
|
+
* @description Mixin for applying styles for screens with height greater than or equal to 600pxpx.
|
8
|
+
* @example
|
9
|
+
* @include v-for-xs {
|
10
10
|
* // your styles here
|
11
|
-
*
|
11
|
+
* }
|
12
12
|
*/
|
13
13
|
@mixin v-for-xs() {
|
14
14
|
@include v-mob-first(xs) {
|
@@ -17,12 +17,12 @@
|
|
17
17
|
}
|
18
18
|
|
19
19
|
/**
|
20
|
-
*
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*
|
20
|
+
* @mixin v-for-sm
|
21
|
+
* @description Mixin for applying styles for screens with height greater than or equal to 800pxpx.
|
22
|
+
* @example
|
23
|
+
* @include v-for-sm {
|
24
24
|
* // your styles here
|
25
|
-
*
|
25
|
+
* }
|
26
26
|
*/
|
27
27
|
@mixin v-for-sm() {
|
28
28
|
@include v-mob-first(sm) {
|
@@ -31,12 +31,12 @@
|
|
31
31
|
}
|
32
32
|
|
33
33
|
/**
|
34
|
-
*
|
35
|
-
*
|
36
|
-
*
|
37
|
-
*
|
34
|
+
* @mixin v-for-md
|
35
|
+
* @description Mixin for applying styles for screens with height greater than or equal to 1000pxpx.
|
36
|
+
* @example
|
37
|
+
* @include v-for-md {
|
38
38
|
* // your styles here
|
39
|
-
*
|
39
|
+
* }
|
40
40
|
*/
|
41
41
|
@mixin v-for-md() {
|
42
42
|
@include v-mob-first(md) {
|
@@ -45,12 +45,12 @@
|
|
45
45
|
}
|
46
46
|
|
47
47
|
/**
|
48
|
-
*
|
49
|
-
*
|
50
|
-
*
|
51
|
-
*
|
48
|
+
* @mixin v-for-lg
|
49
|
+
* @description Mixin for applying styles for screens with height greater than or equal to 1200pxpx.
|
50
|
+
* @example
|
51
|
+
* @include v-for-lg {
|
52
52
|
* // your styles here
|
53
|
-
*
|
53
|
+
* }
|
54
54
|
*/
|
55
55
|
@mixin v-for-lg() {
|
56
56
|
@include v-mob-first(lg) {
|
@@ -59,12 +59,12 @@
|
|
59
59
|
}
|
60
60
|
|
61
61
|
/**
|
62
|
-
*
|
63
|
-
*
|
64
|
-
*
|
65
|
-
*
|
62
|
+
* @mixin v-for-xl
|
63
|
+
* @description Mixin for applying styles for screens with height greater than or equal to 1600pxpx.
|
64
|
+
* @example
|
65
|
+
* @include v-for-xl {
|
66
66
|
* // your styles here
|
67
|
-
*
|
67
|
+
* }
|
68
68
|
*/
|
69
69
|
@mixin v-for-xl() {
|
70
70
|
@include v-mob-first(xl) {
|
@@ -73,12 +73,12 @@
|
|
73
73
|
}
|
74
74
|
|
75
75
|
/**
|
76
|
-
*
|
77
|
-
*
|
78
|
-
*
|
79
|
-
*
|
76
|
+
* @mixin v-for-xxl
|
77
|
+
* @description Mixin for applying styles for screens with height greater than or equal to 1601pxpx.
|
78
|
+
* @example
|
79
|
+
* @include v-for-xxl {
|
80
80
|
* // your styles here
|
81
|
-
*
|
81
|
+
* }
|
82
82
|
*/
|
83
83
|
@mixin v-for-xxl() {
|
84
84
|
@include v-mob-first(xxl) {
|
@@ -88,12 +88,12 @@
|
|
88
88
|
|
89
89
|
|
90
90
|
/**
|
91
|
-
*
|
92
|
-
*
|
93
|
-
*
|
94
|
-
*
|
91
|
+
* @mixin v-before-xs
|
92
|
+
* @description Mixin for applying styles for screens with height less than 600pxpx.
|
93
|
+
* @example
|
94
|
+
* @include v-before-xs {
|
95
95
|
* // your styles here
|
96
|
-
*
|
96
|
+
* }
|
97
97
|
*/
|
98
98
|
@mixin v-before-xs() {
|
99
99
|
@include v-desk-first(xs) {
|
@@ -102,12 +102,12 @@
|
|
102
102
|
}
|
103
103
|
|
104
104
|
/**
|
105
|
-
*
|
106
|
-
*
|
107
|
-
*
|
108
|
-
*
|
105
|
+
* @mixin v-before-sm
|
106
|
+
* @description Mixin for applying styles for screens with height less than 800pxpx.
|
107
|
+
* @example
|
108
|
+
* @include v-before-sm {
|
109
109
|
* // your styles here
|
110
|
-
*
|
110
|
+
* }
|
111
111
|
*/
|
112
112
|
@mixin v-before-sm() {
|
113
113
|
@include v-desk-first(sm) {
|
@@ -116,12 +116,12 @@
|
|
116
116
|
}
|
117
117
|
|
118
118
|
/**
|
119
|
-
*
|
120
|
-
*
|
121
|
-
*
|
122
|
-
*
|
119
|
+
* @mixin v-before-md
|
120
|
+
* @description Mixin for applying styles for screens with height less than 1000pxpx.
|
121
|
+
* @example
|
122
|
+
* @include v-before-md {
|
123
123
|
* // your styles here
|
124
|
-
*
|
124
|
+
* }
|
125
125
|
*/
|
126
126
|
@mixin v-before-md() {
|
127
127
|
@include v-desk-first(md) {
|
@@ -130,12 +130,12 @@
|
|
130
130
|
}
|
131
131
|
|
132
132
|
/**
|
133
|
-
*
|
134
|
-
*
|
135
|
-
*
|
136
|
-
*
|
133
|
+
* @mixin v-before-lg
|
134
|
+
* @description Mixin for applying styles for screens with height less than 1200pxpx.
|
135
|
+
* @example
|
136
|
+
* @include v-before-lg {
|
137
137
|
* // your styles here
|
138
|
-
*
|
138
|
+
* }
|
139
139
|
*/
|
140
140
|
@mixin v-before-lg() {
|
141
141
|
@include v-desk-first(lg) {
|
@@ -144,12 +144,12 @@
|
|
144
144
|
}
|
145
145
|
|
146
146
|
/**
|
147
|
-
*
|
148
|
-
*
|
149
|
-
*
|
150
|
-
*
|
147
|
+
* @mixin v-before-xl
|
148
|
+
* @description Mixin for applying styles for screens with height less than 1600pxpx.
|
149
|
+
* @example
|
150
|
+
* @include v-before-xl {
|
151
151
|
* // your styles here
|
152
|
-
*
|
152
|
+
* }
|
153
153
|
*/
|
154
154
|
@mixin v-before-xl() {
|
155
155
|
@include v-desk-first(xl) {
|
@@ -158,12 +158,12 @@
|
|
158
158
|
}
|
159
159
|
|
160
160
|
/**
|
161
|
-
*
|
162
|
-
*
|
163
|
-
*
|
164
|
-
*
|
161
|
+
* @mixin v-before-xxl
|
162
|
+
* @description Mixin for applying styles for screens with height less than 1601pxpx.
|
163
|
+
* @example
|
164
|
+
* @include v-before-xxl {
|
165
165
|
* // your styles here
|
166
|
-
*
|
166
|
+
* }
|
167
167
|
*/
|
168
168
|
@mixin v-before-xxl() {
|
169
169
|
@include v-desk-first(xxl) {
|