flint-gs 1.12.0 → 2.0.0.rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +71 -207
- data/lib/flint.rb +8 -8
- data/stylesheets/_flint.scss +3 -2
- data/stylesheets/flint/config/_config.scss +37 -68
- data/stylesheets/flint/functions/_functions.scss +15 -7
- data/stylesheets/flint/functions/helpers/_helpers.scss +115 -117
- data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +23 -32
- data/stylesheets/flint/functions/lib/_calc-width.scss +40 -26
- data/stylesheets/flint/functions/lib/_exists.scss +8 -7
- data/stylesheets/flint/functions/lib/_fluid-width.scss +8 -7
- data/stylesheets/flint/functions/lib/_get-index.scss +12 -10
- data/stylesheets/flint/functions/lib/_get-instance-value.scss +10 -16
- data/stylesheets/flint/functions/lib/_get-value.scss +9 -13
- data/stylesheets/flint/functions/lib/_has-family-instance.scss +21 -20
- data/stylesheets/flint/functions/lib/_instance.scss +19 -22
- data/stylesheets/flint/functions/lib/_last.scss +7 -6
- data/stylesheets/flint/functions/lib/_list-to-string.scss +11 -9
- data/stylesheets/flint/functions/lib/_map-fetch.scss +13 -19
- data/stylesheets/flint/functions/lib/_next-index.scss +9 -14
- data/stylesheets/flint/functions/lib/_purge.scss +9 -8
- data/stylesheets/flint/functions/lib/_remove.scss +11 -10
- data/stylesheets/flint/functions/lib/_replace-substring.scss +9 -8
- data/stylesheets/flint/functions/lib/_replace.scss +11 -10
- data/stylesheets/flint/functions/lib/_steal-key.scss +24 -13
- data/stylesheets/flint/functions/lib/_steal-values.scss +9 -12
- data/stylesheets/flint/functions/lib/_string-to-list.scss +11 -10
- data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +10 -9
- data/stylesheets/flint/functions/lib/_support-syntax.scss +14 -12
- data/stylesheets/flint/functions/lib/_types-in-list.scss +9 -8
- data/stylesheets/flint/functions/lib/_use-syntax.scss +12 -8
- data/stylesheets/flint/globals/_globals.scss +35 -21
- data/stylesheets/flint/mixins/_mixins.scss +3 -2
- data/stylesheets/flint/mixins/lib/_box-sizing.scss +7 -7
- data/stylesheets/flint/mixins/lib/_calculate.scss +112 -583
- data/stylesheets/flint/mixins/lib/_clearfix.scss +7 -7
- data/stylesheets/flint/mixins/lib/_container.scss +6 -12
- data/stylesheets/flint/mixins/lib/_main.scss +271 -202
- data/stylesheets/flint/mixins/lib/_new-instance.scss +12 -15
- data/stylesheets/flint/mixins/lib/_print-instance.scss +16 -20
- metadata +3 -4
- data/stylesheets/flint/functions/lib/_calc-margin.scss +0 -57
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Micro flint-clearfix
|
|
3
|
+
*
|
|
4
|
+
* @link http://nicolasgallagher.com/micro-clearfix-hack/
|
|
5
|
+
*
|
|
6
|
+
* @requires local clearfix mixin if available
|
|
7
|
+
*/
|
|
8
8
|
@mixin flint-clearfix {
|
|
9
9
|
@if mixin-exists("clearfix") {
|
|
10
10
|
@include clearfix;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Container
|
|
3
|
+
*
|
|
4
|
+
* @param {String} $key (null) - alias of individual breakpoint
|
|
5
|
+
* @param {Number} $i (null) - index number if called from loop
|
|
6
|
+
*/
|
|
7
7
|
@mixin flint-container($key: null, $i: null) {
|
|
8
8
|
|
|
9
9
|
// Check if inside of loop, and if so only output for default
|
|
@@ -14,20 +14,14 @@
|
|
|
14
14
|
width: flint-calc-width($key, "container");
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
// Check if max-width is set
|
|
18
17
|
@if flint-get-value("settings", "max-width") {
|
|
19
|
-
|
|
20
|
-
// Check if it's an number
|
|
21
18
|
@if flint-is-number(flint-get-value("settings", "max-width")) {
|
|
22
19
|
max-width: flint-get-value("settings", "max-width");
|
|
23
|
-
// If not, use highest breakpoint
|
|
24
20
|
} @else {
|
|
25
21
|
max-width: max(flint-get-all-breakpoints()...);
|
|
26
22
|
}
|
|
27
|
-
|
|
28
23
|
}
|
|
29
24
|
|
|
30
|
-
// Check if center container is set
|
|
31
25
|
@if flint-get-value("settings", "center-container") {
|
|
32
26
|
margin-right: auto;
|
|
33
27
|
margin-left: auto;
|
|
@@ -1,36 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
// @output foundation styles | container styles | calculated styles
|
|
10
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Main API
|
|
3
|
+
*
|
|
4
|
+
* @param {String | Number | List} $key - key of breakpoint or shorthand span
|
|
5
|
+
* @param {String | Number | List} $span - value of span of column or shorthand context
|
|
6
|
+
* @param {Number | List} $context - context value of span
|
|
7
|
+
* @param {String | List} $gutter - alias for gutter modifier
|
|
8
|
+
*/
|
|
11
9
|
@mixin _(
|
|
12
10
|
$key: null,
|
|
13
11
|
$span: null,
|
|
14
12
|
$context: null,
|
|
15
|
-
$gutter: null
|
|
16
|
-
$shift: null
|
|
13
|
+
$gutter: null
|
|
17
14
|
) {
|
|
18
15
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
// -------------------------------------------------------------------------------
|
|
27
|
-
// @param [string] : clearfix instance
|
|
28
|
-
// -------------------------------------------------------------------------------
|
|
29
|
-
// @output clear styles | use existing clearfix mixin
|
|
16
|
+
/**
|
|
17
|
+
* Clearfix instance
|
|
18
|
+
* Uses `clearfix` mixin if one already exists,
|
|
19
|
+
* else falls back to packaged.
|
|
20
|
+
*
|
|
21
|
+
* @param {String}
|
|
22
|
+
*/
|
|
30
23
|
@if $key == "clear" or $span == "clear" or $context == "clear" {
|
|
31
24
|
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
/*
|
|
26
|
+
* Check if key exists as breakpoint, and if so wrap
|
|
27
|
+
* in query to not affect other breakpoints
|
|
28
|
+
*/
|
|
34
29
|
@if flint-exists($flint, $key) {
|
|
35
30
|
|
|
36
31
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
@@ -67,49 +62,45 @@
|
|
|
67
62
|
}
|
|
68
63
|
}
|
|
69
64
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
65
|
+
/**
|
|
66
|
+
* Foundation instance
|
|
67
|
+
* Uses `box-sizing` mixin if one already exists,
|
|
68
|
+
* else falls back to packaged.
|
|
69
|
+
*
|
|
70
|
+
* @param {String}
|
|
71
|
+
*/
|
|
75
72
|
@if $key == "foundation" {
|
|
76
73
|
|
|
77
74
|
// Apply global border-box-sizing if set to true
|
|
78
75
|
@if flint-get-value("settings", "border-box-sizing") {
|
|
79
|
-
$flint__foundation: "
|
|
76
|
+
$flint__foundation: "existent" !global;
|
|
80
77
|
}
|
|
81
78
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
79
|
+
/*
|
|
80
|
+
* Foundation is now globally existant
|
|
81
|
+
*/
|
|
82
|
+
@if $flint__foundation == "existent" {
|
|
85
83
|
@at-root *, *:before, *:after {
|
|
86
84
|
@include flint-box-sizing;
|
|
87
85
|
@content;
|
|
88
86
|
}
|
|
89
87
|
}
|
|
90
88
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
89
|
+
/**
|
|
90
|
+
* Container instance
|
|
91
|
+
*
|
|
92
|
+
* @param {String}
|
|
93
|
+
*/
|
|
96
94
|
} @else if $key == "container" or $span == "container" or $context == "container" {
|
|
97
95
|
|
|
98
96
|
// Apply individually if foundation is not set globally, but is set to true in config
|
|
99
|
-
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "
|
|
100
|
-
@include
|
|
101
|
-
|
|
102
|
-
// Warn to either set a global foundation, or turn border-box-sizing off
|
|
103
|
-
@if global-variable-exists("global-foundation-is-set") == false {
|
|
104
|
-
@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global _('foundation') rule, or turn border-box-sizing to false in your config file.";
|
|
105
|
-
|
|
106
|
-
// Declare global variable so only a single warning prints out
|
|
107
|
-
$global-foundation-is-set: true !global;
|
|
108
|
-
}
|
|
97
|
+
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "non-existent" {
|
|
98
|
+
@include _("foundation");
|
|
109
99
|
}
|
|
110
100
|
|
|
111
|
-
|
|
112
|
-
|
|
101
|
+
/*
|
|
102
|
+
* Output container for each breakpoint if fixed grid
|
|
103
|
+
*/
|
|
113
104
|
@if $key == "container" and flint-get-value("settings", "grid") == "fixed" {
|
|
114
105
|
|
|
115
106
|
@for $i from 1 through length($flint__all__keys) {
|
|
@@ -148,8 +139,9 @@
|
|
|
148
139
|
}
|
|
149
140
|
}
|
|
150
141
|
|
|
151
|
-
|
|
152
|
-
|
|
142
|
+
/*
|
|
143
|
+
* Output container for specific breakpoint if exists
|
|
144
|
+
*/
|
|
153
145
|
} @else if flint-exists($flint, $key) and flint-get-value("settings", "grid") == "fixed" {
|
|
154
146
|
|
|
155
147
|
@if flint-is-highest-breakpoint($key) {
|
|
@@ -193,77 +185,74 @@
|
|
|
193
185
|
}
|
|
194
186
|
}
|
|
195
187
|
|
|
196
|
-
|
|
197
|
-
|
|
188
|
+
/*
|
|
189
|
+
* Creates a new instance, add to global instance map
|
|
190
|
+
*/
|
|
198
191
|
} @else {
|
|
199
192
|
|
|
200
193
|
// Apply individually if foundation is not set globally, but is set to true in config
|
|
201
|
-
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "
|
|
202
|
-
@include
|
|
203
|
-
|
|
204
|
-
// Warn to either set a global foundation, or turn border-box-sizing off
|
|
205
|
-
@if global-variable-exists("global-foundation-is-set") == false {
|
|
206
|
-
@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global _('foundation') rule, or turn border-box-sizing to false in your config file.";
|
|
207
|
-
|
|
208
|
-
// Declare global variable so only a single warning prints out
|
|
209
|
-
$global-foundation-is-set: true !global;
|
|
210
|
-
}
|
|
194
|
+
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "non-existent" {
|
|
195
|
+
@include _("foundation");
|
|
211
196
|
}
|
|
212
197
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
198
|
+
/**
|
|
199
|
+
* Recursive shorthand with identical context
|
|
200
|
+
*
|
|
201
|
+
* @param {Number} $key - single span value for all breakpoints
|
|
202
|
+
* @param {Null} $span - null context value
|
|
203
|
+
*/
|
|
219
204
|
@if flint-is-number($key) and length($key) == 1 and $span == null
|
|
220
205
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
206
|
+
/**
|
|
207
|
+
* Recursive shorthand with identical context
|
|
208
|
+
*
|
|
209
|
+
* @param {Number} $key - single span value for all breakpoints
|
|
210
|
+
* @param {Number | String} $span - single context value for all breakpoints
|
|
211
|
+
*/
|
|
227
212
|
or flint-is-number($key) and length($key) == 1 and flint-is-number($span) and length($span) == 1
|
|
228
213
|
or flint-is-number($key) and length($key) == 1 and $span == "auto"
|
|
229
214
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
215
|
+
/**
|
|
216
|
+
* Recursive shorthand with differing context
|
|
217
|
+
*
|
|
218
|
+
* @param {Number} $key - single span value for all breakpoints
|
|
219
|
+
* @param {List | String} $span - context value of span for each breakpoint
|
|
220
|
+
*
|
|
221
|
+
* @throws error if lengths do not match number of breakpoints
|
|
222
|
+
*/
|
|
238
223
|
or flint-is-number($key) and length($key) == 1 and flint-types-in-list($span, "number")
|
|
239
224
|
or flint-is-number($key) and length($key) == 1 and $span == "auto"
|
|
240
225
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
226
|
+
/**
|
|
227
|
+
* Variable shorthand
|
|
228
|
+
*
|
|
229
|
+
* @param {List} $key - span value for each breakpoint
|
|
230
|
+
* @param {Null} $span - null context value
|
|
231
|
+
*
|
|
232
|
+
* @throws error if lengths do not match number of breakpoints
|
|
233
|
+
*/
|
|
249
234
|
or flint-types-in-list($key, "number") and $span == null
|
|
250
235
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
236
|
+
/**
|
|
237
|
+
* Variable shorthand with context
|
|
238
|
+
*
|
|
239
|
+
* @param {List} $key - span value for each breakpoint
|
|
240
|
+
* @param {List} $span - context value for each breakpoint
|
|
241
|
+
*
|
|
242
|
+
* @throws error if lengths do not match number of breakpoints
|
|
243
|
+
*/
|
|
259
244
|
or flint-types-in-list($key, "number") and flint-types-in-list($span, "number")
|
|
260
245
|
or flint-types-in-list($key, "number") and $span == "auto" {
|
|
261
246
|
|
|
262
|
-
// Emit
|
|
247
|
+
// Emit erroring for invalid argument lengths
|
|
263
248
|
@if flint-types-in-list($key, "number") and length($key) != length($flint__all__keys) {
|
|
264
|
-
@
|
|
249
|
+
@if not $flint__development-mode {
|
|
250
|
+
@error "Invalid argument length of #{length($key)} for span. Please provide an argument for each breakpoint in your config (#{length($flint__all__keys)}). Your argument was: #{$key}";
|
|
251
|
+
}
|
|
265
252
|
} @else if flint-types-in-list($span, "number") and length($span) != length($flint__all__keys) {
|
|
266
|
-
@
|
|
253
|
+
@if not $flint__development-mode {
|
|
254
|
+
@error "Invalid argument length of #{length($span)} for context. Please provide an argument for each breakpoint in your config (#{length($flint__all__keys)}). Your argument was: #{$span}";
|
|
255
|
+
}
|
|
267
256
|
} @else {
|
|
268
257
|
|
|
269
258
|
@for $i from 1 through length($flint__all__keys) {
|
|
@@ -272,11 +261,10 @@
|
|
|
272
261
|
$calc-span: $key;
|
|
273
262
|
$calc-context: $span;
|
|
274
263
|
$calc-gutter: $gutter;
|
|
275
|
-
$calc-shift: $shift;
|
|
276
264
|
|
|
277
265
|
@if flint-is-default($calc-key) {
|
|
278
266
|
|
|
279
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $
|
|
267
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
|
|
280
268
|
@content;
|
|
281
269
|
}
|
|
282
270
|
|
|
@@ -287,7 +275,7 @@
|
|
|
287
275
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
288
276
|
|
|
289
277
|
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
290
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $
|
|
278
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
|
|
291
279
|
@content;
|
|
292
280
|
}
|
|
293
281
|
}
|
|
@@ -295,7 +283,7 @@
|
|
|
295
283
|
} @else {
|
|
296
284
|
|
|
297
285
|
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
298
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $
|
|
286
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
|
|
299
287
|
@content;
|
|
300
288
|
}
|
|
301
289
|
}
|
|
@@ -307,7 +295,7 @@
|
|
|
307
295
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
308
296
|
|
|
309
297
|
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
310
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $
|
|
298
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
|
|
311
299
|
@content;
|
|
312
300
|
}
|
|
313
301
|
}
|
|
@@ -315,7 +303,7 @@
|
|
|
315
303
|
} @else {
|
|
316
304
|
|
|
317
305
|
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
318
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $
|
|
306
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
|
|
319
307
|
@content;
|
|
320
308
|
}
|
|
321
309
|
}
|
|
@@ -323,45 +311,52 @@
|
|
|
323
311
|
}
|
|
324
312
|
|
|
325
313
|
} @else {
|
|
326
|
-
@
|
|
314
|
+
@if not $flint__development-mode {
|
|
315
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
316
|
+
}
|
|
327
317
|
}
|
|
328
318
|
}
|
|
329
319
|
}
|
|
330
320
|
}
|
|
331
321
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
322
|
+
/**
|
|
323
|
+
* Call by alias
|
|
324
|
+
*
|
|
325
|
+
* @param {String} $key - breakpoint alias
|
|
326
|
+
* @param {Number} $span - span value for breakpoint
|
|
327
|
+
* @param {Null} $context - null context value
|
|
328
|
+
*
|
|
329
|
+
* @throws error if breakpoint alias does not exist
|
|
330
|
+
*/
|
|
339
331
|
} @else if flint-is-string($key) and flint-is-number($span) and $context == null
|
|
340
332
|
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
333
|
+
/**
|
|
334
|
+
* all by alias with context
|
|
335
|
+
*
|
|
336
|
+
* @param {String} $key - breakpoint alias
|
|
337
|
+
* @param {Number} $span - span value for breakpoint
|
|
338
|
+
* @param {Number | String} $context - context value for breakpoint
|
|
339
|
+
*
|
|
340
|
+
* @throws error if breakpoint alias does not exist
|
|
341
|
+
*/
|
|
348
342
|
or flint-is-string($key) and flint-is-number($span) and flint-is-number($context)
|
|
349
343
|
or flint-is-string($key) and flint-is-number($span) and $context == "auto" {
|
|
350
344
|
|
|
351
|
-
// Emit
|
|
345
|
+
// Emit erroring for invalid argument lengths
|
|
352
346
|
@if not flint-exists($flint, $key) {
|
|
353
|
-
@
|
|
347
|
+
@if not $flint__development-mode {
|
|
348
|
+
@error "Invalid argument: #{$key}. Breakpoint does not exist. Please provide a valid argument.";
|
|
349
|
+
}
|
|
354
350
|
} @else {
|
|
355
351
|
|
|
356
352
|
$calc-key: $key;
|
|
357
353
|
$calc-span: $span;
|
|
358
354
|
$calc-context: $context;
|
|
359
355
|
$calc-gutter: $gutter;
|
|
360
|
-
$calc-shift: $shift;
|
|
361
356
|
|
|
362
357
|
@if flint-is-default($calc-key) {
|
|
363
358
|
|
|
364
|
-
@include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter
|
|
359
|
+
@include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter) {
|
|
365
360
|
@content;
|
|
366
361
|
}
|
|
367
362
|
|
|
@@ -372,7 +367,7 @@
|
|
|
372
367
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
373
368
|
|
|
374
369
|
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
375
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter
|
|
370
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
|
|
376
371
|
@content;
|
|
377
372
|
}
|
|
378
373
|
}
|
|
@@ -380,7 +375,7 @@
|
|
|
380
375
|
} @else {
|
|
381
376
|
|
|
382
377
|
@media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
|
|
383
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter
|
|
378
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
|
|
384
379
|
@content;
|
|
385
380
|
}
|
|
386
381
|
}
|
|
@@ -392,7 +387,7 @@
|
|
|
392
387
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
393
388
|
|
|
394
389
|
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
|
|
395
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter
|
|
390
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
|
|
396
391
|
@content;
|
|
397
392
|
}
|
|
398
393
|
}
|
|
@@ -400,7 +395,7 @@
|
|
|
400
395
|
} @else {
|
|
401
396
|
|
|
402
397
|
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
403
|
-
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter
|
|
398
|
+
@include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
|
|
404
399
|
@content;
|
|
405
400
|
}
|
|
406
401
|
}
|
|
@@ -408,23 +403,29 @@
|
|
|
408
403
|
}
|
|
409
404
|
|
|
410
405
|
} @else {
|
|
411
|
-
@
|
|
406
|
+
@if not $flint__development-mode {
|
|
407
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
408
|
+
}
|
|
412
409
|
}
|
|
413
410
|
}
|
|
414
411
|
}
|
|
415
412
|
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
413
|
+
/**
|
|
414
|
+
* Wrap @content in media query
|
|
415
|
+
*
|
|
416
|
+
* @param {String | List} $key - defines how to make up media query
|
|
417
|
+
*/
|
|
421
418
|
} @else if flint-exists($flint, $key) and $span == null and $context == null
|
|
422
419
|
or flint-is-list($key) and $span == null and $context == null {
|
|
423
420
|
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
421
|
+
/**
|
|
422
|
+
* Call $key breakpoint by alias
|
|
423
|
+
*
|
|
424
|
+
* @param {String} $key - only for $key breakpoint
|
|
425
|
+
*
|
|
426
|
+
* @example scss
|
|
427
|
+
* _($key)
|
|
428
|
+
*/
|
|
428
429
|
@if length($key) == 1 {
|
|
429
430
|
|
|
430
431
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
@@ -448,13 +449,19 @@
|
|
|
448
449
|
}
|
|
449
450
|
}
|
|
450
451
|
} @else {
|
|
451
|
-
@
|
|
452
|
+
@if not $flint__development-mode {
|
|
453
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
454
|
+
}
|
|
452
455
|
}
|
|
453
456
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
457
|
+
/**
|
|
458
|
+
* From $key breakpoint to infinity
|
|
459
|
+
*
|
|
460
|
+
* @param {List} $key - min-width from $key breakpoint
|
|
461
|
+
*
|
|
462
|
+
* @example scss
|
|
463
|
+
* _(from $key to infinity)
|
|
464
|
+
*/
|
|
458
465
|
} @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
|
|
459
466
|
|
|
460
467
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
@@ -466,13 +473,19 @@
|
|
|
466
473
|
@content;
|
|
467
474
|
}
|
|
468
475
|
} @else {
|
|
469
|
-
@
|
|
476
|
+
@if not $flint__development-mode {
|
|
477
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
478
|
+
}
|
|
470
479
|
}
|
|
471
480
|
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
481
|
+
/**
|
|
482
|
+
* From $key-x breakpoint to $key-y breakpoint
|
|
483
|
+
*
|
|
484
|
+
* @param {List} $key - from $key-x breakpoint to $key-y
|
|
485
|
+
*
|
|
486
|
+
* @example scss
|
|
487
|
+
* _(from $key-x to $key-y)
|
|
488
|
+
*/
|
|
476
489
|
} @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
|
|
477
490
|
|
|
478
491
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
@@ -484,13 +497,19 @@
|
|
|
484
497
|
@content;
|
|
485
498
|
}
|
|
486
499
|
} @else {
|
|
487
|
-
@
|
|
500
|
+
@if not $flint__development-mode {
|
|
501
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
502
|
+
}
|
|
488
503
|
}
|
|
489
504
|
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
505
|
+
/**
|
|
506
|
+
* From $num-x to $num-y
|
|
507
|
+
*
|
|
508
|
+
* @param {List} $key - arbitrary media query
|
|
509
|
+
*
|
|
510
|
+
* @example scss
|
|
511
|
+
* _(from $num-x to $num-y)
|
|
512
|
+
*/
|
|
494
513
|
} @else if flint-types-in-list($key, "string" "number" "string" "number", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
|
|
495
514
|
// Make sure passed units match units used in config
|
|
496
515
|
@if flint-get-config-unit() == unit(nth($key, 2)) and flint-get-config-unit() == unit(nth($key, 4)) {
|
|
@@ -499,13 +518,19 @@
|
|
|
499
518
|
}
|
|
500
519
|
// Throw error
|
|
501
520
|
} @else {
|
|
502
|
-
@
|
|
521
|
+
@if not $flint__development-mode {
|
|
522
|
+
@error "Passed units [#{unit(nth($key, 2))}, #{unit(nth($key, 4))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
|
|
523
|
+
}
|
|
503
524
|
}
|
|
504
525
|
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
526
|
+
/**
|
|
527
|
+
* Greater than $key breakpoint
|
|
528
|
+
*
|
|
529
|
+
* @param {List} $key - anything above $key breakpoint
|
|
530
|
+
*
|
|
531
|
+
* @example scss
|
|
532
|
+
* _(greater than $key)
|
|
533
|
+
*/
|
|
509
534
|
} @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
|
|
510
535
|
|
|
511
536
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
@@ -517,13 +542,19 @@
|
|
|
517
542
|
@content;
|
|
518
543
|
}
|
|
519
544
|
} @else {
|
|
520
|
-
@
|
|
545
|
+
@if not $flint__development-mode {
|
|
546
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
547
|
+
}
|
|
521
548
|
}
|
|
522
549
|
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
550
|
+
/**
|
|
551
|
+
* Greater than number
|
|
552
|
+
*
|
|
553
|
+
* @param {List} $key - anything above number
|
|
554
|
+
*
|
|
555
|
+
* @example scss
|
|
556
|
+
* _(greater than $num)
|
|
557
|
+
*/
|
|
527
558
|
} @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
|
|
528
559
|
|
|
529
560
|
@if flint-get-config-unit() == unit(nth($key, 3)) {
|
|
@@ -531,13 +562,19 @@
|
|
|
531
562
|
@content;
|
|
532
563
|
}
|
|
533
564
|
} @else {
|
|
534
|
-
@
|
|
565
|
+
@if not $flint__development-mode {
|
|
566
|
+
@error "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
|
|
567
|
+
}
|
|
535
568
|
}
|
|
536
569
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
570
|
+
/**
|
|
571
|
+
* Number greater than $key breakpoint
|
|
572
|
+
*
|
|
573
|
+
* @param {List} $key - unit value greater than $key breakpoint
|
|
574
|
+
*
|
|
575
|
+
* @example scss
|
|
576
|
+
* _($num greater than $key)
|
|
577
|
+
*/
|
|
541
578
|
} @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "greater" and nth($key, 3) == "than" {
|
|
542
579
|
|
|
543
580
|
@if flint-get-config-unit() == unit(nth($key, 1)) {
|
|
@@ -545,13 +582,19 @@
|
|
|
545
582
|
@content;
|
|
546
583
|
}
|
|
547
584
|
} @else {
|
|
548
|
-
@
|
|
585
|
+
@if not $flint__development-mode {
|
|
586
|
+
@error "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
|
|
587
|
+
}
|
|
549
588
|
}
|
|
550
589
|
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
590
|
+
/**
|
|
591
|
+
* Less than $key breakpoint
|
|
592
|
+
*
|
|
593
|
+
* @param {List} $key - anything below $key breakpoint
|
|
594
|
+
*
|
|
595
|
+
* @example scss
|
|
596
|
+
* _(less than $key)
|
|
597
|
+
*/
|
|
555
598
|
} @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
|
|
556
599
|
|
|
557
600
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
@@ -563,13 +606,19 @@
|
|
|
563
606
|
@content;
|
|
564
607
|
}
|
|
565
608
|
} @else {
|
|
566
|
-
@
|
|
609
|
+
@if not $flint__development-mode {
|
|
610
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
611
|
+
}
|
|
567
612
|
}
|
|
568
613
|
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
614
|
+
/**
|
|
615
|
+
* Less than number
|
|
616
|
+
*
|
|
617
|
+
* @param {List} $key - anything below number
|
|
618
|
+
*
|
|
619
|
+
* @example scss
|
|
620
|
+
* _(less than $num)
|
|
621
|
+
*/
|
|
573
622
|
} @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
|
|
574
623
|
|
|
575
624
|
@if flint-get-config-unit() == unit(nth($key, 3)) {
|
|
@@ -577,13 +626,19 @@
|
|
|
577
626
|
@content;
|
|
578
627
|
}
|
|
579
628
|
} @else {
|
|
580
|
-
@
|
|
629
|
+
@if not $flint__development-mode {
|
|
630
|
+
@error "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
|
|
631
|
+
}
|
|
581
632
|
}
|
|
582
633
|
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
634
|
+
/**
|
|
635
|
+
* Number less than $key breakpoint
|
|
636
|
+
*
|
|
637
|
+
* @param {List} $key - unit value less than $key breakpoint
|
|
638
|
+
*
|
|
639
|
+
* @example scss
|
|
640
|
+
* _($num less than $key)
|
|
641
|
+
*/
|
|
587
642
|
} @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "less" and nth($key, 3) == "than" {
|
|
588
643
|
|
|
589
644
|
@if flint-get-config-unit() == unit(nth($key, 1)) {
|
|
@@ -591,19 +646,26 @@
|
|
|
591
646
|
@content;
|
|
592
647
|
}
|
|
593
648
|
} @else {
|
|
594
|
-
@
|
|
649
|
+
@if not $flint__development-mode {
|
|
650
|
+
@error "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
|
|
651
|
+
}
|
|
595
652
|
}
|
|
596
653
|
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
654
|
+
/**
|
|
655
|
+
* For $key-x $key-y $key-z
|
|
656
|
+
*
|
|
657
|
+
* @param {List} $key - comma delimited list of queries
|
|
658
|
+
*
|
|
659
|
+
* @example scss
|
|
660
|
+
* _(for $key-x $key-y $key-z)
|
|
661
|
+
*/
|
|
601
662
|
} @else if flint-types-in-list($key, "string") and nth($key, 1) == "for" {
|
|
602
663
|
// Define empty query list
|
|
603
664
|
$query: ();
|
|
604
665
|
|
|
605
|
-
|
|
606
|
-
|
|
666
|
+
/*
|
|
667
|
+
* Build out comma delimited query list for each breakpoint
|
|
668
|
+
*/
|
|
607
669
|
@for $i from 1 through length($key) {
|
|
608
670
|
$calc-key: nth($key, $i);
|
|
609
671
|
|
|
@@ -621,11 +683,15 @@
|
|
|
621
683
|
$query: append($query, unquote('( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} ) and ( max-width: #{(flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1))} )'), "comma");
|
|
622
684
|
}
|
|
623
685
|
} @else {
|
|
624
|
-
@
|
|
686
|
+
@if not $flint__development-mode {
|
|
687
|
+
@error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
|
|
688
|
+
}
|
|
625
689
|
}
|
|
626
690
|
} @else {
|
|
627
691
|
@if not $calc-key == "for" {
|
|
628
|
-
@
|
|
692
|
+
@if not $flint__development-mode {
|
|
693
|
+
@error "Invalid argument: #{$calc-key}. Breakpoint does not exist. Please provide a valid argument.";
|
|
694
|
+
}
|
|
629
695
|
}
|
|
630
696
|
}
|
|
631
697
|
}
|
|
@@ -635,13 +701,16 @@
|
|
|
635
701
|
}
|
|
636
702
|
}
|
|
637
703
|
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
704
|
+
/**
|
|
705
|
+
* Invalid argument
|
|
706
|
+
*
|
|
707
|
+
* @throw invalid argument error
|
|
708
|
+
*/
|
|
642
709
|
} @else {
|
|
643
710
|
@if $key != "clear" {
|
|
644
|
-
@
|
|
711
|
+
@if not $flint__development-mode {
|
|
712
|
+
@error "Invalid argument(s). Please double check and provide a valid argument. If you're calling by alias, please provide a single span argument for your breakpoint. See documentation for additional details.";
|
|
713
|
+
}
|
|
645
714
|
}
|
|
646
715
|
}
|
|
647
716
|
}
|