flint-gs 1.6.0 → 1.6.1

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.
Files changed (42) hide show
  1. data/LICENSE +21 -21
  2. data/README.md +900 -900
  3. data/lib/flint.rb +17 -17
  4. data/stylesheets/_flint.scss +6 -6
  5. data/stylesheets/flint/config/_config.scss +83 -83
  6. data/stylesheets/flint/functions/_functions.scss +41 -41
  7. data/stylesheets/flint/functions/helpers/_helpers.scss +178 -178
  8. data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +38 -38
  9. data/stylesheets/flint/functions/lib/_calc-margin.scss +31 -31
  10. data/stylesheets/flint/functions/lib/_calc-width.scss +44 -44
  11. data/stylesheets/flint/functions/lib/_exists.scss +21 -21
  12. data/stylesheets/flint/functions/lib/_fluid-width.scss +9 -9
  13. data/stylesheets/flint/functions/lib/_get-family-instance.scss +59 -59
  14. data/stylesheets/flint/functions/lib/_get-index.scss +14 -14
  15. data/stylesheets/flint/functions/lib/_get-instance-value.scss +19 -19
  16. data/stylesheets/flint/functions/lib/_get-substring.scss +23 -23
  17. data/stylesheets/flint/functions/lib/_get-value.scss +16 -16
  18. data/stylesheets/flint/functions/lib/_instance.scss +43 -43
  19. data/stylesheets/flint/functions/lib/_last.scss +8 -8
  20. data/stylesheets/flint/functions/lib/_list-to-string.scss +24 -24
  21. data/stylesheets/flint/functions/lib/_map-fetch.scss +33 -33
  22. data/stylesheets/flint/functions/lib/_next-index.scss +14 -14
  23. data/stylesheets/flint/functions/lib/_purge.scss +20 -20
  24. data/stylesheets/flint/functions/lib/_remove.scss +14 -14
  25. data/stylesheets/flint/functions/lib/_replace.scss +24 -24
  26. data/stylesheets/flint/functions/lib/_steal-key.scss +12 -12
  27. data/stylesheets/flint/functions/lib/_steal-values.scss +16 -16
  28. data/stylesheets/flint/functions/lib/_string-to-list.scss +84 -84
  29. data/stylesheets/flint/functions/lib/_string-to-number.scss +72 -72
  30. data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +25 -25
  31. data/stylesheets/flint/functions/lib/_support-syntax.scss +28 -28
  32. data/stylesheets/flint/functions/lib/_types-in-list.scss +120 -120
  33. data/stylesheets/flint/functions/lib/_use-syntax.scss +11 -11
  34. data/stylesheets/flint/globals/_globals.scss +22 -22
  35. data/stylesheets/flint/mixins/_mixins.scss +7 -7
  36. data/stylesheets/flint/mixins/lib/_calculate.scss +765 -765
  37. data/stylesheets/flint/mixins/lib/_clearfix.scss +18 -18
  38. data/stylesheets/flint/mixins/lib/_main.scss +910 -911
  39. data/stylesheets/flint/mixins/lib/_new-instance.scss +26 -26
  40. data/stylesheets/flint/mixins/lib/_print-instance.scss +41 -41
  41. metadata +21 -15
  42. checksums.yaml +0 -7
