flint-gs 1.7.1 → 1.7.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -21
  3. data/README.md +906 -906
  4. data/lib/flint.rb +67 -77
  5. data/stylesheets/_flint.scss +6 -6
  6. data/stylesheets/flint/config/_config.scss +83 -83
  7. data/stylesheets/flint/functions/_functions.scss +40 -41
  8. data/stylesheets/flint/functions/helpers/_helpers.scss +181 -181
  9. data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +33 -33
  10. data/stylesheets/flint/functions/lib/_calc-margin.scss +57 -57
  11. data/stylesheets/flint/functions/lib/_calc-width.scss +50 -50
  12. data/stylesheets/flint/functions/lib/_exists.scss +22 -22
  13. data/stylesheets/flint/functions/lib/_fluid-width.scss +10 -10
  14. data/stylesheets/flint/functions/lib/_get-index.scss +13 -13
  15. data/stylesheets/flint/functions/lib/_get-instance-value.scss +17 -17
  16. data/stylesheets/flint/functions/lib/_get-value.scss +14 -14
  17. data/stylesheets/flint/functions/lib/_has-family-instance.scss +74 -74
  18. data/stylesheets/flint/functions/lib/_instance.scss +46 -46
  19. data/stylesheets/flint/functions/lib/_last.scss +9 -9
  20. data/stylesheets/flint/functions/lib/_list-to-string.scss +25 -25
  21. data/stylesheets/flint/functions/lib/_map-fetch.scss +30 -30
  22. data/stylesheets/flint/functions/lib/_next-index.scss +15 -15
  23. data/stylesheets/flint/functions/lib/_purge.scss +19 -19
  24. data/stylesheets/flint/functions/lib/_remove.scss +13 -13
  25. data/stylesheets/flint/functions/lib/_replace-substring.scss +34 -34
  26. data/stylesheets/flint/functions/lib/_replace.scss +25 -25
  27. data/stylesheets/flint/functions/lib/_steal-key.scss +13 -13
  28. data/stylesheets/flint/functions/lib/_steal-values.scss +14 -14
  29. data/stylesheets/flint/functions/lib/_string-to-list.scss +90 -90
  30. data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +31 -31
  31. data/stylesheets/flint/functions/lib/_support-syntax.scss +28 -28
  32. data/stylesheets/flint/functions/lib/_types-in-list.scss +119 -119
  33. data/stylesheets/flint/functions/lib/_use-syntax.scss +14 -14
  34. data/stylesheets/flint/globals/_globals.scss +38 -38
  35. data/stylesheets/flint/mixins/_mixins.scss +7 -7
  36. data/stylesheets/flint/mixins/lib/_calculate.scss +571 -571
  37. data/stylesheets/flint/mixins/lib/_clearfix.scss +19 -19
  38. data/stylesheets/flint/mixins/lib/_main.scss +935 -935
  39. data/stylesheets/flint/mixins/lib/_new-instance.scss +27 -27
  40. data/stylesheets/flint/mixins/lib/_print-instance.scss +42 -42
  41. metadata +16 -23
  42. data/stylesheets/flint/functions/lib/_string-to-number.scss +0 -77
