flint-gs 1.4.0 → 1.5.0

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