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