data/stylesheets/flint/mixins/lib/_calculate.scss CHANGED
@@ -1,571 +1,571 @@
1
- // Outputs calculated styles
2
- // -------------------------------------------------------------------------------
3
- // @param $width [number] : width
4
- // @param $margin-right [number] : right margin
5
- // @param $margin-left [number] : left margin
6
- // -------------------------------------------------------------------------------
7
- // @output outputs styles
8
-
9
- @mixin flint-output($width, $margin-right, $margin-left) {
10
- width: $width;
11
- margin-right: $margin-right;
12
- margin-left: $margin-left;
13
- @content;
14
- }
15
-
16
- // Calculate widths, save all variables to instance
17
- // -------------------------------------------------------------------------------
18
- // @param $calc-key [string] : breakpoint key
19
- // @param $calc-span [number] : span value
20
- // @param $calc-context [number] : context value
21
- // @param $calc-gutter [number] : gutter value
22
- // @param $calc-shift [number] : shift value
23
- // @param $i [number] : index if variable length is > 1
24
- // -------------------------------------------------------------------------------
25
- // @output calculated styles
26
-
27
- @mixin flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i: null) {
28
-
29
- // Default values
30
- $output-width: 0;
31
- $output-margin-right: 0;
32
- $output-margin-left: 0;
33
-
34
- // Keep track of errors
35
- $errors: false;
36
-
37
- // Default value for cache search result
38
- $cached: false;
39
-
40
- // Check if any arguments are lists if called from loop
41
- @if $i != null {
42
-
43
- @if length($calc-key) > 1 {
44
- $calc-key: nth($calc-key, $i);
45
- }
46
- @if length($calc-span) > 1 {
47
- $calc-span: nth($calc-span, $i);
48
- }
49
- @if length($calc-context) > 1 {
50
- $calc-context: nth($calc-context, $i);
51
- }
52
- @if length($calc-gutter) > 1 {
53
- $calc-gutter: nth($calc-gutter, $i);
54
- }
55
- @if length($calc-shift) > 1 {
56
- $calc-shift: nth($calc-shift, $i);
57
- }
58
-
59
- }
60
-
61
- // Check for cached results
62
- @if $calc-context != "auto" and $calc-span != 0 {
63
- @if map-has-key($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}") {
64
-
65
- // Get results
66
- $output-width: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 1);
67
- $output-margin-right: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 2);
68
- $output-margin-left: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 3);
69
-
70
- // Declare successful search
71
- $cached: true;
72
- }
73
- }
74
-
75
- // Hide if span is zero
76
- // ----
77
- @if $calc-span == 0 {
78
-
79
- // First check if it's the default, so we don't hide the element on all breakpoints
80
- @if $calc-key == flint-get-value("settings", "default") {
81
- @include _($calc-key) {
82
- display: none;
83
- }
84
- } @else {
85
- display: none;
86
- }
87
-
88
- @include flint-new-instance($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $output-width, $output-margin-right, $output-margin-left);
89
- @include flint-debug-instance($calc-key);
90
-
91
- } @else {
92
-
93
- // Only run through if cache search was unsuccessful
94
- @if $cached == false {
95
-
96
- // Shift, no context
97
- // ----
98
- @if $calc-shift != null and $calc-context == null {
99
-
100
- @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
101
-
102
- // Save to variables for instance creation
103
- $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
104
- $output-margin-right: flint-calc-margin($calc-key, $calc-span);
105
- $output-margin-left: ( if( $calc-shift > 0,
106
- (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)),
107
- (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
108
- ));
109
-
110
- } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
111
-
112
- $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4);
113
- $output-margin-right: flint-calc-margin($calc-key, $calc-span);
114
- $output-margin-left: ( if( $calc-shift > 0,
115
- (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)),
116
- (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
117
- ));
118
-
119
- } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
120
-
121
- $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
122
- $output-margin-right: flint-calc-margin($calc-key, $calc-span);
123
- $output-margin-left: ( if( $calc-shift > 0,
124
- flint-calc-width($calc-key, $calc-shift),
125
- flint-calc-width($calc-key, $calc-shift)
126
- ));
127
-
128
- } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
129
-
130
- $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span)));
131
- $output-margin-right: 0;
132
- $output-margin-left: ( if( $calc-shift > 0,
133
- (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)),
134
- (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
135
- ));
136
-
137
- } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
138
-
139
- $output-width: (flint-calc-width($calc-key, $calc-span));
140
- $output-margin-right: 0;
141
- $output-margin-left: ( if( $calc-shift > 0,
142
- flint-calc-width($calc-key, $calc-shift),
143
- flint-calc-width($calc-key, $calc-shift)
144
- ));
145
-
146
- }
147
-
148
- // Shift, context
149
- // ----
150
- } @else if $calc-context != null {
151
-
152
- // Check if parent instance flint-exists
153
- $flint-exists: flint-has-family-instance($calc-key);
154
-
155
- @if $calc-shift != null {
156
-
157
- @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
158
-
159
- // Check if context is set to auto
160
- @if $calc-context == "auto" {
161
-
162
- // Does parent exist?
163
- @if $flint-exists != false {
164
- @if flint-get-value("settings", "grid") == "fluid" {
165
-
166
- // Get parent span value
167
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2);
168
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
169
- $output-margin-left: ( if( $calc-shift > 0,
170
- (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))),
171
- (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))))
172
- ));
173
-
174
- } @else if flint-get-value("settings", "grid") == "fixed" {
175
-
176
- // Get parent width instead of parent span for fixed grids
177
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2);
178
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
179
- $output-margin-left: ( if( $calc-shift > 0,
180
- (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))),
181
- (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))))
182
- ));
183
-
184
- }
185
- } @else {
186
- // Else warn that context should not be set to `auto`
187
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
188
- // Throw error
189
- $errors: true;
190
- }
191
-
192
- // Output styles normally if not set to auto
193
- } @else {
194
-
195
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
196
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
197
- $output-margin-left: ( if( $calc-shift > 0,
198
- (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)),
199
- (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context))
200
- ));
201
-
202
- }
203
-
204
- } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
205
-
206
- @if $calc-context == "auto" {
207
- @if $flint-exists != false {
208
- @if flint-get-value("settings", "grid") == "fluid" {
209
-
210
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4);
211
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
212
- $output-margin-left: ( if( $calc-shift > 0,
213
- (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))),
214
- (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))))
215
- ));
216
-
217
- } @else if flint-get-value("settings", "grid") == "fixed" {
218
-
219
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4);
220
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
221
- $output-margin-left: ( if( $calc-shift > 0,
222
- (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))),
223
- (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))))
224
- ));
225
-
226
- }
227
- } @else {
228
- // Else warn that context should not be set to `auto`
229
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
230
- $errors: true;
231
- }
232
- // Output styles normally if not set to auto
233
- } @else {
234
-
235
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
236
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
237
- $output-margin-left: ( if( $calc-shift > 0,
238
- (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)),
239
- (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context))
240
- ));
241
-
242
- }
243
-
244
- } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
245
-
246
- @if $calc-context == "auto" {
247
- @if $flint-exists != false {
248
- @if flint-get-value("settings", "grid") == "fluid" {
249
-
250
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))));
251
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
252
- $output-margin-left: ( if( $calc-shift > 0,
253
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))),
254
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))
255
- ));
256
-
257
- } @else if flint-get-value("settings", "grid") == "fixed" {
258
-
259
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))));
260
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
261
- $output-margin-left: ( if( $calc-shift > 0,
262
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))),
263
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))
264
- ));
265
-
266
- }
267
- } @else {
268
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
269
- $errors: true;
270
- }
271
- } @else {
272
-
273
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context));
274
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
275
- $output-margin-left: ( if( $calc-shift > 0,
276
- flint-calc-width($calc-key, $calc-shift, $calc-context),
277
- flint-calc-width($calc-key, $calc-shift, $calc-context)
278
- ));
279
-
280
- }
281
-
282
- } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
283
-
284
- @if $calc-context == "auto" {
285
- @if $flint-exists != false {
286
- @if flint-get-value("settings", "grid") == "fluid" {
287
-
288
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))));
289
- $output-margin-right: 0;
290
- $output-margin-left: ( if( $calc-shift > 0,
291
- (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))),
292
- (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))))
293
- ));
294
-
295
- } @else if flint-get-value("settings", "grid") == "fixed" {
296
-
297
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))));
298
- $output-margin-right: 0;
299
- $output-margin-left: ( if( $calc-shift > 0,
300
- (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))),
301
- (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))))
302
- ));
303
-
304
- }
305
- } @else {
306
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
307
- $errors: true;
308
- }
309
- } @else {
310
-
311
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context)));
312
- $output-margin-right: 0;
313
- $output-margin-left: ( if( $calc-shift > 0,
314
- (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)),
315
- (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context))
316
- ));
317
-
318
- }
319
-
320
- } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
321
-
322
- @if $calc-context == "auto" {
323
- @if $flint-exists != false {
324
- @if flint-get-value("settings", "grid") == "fluid" {
325
-
326
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))));
327
- $output-margin-right: 0;
328
- $output-margin-left: ( if( $calc-shift > 0,
329
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))),
330
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))
331
- ));
332
-
333
- } @else if flint-get-value("settings", "grid") == "fixed" {
334
-
335
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span);
336
- $output-margin-right: 0;
337
- $output-margin-left: ( if( $calc-shift > 0,
338
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))),
339
- flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))
340
- ));
341
-
342
- }
343
- } @else {
344
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
345
- $errors: true;
346
- }
347
- } @else {
348
-
349
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context));
350
- $output-margin-right: 0;
351
- $output-margin-left: ( if( $calc-shift > 0,
352
- flint-calc-width($calc-key, $calc-shift, $calc-context),
353
- flint-calc-width($calc-key, $calc-shift, $calc-context)
354
- ));
355
- }
356
- }
357
-
358
- // Context, no shift
359
- // ----
360
- } @else {
361
-
362
- @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
363
- @if $calc-context == "auto" {
364
- @if $flint-exists != false {
365
- @if flint-get-value("settings", "grid") == "fluid" {
366
-
367
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2);
368
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
369
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
370
-
371
- } @else if flint-get-value("settings", "grid") == "fixed" {
372
-
373
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2);
374
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
375
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
376
-
377
- }
378
- } @else {
379
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
380
- $errors: true;
381
- }
382
- } @else {
383
-
384
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
385
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
386
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context);
387
-
388
- }
389
-
390
- } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
391
-
392
- @if $calc-context == "auto" {
393
- @if $flint-exists != false {
394
- @if flint-get-value("settings", "grid") == "fluid" {
395
-
396
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4);
397
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
398
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
399
-
400
- } @else if flint-get-value("settings", "grid") == "fixed" {
401
-
402
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4);
403
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
404
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
405
-
406
- }
407
-
408
- } @else {
409
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
410
- $errors: true;
411
- }
412
- } @else {
413
-
414
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
415
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
416
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context);
417
-
418
- }
419
-
420
- } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
421
-
422
- @if $calc-context == "auto" {
423
- @if $flint-exists != false {
424
- @if flint-get-value("settings", "grid") == "fluid" {
425
-
426
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))));
427
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
428
- $output-margin-left: 0;
429
-
430
- } @else if flint-get-value("settings", "grid") == "fixed" {
431
-
432
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))));
433
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
434
- $output-margin-left: 0;
435
-
436
- }
437
- } @else {
438
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
439
- $errors: true;
440
- }
441
- } @else {
442
-
443
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context));
444
- $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
445
- $output-margin-left: 0;
446
-
447
- }
448
-
449
- } @else if $calc-gutter == "omega" or $calc-gutter =="no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
450
-
451
- @if $calc-context == "auto" {
452
- @if $flint-exists != false {
453
- @if flint-get-value("settings", "grid") == "fluid" {
454
-
455
- $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))));
456
- $output-margin-right: 0;
457
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
458
-
459
- } @else if flint-get-value("settings", "grid") == "fixed" {
460
-
461
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))));
462
- $output-margin-right: 0;
463
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
464
-
465
- }
466
- } @else {
467
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
468
- $errors: true;
469
- }
470
- } @else {
471
-
472
- $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context));
473
- $output-margin-right: 0;
474
- $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context);
475
-
476
- }
477
-
478
- } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
479
-
480
- @if $calc-context == "auto" {
481
- @if $flint-exists != false {
482
- @if flint-get-value("settings", "grid") == "fluid" {
483
-
484
- $output-width: flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")));
485
- $output-margin-right: 0;
486
- $output-margin-left: 0;
487
-
488
- } @else if flint-get-value("settings", "grid") == "fixed" {
489
-
490
- $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span);
491
- $output-margin-right: 0;
492
- $output-margin-left: 0;
493
-
494
- }
495
- } @else {
496
- @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
497
- $errors: true;
498
- }
499
- } @else {
500
-
501
- $output-width: flint-calc-width($calc-key, $calc-span, $calc-context);
502
- $output-margin-right: 0;
503
- $output-margin-left: 0;
504
-
505
- }
506
- }
507
- }
508
-
509
- // No context
510
- // ----
511
- } @else {
512
-
513
- @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
514
-
515
- $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
516
- $output-margin-right: flint-calc-margin($calc-key, $calc-span);
517
- $output-margin-left: flint-calc-margin($calc-key, $calc-span);
518
-
519
- } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
520
-
521
- $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4);
522
- $output-margin-right: flint-calc-margin($calc-key, $calc-span);
523
- $output-margin-left: flint-calc-margin($calc-key, $calc-span);
524
-
525
- } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
526
-
527
- $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
528
- $output-margin-right: flint-calc-margin($calc-key, $calc-span);
529
- $output-margin-left: 0;
530
-
531
- } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
532
-
533
- $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
534
- $output-margin-right: 0;
535
- $output-margin-left: flint-calc-margin($calc-key, $calc-span);
536
-
537
- } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
538
-
539
- $output-width: flint-calc-width($calc-key, $calc-span);
540
- $output-margin-right: 0;
541
- $output-margin-left: 0;
542
-
543
- }
544
- }
545
- }
546
-
547
- // Make sure there are no errors
548
- // ----
549
- @if $errors == false {
550
-
551
- // Cache result
552
- @if $calc-context != "auto" and $calc-span != 0 and $cached == false {
553
- $flint__cache-results: map-merge($flint__cache-results, (
554
- "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}": ($output-width, $output-margin-right, $output-margin-left)
555
- )) !global;
556
- }
557
-
558
- // Output styles
559
- @include flint-output($output-width, $output-margin-right, $output-margin-left) {
560
- @content;
561
- }
562
-
563
- // Create new instance
564
- @include flint-new-instance($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $output-width, $output-margin-right, $output-margin-left);
565
-
566
- // If debug mode, print instance
567
- @include flint-debug-instance($calc-key);
568
-
569
- }
570
- }
571
- }
1
+ // Outputs calculated styles
2
+ // -------------------------------------------------------------------------------
3
+ // @param $width [number] : width
4
+ // @param $margin-right [number] : right margin
5
+ // @param $margin-left [number] : left margin
6
+ // -------------------------------------------------------------------------------
7
+ // @output outputs styles
8
+
9
+ @mixin flint-output($width, $margin-right, $margin-left) {
10
+ width: $width;
11
+ margin-right: $margin-right;
12
+ margin-left: $margin-left;
13
+ @content;
14
+ }
15
+
16
+ // Calculate widths, save all variables to instance
17
+ // -------------------------------------------------------------------------------
18
+ // @param $calc-key [string] : breakpoint key
19
+ // @param $calc-span [number] : span value
20
+ // @param $calc-context [number] : context value
21
+ // @param $calc-gutter [number] : gutter value
22
+ // @param $calc-shift [number] : shift value
23
+ // @param $i [number] : index if variable length is > 1
24
+ // -------------------------------------------------------------------------------
25
+ // @output calculated styles
26
+
27
+ @mixin flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i: null) {
28
+
29
+ // Default values
30
+ $output-width: 0;
31
+ $output-margin-right: 0;
32
+ $output-margin-left: 0;
33
+
34
+ // Keep track of errors
35
+ $errors: false;
36
+
37
+ // Default value for cache search result
38
+ $cached: false;
39
+
40
+ // Check if any arguments are lists if called from loop
41
+ @if $i != null {
42
+
43
+ @if length($calc-key) > 1 {
44
+ $calc-key: nth($calc-key, $i);
45
+ }
46
+ @if length($calc-span) > 1 {
47
+ $calc-span: nth($calc-span, $i);
48
+ }
49
+ @if length($calc-context) > 1 {
50
+ $calc-context: nth($calc-context, $i);
51
+ }
52
+ @if length($calc-gutter) > 1 {
53
+ $calc-gutter: nth($calc-gutter, $i);
54
+ }
55
+ @if length($calc-shift) > 1 {
56
+ $calc-shift: nth($calc-shift, $i);
57
+ }
58
+
59
+ }
60
+
61
+ // Check for cached results
62
+ @if $calc-context != "auto" and $calc-span != 0 {
63
+ @if map-has-key($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}") {
64
+
65
+ // Get results
66
+ $output-width: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 1);
67
+ $output-margin-right: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 2);
68
+ $output-margin-left: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 3);
69
+
70
+ // Declare successful search
71
+ $cached: true;
72
+ }
73
+ }
74
+
75
+ // Hide if span is zero
76
+ // ----
77
+ @if $calc-span == 0 {
78
+
79
+ // First check if it's the default, so we don't hide the element on all breakpoints
80
+ @if $calc-key == flint-get-value("settings", "default") {
81
+ @include _($calc-key) {
82
+ display: none;
83
+ }
84
+ } @else {
85
+ display: none;
86
+ }
87
+
88
+ @include flint-new-instance($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $output-width, $output-margin-right, $output-margin-left);
89
+ @include flint-debug-instance($calc-key);
90
+
91
+ } @else {
92
+
93
+ // Only run through if cache search was unsuccessful
94
+ @if $cached == false {
95
+
96
+ // Shift, no context
97
+ // ----
98
+ @if $calc-shift != null and $calc-context == null {
99
+
100
+ @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
101
+
102
+ // Save to variables for instance creation
103
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
104
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span);
105
+ $output-margin-left: ( if( $calc-shift > 0,
106
+ (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)),
107
+ (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
108
+ ));
109
+
110
+ } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
111
+
112
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4);
113
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span);
114
+ $output-margin-left: ( if( $calc-shift > 0,
115
+ (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)),
116
+ (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
117
+ ));
118
+
119
+ } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
120
+
121
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
122
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span);
123
+ $output-margin-left: ( if( $calc-shift > 0,
124
+ flint-calc-width($calc-key, $calc-shift),
125
+ flint-calc-width($calc-key, $calc-shift)
126
+ ));
127
+
128
+ } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
129
+
130
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span)));
131
+ $output-margin-right: 0;
132
+ $output-margin-left: ( if( $calc-shift > 0,
133
+ (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)),
134
+ (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
135
+ ));
136
+
137
+ } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
138
+
139
+ $output-width: (flint-calc-width($calc-key, $calc-span));
140
+ $output-margin-right: 0;
141
+ $output-margin-left: ( if( $calc-shift > 0,
142
+ flint-calc-width($calc-key, $calc-shift),
143
+ flint-calc-width($calc-key, $calc-shift)
144
+ ));
145
+
146
+ }
147
+
148
+ // Shift, context
149
+ // ----
150
+ } @else if $calc-context != null {
151
+
152
+ // Check if parent instance flint-exists
153
+ $flint-exists: flint-has-family-instance($calc-key);
154
+
155
+ @if $calc-shift != null {
156
+
157
+ @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
158
+
159
+ // Check if context is set to auto
160
+ @if $calc-context == "auto" {
161
+
162
+ // Does parent exist?
163
+ @if $flint-exists != false {
164
+ @if flint-get-value("settings", "grid") == "fluid" {
165
+
166
+ // Get parent span value
167
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
168
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
169
+ $output-margin-left: ( if( $calc-shift > 0,
170
+ (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))),
171
+ (flint-calc-margin($calc-key, -$calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")))
172
+ ));
173
+
174
+ } @else if flint-get-value("settings", "grid") == "fixed" {
175
+
176
+ // Get parent width instead of parent span for fixed grids
177
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
178
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
179
+ $output-margin-left: ( if( $calc-shift > 0,
180
+ (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))),
181
+ (flint-calc-margin($calc-key, -$calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")))
182
+ ));
183
+
184
+ }
185
+ } @else {
186
+ // Else warn that context should not be set to `auto`
187
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
188
+ // Throw error
189
+ $errors: true;
190
+ }
191
+
192
+ // Output styles normally if not set to auto
193
+ } @else {
194
+
195
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
196
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
197
+ $output-margin-left: ( if( $calc-shift > 0,
198
+ (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)),
199
+ (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context))
200
+ ));
201
+
202
+ }
203
+
204
+ } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
205
+
206
+ @if $calc-context == "auto" {
207
+ @if $flint-exists != false {
208
+ @if flint-get-value("settings", "grid") == "fluid" {
209
+
210
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*4);
211
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
212
+ $output-margin-left: ( if( $calc-shift > 0,
213
+ (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))),
214
+ (flint-calc-margin($calc-key, -$calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")))
215
+ ));
216
+
217
+ } @else if flint-get-value("settings", "grid") == "fixed" {
218
+
219
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*4);
220
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
221
+ $output-margin-left: ( if( $calc-shift > 0,
222
+ (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))),
223
+ (flint-calc-margin($calc-key, -$calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")))
224
+ ));
225
+
226
+ }
227
+ } @else {
228
+ // Else warn that context should not be set to `auto`
229
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
230
+ $errors: true;
231
+ }
232
+ // Output styles normally if not set to auto
233
+ } @else {
234
+
235
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
236
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
237
+ $output-margin-left: ( if( $calc-shift > 0,
238
+ (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)),
239
+ (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context))
240
+ ));
241
+
242
+ }
243
+
244
+ } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
245
+
246
+ @if $calc-context == "auto" {
247
+ @if $flint-exists != false {
248
+ @if flint-get-value("settings", "grid") == "fluid" {
249
+
250
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")));
251
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
252
+ $output-margin-left: ( if( $calc-shift > 0,
253
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")),
254
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))
255
+ ));
256
+
257
+ } @else if flint-get-value("settings", "grid") == "fixed" {
258
+
259
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))));
260
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
261
+ $output-margin-left: ( if( $calc-shift > 0,
262
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")),
263
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))
264
+ ));
265
+
266
+ }
267
+ } @else {
268
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
269
+ $errors: true;
270
+ }
271
+ } @else {
272
+
273
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context));
274
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
275
+ $output-margin-left: ( if( $calc-shift > 0,
276
+ flint-calc-width($calc-key, $calc-shift, $calc-context),
277
+ flint-calc-width($calc-key, $calc-shift, $calc-context)
278
+ ));
279
+
280
+ }
281
+
282
+ } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
283
+
284
+ @if $calc-context == "auto" {
285
+ @if $flint-exists != false {
286
+ @if flint-get-value("settings", "grid") == "fluid" {
287
+
288
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))));
289
+ $output-margin-right: 0;
290
+ $output-margin-left: ( if( $calc-shift > 0,
291
+ (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))),
292
+ (flint-calc-margin($calc-key, -$calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")))
293
+ ));
294
+
295
+ } @else if flint-get-value("settings", "grid") == "fixed" {
296
+
297
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))));
298
+ $output-margin-right: 0;
299
+ $output-margin-left: ( if( $calc-shift > 0,
300
+ (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))),
301
+ (flint-calc-margin($calc-key, -$calc-span, flint-get-instance-value($calc-key, "span"))) + (flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")))
302
+ ));
303
+
304
+ }
305
+ } @else {
306
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
307
+ $errors: true;
308
+ }
309
+ } @else {
310
+
311
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context)));
312
+ $output-margin-right: 0;
313
+ $output-margin-left: ( if( $calc-shift > 0,
314
+ (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)),
315
+ (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context))
316
+ ));
317
+
318
+ }
319
+
320
+ } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
321
+
322
+ @if $calc-context == "auto" {
323
+ @if $flint-exists != false {
324
+ @if flint-get-value("settings", "grid") == "fluid" {
325
+
326
+ $output-width: (flint-calc-width($calc-key, $calc-span, lint-get-instance-value($calc-key, "span")));
327
+ $output-margin-right: 0;
328
+ $output-margin-left: ( if( $calc-shift > 0,
329
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")),
330
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))
331
+ ));
332
+
333
+ } @else if flint-get-value("settings", "grid") == "fixed" {
334
+
335
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span);
336
+ $output-margin-right: 0;
337
+ $output-margin-left: ( if( $calc-shift > 0,
338
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span")),
339
+ flint-calc-width($calc-key, $calc-shift, flint-get-instance-value($calc-key, "span"))
340
+ ));
341
+
342
+ }
343
+ } @else {
344
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
345
+ $errors: true;
346
+ }
347
+ } @else {
348
+
349
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context));
350
+ $output-margin-right: 0;
351
+ $output-margin-left: ( if( $calc-shift > 0,
352
+ flint-calc-width($calc-key, $calc-shift, $calc-context),
353
+ flint-calc-width($calc-key, $calc-shift, $calc-context)
354
+ ));
355
+ }
356
+ }
357
+
358
+ // Context, no shift
359
+ // ----
360
+ } @else {
361
+
362
+ @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
363
+ @if $calc-context == "auto" {
364
+ @if $flint-exists != false {
365
+ @if flint-get-value("settings", "grid") == "fluid" {
366
+
367
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
368
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
369
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
370
+
371
+ } @else if flint-get-value("settings", "grid") == "fixed" {
372
+
373
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
374
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
375
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
376
+
377
+ }
378
+ } @else {
379
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
380
+ $errors: true;
381
+ }
382
+ } @else {
383
+
384
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
385
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
386
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context);
387
+
388
+ }
389
+
390
+ } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
391
+
392
+ @if $calc-context == "auto" {
393
+ @if $flint-exists != false {
394
+ @if flint-get-value("settings", "grid") == "fluid" {
395
+
396
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*4);
397
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
398
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
399
+
400
+ } @else if flint-get-value("settings", "grid") == "fixed" {
401
+
402
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*4);
403
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
404
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
405
+
406
+ }
407
+
408
+ } @else {
409
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
410
+ $errors: true;
411
+ }
412
+ } @else {
413
+
414
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
415
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
416
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context);
417
+
418
+ }
419
+
420
+ } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
421
+
422
+ @if $calc-context == "auto" {
423
+ @if $flint-exists != false {
424
+ @if flint-get-value("settings", "grid") == "fluid" {
425
+
426
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")));
427
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
428
+ $output-margin-left: 0;
429
+
430
+ } @else if flint-get-value("settings", "grid") == "fixed" {
431
+
432
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))));
433
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
434
+ $output-margin-left: 0;
435
+
436
+ }
437
+ } @else {
438
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
439
+ $errors: true;
440
+ }
441
+ } @else {
442
+
443
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context));
444
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context);
445
+ $output-margin-left: 0;
446
+
447
+ }
448
+
449
+ } @else if $calc-gutter == "omega" or $calc-gutter =="no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
450
+
451
+ @if $calc-context == "auto" {
452
+ @if $flint-exists != false {
453
+ @if flint-get-value("settings", "grid") == "fluid" {
454
+
455
+ $output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - (flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")));
456
+ $output-margin-right: 0;
457
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
458
+
459
+ } @else if flint-get-value("settings", "grid") == "fixed" {
460
+
461
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))));
462
+ $output-margin-right: 0;
463
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
464
+
465
+ }
466
+ } @else {
467
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
468
+ $errors: true;
469
+ }
470
+ } @else {
471
+
472
+ $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context));
473
+ $output-margin-right: 0;
474
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context);
475
+
476
+ }
477
+
478
+ } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
479
+
480
+ @if $calc-context == "auto" {
481
+ @if $flint-exists != false {
482
+ @if flint-get-value("settings", "grid") == "fluid" {
483
+
484
+ $output-width: flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"));
485
+ $output-margin-right: 0;
486
+ $output-margin-left: 0;
487
+
488
+ } @else if flint-get-value("settings", "grid") == "fixed" {
489
+
490
+ $output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span);
491
+ $output-margin-right: 0;
492
+ $output-margin-left: 0;
493
+
494
+ }
495
+ } @else {
496
+ @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`";
497
+ $errors: true;
498
+ }
499
+ } @else {
500
+
501
+ $output-width: flint-calc-width($calc-key, $calc-span, $calc-context);
502
+ $output-margin-right: 0;
503
+ $output-margin-left: 0;
504
+
505
+ }
506
+ }
507
+ }
508
+
509
+ // No context
510
+ // ----
511
+ } @else {
512
+
513
+ @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
514
+
515
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
516
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span);
517
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span);
518
+
519
+ } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
520
+
521
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4);
522
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span);
523
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span);
524
+
525
+ } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
526
+
527
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
528
+ $output-margin-right: flint-calc-margin($calc-key, $calc-span);
529
+ $output-margin-left: 0;
530
+
531
+ } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
532
+
533
+ $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
534
+ $output-margin-right: 0;
535
+ $output-margin-left: flint-calc-margin($calc-key, $calc-span);
536
+
537
+ } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
538
+
539
+ $output-width: flint-calc-width($calc-key, $calc-span);
540
+ $output-margin-right: 0;
541
+ $output-margin-left: 0;
542
+
543
+ }
544
+ }
545
+ }
546
+
547
+ // Make sure there are no errors
548
+ // ----
549
+ @if $errors == false {
550
+
551
+ // Cache result
552
+ @if $calc-context != "auto" and $calc-span != 0 and $cached == false {
553
+ $flint__cache-results: map-merge($flint__cache-results, (
554
+ "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}": ($output-width, $output-margin-right, $output-margin-left)
555
+ )) !global;
556
+ }
557
+
558
+ // Output styles
559
+ @include flint-output($output-width, $output-margin-right, $output-margin-left) {
560
+ @content;
561
+ }
562
+
563
+ // Create new instance
564
+ @include flint-new-instance($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $output-width, $output-margin-right, $output-margin-left);
565
+
566
+ // If debug mode, print instance
567
+ @include flint-debug-instance($calc-key);
568
+
569
+ }
570
+ }
571
+ }