@@ -1,19 +1,19 @@
1
- // Micro clearfix
2
- // -------------------------------------------------------------------------------
3
- // @documentation http://nicolasgallagher.com/micro-clearfix-hack/
4
- // -------------------------------------------------------------------------------
5
-
6
- @mixin clearfix {
7
- zoom: 1;
8
-
9
- &:before, &:after {
10
- content: "\0020";
11
- display: block;
12
- height: 0;
13
- overflow: hidden;
14
- }
15
-
16
- &:after {
17
- clear: both;
18
- }
1
+ // Micro clearfix
2
+ // -------------------------------------------------------------------------------
3
+ // @documentation http://nicolasgallagher.com/micro-clearfix-hack/
4
+ // -------------------------------------------------------------------------------
5
+
6
+ @mixin clearfix {
7
+ zoom: 1;
8
+
9
+ &:before, &:after {
10
+ content: "\0020";
11
+ display: block;
12
+ height: 0;
13
+ overflow: hidden;
14
+ }
15
+
16
+ &:after {
17
+ clear: both;
18
+ }
19
19
  }
@@ -1,911 +1,910 @@
1
- // Main API
2
- // -------------------------------------------------------------------------------
3
- // @param $key [string | number | list] : key of breakpoint [shorthand: span]
4
- // @param $span [string | number | list] : value of span of column [shorthand: context]
5
- // @param $context [number | list] : value of context of span
6
- // @param $gutter [string | list] : alias for gutter modifier
7
- // @param $shift [number | list] : value to shift column
8
- // -------------------------------------------------------------------------------
9
- // @output foundation styles | container styles | calculated styles
10
-
11
- @mixin _(
12
- $key: null,
13
- $span: null,
14
- $context: null,
15
- $gutter: null,
16
- $shift: null
17
- ) {
18
-
19
- // Initial check to see what type of instance this is
20
- // -------------------------------------------------------------------------------
21
- // @param $key [string | number | list] : checks type of instance
22
- // -------------------------------------------------------------------------------
23
- // @output foundation styles | container styles | calculated styles
24
-
25
- // Foundation
26
- // ----
27
- @if $key == "foundation" {
28
-
29
- // Apply global border-box-sizing if set to true
30
- @if get-value("settings", "border-box-sizing") {
31
- $flint__foundation: "existant" !global;
32
- }
33
-
34
- // Foundation is now globally existant
35
- // ----
36
- @if $flint__foundation == "existant" {
37
- @at-root *, *:before, *:after {
38
- -moz-box-sizing: border-box;
39
- -webkit-box-sizing: border-box;
40
- box-sizing: border-box;
41
- @content;
42
- }
43
- }
44
-
45
- // Clearfix
46
- // ----
47
- } @else if $key == "clear" {
48
-
49
- @include clearfix();
50
-
51
- // Instance
52
- // ----
53
- } @else {
54
-
55
- @if $key == "container"
56
- or exists($flint, $key) and $span != null
57
- or types-in-list($span, "number") or type-of($span) == "number"
58
- or types-in-list($key, "number") or type-of($key) == "number"
59
- {
60
-
61
- // Only apply display rule if the key is either default or container
62
- @if is-default($key) or $key == "container" {
63
-
64
- display: block;
65
-
66
- // Only apply display rule to default breakpoint
67
- } @else if length($key) > 1 or is-not-string($key) {
68
- // Loop over all keys, set to default
69
- @for $i from 1 through length($flint__all__keys) {
70
- $calcKey: steal-key($i);
71
-
72
- @if is-default($calcKey) {
73
- display: block;
74
- }
75
- }
76
- }
77
-
78
- // Apply individually if foundation is not set globally, but is set to true in config
79
- @if get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
80
- -moz-box-sizing: border-box;
81
- -webkit-box-sizing: border-box;
82
- box-sizing: border-box;
83
-
84
- // Warn to either set a global foundation, or turn border-box-sizing off
85
- @if global-variable-exists(global-foundation-is-set) == false {
86
- @warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global _(foundation) rule, or turn border-box-sizing to false in your config file.";
87
-
88
- // Declare global variable so only a single warning prints out
89
- $global-foundation-is-set: true !global;
90
- }
91
- }
92
-
93
- // Container
94
- // -------------------------------------------------------------------------------
95
- // @param $key [string] : container instance
96
- // -------------------------------------------------------------------------------
97
- // @output container styles
98
-
99
- @if $key == "container" {
100
- float: none;
101
-
102
- // Fixed grid? Output container for each breakpoint
103
- // ----
104
- @if get-value("settings", "grid") == "fixed" {
105
-
106
- @for $i from 1 through length($flint__all__keys) {
107
-
108
- // Set up variables
109
- $calcKey: steal-key($i);
110
- $calcContainer: $key;
111
-
112
- // Key is default, no media queries
113
- @if is-default($calcKey) {
114
-
115
- width: calc-width($calcKey, $calcContainer);
116
- @content;
117
-
118
- // Not default, wrap in media queries
119
- } @else {
120
-
121
- // Highest breakpoint? No max-width
122
- @if is-highest-breakpoint($calcKey) {
123
-
124
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
125
- width: calc-width($calcKey, $calcContainer);
126
- @content;
127
- }
128
-
129
- } @else {
130
-
131
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
132
- width: calc-width($calcKey, $calcContainer);
133
- @content;
134
- }
135
-
136
- }
137
- }
138
- }
139
- }
140
-
141
- // Check if max-width is set
142
- // ----
143
- @if get-value("settings", "max-width") {
144
-
145
- // Check if it's an number
146
- @if is-number(get-value("settings", "max-width")) {
147
- max-width: get-value("settings", "max-width");
148
- // Then use highest breakpoint
149
- } @else {
150
- max-width: max(get-all-breakpoints()...);
151
- }
152
-
153
- }
154
-
155
- // Center container is set to true?
156
- // ----
157
- @if get-value("settings", "center-container") {
158
- margin-right: auto;
159
- margin-left: auto;
160
- } @else {
161
- margin-right: 0;
162
- margin-left: 0;
163
- }
164
-
165
- // Not container
166
- // ----
167
- } @else {
168
-
169
- // Make sure it's the default, output float
170
- @if is-default($key) {
171
-
172
- float: unquote(get-value("settings", "float-style"));
173
-
174
- } @else if is-list($key) or is-not-string($key) {
175
-
176
- @for $i from 1 through length($flint__all__keys) {
177
- $calcKey: steal-key($i);
178
-
179
- @if is-default($calcKey) {
180
- float: unquote(get-value("settings", "float-style"));
181
- }
182
- }
183
- }
184
- }
185
- }
186
-
187
- // Recursive shorthand without context
188
- // -------------------------------------------------------------------------------
189
- // @param $span [number | null] : span value
190
- // -------------------------------------------------------------------------------
191
- // @output calculated styles
192
-
193
- @if is-number($key) and length($key) == 1 {
194
-
195
- @if $span == null {
196
-
197
- @for $i from 1 through length($flint__all__keys) {
198
-
199
- $calcKey: steal-key($i);
200
- $calcSpan: $key;
201
- $calcContext: $span;
202
- $calcGutter: $gutter;
203
- $calcShift: $shift;
204
-
205
- @if is-default($calcKey) {
206
-
207
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
208
- @content;
209
- }
210
-
211
- } @else {
212
-
213
- @if get-value("settings", "grid") == "fluid" {
214
-
215
- @if is-highest-breakpoint($calcKey) {
216
-
217
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
218
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
219
- @content;
220
- }
221
- }
222
-
223
- } @else {
224
-
225
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
226
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
227
- @content;
228
- }
229
- }
230
-
231
- }
232
-
233
- } @else if get-value("settings", "grid") == "fixed" {
234
-
235
- @if is-highest-breakpoint($calcKey) {
236
-
237
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
238
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
239
- @content;
240
- }
241
- }
242
-
243
- } @else {
244
-
245
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
246
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
247
- @content;
248
- }
249
- }
250
-
251
- }
252
-
253
- } @else {
254
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
255
- }
256
- }
257
- }
258
-
259
- // Recursive shorthand with identical context
260
- // -------------------------------------------------------------------------------
261
- // @param $key [number] : span value
262
- // @param $span [number] : context value of span
263
- // -------------------------------------------------------------------------------
264
- // @output calculated styles
265
-
266
- } @else if length($span) == 1 and is-number($span) or $span == "auto" {
267
-
268
- @for $i from 1 through length($flint__all__keys) {
269
-
270
- $calcKey: steal-key($i);
271
- $calcSpan: $key;
272
- $calcContext: $span;
273
- $calcGutter: $gutter;
274
- $calcShift: $shift;
275
-
276
- @if is-default($calcKey) {
277
-
278
- @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
279
- @content;
280
- }
281
-
282
- } @else {
283
-
284
- @if get-value("settings", "grid") == "fluid" {
285
-
286
- @if is-highest-breakpoint($calcKey) {
287
-
288
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
289
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
290
- @content;
291
- }
292
- }
293
-
294
- } @else {
295
-
296
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
297
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
298
- @content;
299
- }
300
- }
301
-
302
- }
303
-
304
- } @else if get-value("settings", "grid") == "fixed" {
305
-
306
- @if is-highest-breakpoint($calcKey) {
307
-
308
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
309
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
310
- @content;
311
- }
312
- }
313
-
314
- } @else {
315
-
316
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
317
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
318
- @content;
319
- }
320
- }
321
-
322
- }
323
-
324
- } @else {
325
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
326
- }
327
- }
328
- }
329
-
330
- // Recursive shorthand with differing context
331
- // -------------------------------------------------------------------------------
332
- // @param $key [number] : span value
333
- // @param $span [list] : context value of span for each breakpoint
334
- // -------------------------------------------------------------------------------
335
- // @output calculated styles
336
-
337
- } @else if types-in-list($span, "number") {
338
-
339
- @for $i from 1 through length($flint__all__keys) {
340
-
341
- $calcKey: steal-key($i);
342
- $calcSpan: $key;
343
- $calcContext: $span;
344
- $calcGutter: $gutter;
345
- $calcShift: $shift;
346
-
347
- @if is-default($calcKey) {
348
-
349
- @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
350
- @content;
351
- }
352
-
353
- } @else {
354
-
355
- @if get-value("settings", "grid") == "fluid" {
356
-
357
- @if is-highest-breakpoint($calcKey) {
358
-
359
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
360
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
361
- @content;
362
- }
363
- }
364
-
365
- } @else {
366
-
367
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
368
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
369
- @content;
370
- }
371
- }
372
-
373
- }
374
-
375
- } @else if get-value("settings", "grid") == "fixed" {
376
-
377
- @if is-highest-breakpoint($calcKey) {
378
-
379
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
380
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
381
- @content;
382
- }
383
- }
384
-
385
- } @else {
386
-
387
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
388
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
389
- @content;
390
- }
391
- }
392
-
393
- }
394
-
395
- } @else {
396
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
397
- }
398
- }
399
- }
400
- }
401
- }
402
-
403
- // Variable shorthand
404
- // -------------------------------------------------------------------------------
405
- // @param $key [list] : span value for each breakpoint
406
- // -------------------------------------------------------------------------------
407
- // @output calculated styles
408
-
409
- @if types-in-list($key, "number") and $span == null {
410
-
411
- @for $i from 1 through length($flint__all__keys) {
412
-
413
- $calcKey: steal-key($i);
414
- $calcSpan: $key;
415
- $calcContext: $context;
416
- $calcGutter: $gutter;
417
- $calcShift: $shift;
418
-
419
- @if is-default($calcKey) {
420
-
421
- @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
422
- @content;
423
- }
424
-
425
- } @else {
426
-
427
- @if get-value("settings", "grid") == "fluid" {
428
-
429
- @if is-highest-breakpoint($calcKey) {
430
-
431
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
432
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
433
- @content;
434
- }
435
- }
436
-
437
- } @else {
438
-
439
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
440
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
441
- @content;
442
- }
443
- }
444
-
445
- }
446
-
447
- } @else if get-value("settings", "grid") == "fixed" {
448
-
449
- @if is-highest-breakpoint($calcKey) {
450
-
451
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
452
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
453
- @content;
454
- }
455
- }
456
-
457
- } @else {
458
-
459
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
460
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
461
- @content;
462
- }
463
- }
464
-
465
- }
466
-
467
- } @else {
468
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
469
- }
470
- }
471
- }
472
-
473
- // Variable shorthand with context
474
- // -------------------------------------------------------------------------------
475
- // @param $key [list] : span value for each breakpoint
476
- // @param $span [list] : context value for each breakpoint
477
- // -------------------------------------------------------------------------------
478
- // @output calculated styles
479
-
480
- } @else if types-in-list($key, "number") and types-in-list($span, "number") {
481
-
482
- @for $i from 1 through length($flint__all__keys) {
483
-
484
- $calcKey: steal-key($i);
485
- $calcSpan: $key;
486
- $calcContext: $span;
487
- $calcGutter: $gutter;
488
- $calcShift: $shift;
489
-
490
- @if is-default($calcKey) {
491
-
492
- @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
493
- @content;
494
- }
495
-
496
- } @else {
497
-
498
- @if get-value("settings", "grid") == "fluid" {
499
-
500
- @if is-highest-breakpoint($calcKey) {
501
-
502
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
503
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
504
- @content;
505
- }
506
- }
507
-
508
- } @else {
509
-
510
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
511
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
512
- @content;
513
- }
514
- }
515
-
516
- }
517
-
518
- } @else if get-value("settings", "grid") == "fixed" {
519
-
520
- @if is-highest-breakpoint($calcKey) {
521
-
522
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
523
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
524
- @content;
525
- }
526
- }
527
-
528
- } @else {
529
-
530
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
531
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
532
- @content;
533
- }
534
- }
535
-
536
- }
537
-
538
- } @else {
539
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
540
- }
541
- }
542
- }
543
-
544
- // Call by alias
545
- // -------------------------------------------------------------------------------
546
- // @param $key [string] : breakpoint alias
547
- // @param $span [number] : span value
548
- // -------------------------------------------------------------------------------
549
- // @output calculated styles
550
-
551
- } @else if exists($flint, $key) and is-number($span) and $context == null {
552
-
553
- $calcKey: $key;
554
- $calcSpan: $span;
555
- $calcContext: $context;
556
- $calcGutter: $gutter;
557
- $calcShift: $shift;
558
-
559
- @if is-default($calcKey) {
560
-
561
- @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
562
- @content;
563
- }
564
-
565
- } @else {
566
-
567
- @if get-value("settings", "grid") == "fluid" {
568
-
569
- @if is-highest-breakpoint($calcKey) {
570
-
571
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
572
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
573
- @content;
574
- }
575
- }
576
-
577
- } @else {
578
-
579
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
580
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
581
- @content;
582
- }
583
- }
584
-
585
- }
586
-
587
- } @else if get-value("settings", "grid") == "fixed" {
588
-
589
- @if is-highest-breakpoint($calcKey) {
590
-
591
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
592
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
593
- @content;
594
- }
595
- }
596
-
597
- } @else {
598
-
599
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
600
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
601
- @content;
602
- }
603
- }
604
-
605
- }
606
-
607
- } @else {
608
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
609
- }
610
- }
611
-
612
- // Call by alias with context
613
- // -------------------------------------------------------------------------------
614
- // @param $key [string] : breakpoint alias
615
- // @param $span [number] : span value
616
- // @param $context [number] : context value of span
617
- // -------------------------------------------------------------------------------
618
- // @output calculated styles
619
-
620
- } @else if exists($flint, $key) and is-number($span) and is-number($context) or $context == "auto" {
621
-
622
- $calcKey: $key;
623
- $calcSpan: $span;
624
- $calcContext: $context;
625
- $calcGutter: $gutter;
626
- $calcShift: $shift;
627
-
628
- @if is-default($calcKey) {
629
-
630
- @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
631
- @content;
632
- }
633
-
634
- } @else {
635
-
636
- @if get-value("settings", "grid") == "fluid" {
637
-
638
- @if is-highest-breakpoint($calcKey) {
639
-
640
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
641
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
642
- @content;
643
- }
644
- }
645
-
646
- } @else {
647
-
648
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
649
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
650
- @content;
651
- }
652
- }
653
-
654
- }
655
-
656
- } @else if get-value("settings", "grid") == "fixed" {
657
-
658
- @if is-highest-breakpoint($calcKey) {
659
-
660
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
661
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
662
- @content;
663
- }
664
- }
665
-
666
- } @else {
667
-
668
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
669
- @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
670
- @content;
671
- }
672
- }
673
-
674
- }
675
-
676
- } @else {
677
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
678
- }
679
- }
680
-
681
- // Wrap @content in media queries
682
- // -------------------------------------------------------------------------------
683
- // @param $key [list] : defines how to make up media query
684
- // -------------------------------------------------------------------------------
685
- // @output styles wrapped in media query
686
-
687
- } @else if exists($flint, $key) or is-list($key) and $span == null and $context == null {
688
-
689
- // Call $key breakpoint by alias
690
- // -------------------------------------------------------------------------------
691
- // @param $key [string] : only for $key breakpoint
692
- // -------------------------------------------------------------------------------
693
-
694
- @if length($key) == 1 {
695
-
696
- @if get-value("settings", "grid") == "fluid" {
697
- @if is-highest-breakpoint($key) {
698
- @media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + if(get-config-unit() == "em", em(1px), 1)) ) {
699
- @content;
700
- }
701
- } @else {
702
- @media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + if(is-lowest-breakpoint($key), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $key, get-index($key)) ) {
703
- @content;
704
- }
705
- }
706
- } @else if get-value("settings", "grid") == "fixed" {
707
- @if is-highest-breakpoint($key) {
708
- @media only screen and ( min-width: calc-breakpoint("alias", $key, get-index($key)) ) {
709
- @content;
710
- }
711
- } @else {
712
- @media only screen and ( min-width: calc-breakpoint("alias", $key, get-index($key)) ) and ( max-width: (calc-breakpoint("prev", $key, get-index($key)) - 1) ) {
713
- @content;
714
- }
715
- }
716
- } @else {
717
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
718
- }
719
-
720
- // From $key breakpoint to infinity
721
- // -------------------------------------------------------------------------------
722
- // @param $key [from key to infinity] : min-width from $key breakpoint
723
- // -------------------------------------------------------------------------------
724
-
725
- } @else if types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
726
-
727
- @if get-value("settings", "grid") == "fluid" {
728
- @media only screen and ( min-width: (calc-breakpoint("next", nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, if(get-config-unit() == "em", em(1px), 1))) ) {
729
- @content;
730
- }
731
- } @else if get-value("settings", "grid") == "fixed" {
732
- @media only screen and ( min-width: calc-breakpoint("alias", nth($key, 2), get-index(nth($key, 2))) ) {
733
- @content;
734
- }
735
- } @else {
736
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
737
- }
738
-
739
- // From $key-x breakpoint to $key-y breakpoint
740
- // -------------------------------------------------------------------------------
741
- // @param $key [from key-x to key-y] : from $key-x breakpoint to $key-y
742
- // -------------------------------------------------------------------------------
743
-
744
- } @else if types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
745
-
746
- @if get-value("settings", "grid") == "fluid" {
747
- @media only screen and ( min-width: (calc-breakpoint("next", nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) ) {
748
- @content;
749
- }
750
- } @else if get-value("settings", "grid") == "fixed" {
751
- @media only screen and ( min-width: calc-breakpoint("alias", nth($key, 2), get-index(nth($key, 2))) ) and ( max-width: (calc-breakpoint("prev", nth($key, 4), get-index(nth($key, 4))) - if(is-highest-breakpoint(nth($key, 4)), 0, if(get-config-unit() == "em", em(1px), 1))) ) {
752
- @content;
753
- }
754
- } @else {
755
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
756
- }
757
-
758
- // From $num-x to $num-y
759
- // -------------------------------------------------------------------------------
760
- // @param $key [from number to number] : arbitrary media query
761
- // -------------------------------------------------------------------------------
762
-
763
- } @else if types-in-list($key, "string" "number" "string" "number", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
764
- // Make sure passed units match units used in config
765
- @if get-config-unit() == unit(nth($key, 2)) and get-config-unit() == unit(nth($key, 4)) {
766
- @media only screen and ( min-width: nth($key, 2) ) and ( max-width: nth($key, 4) ) {
767
- @content;
768
- }
769
- // Throw error
770
- } @else {
771
- @warn "Passed units [#{unit(nth($key, 2))}, #{unit(nth($key, 4))}] do not match the unit used in your config map: #{get-config-unit()}";
772
- }
773
-
774
- // Greater than $key breakpoint
775
- // -------------------------------------------------------------------------------
776
- // @param $key [greater than key] : anything above $key breakpoint
777
- // -------------------------------------------------------------------------------
778
-
779
- } @else if types-in-list($key, "string", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
780
-
781
- @if get-value("settings", "grid") == "fluid" {
782
- @media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) + if(get-config-unit() == "em", em(1px), 1)) ) {
783
- @content;
784
- }
785
- } @else if get-value("settings", "grid") == "fixed" {
786
- @media only screen and ( min-width: calc-breakpoint("prev", nth($key, 3), get-index(nth($key, 3))) ) {
787
- @content;
788
- }
789
- } @else {
790
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
791
- }
792
-
793
- // Greater than number
794
- // -------------------------------------------------------------------------------
795
- // @param $key [greater than number] : anything above number
796
- // -------------------------------------------------------------------------------
797
-
798
- } @else if types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
799
-
800
- @if get-config-unit() == unit(nth($key, 3)) {
801
- @media only screen and ( min-width: nth($key, 3) + if(get-config-unit() == "em", em(1px), 1) ) {
802
- @content;
803
- }
804
- } @else {
805
- @warn "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{get-config-unit()}";
806
- }
807
-
808
- // Number greater than $key breakpoint
809
- // -------------------------------------------------------------------------------
810
- // @param $key [number greater than key] : unit value greater than $key breakpoint
811
- // -------------------------------------------------------------------------------
812
-
813
- } @else if types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "greater" and nth($key, 3) == "than" {
814
-
815
- @if get-config-unit() == unit(nth($key, 1)) {
816
- @media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) + nth($key, 1)) ) {
817
- @content;
818
- }
819
- } @else {
820
- @warn "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{get-config-unit()}";
821
- }
822
-
823
- // Less than $key breakpoint
824
- // -------------------------------------------------------------------------------
825
- // @param $key [less than key] : anything below $key breakpoint
826
- // -------------------------------------------------------------------------------
827
-
828
- } @else if types-in-list($key, "string", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
829
-
830
- @if get-value("settings", "grid") == "fluid" {
831
- @media only screen and ( max-width: calc-breakpoint("next", nth($key, 3), get-index(nth($key, 3))) ) {
832
- @content;
833
- }
834
- } @else if get-value("settings", "grid") == "fixed" {
835
- @media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) - if(get-config-unit() == "em", em(1px), 1)) ) {
836
- @content;
837
- }
838
- } @else {
839
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
840
- }
841
-
842
- // Less than number
843
- // -------------------------------------------------------------------------------
844
- // @param $key [less than number] : anything below number
845
- // -------------------------------------------------------------------------------
846
-
847
- } @else if types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
848
-
849
- @if get-config-unit() == unit(nth($key, 3)) {
850
- @media only screen and ( max-width: nth($key, 3) - if(get-config-unit() == "em", em(1px), 1) ) {
851
- @content;
852
- }
853
- } @else {
854
- @warn "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{get-config-unit()}";
855
- }
856
-
857
- // Number less than $key breakpoint
858
- // -------------------------------------------------------------------------------
859
- // @param $key [number less than key] : unit value less than $key breakpoint
860
- // -------------------------------------------------------------------------------
861
-
862
- } @else if types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "less" and nth($key, 3) == "than" {
863
-
864
- @if get-config-unit() == unit(nth($key, 1)) {
865
- @media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) - nth($key, 1)) ) {
866
- @content;
867
- }
868
- } @else {
869
- @warn "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{get-config-unit()}";
870
- }
871
-
872
- // For $key-x $key-y $key-z
873
- // -------------------------------------------------------------------------------
874
- // @param $key [for list of strings] : will duplicate styles for each passed $key breakpoint
875
- // -------------------------------------------------------------------------------
876
-
877
- } @else if types-in-list($key, "string") and nth($key, 1) == "for" {
878
-
879
- @for $i from 1 through length($key) {
880
- $calcKey: nth($key, $i);
881
-
882
- @if exists($flint, $calcKey) {
883
- @if get-value("settings", "grid") == "fluid" {
884
- @if is-highest-breakpoint($calcKey) {
885
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
886
- @content;
887
- }
888
- } @else {
889
- @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
890
- @content;
891
- }
892
- }
893
- } @else if get-value("settings", "grid") == "fixed" {
894
- @if is-highest-breakpoint($calcKey) {
895
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
896
- @content;
897
- }
898
- } @else {
899
- @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
900
- @content;
901
- }
902
- }
903
- } @else {
904
- @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
905
- }
906
- }
907
- }
908
- }
909
- }
910
- }
911
- }
1
+ // Main API
2
+ // -------------------------------------------------------------------------------
3
+ // @param $key [string | number | list] : key of breakpoint [shorthand: span]
4
+ // @param $span [string | number | list] : value of span of column [shorthand: context]
5
+ // @param $context [number | list] : value of context of span
6
+ // @param $gutter [string | list] : alias for gutter modifier
7
+ // @param $shift [number | list] : value to shift column
8
+ // -------------------------------------------------------------------------------
9
+ // @output foundation styles | container styles | calculated styles
10
+
11
+ @mixin _(
12
+ $key: null,
13
+ $span: null,
14
+ $context: null,
15
+ $gutter: null,
16
+ $shift: null
17
+ ) {
18
+
19
+ // Initial check to see what type of instance this is
20
+ // -------------------------------------------------------------------------------
21
+ // @param $key [string | number | list] : checks type of instance
22
+ // -------------------------------------------------------------------------------
23
+ // @output foundation styles | container styles | calculated styles
24
+
25
+ // Foundation
26
+ // ----
27
+ @if $key == "foundation" {
28
+
29
+ // Apply global border-box-sizing if set to true
30
+ @if get-value("settings", "border-box-sizing") {
31
+ $flint__foundation: "existant" !global;
32
+ }
33
+
34
+ // Foundation is now globally existant
35
+ // ----
36
+ @if $flint__foundation == "existant" {
37
+ @at-root *, *:before, *:after {
38
+ -moz-box-sizing: border-box;
39
+ -webkit-box-sizing: border-box;
40
+ box-sizing: border-box;
41
+ @content;
42
+ }
43
+ }
44
+
45
+ // Clearfix
46
+ // ----
47
+ } @else if $key == "clear" {
48
+
49
+ @include clearfix();
50
+
51
+ // Instance
52
+ // ----
53
+ } @else {
54
+
55
+ @if $key == "container"
56
+ or exists($flint, $key) and $span != null
57
+ or types-in-list($span, "number") or type-of($span) == "number"
58
+ or types-in-list($key, "number") or type-of($key) == "number"
59
+ {
60
+
61
+ // Only apply display rule if the key is either default or container
62
+ @if is-default($key) or $key == "container" {
63
+
64
+ display: block;
65
+
66
+ // Only apply display rule to default breakpoint
67
+ } @else if length($key) > 1 or is-not-string($key) {
68
+ // Loop over all keys, set to default
69
+ @for $i from 1 through length($flint__all__keys) {
70
+ $calcKey: steal-key($i);
71
+
72
+ @if is-default($calcKey) {
73
+ display: block;
74
+ }
75
+ }
76
+ }
77
+
78
+ // Apply individually if foundation is not set globally, but is set to true in config
79
+ @if get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
80
+ -moz-box-sizing: border-box;
81
+ -webkit-box-sizing: border-box;
82
+ box-sizing: border-box;
83
+
84
+ // Warn to either set a global foundation, or turn border-box-sizing off
85
+ @if global-variable-exists(global-foundation-is-set) == false {
86
+ @warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global _(foundation) rule, or turn border-box-sizing to false in your config file.";
87
+
88
+ // Declare global variable so only a single warning prints out
89
+ $global-foundation-is-set: true !global;
90
+ }
91
+ }
92
+
93
+ // Container
94
+ // -------------------------------------------------------------------------------
95
+ // @param $key [string] : container instance
96
+ // -------------------------------------------------------------------------------
97
+ // @output container styles
98
+
99
+ @if $key == "container" {
100
+ float: none;
101
+
102
+ // Fixed grid? Output container for each breakpoint
103
+ // ----
104
+ @if get-value("settings", "grid") == "fixed" {
105
+
106
+ @for $i from 1 through length($flint__all__keys) {
107
+
108
+ // Set up variables
109
+ $calcKey: steal-key($i);
110
+ $calcContainer: $key;
111
+
112
+ // Key is default, no media queries
113
+ @if is-default($calcKey) {
114
+
115
+ width: calc-width($calcKey, $calcContainer);
116
+ @content;
117
+
118
+ // Not default, wrap in media queries
119
+ } @else {
120
+
121
+ // Highest breakpoint? No max-width
122
+ @if is-highest-breakpoint($calcKey) {
123
+
124
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
125
+ width: calc-width($calcKey, $calcContainer);
126
+ @content;
127
+ }
128
+
129
+ } @else {
130
+
131
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
132
+ width: calc-width($calcKey, $calcContainer);
133
+ @content;
134
+ }
135
+
136
+ }
137
+ }
138
+ }
139
+ }
140
+
141
+ // Check if max-width is set
142
+ // ----
143
+ @if get-value("settings", "max-width") {
144
+
145
+ // Check if it's an number
146
+ @if is-number(get-value("settings", "max-width")) {
147
+ max-width: get-value("settings", "max-width");
148
+ // Then use highest breakpoint
149
+ } @else {
150
+ max-width: max(get-all-breakpoints()...);
151
+ }
152
+
153
+ }
154
+
155
+ // Center container is set to true?
156
+ // ----
157
+ @if get-value("settings", "center-container") {
158
+ margin-right: auto;
159
+ margin-left: auto;
160
+ } @else {
161
+ margin-right: 0;
162
+ margin-left: 0;
163
+ }
164
+
165
+ // Not container
166
+ // ----
167
+ } @else {
168
+
169
+ // Make sure it's the default, output float
170
+ @if is-default($key) {
171
+
172
+ float: unquote(get-value("settings", "float-style"));
173
+
174
+ } @else if is-list($key) or is-not-string($key) {
175
+
176
+ @for $i from 1 through length($flint__all__keys) {
177
+ $calcKey: steal-key($i);
178
+
179
+ @if is-default($calcKey) {
180
+ float: unquote(get-value("settings", "float-style"));
181
+ }
182
+ }
183
+ }
184
+ }
185
+ }
186
+
187
+ // Recursive shorthand without context
188
+ // -------------------------------------------------------------------------------
189
+ // @param $span [number | null] : span value
190
+ // -------------------------------------------------------------------------------
191
+ // @output calculated styles
192
+
193
+ @if is-number($key) and length($key) == 1 {
194
+
195
+ @if $span == null {
196
+
197
+ @for $i from 1 through length($flint__all__keys) {
198
+
199
+ $calcKey: steal-key($i);
200
+ $calcSpan: $key;
201
+ $calcContext: $span;
202
+ $calcGutter: $gutter;
203
+ $calcShift: $shift;
204
+
205
+ @if is-default($calcKey) {
206
+
207
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
208
+ @content;
209
+ }
210
+
211
+ } @else {
212
+
213
+ @if get-value("settings", "grid") == "fluid" {
214
+
215
+ @if is-highest-breakpoint($calcKey) {
216
+
217
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
218
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
219
+ @content;
220
+ }
221
+ }
222
+
223
+ } @else {
224
+
225
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
226
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
227
+ @content;
228
+ }
229
+ }
230
+
231
+ }
232
+
233
+ } @else if get-value("settings", "grid") == "fixed" {
234
+
235
+ @if is-highest-breakpoint($calcKey) {
236
+
237
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
238
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
239
+ @content;
240
+ }
241
+ }
242
+
243
+ } @else {
244
+
245
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
246
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
247
+ @content;
248
+ }
249
+ }
250
+
251
+ }
252
+
253
+ } @else {
254
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
255
+ }
256
+ }
257
+ }
258
+
259
+ // Recursive shorthand with identical context
260
+ // -------------------------------------------------------------------------------
261
+ // @param $key [number] : span value
262
+ // @param $span [number] : context value of span
263
+ // -------------------------------------------------------------------------------
264
+ // @output calculated styles
265
+
266
+ } @else if length($span) == 1 and is-number($span) or $span == "auto" {
267
+
268
+ @for $i from 1 through length($flint__all__keys) {
269
+
270
+ $calcKey: steal-key($i);
271
+ $calcSpan: $key;
272
+ $calcContext: $span;
273
+ $calcGutter: $gutter;
274
+ $calcShift: $shift;
275
+
276
+ @if is-default($calcKey) {
277
+
278
+ @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
279
+ @content;
280
+ }
281
+
282
+ } @else {
283
+
284
+ @if get-value("settings", "grid") == "fluid" {
285
+
286
+ @if is-highest-breakpoint($calcKey) {
287
+
288
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
289
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
290
+ @content;
291
+ }
292
+ }
293
+
294
+ } @else {
295
+
296
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
297
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
298
+ @content;
299
+ }
300
+ }
301
+
302
+ }
303
+
304
+ } @else if get-value("settings", "grid") == "fixed" {
305
+
306
+ @if is-highest-breakpoint($calcKey) {
307
+
308
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
309
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
310
+ @content;
311
+ }
312
+ }
313
+
314
+ } @else {
315
+
316
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
317
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
318
+ @content;
319
+ }
320
+ }
321
+
322
+ }
323
+
324
+ } @else {
325
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
326
+ }
327
+ }
328
+ }
329
+
330
+ // Recursive shorthand with differing context
331
+ // -------------------------------------------------------------------------------
332
+ // @param $key [number] : span value
333
+ // @param $span [list] : context value of span for each breakpoint
334
+ // -------------------------------------------------------------------------------
335
+ // @output calculated styles
336
+
337
+ } @else if types-in-list($span, "number") or $span == "auto" {
338
+
339
+ @for $i from 1 through length($flint__all__keys) {
340
+
341
+ $calcKey: steal-key($i);
342
+ $calcSpan: $key;
343
+ $calcContext: $span;
344
+ $calcGutter: $gutter;
345
+ $calcShift: $shift;
346
+
347
+ @if is-default($calcKey) {
348
+
349
+ @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
350
+ @content;
351
+ }
352
+
353
+ } @else {
354
+
355
+ @if get-value("settings", "grid") == "fluid" {
356
+
357
+ @if is-highest-breakpoint($calcKey) {
358
+
359
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
360
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
361
+ @content;
362
+ }
363
+ }
364
+
365
+ } @else {
366
+
367
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
368
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
369
+ @content;
370
+ }
371
+ }
372
+
373
+ }
374
+
375
+ } @else if get-value("settings", "grid") == "fixed" {
376
+
377
+ @if is-highest-breakpoint($calcKey) {
378
+
379
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
380
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
381
+ @content;
382
+ }
383
+ }
384
+
385
+ } @else {
386
+
387
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
388
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
389
+ @content;
390
+ }
391
+ }
392
+
393
+ }
394
+
395
+ } @else {
396
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
397
+ }
398
+ }
399
+ }
400
+ }
401
+
402
+ // Variable shorthand
403
+ // -------------------------------------------------------------------------------
404
+ // @param $key [list] : span value for each breakpoint
405
+ // -------------------------------------------------------------------------------
406
+ // @output calculated styles
407
+
408
+ } @else if types-in-list($key, "number") and $span == null {
409
+
410
+ @for $i from 1 through length($flint__all__keys) {
411
+
412
+ $calcKey: steal-key($i);
413
+ $calcSpan: $key;
414
+ $calcContext: $context;
415
+ $calcGutter: $gutter;
416
+ $calcShift: $shift;
417
+
418
+ @if is-default($calcKey) {
419
+
420
+ @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
421
+ @content;
422
+ }
423
+
424
+ } @else {
425
+
426
+ @if get-value("settings", "grid") == "fluid" {
427
+
428
+ @if is-highest-breakpoint($calcKey) {
429
+
430
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
431
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
432
+ @content;
433
+ }
434
+ }
435
+
436
+ } @else {
437
+
438
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
439
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
440
+ @content;
441
+ }
442
+ }
443
+
444
+ }
445
+
446
+ } @else if get-value("settings", "grid") == "fixed" {
447
+
448
+ @if is-highest-breakpoint($calcKey) {
449
+
450
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
451
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
452
+ @content;
453
+ }
454
+ }
455
+
456
+ } @else {
457
+
458
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
459
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
460
+ @content;
461
+ }
462
+ }
463
+
464
+ }
465
+
466
+ } @else {
467
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
468
+ }
469
+ }
470
+ }
471
+
472
+ // Variable shorthand with context
473
+ // -------------------------------------------------------------------------------
474
+ // @param $key [list] : span value for each breakpoint
475
+ // @param $span [list] : context value for each breakpoint
476
+ // -------------------------------------------------------------------------------
477
+ // @output calculated styles
478
+
479
+ } @else if types-in-list($key, "number") and types-in-list($span, "number") or $span == "auto" {
480
+
481
+ @for $i from 1 through length($flint__all__keys) {
482
+
483
+ $calcKey: steal-key($i);
484
+ $calcSpan: $key;
485
+ $calcContext: $span;
486
+ $calcGutter: $gutter;
487
+ $calcShift: $shift;
488
+
489
+ @if is-default($calcKey) {
490
+
491
+ @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
492
+ @content;
493
+ }
494
+
495
+ } @else {
496
+
497
+ @if get-value("settings", "grid") == "fluid" {
498
+
499
+ @if is-highest-breakpoint($calcKey) {
500
+
501
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(get-config-unit() == "em", em(1px), 1)) ) {
502
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
503
+ @content;
504
+ }
505
+ }
506
+
507
+ } @else {
508
+
509
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
510
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
511
+ @content;
512
+ }
513
+ }
514
+
515
+ }
516
+
517
+ } @else if get-value("settings", "grid") == "fixed" {
518
+
519
+ @if is-highest-breakpoint($calcKey) {
520
+
521
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
522
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
523
+ @content;
524
+ }
525
+ }
526
+
527
+ } @else {
528
+
529
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - if(get-config-unit() == "em", em(1px), 1)) ) {
530
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
531
+ @content;
532
+ }
533
+ }
534
+
535
+ }
536
+
537
+ } @else {
538
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
539
+ }
540
+ }
541
+ }
542
+
543
+ // Call by alias
544
+ // -------------------------------------------------------------------------------
545
+ // @param $key [string] : breakpoint alias
546
+ // @param $span [number] : span value
547
+ // -------------------------------------------------------------------------------
548
+ // @output calculated styles
549
+
550
+ } @else if exists($flint, $key) and is-number($span) and $context == null {
551
+
552
+ $calcKey: $key;
553
+ $calcSpan: $span;
554
+ $calcContext: $context;
555
+ $calcGutter: $gutter;
556
+ $calcShift: $shift;
557
+
558
+ @if is-default($calcKey) {
559
+
560
+ @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
561
+ @content;
562
+ }
563
+
564
+ } @else {
565
+
566
+ @if get-value("settings", "grid") == "fluid" {
567
+
568
+ @if is-highest-breakpoint($calcKey) {
569
+
570
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
571
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
572
+ @content;
573
+ }
574
+ }
575
+
576
+ } @else {
577
+
578
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
579
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
580
+ @content;
581
+ }
582
+ }
583
+
584
+ }
585
+
586
+ } @else if get-value("settings", "grid") == "fixed" {
587
+
588
+ @if is-highest-breakpoint($calcKey) {
589
+
590
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
591
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
592
+ @content;
593
+ }
594
+ }
595
+
596
+ } @else {
597
+
598
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
599
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
600
+ @content;
601
+ }
602
+ }
603
+
604
+ }
605
+
606
+ } @else {
607
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
608
+ }
609
+ }
610
+
611
+ // Call by alias with context
612
+ // -------------------------------------------------------------------------------
613
+ // @param $key [string] : breakpoint alias
614
+ // @param $span [number] : span value
615
+ // @param $context [number] : context value of span
616
+ // -------------------------------------------------------------------------------
617
+ // @output calculated styles
618
+
619
+ } @else if exists($flint, $key) and is-number($span) and is-number($context) or $context == "auto" {
620
+
621
+ $calcKey: $key;
622
+ $calcSpan: $span;
623
+ $calcContext: $context;
624
+ $calcGutter: $gutter;
625
+ $calcShift: $shift;
626
+
627
+ @if is-default($calcKey) {
628
+
629
+ @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
630
+ @content;
631
+ }
632
+
633
+ } @else {
634
+
635
+ @if get-value("settings", "grid") == "fluid" {
636
+
637
+ @if is-highest-breakpoint($calcKey) {
638
+
639
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
640
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
641
+ @content;
642
+ }
643
+ }
644
+
645
+ } @else {
646
+
647
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
648
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
649
+ @content;
650
+ }
651
+ }
652
+
653
+ }
654
+
655
+ } @else if get-value("settings", "grid") == "fixed" {
656
+
657
+ @if is-highest-breakpoint($calcKey) {
658
+
659
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
660
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
661
+ @content;
662
+ }
663
+ }
664
+
665
+ } @else {
666
+
667
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
668
+ @include calcFlint($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
669
+ @content;
670
+ }
671
+ }
672
+
673
+ }
674
+
675
+ } @else {
676
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
677
+ }
678
+ }
679
+
680
+ // Wrap @content in media queries
681
+ // -------------------------------------------------------------------------------
682
+ // @param $key [list] : defines how to make up media query
683
+ // -------------------------------------------------------------------------------
684
+ // @output styles wrapped in media query
685
+
686
+ } @else if exists($flint, $key) or is-list($key) and $span == null and $context == null {
687
+
688
+ // Call $key breakpoint by alias
689
+ // -------------------------------------------------------------------------------
690
+ // @param $key [string] : only for $key breakpoint
691
+ // -------------------------------------------------------------------------------
692
+
693
+ @if length($key) == 1 {
694
+
695
+ @if get-value("settings", "grid") == "fluid" {
696
+ @if is-highest-breakpoint($key) {
697
+ @media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + if(get-config-unit() == "em", em(1px), 1)) ) {
698
+ @content;
699
+ }
700
+ } @else {
701
+ @media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + if(is-lowest-breakpoint($key), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $key, get-index($key)) ) {
702
+ @content;
703
+ }
704
+ }
705
+ } @else if get-value("settings", "grid") == "fixed" {
706
+ @if is-highest-breakpoint($key) {
707
+ @media only screen and ( min-width: calc-breakpoint("alias", $key, get-index($key)) ) {
708
+ @content;
709
+ }
710
+ } @else {
711
+ @media only screen and ( min-width: calc-breakpoint("alias", $key, get-index($key)) ) and ( max-width: (calc-breakpoint("prev", $key, get-index($key)) - 1) ) {
712
+ @content;
713
+ }
714
+ }
715
+ } @else {
716
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
717
+ }
718
+
719
+ // From $key breakpoint to infinity
720
+ // -------------------------------------------------------------------------------
721
+ // @param $key [from key to infinity] : min-width from $key breakpoint
722
+ // -------------------------------------------------------------------------------
723
+
724
+ } @else if types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
725
+
726
+ @if get-value("settings", "grid") == "fluid" {
727
+ @media only screen and ( min-width: (calc-breakpoint("next", nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, if(get-config-unit() == "em", em(1px), 1))) ) {
728
+ @content;
729
+ }
730
+ } @else if get-value("settings", "grid") == "fixed" {
731
+ @media only screen and ( min-width: calc-breakpoint("alias", nth($key, 2), get-index(nth($key, 2))) ) {
732
+ @content;
733
+ }
734
+ } @else {
735
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
736
+ }
737
+
738
+ // From $key-x breakpoint to $key-y breakpoint
739
+ // -------------------------------------------------------------------------------
740
+ // @param $key [from key-x to key-y] : from $key-x breakpoint to $key-y
741
+ // -------------------------------------------------------------------------------
742
+
743
+ } @else if types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
744
+
745
+ @if get-value("settings", "grid") == "fluid" {
746
+ @media only screen and ( min-width: (calc-breakpoint("next", nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) ) {
747
+ @content;
748
+ }
749
+ } @else if get-value("settings", "grid") == "fixed" {
750
+ @media only screen and ( min-width: calc-breakpoint("alias", nth($key, 2), get-index(nth($key, 2))) ) and ( max-width: (calc-breakpoint("prev", nth($key, 4), get-index(nth($key, 4))) - if(is-highest-breakpoint(nth($key, 4)), 0, if(get-config-unit() == "em", em(1px), 1))) ) {
751
+ @content;
752
+ }
753
+ } @else {
754
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
755
+ }
756
+
757
+ // From $num-x to $num-y
758
+ // -------------------------------------------------------------------------------
759
+ // @param $key [from number to number] : arbitrary media query
760
+ // -------------------------------------------------------------------------------
761
+
762
+ } @else if types-in-list($key, "string" "number" "string" "number", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
763
+ // Make sure passed units match units used in config
764
+ @if get-config-unit() == unit(nth($key, 2)) and get-config-unit() == unit(nth($key, 4)) {
765
+ @media only screen and ( min-width: nth($key, 2) ) and ( max-width: nth($key, 4) ) {
766
+ @content;
767
+ }
768
+ // Throw error
769
+ } @else {
770
+ @warn "Passed units [#{unit(nth($key, 2))}, #{unit(nth($key, 4))}] do not match the unit used in your config map: #{get-config-unit()}";
771
+ }
772
+
773
+ // Greater than $key breakpoint
774
+ // -------------------------------------------------------------------------------
775
+ // @param $key [greater than key] : anything above $key breakpoint
776
+ // -------------------------------------------------------------------------------
777
+
778
+ } @else if types-in-list($key, "string", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
779
+
780
+ @if get-value("settings", "grid") == "fluid" {
781
+ @media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) + if(get-config-unit() == "em", em(1px), 1)) ) {
782
+ @content;
783
+ }
784
+ } @else if get-value("settings", "grid") == "fixed" {
785
+ @media only screen and ( min-width: calc-breakpoint("prev", nth($key, 3), get-index(nth($key, 3))) ) {
786
+ @content;
787
+ }
788
+ } @else {
789
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
790
+ }
791
+
792
+ // Greater than number
793
+ // -------------------------------------------------------------------------------
794
+ // @param $key [greater than number] : anything above number
795
+ // -------------------------------------------------------------------------------
796
+
797
+ } @else if types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
798
+
799
+ @if get-config-unit() == unit(nth($key, 3)) {
800
+ @media only screen and ( min-width: nth($key, 3) + if(get-config-unit() == "em", em(1px), 1) ) {
801
+ @content;
802
+ }
803
+ } @else {
804
+ @warn "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{get-config-unit()}";
805
+ }
806
+
807
+ // Number greater than $key breakpoint
808
+ // -------------------------------------------------------------------------------
809
+ // @param $key [number greater than key] : unit value greater than $key breakpoint
810
+ // -------------------------------------------------------------------------------
811
+
812
+ } @else if types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "greater" and nth($key, 3) == "than" {
813
+
814
+ @if get-config-unit() == unit(nth($key, 1)) {
815
+ @media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) + nth($key, 1)) ) {
816
+ @content;
817
+ }
818
+ } @else {
819
+ @warn "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{get-config-unit()}";
820
+ }
821
+
822
+ // Less than $key breakpoint
823
+ // -------------------------------------------------------------------------------
824
+ // @param $key [less than key] : anything below $key breakpoint
825
+ // -------------------------------------------------------------------------------
826
+
827
+ } @else if types-in-list($key, "string", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
828
+
829
+ @if get-value("settings", "grid") == "fluid" {
830
+ @media only screen and ( max-width: calc-breakpoint("next", nth($key, 3), get-index(nth($key, 3))) ) {
831
+ @content;
832
+ }
833
+ } @else if get-value("settings", "grid") == "fixed" {
834
+ @media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) - if(get-config-unit() == "em", em(1px), 1)) ) {
835
+ @content;
836
+ }
837
+ } @else {
838
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
839
+ }
840
+
841
+ // Less than number
842
+ // -------------------------------------------------------------------------------
843
+ // @param $key [less than number] : anything below number
844
+ // -------------------------------------------------------------------------------
845
+
846
+ } @else if types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
847
+
848
+ @if get-config-unit() == unit(nth($key, 3)) {
849
+ @media only screen and ( max-width: nth($key, 3) - if(get-config-unit() == "em", em(1px), 1) ) {
850
+ @content;
851
+ }
852
+ } @else {
853
+ @warn "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{get-config-unit()}";
854
+ }
855
+
856
+ // Number less than $key breakpoint
857
+ // -------------------------------------------------------------------------------
858
+ // @param $key [number less than key] : unit value less than $key breakpoint
859
+ // -------------------------------------------------------------------------------
860
+
861
+ } @else if types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "less" and nth($key, 3) == "than" {
862
+
863
+ @if get-config-unit() == unit(nth($key, 1)) {
864
+ @media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) - nth($key, 1)) ) {
865
+ @content;
866
+ }
867
+ } @else {
868
+ @warn "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{get-config-unit()}";
869
+ }
870
+
871
+ // For $key-x $key-y $key-z
872
+ // -------------------------------------------------------------------------------
873
+ // @param $key [for list of strings] : will duplicate styles for each passed $key breakpoint
874
+ // -------------------------------------------------------------------------------
875
+
876
+ } @else if types-in-list($key, "string") and nth($key, 1) == "for" {
877
+
878
+ @for $i from 1 through length($key) {
879
+ $calcKey: nth($key, $i);
880
+
881
+ @if exists($flint, $calcKey) {
882
+ @if get-value("settings", "grid") == "fluid" {
883
+ @if is-highest-breakpoint($calcKey) {
884
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(get-config-unit() == "em", em(1px), 1)) ) {
885
+ @content;
886
+ }
887
+ } @else {
888
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, if(get-config-unit() == "em", em(1px), 1))) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
889
+ @content;
890
+ }
891
+ }
892
+ } @else if get-value("settings", "grid") == "fixed" {
893
+ @if is-highest-breakpoint($calcKey) {
894
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
895
+ @content;
896
+ }
897
+ } @else {
898
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - if(get-config-unit() == "em", em(1px), 1)) ) {
899
+ @content;
900
+ }
901
+ }
902
+ } @else {
903
+ @warn "Invalid gutter settings in config map: #{get-value('settings', 'grid')}. Valid arguments: fluid | fixed";
904
+ }
905
+ }
906
+ }
907
+ }
908
+ }
909
+ }
910
+ }