@nuvoui/core 1.2.2 → 1.2.4
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/dist/nuvoui.css +10759 -10520
- package/dist/nuvoui.css.map +1 -1
- package/dist/nuvoui.min.css +1 -1
- package/dist/nuvoui.min.css.map +1 -1
- package/package.json +1 -1
- package/src/styles/abstracts/_config.scss +35 -54
- package/src/styles/abstracts/_index.scss +0 -1
- package/src/styles/base/_base.scss +4 -8
- package/src/styles/base/_index.scss +1 -1
- package/src/styles/base/_reset.scss +66 -31
- package/src/styles/index.scss +5 -2
- package/src/styles/layouts/_flex.scss +61 -46
- package/src/styles/layouts/_grid.scss +13 -13
- package/src/styles/mixins-map.scss +1 -1
- package/src/styles/themes/_theme.scss +144 -124
- package/src/styles/utilities/_alignment.scss +12 -12
- package/src/styles/utilities/_animations.scss +5 -9
- package/src/styles/utilities/_borders.scss +77 -80
- package/src/styles/utilities/_colors.scss +61 -65
- package/src/styles/utilities/_cursor.scss +23 -0
- package/src/styles/utilities/_index.scss +1 -0
- package/src/styles/utilities/_media-queries.scss +24 -15
- package/src/styles/utilities/_opacity.scss +14 -21
- package/src/styles/utilities/_position.scss +1 -3
- package/src/styles/utilities/_sizing.scss +92 -73
- package/src/styles/utilities/_spacing.scss +71 -101
- package/src/styles/utilities/_transitions.scss +4 -6
- package/src/styles/utilities/_typography.scss +92 -95
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
* Child elements:
|
|
34
34
|
* - w-{1-12}: Sets width based on column count
|
|
35
35
|
* - grow: Allows item to grow
|
|
36
|
-
* - shrink/shrink
|
|
36
|
+
* - shrink/no-shrink: Controls shrink behavior
|
|
37
37
|
*
|
|
38
38
|
* @responsive
|
|
39
39
|
* All classes support responsive variants using @breakpoint suffix:
|
|
@@ -51,24 +51,24 @@
|
|
|
51
51
|
/**
|
|
52
52
|
* @description Establishes a flex container.
|
|
53
53
|
*/
|
|
54
|
-
@mixin flex {
|
|
54
|
+
@mixin flex { display: flex;}
|
|
55
55
|
|
|
56
56
|
/**
|
|
57
57
|
* @description Establishes a flex-inline container.
|
|
58
58
|
*/
|
|
59
|
-
@mixin flex-inline {
|
|
59
|
+
@mixin flex-inline { display: inline-flex;}
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
62
|
* @description Sets flex-direction to row.
|
|
63
63
|
* @dependencies flex | flex-inline
|
|
64
64
|
*/
|
|
65
|
-
@mixin row {
|
|
65
|
+
@mixin row { flex-direction: row;}
|
|
66
66
|
|
|
67
67
|
/**
|
|
68
68
|
* @description Sets flex-direction to row-reverse.
|
|
69
69
|
* @dependencies flex | flex-inline
|
|
70
70
|
*/
|
|
71
|
-
@mixin row-reverse {
|
|
71
|
+
@mixin row-reverse {flex-direction: row-reverse;}
|
|
72
72
|
|
|
73
73
|
/**
|
|
74
74
|
* @description Sets flex-direction to column.
|
|
@@ -82,61 +82,68 @@
|
|
|
82
82
|
* @description Sets flex-direction to column-reverse.
|
|
83
83
|
* @dependencies flex | flex-inline
|
|
84
84
|
*/
|
|
85
|
-
@mixin col-reverse {
|
|
85
|
+
@mixin col-reverse { flex-direction: column-reverse;}
|
|
86
86
|
|
|
87
87
|
/**
|
|
88
88
|
* @description Sets flex-wrap to wrap.
|
|
89
89
|
* @dependencies flex | flex-inline
|
|
90
90
|
*/
|
|
91
|
-
@mixin wrap {
|
|
91
|
+
@mixin wrap {flex-wrap: wrap;}
|
|
92
92
|
|
|
93
93
|
/**
|
|
94
94
|
* @description Sets flex-wrap to nowrap.
|
|
95
95
|
* @dependencies flex | flex-inline
|
|
96
96
|
*/
|
|
97
|
-
@mixin nowrap {
|
|
97
|
+
@mixin nowrap {flex-wrap: nowrap;}
|
|
98
98
|
|
|
99
99
|
/**
|
|
100
100
|
* @description Sets flex-wrap to wrap-reverse
|
|
101
101
|
* @dependencies flex | flex-inline
|
|
102
102
|
*/
|
|
103
|
-
@mixin wrap-reverse {
|
|
103
|
+
@mixin wrap-reverse { flex-wrap: wrap-reverse;}
|
|
104
104
|
|
|
105
105
|
/**
|
|
106
106
|
* @description Sets justify-content to flex-start
|
|
107
107
|
* @dependencies flex | flex-inline
|
|
108
108
|
*/
|
|
109
|
-
@mixin start {
|
|
109
|
+
@mixin start {justify-content: flex-start;}
|
|
110
110
|
|
|
111
111
|
/**
|
|
112
112
|
* @description Sets justify-content to flex-end
|
|
113
113
|
* @dependencies flex | flex-inline
|
|
114
114
|
*/
|
|
115
|
-
@mixin end {
|
|
115
|
+
@mixin end {justify-content: flex-end;}
|
|
116
116
|
|
|
117
117
|
/**
|
|
118
118
|
* @description Sets justify-content to center
|
|
119
119
|
* @dependencies flex | flex-inline
|
|
120
120
|
*/
|
|
121
|
-
@mixin center {
|
|
121
|
+
@mixin center {justify-content: center;}
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* @description Sets justify-content to stretch
|
|
126
|
+
* @dependencies flex | flex-inline
|
|
127
|
+
*/
|
|
128
|
+
@mixin stretch {justify-content: stretch;}
|
|
122
129
|
|
|
123
130
|
/**
|
|
124
131
|
* @description Sets justify-content to space-between
|
|
125
132
|
* @dependencies flex | flex-inline
|
|
126
133
|
*/
|
|
127
|
-
@mixin between {
|
|
134
|
+
@mixin between {justify-content: space-between;}
|
|
128
135
|
|
|
129
136
|
/**
|
|
130
137
|
* @description Sets justify-content to space-around
|
|
131
138
|
* @dependencies flex | flex-inline
|
|
132
139
|
*/
|
|
133
|
-
@mixin around {
|
|
140
|
+
@mixin around {justify-content: space-around;}
|
|
134
141
|
|
|
135
142
|
/**
|
|
136
143
|
* @description Sets justify-content to space-evenly
|
|
137
144
|
* @dependencies flex | flex-inline
|
|
138
145
|
*/
|
|
139
|
-
@mixin evenly {
|
|
146
|
+
@mixin evenly {justify-content: space-evenly;}
|
|
140
147
|
|
|
141
148
|
// Cross Axis Alignment Mixins
|
|
142
149
|
|
|
@@ -144,31 +151,31 @@
|
|
|
144
151
|
* @description Sets align-items to flex-start - aligns items to the start of the cross axis.
|
|
145
152
|
* @dependencies flex | flex-inline
|
|
146
153
|
*/
|
|
147
|
-
@mixin x-start {
|
|
154
|
+
@mixin x-start {align-items: flex-start;}
|
|
148
155
|
|
|
149
156
|
/**
|
|
150
157
|
* @description Sets align-items to flex-end - aligns items to the end of the cross axis.
|
|
151
158
|
* @dependencies flex | flex-inline
|
|
152
159
|
*/
|
|
153
|
-
@mixin x-end {
|
|
160
|
+
@mixin x-end {align-items: flex-end;}
|
|
154
161
|
|
|
155
162
|
/**
|
|
156
163
|
* @description Sets align-items to center - aligns items to the center of the cross axis.
|
|
157
164
|
* @dependencies flex | flex-inline
|
|
158
165
|
*/
|
|
159
|
-
@mixin x-center {
|
|
166
|
+
@mixin x-center {align-items: center;}
|
|
160
167
|
|
|
161
168
|
/**
|
|
162
169
|
* @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
|
|
163
170
|
* @dependencies flex | flex-inline
|
|
164
171
|
*/
|
|
165
|
-
@mixin x-stretch {
|
|
172
|
+
@mixin x-stretch {align-items: stretch;}
|
|
166
173
|
|
|
167
174
|
/**
|
|
168
175
|
* @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
|
|
169
176
|
* @dependencies flex | flex-inline
|
|
170
177
|
*/
|
|
171
|
-
@mixin x-baseline {
|
|
178
|
+
@mixin x-baseline {align-items: baseline;}
|
|
172
179
|
|
|
173
180
|
// Cross Axis Content Mixins
|
|
174
181
|
|
|
@@ -176,43 +183,43 @@
|
|
|
176
183
|
* @description Sets align-content to flex-start - aligns content to the start of the cross axis.
|
|
177
184
|
* @dependencies flex | flex-inline
|
|
178
185
|
*/
|
|
179
|
-
@mixin x-content-start {
|
|
186
|
+
@mixin x-content-start {align-content: flex-start; }
|
|
180
187
|
|
|
181
188
|
/**
|
|
182
189
|
* @description Sets align-content to flex-end - aligns content to the end of the cross axis.
|
|
183
190
|
* @dependencies flex | flex-inline
|
|
184
191
|
*/
|
|
185
|
-
@mixin x-content-end {
|
|
192
|
+
@mixin x-content-end {align-content: flex-end; }
|
|
186
193
|
|
|
187
194
|
/**
|
|
188
195
|
* @description Sets align-content to center - aligns content to the center of the cross axis.
|
|
189
196
|
* @dependencies flex | flex-inline
|
|
190
197
|
*/
|
|
191
|
-
@mixin x-content-center {
|
|
198
|
+
@mixin x-content-center {align-content: center; }
|
|
192
199
|
|
|
193
200
|
/**
|
|
194
201
|
* @description Sets align-content to space-between - aligns content to the space between the cross axis.
|
|
195
202
|
* @dependencies flex | flex-inline
|
|
196
203
|
*/
|
|
197
|
-
@mixin x-content-between {
|
|
204
|
+
@mixin x-content-between { align-content: space-between; }
|
|
198
205
|
|
|
199
206
|
/**
|
|
200
207
|
* @description Sets align-content to space-around - aligns content to the space around the cross axis.
|
|
201
208
|
* @dependencies flex | flex-inline
|
|
202
209
|
*/
|
|
203
|
-
@mixin x-content-around {
|
|
210
|
+
@mixin x-content-around {align-content: space-around; }
|
|
204
211
|
|
|
205
212
|
/**
|
|
206
213
|
* @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
|
|
207
214
|
* @dependencies flex | flex-inline
|
|
208
215
|
*/
|
|
209
|
-
@mixin x-content-evenly {
|
|
216
|
+
@mixin x-content-evenly { align-content: space-evenly; }
|
|
210
217
|
|
|
211
218
|
/**
|
|
212
219
|
* @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
|
|
213
220
|
* @dependencies flex | flex-inline
|
|
214
221
|
*/
|
|
215
|
-
@mixin x-content-stretch {
|
|
222
|
+
@mixin x-content-stretch { align-content: stretch; }
|
|
216
223
|
|
|
217
224
|
// Self Alignment Mixins
|
|
218
225
|
|
|
@@ -220,55 +227,55 @@
|
|
|
220
227
|
* @description Sets align-self to auto
|
|
221
228
|
* @dependencies flex | flex-inline
|
|
222
229
|
*/
|
|
223
|
-
@mixin self-auto {
|
|
230
|
+
@mixin self-auto {align-self: auto;}
|
|
224
231
|
|
|
225
232
|
/**
|
|
226
233
|
* @description Sets align-self to flex-start
|
|
227
234
|
* @dependencies flex | flex-inline
|
|
228
235
|
*/
|
|
229
|
-
@mixin self-start {
|
|
236
|
+
@mixin self-start {align-self: flex-start;}
|
|
230
237
|
|
|
231
238
|
/**
|
|
232
239
|
* @description Sets align-self to flex-end
|
|
233
240
|
* @dependencies flex | flex-inline
|
|
234
241
|
*/
|
|
235
|
-
@mixin self-end {
|
|
242
|
+
@mixin self-end {align-self: flex-end;}
|
|
236
243
|
|
|
237
244
|
/**
|
|
238
245
|
* @description Sets align-self to center
|
|
239
246
|
* @dependencies flex | flex-inline
|
|
240
247
|
*/
|
|
241
|
-
@mixin self-center {
|
|
248
|
+
@mixin self-center {align-self: center;}
|
|
242
249
|
|
|
243
250
|
/**
|
|
244
251
|
* @description Sets align-self to stretch
|
|
245
252
|
* @dependencies flex | flex-inline
|
|
246
253
|
*/
|
|
247
|
-
@mixin self-stretch {
|
|
254
|
+
@mixin self-stretch {align-self: stretch;}
|
|
248
255
|
|
|
249
256
|
/**
|
|
250
257
|
* @description Sets align-self to baseline
|
|
251
258
|
* @dependencies flex | flex-inline
|
|
252
259
|
*/
|
|
253
|
-
@mixin self-baseline {
|
|
260
|
+
@mixin self-baseline {align-self: baseline;}
|
|
254
261
|
|
|
255
262
|
/**
|
|
256
263
|
* @description Sets flex-shrink to 1 - allows the item to shrink.
|
|
257
264
|
* @dependencies flex | flex-inline
|
|
258
265
|
*/
|
|
259
|
-
@mixin shrink {
|
|
266
|
+
@mixin shrink {flex-shrink: 1;}
|
|
260
267
|
|
|
261
268
|
/**
|
|
262
269
|
* @description Sets flex-shrink to 0 - prevents the item from shrinking.
|
|
263
270
|
* @dependencies flex | flex-inline
|
|
264
271
|
*/
|
|
265
|
-
@mixin shrink
|
|
272
|
+
@mixin no-shrink {flex-shrink: 0;}
|
|
266
273
|
|
|
267
274
|
/**
|
|
268
275
|
* @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
|
|
269
276
|
* @dependencies flex | flex-inline
|
|
270
277
|
*/
|
|
271
|
-
@mixin shrink-
|
|
278
|
+
@mixin shrink-twice {flex-shrink: 2;}
|
|
272
279
|
|
|
273
280
|
|
|
274
281
|
// Flex Child Mixins
|
|
@@ -276,29 +283,35 @@
|
|
|
276
283
|
/**
|
|
277
284
|
* @description Sets flex to 0 0 100%
|
|
278
285
|
*/
|
|
279
|
-
@mixin fill-full {
|
|
286
|
+
@mixin fill-full {flex: 0 0 100%;}
|
|
280
287
|
|
|
281
288
|
/**
|
|
282
289
|
* @description Sets flex to 1 1 auto - allows the item to grow and shrink.
|
|
283
290
|
*/
|
|
284
|
-
@mixin fill-auto {
|
|
291
|
+
@mixin fill-auto {flex: 1 1 auto;}
|
|
285
292
|
|
|
286
293
|
/**
|
|
287
294
|
* @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
|
|
288
295
|
*/
|
|
289
|
-
@mixin grow {
|
|
296
|
+
@mixin grow { flex: 1 1 0%; }
|
|
290
297
|
|
|
291
298
|
/**
|
|
292
299
|
* @description Sets flex to none - prevents the item from growing.
|
|
293
300
|
*/
|
|
294
|
-
@mixin no-grow {
|
|
301
|
+
@mixin no-grow { flex: none; }
|
|
302
|
+
|
|
303
|
+
/**
|
|
304
|
+
* @description Sets flex to 1 0 auto - allows the item to grow but not shrink.
|
|
305
|
+
*/
|
|
306
|
+
@mixin grow-only { flex: 1 0 auto; }
|
|
307
|
+
|
|
295
308
|
|
|
296
309
|
/**
|
|
297
310
|
* @description Sets how many columns this would take using percentage of VAR.$column-count.
|
|
298
311
|
* @param {Number} $size - The number of columns to span.
|
|
299
312
|
*/
|
|
300
313
|
@mixin fill($size) {
|
|
301
|
-
|
|
314
|
+
flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
|
|
302
315
|
}
|
|
303
316
|
|
|
304
317
|
@if VAR.$generate-utility-classes {
|
|
@@ -321,6 +334,7 @@
|
|
|
321
334
|
&.start { justify-content: flex-start; }
|
|
322
335
|
&.end { justify-content: flex-end; }
|
|
323
336
|
&.center { justify-content: center; }
|
|
337
|
+
&.stretch { justify-content: stretch; } // todo: document
|
|
324
338
|
&.between { justify-content: space-between; }
|
|
325
339
|
&.around { justify-content: space-around; }
|
|
326
340
|
&.evenly { justify-content: space-evenly; }
|
|
@@ -351,8 +365,8 @@
|
|
|
351
365
|
> .order-none { order: 0; }
|
|
352
366
|
|
|
353
367
|
> .shrink { @include shrink; }
|
|
354
|
-
> .shrink
|
|
355
|
-
> .shrink-
|
|
368
|
+
> .no-shrink { @include no-shrink; }
|
|
369
|
+
> .shrink-twice { @include shrink-twice; }
|
|
356
370
|
|
|
357
371
|
> .self-end { @include self-end; }
|
|
358
372
|
> .self-start { @include self-start; }
|
|
@@ -389,6 +403,7 @@
|
|
|
389
403
|
&.end\@#{$breakpoint} { justify-content: flex-end; }
|
|
390
404
|
&.center\@#{$breakpoint} { justify-content: center; }
|
|
391
405
|
&.between\@#{$breakpoint} { justify-content: space-between; }
|
|
406
|
+
&.stretch\@#{$breakpoint} { justify-content: stretch; } // todo: document
|
|
392
407
|
&.around\@#{$breakpoint} { justify-content: space-around; }
|
|
393
408
|
&.evenly\@#{$breakpoint} { justify-content: space-evenly; }
|
|
394
409
|
|
|
@@ -416,8 +431,8 @@
|
|
|
416
431
|
& > .order-last\@#{$breakpoint} { order: 9999; }
|
|
417
432
|
& > .order-none\@#{$breakpoint} { order: 0; }
|
|
418
433
|
& > .shrink\@#{$breakpoint} { @include shrink; }
|
|
419
|
-
& > .shrink
|
|
420
|
-
& > .shrink-
|
|
434
|
+
& > .no-shrink\@#{$breakpoint} { @include no-shrink; }
|
|
435
|
+
& > .shrink-twice\@#{$breakpoint} { @include shrink-twice; }
|
|
421
436
|
& > .self-end\@#{$breakpoint} { @include self-end; }
|
|
422
437
|
& > .self-start\@#{$breakpoint} { @include self-start; }
|
|
423
438
|
& > .self-center\@#{$breakpoint} { @include self-center; }
|
|
@@ -431,4 +446,4 @@
|
|
|
431
446
|
}
|
|
432
447
|
}
|
|
433
448
|
}
|
|
434
|
-
}
|
|
449
|
+
}
|
|
@@ -63,19 +63,19 @@ $alignments: (
|
|
|
63
63
|
* @description justify-items container.
|
|
64
64
|
* @param {string} $value - The value for the justify-items property.
|
|
65
65
|
*/
|
|
66
|
-
@mixin justify
|
|
66
|
+
@mixin justify($value) {justify-items: $value;}
|
|
67
67
|
|
|
68
68
|
/**
|
|
69
69
|
* @description Establishes a align-items container.
|
|
70
70
|
* @param {string} $value - The value for the align-items property.
|
|
71
71
|
*/
|
|
72
|
-
@mixin align
|
|
72
|
+
@mixin align($value) {align-items: $value;}
|
|
73
73
|
|
|
74
74
|
/**
|
|
75
75
|
* @description Establishes a place-items container.
|
|
76
76
|
* @param {string} $value - The value for the place-items property.
|
|
77
77
|
*/
|
|
78
|
-
@mixin place
|
|
78
|
+
@mixin place($value) {place-items: $value;}
|
|
79
79
|
|
|
80
80
|
// Grid Item Placement Mixins
|
|
81
81
|
@mixin col-span($span) {grid-column: span $span / span $span;}
|
|
@@ -155,22 +155,22 @@ $alignments: (
|
|
|
155
155
|
.grid.flow-dense { @include flow-dense-items; }
|
|
156
156
|
|
|
157
157
|
@each $name, $value in $alignments {
|
|
158
|
-
.justify
|
|
159
|
-
.align
|
|
160
|
-
.place
|
|
158
|
+
.justify-#{$name} { @include justify($value); }
|
|
159
|
+
.align-#{$name} { @include align($value); }
|
|
160
|
+
.place-#{$name} { @include place($value); }
|
|
161
161
|
|
|
162
162
|
@each $breakpoint, $width in VAR.$breakpoints {
|
|
163
163
|
@media (min-width: #{$width}) {
|
|
164
|
-
.justify
|
|
165
|
-
justify
|
|
164
|
+
.justify-#{$name}\@#{$breakpoint} {
|
|
165
|
+
@include justify($value);
|
|
166
166
|
}
|
|
167
|
-
.align
|
|
168
|
-
align
|
|
167
|
+
.align-#{$name}\@#{$breakpoint} {
|
|
168
|
+
@include align($value);
|
|
169
169
|
}
|
|
170
|
-
.place
|
|
171
|
-
place
|
|
170
|
+
.place-#{$name}\@#{$breakpoint} {
|
|
171
|
+
@include place($value);
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
|
-
}
|
|
176
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@use 'abstracts/config' as *; @use 'abstracts/functions' as *; @use 'abstracts/index' as *; @use 'base/base' as *; @use 'base/index' as *; @use 'base/reset' as *; @use 'layouts/container' as *; @use 'layouts/flex' as *; @use 'layouts/grid' as *; @use 'layouts/index' as *; @use 'themes/index' as *; @use 'themes/theme' as *; @use 'utilities/alignment' as *; @use 'utilities/animations' as *; @use 'utilities/borders' as *; @use 'utilities/colors' as *; @use 'utilities/container-queries' as *; @use 'utilities/display' as *; @use 'utilities/helpers' as *; @use 'utilities/index' as *; @use 'utilities/media-queries' as *; @use 'utilities/opacity' as *; @use 'utilities/position' as *; @use 'utilities/shadows' as *; @use 'utilities/sizing' as *; @use 'utilities/spacing' as *; @use 'utilities/tooltips' as *; @use 'utilities/transforms' as *; @use 'utilities/transitions' as *; @use 'utilities/typography' as *; @use 'sass:string' as str; @use 'sass:map'; @use 'sass:list'; @function st($s) { @while str.length($s) > 0 and str.slice($s, 1, 1) == " " { $s: str.slice($s, 2); } @while str.length($s) > 0 and str.slice($s, -1) == " " { $s: str.slice($s, 1, str.length($s) - 1); } @return $s; } @function split($s, $d) { $r: (); $i: str.index($s, $d); @while $i != null { $it: str.slice($s, 1, $i - 1); $r: list.append($r, st($it)); $s: str.slice($s, $i + str.length($d)); $i: str.index($s, $d); } @return list.append($r, st($s)); } @mixin apply($mixins...) { @each $mixin in $mixins { $ms: #{$mixin}; @if str.index($ms, '(') { $opening: str.index($ms, '('); $closing: null; $depth: 1; $break: 0; @for $i from $opening + 1 through str.length($ms) { @if $break == 0 { $char: str.slice($ms, $i, $i); @if $char == '(' { $depth: $depth + 1; } @else if $char == ')' { $depth: $depth - 1; @if $depth == 0 { $closing: $i; $break: 1; } } } } @if $closing { $mixin-name: str.slice($ms, 1, $opening - 1); $mixin-params: split(str.slice($ms, $opening + 1, $closing - 1), ','); $full-mixin-call: str.slice($ms, 1, $closing); $modifiers_text: ""; @if str.length($ms) > $closing { $modifiers_text: str.slice($ms, $closing + 1); @while str.slice($modifiers_text, 1, 1) == ' ' { $modifiers_text: str.slice($modifiers_text, 2); } } $breakpoint: null; $state: null; @if $modifiers_text != "" { $modifier-list: str.split($modifiers_text, ' '); @each $mod in $modifier-list { @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else if $state { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($full-mixin-call, $mixin-params); } } @else { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else { $parts: str.split($ms, ' '); $base-mixin: list.nth($parts, 1); $breakpoint: null; $state: null; @if list.length($parts) > 1 { @for $i from 2 through list.length($parts) { $mod: list.nth($parts, $i); @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($base-mixin); } } } @else if $state { &:#{$state} { @include apply-mixin($base-mixin); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($base-mixin); } } @else { @include apply-mixin($base-mixin); } } } } @mixin apply-mixin($ms, $params: null) { @if $ms == 'container-base' { @include container-base; } @else if str.index($ms, 'container-padding(') == 1 { $param1: list.nth($params, 1); @include container-padding($param1); } @else if str.index($ms, 'container(') == 1 { $param1: list.nth($params, 1); @include container($param1); } @else if $ms == 'flex' { @include flex; } @else if $ms == 'flex-inline' { @include flex-inline; } @else if $ms == 'row' { @include row; } @else if $ms == 'row-reverse' { @include row-reverse; } @else if $ms == 'col' { @include col; } @else if $ms == 'col-reverse' { @include col-reverse; } @else if $ms == 'wrap' { @include wrap; } @else if $ms == 'nowrap' { @include nowrap; } @else if $ms == 'wrap-reverse' { @include wrap-reverse; } @else if $ms == 'start' { @include start; } @else if $ms == 'end' { @include end; } @else if $ms == 'center' { @include center; } @else if $ms == 'between' { @include between; } @else if $ms == 'around' { @include around; } @else if $ms == 'evenly' { @include evenly; } @else if $ms == 'x-start' { @include x-start; } @else if $ms == 'x-end' { @include x-end; } @else if $ms == 'x-center' { @include x-center; } @else if $ms == 'x-stretch' { @include x-stretch; } @else if $ms == 'x-baseline' { @include x-baseline; } @else if $ms == 'x-content-start' { @include x-content-start; } @else if $ms == 'x-content-end' { @include x-content-end; } @else if $ms == 'x-content-center' { @include x-content-center; } @else if $ms == 'x-content-between' { @include x-content-between; } @else if $ms == 'x-content-around' { @include x-content-around; } @else if $ms == 'x-content-evenly' { @include x-content-evenly; } @else if $ms == 'x-content-stretch' { @include x-content-stretch; } @else if $ms == 'self-auto' { @include self-auto; } @else if $ms == 'self-start' { @include self-start; } @else if $ms == 'self-end' { @include self-end; } @else if $ms == 'self-center' { @include self-center; } @else if $ms == 'self-stretch' { @include self-stretch; } @else if $ms == 'self-baseline' { @include self-baseline; } @else if $ms == 'shrink' { @include shrink; } @else if $ms == 'shrink-0' { @include shrink-0; } @else if $ms == 'shrink-2' { @include shrink-2; } @else if $ms == 'fill-full' { @include fill-full; } @else if $ms == 'fill-auto' { @include fill-auto; } @else if $ms == 'grow' { @include grow; } @else if $ms == 'no-grow' { @include no-grow; } @else if str.index($ms, 'fill(') == 1 { $param1: list.nth($params, 1); @include fill($param1); } @else if $ms == 'grid' { @include grid; } @else if $ms == 'grid-inline' { @include grid-inline; } @else if str.index($ms, 'cols(') == 1 { $param1: list.nth($params, 1); @include cols($param1); } @else if str.index($ms, 'rows(') == 1 { $param1: list.nth($params, 1); @include rows($param1); } @else if str.index($ms, 'cols-custom(') == 1 { $param1: list.nth($params, 1); @include cols-custom($param1); } @else if str.index($ms, 'auto-fit(') == 1 { $param1: list.nth($params, 1); @include auto-fit($param1); } @else if str.index($ms, 'auto-fill(') == 1 { $param1: list.nth($params, 1); @include auto-fill($param1); } @else if $ms == 'flow-in-row' { @include flow-in-row; } @else if $ms == 'flow-in-col' { @include flow-in-col; } @else if $ms == 'flow-dense-items' { @include flow-dense-items; } @else if str.index($ms, 'justify-items(') == 1 { $param1: list.nth($params, 1); @include justify-items($param1); } @else if str.index($ms, 'align-items(') == 1 { $param1: list.nth($params, 1); @include align-items($param1); } @else if str.index($ms, 'place-items(') == 1 { $param1: list.nth($params, 1); @include place-items($param1); } @else if str.index($ms, 'col-span(') == 1 { $param1: list.nth($params, 1); @include col-span($param1); } @else if str.index($ms, 'row-span(') == 1 { $param1: list.nth($params, 1); @include row-span($param1); } @else if str.index($ms, 'col-start(') == 1 { $param1: list.nth($params, 1); @include col-start($param1); } @else if str.index($ms, 'col-end(') == 1 { $param1: list.nth($params, 1); @include col-end($param1); } @else if str.index($ms, 'row-start(') == 1 { $param1: list.nth($params, 1); @include row-start($param1); } @else if str.index($ms, 'row-end(') == 1 { $param1: list.nth($params, 1); @include row-end($param1); } @else if str.index($ms, 'grid-position(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include grid-position($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include grid-position($param1, $param2); } } @else if str.index($ms, 'position-col(') == 1 { $param1: list.nth($params, 1); @include position-col($param1); } @else if str.index($ms, 'position-row(') == 1 { $param1: list.nth($params, 1); @include position-row($param1); } @else if $ms == 'align-baseline' { @include align-baseline; } @else if $ms == 'align-top' { @include align-top; } @else if $ms == 'align-middle' { @include align-middle; } @else if $ms == 'align-bottom' { @include align-bottom; } @else if str.index($ms, 'generate-bounce-keyframes(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include generate-bounce-keyframes($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include generate-bounce-keyframes($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include generate-bounce-keyframes($param1, $param2, $param3); } } @else if str.index($ms, 'animate-bounce(') == 1 { $param1: list.nth($params, 1); @include animate-bounce($param1); } @else if $ms == 'hover-ready' { @include hover-ready; } @else if str.index($ms, 'border-top(') == 1 { $param1: list.nth($params, 1); @include border-top($param1); } @else if str.index($ms, 'border-right(') == 1 { $param1: list.nth($params, 1); @include border-right($param1); } @else if str.index($ms, 'border-bottom(') == 1 { $param1: list.nth($params, 1); @include border-bottom($param1); } @else if str.index($ms, 'border-left(') == 1 { $param1: list.nth($params, 1); @include border-left($param1); } @else if str.index($ms, 'rounded-t(') == 1 { $param1: list.nth($params, 1); @include rounded-t($param1); } @else if str.index($ms, 'rounded-r(') == 1 { $param1: list.nth($params, 1); @include rounded-r($param1); } @else if str.index($ms, 'rounded-b(') == 1 { $param1: list.nth($params, 1); @include rounded-b($param1); } @else if str.index($ms, 'rounded-l(') == 1 { $param1: list.nth($params, 1); @include rounded-l($param1); } @else if str.index($ms, 'rounded-tl(') == 1 { $param1: list.nth($params, 1); @include rounded-tl($param1); } @else if str.index($ms, 'rounded-tr(') == 1 { $param1: list.nth($params, 1); @include rounded-tr($param1); } @else if str.index($ms, 'rounded-br(') == 1 { $param1: list.nth($params, 1); @include rounded-br($param1); } @else if str.index($ms, 'rounded-bl(') == 1 { $param1: list.nth($params, 1); @include rounded-bl($param1); } @else if str.index($ms, 'border-style(') == 1 { $param1: list.nth($params, 1); @include border-style($param1); } @else if str.index($ms, 'border-color(') == 1 { $param1: list.nth($params, 1); @include border-color($param1); } @else if str.index($ms, 'border-all(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include border-all($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include border-all($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include border-all($param1, $param2, $param3); } } @else if str.index($ms, 'adaptive-contrast(') == 1 { $param1: list.nth($params, 1); @include adaptive-contrast($param1); } @else if str.index($ms, 'bg(') == 1 { $param1: list.nth($params, 1); @include bg($param1); } @else if str.index($ms, 'color(') == 1 { $param1: list.nth($params, 1); @include color($param1); } @else if str.index($ms, 'gradient(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include gradient($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include gradient($param1, $param2); } } @else if str.index($ms, 'backdrop-filter(') == 1 { $param1: list.nth($params, 1); @include backdrop-filter($param1); } @else if str.index($ms, 'filter(') == 1 { $param1: list.nth($params, 1); @include filter($param1); } @else if str.index($ms, 'container-up(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-up($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-up($param1, $param2); } } @else if str.index($ms, 'container-down(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-down($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-down($param1, $param2); } } @else if str.index($ms, 'container-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-between($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include container-between($param1, $param2, $param3); } } @else if str.index($ms, 'container-only(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-only($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-only($param1, $param2); } } @else if str.index($ms, 'container-query(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-query($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-query($param1, $param2); } } @else if str.index($ms, 'container-type(') == 1 { $param1: list.nth($params, 1); @include container-type($param1); } @else if str.index($ms, 'container-name(') == 1 { $param1: list.nth($params, 1); @include container-name($param1); } @else if $ms == 'hide' { @include hide; } @else if $ms == 'block' { @include block; } @else if $ms == 'inline' { @include inline; } @else if $ms == 'inline-block' { @include inline-block; } @else if $ms == 'show' { @include show; } @else if $ms == 'd-tbl' { @include d-tbl; } @else if $ms == 'd-tbl-row' { @include d-tbl-row; } @else if $ms == 'd-tbl-cell' { @include d-tbl-cell; } @else if $ms == 'visible' { @include visible; } @else if $ms == 'invisible' { @include invisible; } @else if $ms == 'collapse' { @include collapse; } @else if $ms == 'contents' { @include contents; } @else if $ms == 'overflow-hidden' { @include overflow-hidden; } @else if $ms == 'overflow-visible' { @include overflow-visible; } @else if $ms == 'overflow-scroll' { @include overflow-scroll; } @else if $ms == 'overflow-auto' { @include overflow-auto; } @else if $ms == 'overflow-x-hidden' { @include overflow-x-hidden; } @else if $ms == 'overflow-y-hidden' { @include overflow-y-hidden; } @else if $ms == 'overflow-x-scroll' { @include overflow-x-scroll; } @else if $ms == 'overflow-y-scroll' { @include overflow-y-scroll; } @else if $ms == 'overflow-x-auto' { @include overflow-x-auto; } @else if $ms == 'overflow-y-auto' { @include overflow-y-auto; } @else if str.index($ms, 'media-up(') == 1 { $param1: list.nth($params, 1); @include media-up($param1); } @else if str.index($ms, 'media-down(') == 1 { $param1: list.nth($params, 1); @include media-down($param1); } @else if str.index($ms, 'media-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include media-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include media-between($param1, $param2); } } @else if str.index($ms, 'media-only(') == 1 { $param1: list.nth($params, 1); @include media-only($param1); } @else if $ms == 'touch' { @include touch; } @else if $ms == 'print' { @include print; } @else if str.index($ms, 'supports(') == 1 { $param1: list.nth($params, 1); @include supports($param1); } @else if $ms == 'prefers-dark' { @include prefers-dark; } @else if $ms == 'dark-mode' { @include dark-mode; } @else if $ms == 'landscape' { @include landscape; } @else if $ms == 'portrait' { @include portrait; } @else if str.index($ms, 'aspect-ratio(') == 1 { $param1: list.nth($params, 1); @include aspect-ratio($param1); } @else if $ms == 'dvh' { @include dvh; } @else if str.index($ms, 'safe-area-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include safe-area-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include safe-area-inset($param1, $param2); } } @else if $ms == 'reduced-motion' { @include reduced-motion; } @else if $ms == 'save-data' { @include save-data; } @else if $ms == 'fine-pointer' { @include fine-pointer; } @else if str.index($ms, 'display-mode(') == 1 { $param1: list.nth($params, 1); @include display-mode($param1); } @else if $ms == 'high-contrast' { @include high-contrast; } @else if str.index($ms, 'opacity(') == 1 { $param1: list.nth($params, 1); @include opacity($param1); } @else if $ms == 'static' { @include static; } @else if $ms == 'relative' { @include relative; } @else if $ms == 'absolute' { @include absolute; } @else if $ms == 'fixed' { @include fixed; } @else if $ms == 'sticky' { @include sticky; } @else if str.index($ms, 'top(') == 1 { $param1: list.nth($params, 1); @include top($param1); } @else if str.index($ms, 'right(') == 1 { $param1: list.nth($params, 1); @include right($param1); } @else if str.index($ms, 'bottom(') == 1 { $param1: list.nth($params, 1); @include bottom($param1); } @else if str.index($ms, 'left(') == 1 { $param1: list.nth($params, 1); @include left($param1); } @else if $ms == 'absolute-center' { @include absolute-center; } @else if str.index($ms, 'shadow-base(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-base($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-base($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include shadow-base($param1, $param2, $param3); } @else if (list.length($params) == 4) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); @include shadow-base($param1, $param2, $param3, $param4); } @else if (list.length($params) == 5) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); $param5: list.nth($params, 5); @include shadow-base($param1, $param2, $param3, $param4, $param5); } } @else if str.index($ms, 'shadow(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow($param1, $param2); } } @else if str.index($ms, 'shadow-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-inset($param1, $param2); } } @else if str.index($ms, 'elevation(') == 1 { $param1: list.nth($params, 1); @include elevation($param1); } @else if str.index($ms, 'width(') == 1 { $param1: list.nth($params, 1); @include width($param1); } @else if str.index($ms, 'height(') == 1 { $param1: list.nth($params, 1); @include height($param1); } @else if str.index($ms, 'min-width(') == 1 { $param1: list.nth($params, 1); @include min-width($param1); } @else if str.index($ms, 'min-height(') == 1 { $param1: list.nth($params, 1); @include min-height($param1); } @else if str.index($ms, 'max-width(') == 1 { $param1: list.nth($params, 1); @include max-width($param1); } @else if str.index($ms, 'max-height(') == 1 { $param1: list.nth($params, 1); @include max-height($param1); } @else if str.index($ms, 'width-percent(') == 1 { $param1: list.nth($params, 1); @include width-percent($param1); } @else if str.index($ms, 'height-percent(') == 1 { $param1: list.nth($params, 1); @include height-percent($param1); } @else if str.index($ms, 'min-width-percent(') == 1 { $param1: list.nth($params, 1); @include min-width-percent($param1); } @else if str.index($ms, 'min-height-percent(') == 1 { $param1: list.nth($params, 1); @include min-height-percent($param1); } @else if str.index($ms, 'max-width-percent(') == 1 { $param1: list.nth($params, 1); @include max-width-percent($param1); } @else if str.index($ms, 'max-height-percent(') == 1 { $param1: list.nth($params, 1); @include max-height-percent($param1); } @else if $ms == 'w-auto' { @include w-auto; } @else if $ms == 'w-full' { @include w-full; } @else if $ms == 'h-auto' { @include h-auto; } @else if $ms == 'h-full' { @include h-full; } @else if $ms == 'min-w-full' { @include min-w-full; } @else if $ms == 'max-w-full' { @include max-w-full; } @else if $ms == 'min-h-full' { @include min-h-full; } @else if $ms == 'max-h-full' { @include max-h-full; } @else if $ms == 'w-screen' { @include w-screen; } @else if $ms == 'h-screen' { @include h-screen; } @else if str.index($ms, 'p(') == 1 { $param1: list.nth($params, 1); @include p($param1); } @else if str.index($ms, 'px(') == 1 { $param1: list.nth($params, 1); @include px($param1); } @else if str.index($ms, 'py(') == 1 { $param1: list.nth($params, 1); @include py($param1); } @else if str.index($ms, 'pt(') == 1 { $param1: list.nth($params, 1); @include pt($param1); } @else if str.index($ms, 'pr(') == 1 { $param1: list.nth($params, 1); @include pr($param1); } @else if str.index($ms, 'pb(') == 1 { $param1: list.nth($params, 1); @include pb($param1); } @else if str.index($ms, 'pl(') == 1 { $param1: list.nth($params, 1); @include pl($param1); } @else if str.index($ms, 'm(') == 1 { $param1: list.nth($params, 1); @include m($param1); } @else if str.index($ms, 'mx(') == 1 { $param1: list.nth($params, 1); @include mx($param1); } @else if str.index($ms, 'my(') == 1 { $param1: list.nth($params, 1); @include my($param1); } @else if str.index($ms, 'mt(') == 1 { $param1: list.nth($params, 1); @include mt($param1); } @else if str.index($ms, 'mr(') == 1 { $param1: list.nth($params, 1); @include mr($param1); } @else if str.index($ms, 'mb(') == 1 { $param1: list.nth($params, 1); @include mb($param1); } @else if str.index($ms, 'ml(') == 1 { $param1: list.nth($params, 1); @include ml($param1); } @else if $ms == 'ml-auto' { @include ml-auto; } @else if $ms == 'mr-auto' { @include mr-auto; } @else if $ms == 'mx-auto' { @include mx-auto; } @else if str.index($ms, 'space-y(') == 1 { $param1: list.nth($params, 1); @include space-y($param1); } @else if str.index($ms, 'space-x(') == 1 { $param1: list.nth($params, 1); @include space-x($param1); } @else if str.index($ms, 'gap(') == 1 { $param1: list.nth($params, 1); @include gap($param1); } @else if str.index($ms, 'gap-x(') == 1 { $param1: list.nth($params, 1); @include gap-x($param1); } @else if str.index($ms, 'gap-y(') == 1 { $param1: list.nth($params, 1); @include gap-y($param1); } @else if str.index($ms, 'translate-x(') == 1 { $param1: list.nth($params, 1); @include translate-x($param1); } @else if str.index($ms, 'translate-y(') == 1 { $param1: list.nth($params, 1); @include translate-y($param1); } @else if str.index($ms, 'translate-z(') == 1 { $param1: list.nth($params, 1); @include translate-z($param1); } @else if str.index($ms, 'translate(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include translate($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include translate($param1, $param2); } } @else if str.index($ms, 'scale-x(') == 1 { $param1: list.nth($params, 1); @include scale-x($param1); } @else if str.index($ms, 'scale-y(') == 1 { $param1: list.nth($params, 1); @include scale-y($param1); } @else if str.index($ms, 'scale(') == 1 { $param1: list.nth($params, 1); @include scale($param1); } @else if str.index($ms, 'rotate(') == 1 { $param1: list.nth($params, 1); @include rotate($param1); } @else if str.index($ms, 'skew-x(') == 1 { $param1: list.nth($params, 1); @include skew-x($param1); } @else if str.index($ms, 'skew-y(') == 1 { $param1: list.nth($params, 1); @include skew-y($param1); } @else if str.index($ms, 'origin(') == 1 { $param1: list.nth($params, 1); @include origin($param1); } @else if $ms == 'transition' { @include transition; } @else if $ms == 'transition-none' { @include transition-none; } @else if $ms == 'transition-all' { @include transition-all; } @else if $ms == 'transition-colors' { @include transition-colors; } @else if $ms == 'transition-opacity' { @include transition-opacity; } @else if $ms == 'transition-shadow' { @include transition-shadow; } @else if $ms == 'transition-transform' { @include transition-transform; } @else if str.index($ms, 'duration(') == 1 { $param1: list.nth($params, 1); @include duration($param1); } @else if $ms == 'ease-linear' { @include ease-linear; } @else if $ms == 'ease-in' { @include ease-in; } @else if $ms == 'ease-out' { @include ease-out; } @else if $ms == 'ease-in-out' { @include ease-in-out; } @else if str.index($ms, 'delay(') == 1 { $param1: list.nth($params, 1); @include delay($param1); } @else if str.index($ms, 'text-size(') == 1 { $param1: list.nth($params, 1); @include text-size($param1); } @else if $ms == 'font-thin' { @include font-thin; } @else if $ms == 'font-extralight' { @include font-extralight; } @else if $ms == 'font-light' { @include font-light; } @else if $ms == 'font-normal' { @include font-normal; } @else if $ms == 'font-medium' { @include font-medium; } @else if $ms == 'font-semibold' { @include font-semibold; } @else if $ms == 'font-bold' { @include font-bold; } @else if $ms == 'font-extrabold' { @include font-extrabold; } @else if $ms == 'font-black' { @include font-black; } @else if str.index($ms, 'leading(') == 1 { $param1: list.nth($params, 1); @include leading($param1); } @else if $ms == 'leading-none' { @include leading-none; } @else if $ms == 'leading-tight' { @include leading-tight; } @else if $ms == 'leading-snug' { @include leading-snug; } @else if $ms == 'leading-normal' { @include leading-normal; } @else if $ms == 'leading-relaxed' { @include leading-relaxed; } @else if $ms == 'leading-loose' { @include leading-loose; } @else if $ms == 'text-left' { @include text-left; } @else if $ms == 'text-center' { @include text-center; } @else if $ms == 'text-right' { @include text-right; } @else if $ms == 'text-justify' { @include text-justify; } @else if $ms == 'uppercase' { @include uppercase; } @else if $ms == 'lowercase' { @include lowercase; } @else if $ms == 'capitalize' { @include capitalize; } @else if $ms == 'normal-case' { @include normal-case; } @else if $ms == 'italic' { @include italic; } @else if $ms == 'not-italic' { @include not-italic; } @else if $ms == 'underline' { @include underline; } @else if $ms == 'line-through' { @include line-through; } @else if $ms == 'no-underline' { @include no-underline; } @else if $ms == 'truncate' { @include truncate; } @else if str.index($ms, 'truncate-lines(') == 1 { $param1: list.nth($params, 1); @include truncate-lines($param1); } @else if $ms == 'break-normal' { @include break-normal; } @else if $ms == 'break-words' { @include break-words; } @else if $ms == 'break-all' { @include break-all; } @else if $ms == 'whitespace-normal' { @include whitespace-normal; } @else if $ms == 'whitespace-nowrap' { @include whitespace-nowrap; } @else if $ms == 'whitespace-pre' { @include whitespace-pre; } @else if $ms == 'whitespace-pre-line' { @include whitespace-pre-line; } @else if $ms == 'whitespace-pre-wrap' { @include whitespace-pre-wrap; } @else if str.index($ms, 'tracking(') == 1 { $param1: list.nth($params, 1); @include tracking($param1); } @else if $ms == 'tracking-tighter' { @include tracking-tighter; } @else if $ms == 'tracking-tight' { @include tracking-tight; } @else if $ms == 'tracking-normal' { @include tracking-normal; } @else if $ms == 'tracking-wide' { @include tracking-wide; } @else if $ms == 'tracking-wider' { @include tracking-wider; } @else if $ms == 'tracking-widest' { @include tracking-widest; } @else if str.index($ms, 'responsive-typography(') == 1 { $param1: list.nth($params, 1); @include responsive-typography($param1); } }
|
|
1
|
+
@use 'abstracts/config' as *; @use 'abstracts/functions' as *; @use 'abstracts/index' as *; @use 'base/base' as *; @use 'base/index' as *; @use 'base/reset' as *; @use 'layouts/container' as *; @use 'layouts/flex' as *; @use 'layouts/grid' as *; @use 'layouts/index' as *; @use 'themes/index' as *; @use 'themes/theme' as *; @use 'utilities/alignment' as *; @use 'utilities/animations' as *; @use 'utilities/borders' as *; @use 'utilities/colors' as *; @use 'utilities/container-queries' as *; @use 'utilities/cursor' as *; @use 'utilities/display' as *; @use 'utilities/helpers' as *; @use 'utilities/index' as *; @use 'utilities/media-queries' as *; @use 'utilities/opacity' as *; @use 'utilities/position' as *; @use 'utilities/shadows' as *; @use 'utilities/sizing' as *; @use 'utilities/spacing' as *; @use 'utilities/tooltips' as *; @use 'utilities/transforms' as *; @use 'utilities/transitions' as *; @use 'utilities/typography' as *; @use 'sass:string' as str; @use 'sass:map'; @use 'sass:list'; @function st($s) { @while str.length($s) > 0 and str.slice($s, 1, 1) == " " { $s: str.slice($s, 2); } @while str.length($s) > 0 and str.slice($s, -1) == " " { $s: str.slice($s, 1, str.length($s) - 1); } @return $s; } @function split($s, $d) { $r: (); $i: str.index($s, $d); @while $i != null { $it: str.slice($s, 1, $i - 1); $r: list.append($r, st($it)); $s: str.slice($s, $i + str.length($d)); $i: str.index($s, $d); } @return list.append($r, st($s)); } @mixin apply($mixins...) { @each $mixin in $mixins { $ms: #{$mixin}; @if str.index($ms, '(') { $opening: str.index($ms, '('); $closing: null; $depth: 1; $break: 0; @for $i from $opening + 1 through str.length($ms) { @if $break == 0 { $char: str.slice($ms, $i, $i); @if $char == '(' { $depth: $depth + 1; } @else if $char == ')' { $depth: $depth - 1; @if $depth == 0 { $closing: $i; $break: 1; } } } } @if $closing { $mixin-name: str.slice($ms, 1, $opening - 1); $mixin-params: split(str.slice($ms, $opening + 1, $closing - 1), ','); $full-mixin-call: str.slice($ms, 1, $closing); $modifiers_text: ""; @if str.length($ms) > $closing { $modifiers_text: str.slice($ms, $closing + 1); @while str.slice($modifiers_text, 1, 1) == ' ' { $modifiers_text: str.slice($modifiers_text, 2); } } $breakpoint: null; $state: null; @if $modifiers_text != "" { $modifier-list: str.split($modifiers_text, ' '); @each $mod in $modifier-list { @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else if $state { &:#{$state} { @include apply-mixin($full-mixin-call, $mixin-params); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($full-mixin-call, $mixin-params); } } @else { @include apply-mixin($full-mixin-call, $mixin-params); } } } @else { $parts: str.split($ms, ' '); $base-mixin: list.nth($parts, 1); $breakpoint: null; $state: null; @if list.length($parts) > 1 { @for $i from 2 through list.length($parts) { $mod: list.nth($parts, $i); @if map.has-key($breakpoints, $mod) { $breakpoint: $mod; } @else { $state: $mod; } } } @if $state and $breakpoint { @include media-up($breakpoint) { &:#{$state} { @include apply-mixin($base-mixin); } } } @else if $state { &:#{$state} { @include apply-mixin($base-mixin); } } @else if $breakpoint { @include media-up($breakpoint) { @include apply-mixin($base-mixin); } } @else { @include apply-mixin($base-mixin); } } } } @mixin apply-mixin($ms, $params: null) { @if $ms == 'container-base' { @include container-base; } @else if str.index($ms, 'container-padding(') == 1 { $param1: list.nth($params, 1); @include container-padding($param1); } @else if str.index($ms, 'container(') == 1 { $param1: list.nth($params, 1); @include container($param1); } @else if $ms == 'flex' { @include flex; } @else if $ms == 'flex-inline' { @include flex-inline; } @else if $ms == 'row' { @include row; } @else if $ms == 'row-reverse' { @include row-reverse; } @else if $ms == 'col' { @include col; } @else if $ms == 'col-reverse' { @include col-reverse; } @else if $ms == 'wrap' { @include wrap; } @else if $ms == 'nowrap' { @include nowrap; } @else if $ms == 'wrap-reverse' { @include wrap-reverse; } @else if $ms == 'start' { @include start; } @else if $ms == 'end' { @include end; } @else if $ms == 'center' { @include center; } @else if $ms == 'stretch' { @include stretch; } @else if $ms == 'between' { @include between; } @else if $ms == 'around' { @include around; } @else if $ms == 'evenly' { @include evenly; } @else if $ms == 'x-start' { @include x-start; } @else if $ms == 'x-end' { @include x-end; } @else if $ms == 'x-center' { @include x-center; } @else if $ms == 'x-stretch' { @include x-stretch; } @else if $ms == 'x-baseline' { @include x-baseline; } @else if $ms == 'x-content-start' { @include x-content-start; } @else if $ms == 'x-content-end' { @include x-content-end; } @else if $ms == 'x-content-center' { @include x-content-center; } @else if $ms == 'x-content-between' { @include x-content-between; } @else if $ms == 'x-content-around' { @include x-content-around; } @else if $ms == 'x-content-evenly' { @include x-content-evenly; } @else if $ms == 'x-content-stretch' { @include x-content-stretch; } @else if $ms == 'self-auto' { @include self-auto; } @else if $ms == 'self-start' { @include self-start; } @else if $ms == 'self-end' { @include self-end; } @else if $ms == 'self-center' { @include self-center; } @else if $ms == 'self-stretch' { @include self-stretch; } @else if $ms == 'self-baseline' { @include self-baseline; } @else if $ms == 'shrink' { @include shrink; } @else if $ms == 'no-shrink' { @include no-shrink; } @else if $ms == 'shrink-twice' { @include shrink-twice; } @else if $ms == 'fill-full' { @include fill-full; } @else if $ms == 'fill-auto' { @include fill-auto; } @else if $ms == 'grow' { @include grow; } @else if $ms == 'no-grow' { @include no-grow; } @else if $ms == 'grow-only' { @include grow-only; } @else if str.index($ms, 'fill(') == 1 { $param1: list.nth($params, 1); @include fill($param1); } @else if $ms == 'grid' { @include grid; } @else if $ms == 'grid-inline' { @include grid-inline; } @else if str.index($ms, 'cols(') == 1 { $param1: list.nth($params, 1); @include cols($param1); } @else if str.index($ms, 'rows(') == 1 { $param1: list.nth($params, 1); @include rows($param1); } @else if str.index($ms, 'cols-custom(') == 1 { $param1: list.nth($params, 1); @include cols-custom($param1); } @else if str.index($ms, 'auto-fit(') == 1 { $param1: list.nth($params, 1); @include auto-fit($param1); } @else if str.index($ms, 'auto-fill(') == 1 { $param1: list.nth($params, 1); @include auto-fill($param1); } @else if $ms == 'flow-in-row' { @include flow-in-row; } @else if $ms == 'flow-in-col' { @include flow-in-col; } @else if $ms == 'flow-dense-items' { @include flow-dense-items; } @else if str.index($ms, 'justify(') == 1 { $param1: list.nth($params, 1); @include justify($param1); } @else if str.index($ms, 'align(') == 1 { $param1: list.nth($params, 1); @include align($param1); } @else if str.index($ms, 'place(') == 1 { $param1: list.nth($params, 1); @include place($param1); } @else if str.index($ms, 'col-span(') == 1 { $param1: list.nth($params, 1); @include col-span($param1); } @else if str.index($ms, 'row-span(') == 1 { $param1: list.nth($params, 1); @include row-span($param1); } @else if str.index($ms, 'col-start(') == 1 { $param1: list.nth($params, 1); @include col-start($param1); } @else if str.index($ms, 'col-end(') == 1 { $param1: list.nth($params, 1); @include col-end($param1); } @else if str.index($ms, 'row-start(') == 1 { $param1: list.nth($params, 1); @include row-start($param1); } @else if str.index($ms, 'row-end(') == 1 { $param1: list.nth($params, 1); @include row-end($param1); } @else if str.index($ms, 'grid-position(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include grid-position($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include grid-position($param1, $param2); } } @else if str.index($ms, 'position-col(') == 1 { $param1: list.nth($params, 1); @include position-col($param1); } @else if str.index($ms, 'position-row(') == 1 { $param1: list.nth($params, 1); @include position-row($param1); } @else if $ms == 'align-baseline' { @include align-baseline; } @else if $ms == 'align-top' { @include align-top; } @else if $ms == 'align-middle' { @include align-middle; } @else if $ms == 'align-bottom' { @include align-bottom; } @else if str.index($ms, 'generate-bounce-keyframes(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include generate-bounce-keyframes($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include generate-bounce-keyframes($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include generate-bounce-keyframes($param1, $param2, $param3); } } @else if str.index($ms, 'animate-bounce(') == 1 { $param1: list.nth($params, 1); @include animate-bounce($param1); } @else if $ms == 'hover-ready' { @include hover-ready; } @else if str.index($ms, 'border(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include border($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include border($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include border($param1, $param2, $param3); } } @else if str.index($ms, 'border-top(') == 1 { $param1: list.nth($params, 1); @include border-top($param1); } @else if str.index($ms, 'border-right(') == 1 { $param1: list.nth($params, 1); @include border-right($param1); } @else if str.index($ms, 'border-bottom(') == 1 { $param1: list.nth($params, 1); @include border-bottom($param1); } @else if str.index($ms, 'border-left(') == 1 { $param1: list.nth($params, 1); @include border-left($param1); } @else if str.index($ms, 'rounded(') == 1 { $param1: list.nth($params, 1); @include rounded($param1); } @else if str.index($ms, 'rounded-t(') == 1 { $param1: list.nth($params, 1); @include rounded-t($param1); } @else if str.index($ms, 'rounded-r(') == 1 { $param1: list.nth($params, 1); @include rounded-r($param1); } @else if str.index($ms, 'rounded-b(') == 1 { $param1: list.nth($params, 1); @include rounded-b($param1); } @else if str.index($ms, 'rounded-l(') == 1 { $param1: list.nth($params, 1); @include rounded-l($param1); } @else if str.index($ms, 'rounded-tl(') == 1 { $param1: list.nth($params, 1); @include rounded-tl($param1); } @else if str.index($ms, 'rounded-tr(') == 1 { $param1: list.nth($params, 1); @include rounded-tr($param1); } @else if str.index($ms, 'rounded-br(') == 1 { $param1: list.nth($params, 1); @include rounded-br($param1); } @else if str.index($ms, 'rounded-bl(') == 1 { $param1: list.nth($params, 1); @include rounded-bl($param1); } @else if str.index($ms, 'border-style(') == 1 { $param1: list.nth($params, 1); @include border-style($param1); } @else if str.index($ms, 'border-color(') == 1 { $param1: list.nth($params, 1); @include border-color($param1); } @else if str.index($ms, 'border-all(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include border-all($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include border-all($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include border-all($param1, $param2, $param3); } } @else if $ms == 'pill' { @include pill; } @else if str.index($ms, 'adaptive-contrast(') == 1 { $param1: list.nth($params, 1); @include adaptive-contrast($param1); } @else if str.index($ms, 'bg(') == 1 { $param1: list.nth($params, 1); @include bg($param1); } @else if str.index($ms, 'color(') == 1 { $param1: list.nth($params, 1); @include color($param1); } @else if str.index($ms, 'gradient(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include gradient($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include gradient($param1, $param2); } } @else if str.index($ms, 'backdrop-filter(') == 1 { $param1: list.nth($params, 1); @include backdrop-filter($param1); } @else if str.index($ms, 'filter(') == 1 { $param1: list.nth($params, 1); @include filter($param1); } @else if str.index($ms, 'container-up(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-up($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-up($param1, $param2); } } @else if str.index($ms, 'container-down(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-down($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-down($param1, $param2); } } @else if str.index($ms, 'container-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-between($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include container-between($param1, $param2, $param3); } } @else if str.index($ms, 'container-only(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-only($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-only($param1, $param2); } } @else if str.index($ms, 'container-query(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include container-query($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include container-query($param1, $param2); } } @else if str.index($ms, 'container-type(') == 1 { $param1: list.nth($params, 1); @include container-type($param1); } @else if str.index($ms, 'container-name(') == 1 { $param1: list.nth($params, 1); @include container-name($param1); } @else if str.index($ms, 'cursor(') == 1 { $param1: list.nth($params, 1); @include cursor($param1); } @else if $ms == 'hide' { @include hide; } @else if $ms == 'block' { @include block; } @else if $ms == 'inline' { @include inline; } @else if $ms == 'inline-block' { @include inline-block; } @else if $ms == 'show' { @include show; } @else if $ms == 'd-tbl' { @include d-tbl; } @else if $ms == 'd-tbl-row' { @include d-tbl-row; } @else if $ms == 'd-tbl-cell' { @include d-tbl-cell; } @else if $ms == 'visible' { @include visible; } @else if $ms == 'invisible' { @include invisible; } @else if $ms == 'collapse' { @include collapse; } @else if $ms == 'contents' { @include contents; } @else if $ms == 'overflow-hidden' { @include overflow-hidden; } @else if $ms == 'overflow-visible' { @include overflow-visible; } @else if $ms == 'overflow-scroll' { @include overflow-scroll; } @else if $ms == 'overflow-auto' { @include overflow-auto; } @else if $ms == 'overflow-x-hidden' { @include overflow-x-hidden; } @else if $ms == 'overflow-y-hidden' { @include overflow-y-hidden; } @else if $ms == 'overflow-x-scroll' { @include overflow-x-scroll; } @else if $ms == 'overflow-y-scroll' { @include overflow-y-scroll; } @else if $ms == 'overflow-x-auto' { @include overflow-x-auto; } @else if $ms == 'overflow-y-auto' { @include overflow-y-auto; } @else if str.index($ms, 'media-up(') == 1 { $param1: list.nth($params, 1); @include media-up($param1); } @else if str.index($ms, 'media-down(') == 1 { $param1: list.nth($params, 1); @include media-down($param1); } @else if str.index($ms, 'media-between(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include media-between($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include media-between($param1, $param2); } } @else if str.index($ms, 'media-only(') == 1 { $param1: list.nth($params, 1); @include media-only($param1); } @else if $ms == 'touch' { @include touch; } @else if $ms == 'print' { @include print; } @else if str.index($ms, 'supports(') == 1 { $param1: list.nth($params, 1); @include supports($param1); } @else if $ms == 'prefers-dark' { @include prefers-dark; } @else if $ms == 'dark-mode' { @include dark-mode; } @else if $ms == 'landscape' { @include landscape; } @else if $ms == 'portrait' { @include portrait; } @else if str.index($ms, 'aspect-ratio(') == 1 { $param1: list.nth($params, 1); @include aspect-ratio($param1); } @else if $ms == 'dvh' { @include dvh; } @else if str.index($ms, 'safe-area-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include safe-area-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include safe-area-inset($param1, $param2); } } @else if $ms == 'reduced-motion' { @include reduced-motion; } @else if $ms == 'fine-pointer' { @include fine-pointer; } @else if str.index($ms, 'display-mode(') == 1 { $param1: list.nth($params, 1); @include display-mode($param1); } @else if $ms == 'high-contrast' { @include high-contrast; } @else if str.index($ms, 'opacity(') == 1 { $param1: list.nth($params, 1); @include opacity($param1); } @else if $ms == 'static' { @include static; } @else if $ms == 'relative' { @include relative; } @else if $ms == 'absolute' { @include absolute; } @else if $ms == 'fixed' { @include fixed; } @else if $ms == 'sticky' { @include sticky; } @else if str.index($ms, 'top(') == 1 { $param1: list.nth($params, 1); @include top($param1); } @else if str.index($ms, 'right(') == 1 { $param1: list.nth($params, 1); @include right($param1); } @else if str.index($ms, 'bottom(') == 1 { $param1: list.nth($params, 1); @include bottom($param1); } @else if str.index($ms, 'left(') == 1 { $param1: list.nth($params, 1); @include left($param1); } @else if $ms == 'absolute-center' { @include absolute-center; } @else if str.index($ms, 'shadow-base(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-base($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-base($param1, $param2); } @else if (list.length($params) == 3) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); @include shadow-base($param1, $param2, $param3); } @else if (list.length($params) == 4) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); @include shadow-base($param1, $param2, $param3, $param4); } @else if (list.length($params) == 5) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); $param3: list.nth($params, 3); $param4: list.nth($params, 4); $param5: list.nth($params, 5); @include shadow-base($param1, $param2, $param3, $param4, $param5); } } @else if str.index($ms, 'shadow(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow($param1, $param2); } } @else if str.index($ms, 'shadow-inset(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include shadow-inset($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include shadow-inset($param1, $param2); } } @else if str.index($ms, 'elevation(') == 1 { $param1: list.nth($params, 1); @include elevation($param1); } @else if str.index($ms, 'width(') == 1 { $param1: list.nth($params, 1); @include width($param1); } @else if str.index($ms, 'height(') == 1 { $param1: list.nth($params, 1); @include height($param1); } @else if str.index($ms, 'min-width(') == 1 { $param1: list.nth($params, 1); @include min-width($param1); } @else if str.index($ms, 'min-height(') == 1 { $param1: list.nth($params, 1); @include min-height($param1); } @else if str.index($ms, 'max-width(') == 1 { $param1: list.nth($params, 1); @include max-width($param1); } @else if str.index($ms, 'max-height(') == 1 { $param1: list.nth($params, 1); @include max-height($param1); } @else if str.index($ms, 'width-percent(') == 1 { $param1: list.nth($params, 1); @include width-percent($param1); } @else if str.index($ms, 'height-percent(') == 1 { $param1: list.nth($params, 1); @include height-percent($param1); } @else if str.index($ms, 'min-width-percent(') == 1 { $param1: list.nth($params, 1); @include min-width-percent($param1); } @else if str.index($ms, 'min-height-percent(') == 1 { $param1: list.nth($params, 1); @include min-height-percent($param1); } @else if str.index($ms, 'max-width-percent(') == 1 { $param1: list.nth($params, 1); @include max-width-percent($param1); } @else if str.index($ms, 'max-height-percent(') == 1 { $param1: list.nth($params, 1); @include max-height-percent($param1); } @else if $ms == 'w-auto' { @include w-auto; } @else if $ms == 'w-full' { @include w-full; } @else if $ms == 'h-auto' { @include h-auto; } @else if $ms == 'h-full' { @include h-full; } @else if $ms == 'w-max' { @include w-max; } @else if $ms == 'h-max' { @include h-max; } @else if $ms == 'w-min' { @include w-min; } @else if $ms == 'h-min' { @include h-min; } @else if $ms == 'w-fit' { @include w-fit; } @else if $ms == 'h-fit' { @include h-fit; } @else if $ms == 'min-w-full' { @include min-w-full; } @else if $ms == 'max-w-full' { @include max-w-full; } @else if $ms == 'min-h-full' { @include min-h-full; } @else if $ms == 'max-h-full' { @include max-h-full; } @else if $ms == 'w-screen' { @include w-screen; } @else if $ms == 'h-screen' { @include h-screen; } @else if str.index($ms, 'p(') == 1 { $param1: list.nth($params, 1); @include p($param1); } @else if str.index($ms, 'px(') == 1 { $param1: list.nth($params, 1); @include px($param1); } @else if str.index($ms, 'py(') == 1 { $param1: list.nth($params, 1); @include py($param1); } @else if str.index($ms, 'pt(') == 1 { $param1: list.nth($params, 1); @include pt($param1); } @else if str.index($ms, 'pr(') == 1 { $param1: list.nth($params, 1); @include pr($param1); } @else if str.index($ms, 'pb(') == 1 { $param1: list.nth($params, 1); @include pb($param1); } @else if str.index($ms, 'pl(') == 1 { $param1: list.nth($params, 1); @include pl($param1); } @else if str.index($ms, 'm(') == 1 { $param1: list.nth($params, 1); @include m($param1); } @else if str.index($ms, 'mx(') == 1 { $param1: list.nth($params, 1); @include mx($param1); } @else if str.index($ms, 'my(') == 1 { $param1: list.nth($params, 1); @include my($param1); } @else if str.index($ms, 'mt(') == 1 { $param1: list.nth($params, 1); @include mt($param1); } @else if str.index($ms, 'mr(') == 1 { $param1: list.nth($params, 1); @include mr($param1); } @else if str.index($ms, 'mb(') == 1 { $param1: list.nth($params, 1); @include mb($param1); } @else if str.index($ms, 'ml(') == 1 { $param1: list.nth($params, 1); @include ml($param1); } @else if $ms == 'ml-auto' { @include ml-auto; } @else if $ms == 'mr-auto' { @include mr-auto; } @else if $ms == 'mx-auto' { @include mx-auto; } @else if str.index($ms, 'space-y(') == 1 { $param1: list.nth($params, 1); @include space-y($param1); } @else if str.index($ms, 'space-x(') == 1 { $param1: list.nth($params, 1); @include space-x($param1); } @else if str.index($ms, 'gap(') == 1 { $param1: list.nth($params, 1); @include gap($param1); } @else if str.index($ms, 'gap-x(') == 1 { $param1: list.nth($params, 1); @include gap-x($param1); } @else if str.index($ms, 'gap-y(') == 1 { $param1: list.nth($params, 1); @include gap-y($param1); } @else if str.index($ms, 'translate-x(') == 1 { $param1: list.nth($params, 1); @include translate-x($param1); } @else if str.index($ms, 'translate-y(') == 1 { $param1: list.nth($params, 1); @include translate-y($param1); } @else if str.index($ms, 'translate-z(') == 1 { $param1: list.nth($params, 1); @include translate-z($param1); } @else if str.index($ms, 'translate(') == 1 { @if (list.length($params) == 1) { $param1: list.nth($params, 1); @include translate($param1); } @else if (list.length($params) == 2) { $param1: list.nth($params, 1); $param2: list.nth($params, 2); @include translate($param1, $param2); } } @else if str.index($ms, 'scale-x(') == 1 { $param1: list.nth($params, 1); @include scale-x($param1); } @else if str.index($ms, 'scale-y(') == 1 { $param1: list.nth($params, 1); @include scale-y($param1); } @else if str.index($ms, 'scale(') == 1 { $param1: list.nth($params, 1); @include scale($param1); } @else if str.index($ms, 'rotate(') == 1 { $param1: list.nth($params, 1); @include rotate($param1); } @else if str.index($ms, 'skew-x(') == 1 { $param1: list.nth($params, 1); @include skew-x($param1); } @else if str.index($ms, 'skew-y(') == 1 { $param1: list.nth($params, 1); @include skew-y($param1); } @else if str.index($ms, 'origin(') == 1 { $param1: list.nth($params, 1); @include origin($param1); } @else if $ms == 'transition' { @include transition; } @else if $ms == 'transition-none' { @include transition-none; } @else if $ms == 'transition-all' { @include transition-all; } @else if $ms == 'transition-colors' { @include transition-colors; } @else if $ms == 'transition-opacity' { @include transition-opacity; } @else if $ms == 'transition-shadow' { @include transition-shadow; } @else if $ms == 'transition-transform' { @include transition-transform; } @else if str.index($ms, 'duration(') == 1 { $param1: list.nth($params, 1); @include duration($param1); } @else if $ms == 'ease-linear' { @include ease-linear; } @else if $ms == 'ease-in' { @include ease-in; } @else if $ms == 'ease-out' { @include ease-out; } @else if $ms == 'ease-in-out' { @include ease-in-out; } @else if str.index($ms, 'delay(') == 1 { $param1: list.nth($params, 1); @include delay($param1); } @else if str.index($ms, 'text-size(') == 1 { $param1: list.nth($params, 1); @include text-size($param1); } @else if $ms == 'font-thin' { @include font-thin; } @else if $ms == 'font-extralight' { @include font-extralight; } @else if $ms == 'font-light' { @include font-light; } @else if $ms == 'font-normal' { @include font-normal; } @else if $ms == 'font-medium' { @include font-medium; } @else if $ms == 'font-semibold' { @include font-semibold; } @else if $ms == 'font-bold' { @include font-bold; } @else if $ms == 'font-extrabold' { @include font-extrabold; } @else if $ms == 'font-black' { @include font-black; } @else if str.index($ms, 'leading(') == 1 { $param1: list.nth($params, 1); @include leading($param1); } @else if $ms == 'leading-none' { @include leading-none; } @else if $ms == 'leading-tight' { @include leading-tight; } @else if $ms == 'leading-snug' { @include leading-snug; } @else if $ms == 'leading-normal' { @include leading-normal; } @else if $ms == 'leading-relaxed' { @include leading-relaxed; } @else if $ms == 'leading-loose' { @include leading-loose; } @else if $ms == 'text-left' { @include text-left; } @else if $ms == 'text-center' { @include text-center; } @else if $ms == 'text-right' { @include text-right; } @else if $ms == 'text-justify' { @include text-justify; } @else if $ms == 'uppercase' { @include uppercase; } @else if $ms == 'lowercase' { @include lowercase; } @else if $ms == 'capitalize' { @include capitalize; } @else if $ms == 'normal-case' { @include normal-case; } @else if $ms == 'italic' { @include italic; } @else if $ms == 'not-italic' { @include not-italic; } @else if $ms == 'underline' { @include underline; } @else if $ms == 'line-through' { @include line-through; } @else if $ms == 'no-underline' { @include no-underline; } @else if $ms == 'truncate' { @include truncate; } @else if $ms == 'overflow-label' { @include overflow-label; } @else if str.index($ms, 'truncate-lines(') == 1 { $param1: list.nth($params, 1); @include truncate-lines($param1); } @else if $ms == 'break-normal' { @include break-normal; } @else if $ms == 'break-words' { @include break-words; } @else if $ms == 'break-all' { @include break-all; } @else if $ms == 'whitespace-normal' { @include whitespace-normal; } @else if $ms == 'whitespace-nowrap' { @include whitespace-nowrap; } @else if $ms == 'whitespace-pre' { @include whitespace-pre; } @else if $ms == 'whitespace-pre-line' { @include whitespace-pre-line; } @else if $ms == 'whitespace-pre-wrap' { @include whitespace-pre-wrap; } @else if str.index($ms, 'tracking(') == 1 { $param1: list.nth($params, 1); @include tracking($param1); } @else if $ms == 'tracking-tighter' { @include tracking-tighter; } @else if $ms == 'tracking-tight' { @include tracking-tight; } @else if $ms == 'tracking-normal' { @include tracking-normal; } @else if $ms == 'tracking-wide' { @include tracking-wide; } @else if $ms == 'tracking-wider' { @include tracking-wider; } @else if $ms == 'tracking-widest' { @include tracking-widest; } @else if str.index($ms, 'responsive-typography(') == 1 { $param1: list.nth($params, 1); @include responsive-typography($param1); } @else { @debug 'Mixin not found: ' + $ms; } }
|