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.
- checksums.yaml +4 -4
- data/README.md +37 -23
- data/lib/flint.rb +2 -2
- data/stylesheets/_flint.scss +3 -10
- data/stylesheets/flint/functions/_functions.scss +4 -1
- data/stylesheets/flint/functions/helpers/_helpers.scss +3 -3
- data/stylesheets/flint/functions/lib/_calc-width.scss +15 -1
- data/stylesheets/flint/functions/lib/_map-fetch.scss +1 -1
- data/stylesheets/flint/functions/lib/_types-in-list.scss +120 -0
- data/stylesheets/flint/globals/_globals.scss +4 -0
- data/stylesheets/flint/mixins/_mixins.scss +3 -2
- data/stylesheets/flint/mixins/lib/{_flint-calculate.scss → _calculate.scss} +0 -0
- data/stylesheets/flint/mixins/lib/_main.scss +911 -0
- metadata +5 -4
- 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
|
+
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-
|
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/
|
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/
|
@@ -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
|
-
}
|