flint-gs 1.4.0 → 1.5.0

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 (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
- }