gridle 1.3.36 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,12 +5,12 @@
5
5
  // |------------------------------------------------------
6
6
 
7
7
 
8
- /**
9
- * Generate a custom class for all the states
10
- *
11
- * @param list $pattern The name pattern of the class
12
- * @param list $statesNames The states names to generate
13
- */
8
+ //
9
+ // Generate a custom class for all the states
10
+ //
11
+ // @param list $pattern The name pattern of the class
12
+ // @param list $statesNames The states names to generate
13
+ //
14
14
  @mixin gridle_generate_custom_class(
15
15
  $pattern,
16
16
  $statesNames : null
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  // classes :
38
- $classes : _gridle_get_var_value(classes, $stateName);
38
+ $classes : gridle_get_state_var(classes, $stateName);
39
39
 
40
40
  // genrate the classname :
41
41
  @if $classes
@@ -49,197 +49,238 @@
49
49
  }
50
50
  }
51
51
 
52
+
53
+ //
52
54
  // Generate all helpers classes
53
- // All the classes generated are not wrapper in gridle_state
54
- // in this mixin... Just the names are generated accordingly to the
55
- // requested state
55
+ //
56
56
  @mixin _gridle_generate_helper_classes (
57
57
  $state : null,
58
- $what : null
58
+ $package : null
59
59
  ) {
60
60
  // helpers :
61
- @if $what == null or index($what, float) or index($what, helpers) {
62
- #{_gridle_classname($gridle-float-left-name-pattern, $state)} {
61
+ @if _gridle_need_to_generate(float, $package) {
62
+ #{_gridle_classname(float, $state, left)} {
63
63
  @include gridle_float(left);
64
64
  }
65
- #{_gridle_classname($gridle-float-right-name-pattern, $state)} {
65
+ #{_gridle_classname(float, $state, right)} {
66
66
  @include gridle_float(right);
67
67
  }
68
68
  }
69
69
 
70
- @if $what == null or index($what, clear) or index($what, helpers) {
71
- #{_gridle_classname($gridle-clear-name-pattern, $state)} {
70
+ @if _gridle_need_to_generate(clear, $package) {
71
+ #{_gridle_classname(clear, $state)} {
72
72
  @include gridle_clear(both);
73
73
  }
74
- #{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
74
+ #{_gridle_classname(clear, $state, left)} {
75
75
  @include gridle_clear(left);
76
76
  }
77
- #{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
77
+ #{_gridle_classname(clear, $state, right)} {
78
78
  @include gridle_clear(right);
79
79
  }
80
80
  }
81
81
 
82
- @if $what == null or index($what, no_gutter) or index($what, no_margin) or index($what, helpers) {
83
- #{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
84
- #{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
85
- @include gridle_no_margin();
82
+ @if _gridle_need_to_generate(no-gutter, $package) {
83
+ #{_gridle_classname(no-gutter, $state)} {
84
+ @include gridle_no_gutter();
86
85
  }
87
- #{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
88
- #{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
89
- @include gridle_no_margin(left);
86
+ #{_gridle_classname(no-gutter, $state, left)} {
87
+ @include gridle_no_gutter(left);
90
88
  }
91
- #{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
92
- #{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
93
- @include gridle_no_margin(right);
89
+ #{_gridle_classname(no-gutter, $state, right)} {
90
+ @include gridle_no_gutter(right);
94
91
  }
95
- #{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
96
- #{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
97
- @include gridle_no_margin(top);
92
+ #{_gridle_classname(no-gutter, $state, top)} {
93
+ @include gridle_no_gutter(top);
98
94
  }
99
- #{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
100
- #{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
101
- @include gridle_no_margin(bottom);
95
+ #{_gridle_classname(no-gutter, $state, bottom)} {
96
+ @include gridle_no_gutter(bottom);
102
97
  }
103
98
  }
104
99
 
105
- @if $what == null or index($what, gutter) or index($what, margin) or index($what, helpers) {
106
- #{_gridle_classname($gridle-gutter-name-pattern, $state)},
107
- #{_gridle_classname($gridle-margin-name-pattern, $state)} {
108
- @include gridle_margin(left right);
100
+ @if _gridle_need_to_generate(gutter, $package) {
101
+ #{_gridle_classname(gutter, $state)} {
102
+ @include gridle_gutter(top right bottom left);
109
103
  }
110
- #{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
111
- #{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
112
- @include gridle_margin(left);
104
+ #{_gridle_classname(gutter, $state, left)} {
105
+ @include gridle_gutter(left);
113
106
  }
114
- #{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
115
- #{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
116
- @include gridle_margin(right);
107
+ #{_gridle_classname(gutter, $state, right)} {
108
+ @include gridle_gutter(right);
117
109
  }
118
- #{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
119
- #{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
120
- @include gridle_margin(top);
110
+ #{_gridle_classname(gutter, $state, top)} {
111
+ @include gridle_gutter(top);
121
112
  }
122
- #{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
123
- #{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
124
- @include gridle_margin(bottom);
113
+ #{_gridle_classname(gutter, $state, bottom)} {
114
+ @include gridle_gutter(bottom);
125
115
  }
126
116
  }
127
117
 
128
- @if $what == null or index($what, auto_height) or index($what, helpers) {
129
- #{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
118
+ @if _gridle_need_to_generate(auto-height, $package) {
119
+ #{_gridle_classname(auto-height, $state)} {
130
120
  height:inherit;
131
121
  }
132
122
  }
133
123
 
134
- @if $what == null or index($what, centered) or index($what, helpers) {
135
- #{_gridle_classname($gridle-centered-name-pattern, $state)} {
136
- @include gridle_centered(null);
124
+ @if _gridle_need_to_generate(grid-centered, $package) {
125
+ #{_gridle_classname(grid-centered, $state)} {
126
+ @include gridle_grid_centered();
127
+ }
128
+ }
129
+
130
+ @if _gridle_need_to_generate(container, $package) {
131
+ #{_gridle_classname(container, $state)} {
132
+ @include gridle_container();
133
+ }
134
+ }
135
+
136
+ @if _gridle_need_to_generate(row, $package) {
137
+ #{_gridle_classname(row, $state)} {
138
+ @include gridle_row(false);
139
+ }
140
+ #{_gridle_classname(row, $state, reverse)} {
141
+ @include gridle_row(true);
142
+ }
143
+ }
144
+
145
+ @if _gridle_need_to_generate(row-full, $package) {
146
+ #{_gridle_classname(row-full, $state)} {
147
+ @include gridle_row_full();
148
+ }
149
+ }
150
+
151
+ @if _gridle_need_to_generate(col, $package) {
152
+ #{_gridle_classname(col, $state)} {
153
+ @include gridle_col(false);
154
+ }
155
+ #{_gridle_classname(col, $state, reverse)} {
156
+ @include gridle_col(true);
157
+ }
158
+ }
159
+
160
+ @if _gridle_need_to_generate(grid-table, $package) {
161
+ #{_gridle_classname(grid-table, $state)} {
162
+ @include gridle_grid_table();
137
163
  }
138
164
  }
139
165
 
140
- @if $what == null or index($what, parent) or index($what, helpers) {
141
- #{_gridle_classname($gridle-parent-name-pattern, $state)} {
142
- @include _gridle_parent();
166
+ @if _gridle_need_to_generate(grid-adapt, $package) {
167
+ #{_gridle_classname(grid-adapt, $state)} {
168
+ @include gridle_grid_adapt();
143
169
  }
144
170
  }
145
171
 
146
- @if $what == null or index($what, vertical_align) or index($what, helpers) {
147
- #{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
148
- @include _gridle_vertical_align();
172
+ @if _gridle_need_to_generate(grid-grow, $package) {
173
+ #{_gridle_classname(grid-grow, $state)} {
174
+ @include gridle_grid_grow();
175
+ }
176
+ }
177
+
178
+ @if _gridle_need_to_generate(row-align, $package) {
179
+ #{_gridle_classname(row-align, $state, left)} {
180
+ @include gridle_row_align(left);
181
+ }
182
+ #{_gridle_classname(row-align, $state, center)} {
183
+ @include gridle_row_align(center);
149
184
  }
150
- #{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
151
- @include _gridle_vertical_align(top);
185
+ #{_gridle_classname(row-align, $state, right)} {
186
+ @include gridle_row_align(right);
152
187
  }
153
- #{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
154
- @include _gridle_vertical_align(bottom);
188
+ #{_gridle_classname(row-align, $state, middle)} {
189
+ @include gridle_row_align(middle);
190
+ }
191
+ #{_gridle_classname(row-align, $state, top)} {
192
+ @include gridle_row_align(top);
193
+ }
194
+ #{_gridle_classname(row-align, $state, bottom)} {
195
+ @include gridle_row_align(bottom);
196
+ }
197
+ @if gridle_is_driver(flex) {
198
+ #{_gridle_classname(row-align, $state, around)} {
199
+ @include gridle_row_align(around);
200
+ }
201
+ #{_gridle_classname(row-align, $state, between)} {
202
+ @include gridle_row_align(between);
203
+ }
204
+ }
205
+ }
206
+
207
+ //
208
+ // Wrapping
209
+ //
210
+ @if _gridle_need_to_generate(nowrap, $package) {
211
+ #{_gridle_classname(nowrap, $state)} {
212
+ @include gridle_nowrap();
213
+ }
214
+ }
215
+ @if _gridle_need_to_generate(wrap, $package) {
216
+ #{_gridle_classname(wrap, $state)} {
217
+ @include gridle_wrap();
155
218
  }
156
219
  }
157
220
 
158
- /**
159
- * Visible, hide, etc...
160
- */
161
- @if $what == null or index($what, hide) or index($what, helpers) {
162
- #{_gridle_classname($gridle-hide-name-pattern, $state)} {
163
- @include gridle_hide(null);
221
+ //
222
+ // Visible, hide, etc...
223
+ //
224
+ @if _gridle_need_to_generate(hide, $package) {
225
+ #{_gridle_classname(hide, $state)} {
226
+ @include gridle_hide();
164
227
  }
165
228
  }
166
229
 
167
- @if $what == null or index($what, not_visible) or index($what, helpers) {
168
- #{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
169
- @include gridle_not_visible(null);
230
+ @if _gridle_need_to_generate(not-visible, $package) {
231
+ #{_gridle_classname(not-visible, $state)} {
232
+ @include gridle_not_visible();
170
233
  }
171
234
  }
172
235
 
173
- @if $what == null or index($what, show) or index($what, helpers) {
174
- #{_gridle_classname($gridle-show-name-pattern, $state)} {
175
- @include gridle_show(null);
236
+ @if _gridle_need_to_generate(show, $package) {
237
+ #{_gridle_classname(show, $state)} {
238
+ @include gridle_show();
176
239
  }
177
- #{_gridle_classname($gridle-show-inline-name-pattern, $state)} {
178
- @include gridle_show_inline(null);
240
+ }
241
+
242
+ @if _gridle_need_to_generate(show-inline, $package) {
243
+ #{_gridle_classname(show-inline, $state)} {
244
+ @include gridle_show_inline();
179
245
  }
180
246
  }
181
247
 
182
- @if $what == null or index($what, visible) or index($what, helpers) {
183
- #{_gridle_classname($gridle-visible-name-pattern, $state)} {
184
- @include gridle_visible(null);
248
+ @if _gridle_need_to_generate(visible, $package) {
249
+ #{_gridle_classname(visible, $state)} {
250
+ @include gridle_visible();
185
251
  }
186
252
  }
187
253
 
188
- /**
189
- * Clear each class :
190
- */
191
- @if $what == null or index($what, clear_each) or index($what, helpers) {
254
+ //
255
+ // Clear each class :
256
+ //
257
+ @if _gridle_need_to_generate(clear-each, $package) {
192
258
  @each $clearName, $clearMap in $_gridle_clear_classes {
193
259
  // get count :
194
260
  $clearCount : map-get($clearMap, clearEach);
195
261
  // what to clear :
196
262
  $clearWhat : map-get($clearMap, clearWhat);
197
263
  // generate the class :
198
- #{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
199
- @include _gridle_clear_each($clearCount, $clearWhat);
264
+ #{_gridle_classname(clear-each, $state, $clearCount)} {
265
+ @include gridle_clear_each($clearCount, $clearWhat);
200
266
  }
201
267
  }
202
268
  }
203
269
 
204
- // debug colors :
205
- $debug : _gridle_get_var_value(debug, $state);
206
- @if $debug and ( $what == null or index($what, debug_colors) or index($what, helpers) ) {
207
- // debug color classes :
208
- #{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
209
- #{$gridle-debug-selector} {
210
- background-color : #edeeb2;
211
- }
212
- }
213
- #{_gridle_classname($gridle-debug-color-name-pattern, $state, 2)} {
214
- #{$gridle-debug-selector} {
215
- background-color : #fae4a7;
216
- }
217
- }
218
- #{_gridle_classname($gridle-debug-color-name-pattern, $state, 3)} {
219
- #{$gridle-debug-selector} {
220
- background-color : #f5eacc;
221
- }
222
- }
223
- #{_gridle_classname($gridle-debug-color-name-pattern, $state, 4)} {
224
- #{$gridle-debug-selector} {
225
- background-color : #eebdb2;
226
- }
227
- }
228
- #{_gridle_classname($gridle-debug-color-name-pattern, $state, 5)} {
229
- #{$gridle-debug-selector} {
230
- background-color : #d4b2ee;
231
- }
232
- }
233
- #{_gridle_classname($gridle-debug-color-name-pattern, $state, 6)} {
234
- #{$gridle-debug-selector} {
235
- background-color : #b2d8ee;
236
- }
270
+ //
271
+ // debug
272
+ //
273
+ @if _gridle_need_to_generate(row-debug, $package) {
274
+ #{_gridle_classname(row-debug, $state)} {
275
+ @include gridle_row_debug();
237
276
  }
238
277
  }
239
278
  }
240
279
 
241
280
 
242
- // generate settings json :
281
+ //
282
+ // Generate json settings
283
+ //
243
284
  @mixin gridle_generate_json_settings() {
244
285
 
245
286
  // settings content :
@@ -258,7 +299,7 @@
258
299
 
259
300
  $value : null;
260
301
  @if $varName == "query" {
261
- $value : _gridle_get_media_query($stateName);
302
+ $value : gridle_get_media_query($stateName);
262
303
  } @else {
263
304
  $value : map-get($state,$varName);
264
305
  }
@@ -267,12 +308,19 @@
267
308
  $gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : null,";
268
309
  } @elseif type-of($value) == bool {
269
310
  $gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : #{$value},";
311
+ } @elseif type-of($value) == map {
312
+ $gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : {";
313
+ @each $vn, $vv in $value {
314
+ $gridle-settings-states : "#{$gridle-settings-states} \"#{$vn}\" : \"#{$vv}\","
315
+ }
316
+ $gridle-settings-states : "#{$gridle-settings-states} \"_\" : true";
317
+ $gridle-settings-states : "#{$gridle-settings-states} },";
270
318
  } @else {
271
319
  $gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : \"#{$value}\",";
272
320
  }
273
321
  }
274
322
 
275
- $gridle-settings-states : "#{$gridle-settings-states} \"_gridle\" : true";
323
+ $gridle-settings-states : "#{$gridle-settings-states} \"_\" : true";
276
324
 
277
325
  @if $i >= $statesCount - 1 {
278
326
  $gridle-settings-states : "#{$gridle-settings-states} }";
@@ -293,15 +341,7 @@
293
341
  // states :
294
342
  $gridle-settings : "#{$gridle-settings}, \"states\" : #{$gridle-settings-states}";
295
343
 
296
- // debug devices :
297
- $debug_devices : $_gridle_states_debug_devices;
298
- @if length($_gridle_states_debug_devices) <= 0 {
299
- $debug_devices : null;
300
- }
301
- // $gridle-settings : "#{$gridle-settings}, \"debugDevices\" : { #{$debug_devices} }";
302
-
303
344
  // settings :
304
- // $gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
305
345
  $gridle-settings : "#{$gridle-settings} }";
306
346
  #gridle-settings {
307
347
  content : $gridle-settings;
@@ -309,105 +349,91 @@
309
349
  }
310
350
 
311
351
 
312
- // gridle mixin :
313
- // Generate all the classes needed for a grid
352
+ //
353
+ // Generate classes
354
+ //
314
355
  @mixin gridle_generate_classes(
315
- $stateName : null,
316
- $what : null,
356
+ $states : all,
357
+ $package : all,
317
358
  $scope : null
318
359
  ) {
319
- // if the what parameter is not null, mean that we need to generate only certain classes in a certain order :
320
- @if $what
321
- {
322
- // loop on each what item to generate the corresponding classes :
323
- @each $w in $what
324
- {
325
- // check if a scope exist :
326
- @if $scope {
327
- // wrapp grid into scope :
328
- .#{$scope} {
329
- @include _gridle_generate_classes($stateName, ( $w ), true);
330
- }
331
- } @else {
332
- // generate classes :
333
- @include _gridle_generate_classes($stateName, ( $w ), false);
334
- }
335
- }
336
- }
337
- @else
338
- {
339
- // don't have any "what" parameter so generate all the classes
340
- // check if a scope exist :
341
- @if $scope {
342
- // wrapp grid into scope :
343
- .#{$scope} {
344
- @include _gridle_generate_classes($stateName, null, true);
345
- }
346
- } @else {
347
- // generate classes :
348
- @include _gridle_generate_classes($stateName, null, false);
360
+
361
+ // init gridle
362
+ @include gridle_init();
363
+
364
+ // check if a scope exist
365
+ @if $scope {
366
+ // wrapp grid into scope
367
+ .#{$scope} {
368
+ @include _gridle_generate_classes($states, $package, true);
349
369
  }
370
+ } @else {
371
+ // generate classes
372
+ @include _gridle_generate_classes($states, $package, false);
350
373
  }
351
374
  }
352
375
  $_gridle_generateOnlyOnce : true; // keep track of generate once classes
353
376
  @mixin _gridle_generate_classes(
354
- $stateName : null,
355
- $what : null,
377
+ $states : all,
378
+ $package : all,
356
379
  $has-parent : false
357
- ) {
358
-
359
- // generate these classes only once :
380
+ ) {
381
+
382
+ // set that we are in generate phase (that can be used anywhere)
383
+ $_gridle_is_in_generate_phase : true !global;
384
+
385
+ // get all the registered states that will be processed after
386
+ // to determine which states to generate
387
+ $generate-states : gridle_get_states_names();
388
+
389
+ // if we have provided some states to generate
390
+ @if $states != null and $states != all {
391
+ // check if we have only some - in the states list
392
+ // mean that we want to only remove these specified states
393
+ // from the all states list
394
+ $onlyRemove : true;
395
+ @each $stateName in $states {
396
+ @if str-slice($stateName,1,1) != '-' {
397
+ $onlyRemove : false;
398
+ }
399
+ }
400
+ // if we want to only remove some states
401
+ @if $onlyRemove {
402
+ // loop on all the states to remove
403
+ @each $stateName in $states {
404
+ $sn : str-slice($stateName,2);
405
+ $idx : index($generate-states, $sn);
406
+ @if $idx != null {
407
+ $generate-states : remove-nth($generate-states,$idx);
408
+ }
409
+ }
410
+ } @else {
411
+ $generate-states : $states;
412
+ }
413
+ }
414
+
415
+
416
+ // generate these classes only once
360
417
  @if $_gridle_generateOnlyOnce
361
418
  {
362
419
 
363
- // update status :
420
+ // update status
364
421
  $_gridle_generateOnlyOnce : false;
365
422
 
366
423
  // | ------------------------
367
424
  // | Windows 8 fix
368
425
  // | ------------------------
369
426
 
370
- // Windows 8 fix for snap mode :
427
+ // Windows 8 fix for snap mode
371
428
  @media screen and (max-width: 400px) {
372
429
  @-ms-viewport { width: device-width; }
373
430
  }
374
431
 
375
-
376
432
  // | ------------------------
377
- // | Container
433
+ // | JSON Settings
378
434
  // | ------------------------
379
435
 
380
- // generate container class :
381
- @if $what == null or index($what, container) or index($what, default)
382
- {
383
- $container-selector : ();
384
- $container-selector : append( $container-selector, unquote("#{_gridle_classname($gridle-container-name-pattern)}"), comma);
385
- #{$container-selector} {
386
- @include gridle_container();
387
- }
388
- }
389
-
390
-
391
- // | ------------------------
392
- // | Parent selector
393
- // | ------------------------
394
-
395
- // parent common css :
396
- @if $what == null or index($what, parent) or index($what, default)
397
- {
398
- $parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
399
- #{$parentSelector} {
400
- @extend %gridle-clearfix;
401
- @extend %gridle-parent-common;
402
- }
403
- }
404
-
405
-
406
- // // | ------------------------
407
- // // | JSON Settings
408
- // // | ------------------------
409
-
410
- // // generate json settings :
436
+ // generate json settings
411
437
  @if $gridle-generate-json-settings
412
438
  {
413
439
  @include gridle_generate_json_settings();
@@ -415,210 +441,123 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
415
441
 
416
442
  }
417
443
 
444
+ // loop on each states to generate all the classes
445
+ @each $stateName in $generate-states {
418
446
 
419
- // | ------------------------
420
- // | Set the list of states to generate
421
- // | ------------------------
422
- $states : $_gridle_states;
423
- @if $stateName and _gridle_has_state($stateName) {
424
- $states : map-set((), $stateName, _gridle_get_state($stateName));
425
- }
426
-
427
-
428
- // | ------------------------
429
- // | Store all the generated common selectors
430
- // | ------------------------
431
-
432
- // generate all selector for extends :
433
- $grid-common-selector : ();
434
- $push-common-selector : ();
435
- $pull-common-selector : ();
436
- $prefix-common-selector : ();
437
- $suffix-common-selector : ();
438
-
439
-
440
- // | ------------------------
441
- // | Media queries classes common selectors
442
- // | ------------------------
443
-
444
- // generate all classes for media queries :
445
- @each $stateName, $state in $states {
446
-
447
- // setup vars :
448
- $media : $stateName;
449
- $classes : map-get($state, classes);
450
- $context : map-get($state, context);
451
- $name-multiplicator : map-get($state, name-multiplicator);
452
- $generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
453
- $generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
454
- $generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
455
- $generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
456
-
457
- // generate classes :
458
- @if $classes == true and $context {
459
-
460
- // get specials columns :
461
- $columnsMap : map-merge((), $_gridle_columns);
462
-
463
- // register each default columns :
464
- @for $j from 0 through $context {
465
-
466
- // name :
467
- $columnName : "#{$j*$name-multiplicator}";
468
- $columnWidth : $j * $name-multiplicator;
469
-
470
- // // create a column :
471
- $col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
472
-
473
- // // add column in columns map :
474
- $columnsMap : map-set($columnsMap, $columnName, $col);
475
- }
476
-
477
- // loop on each columns to generate common selector :
478
- @each $columnName, $column in $columnsMap {
479
-
480
- // add selector :
481
- @if $what == null or index($what, grid) or index($what, default) {
482
- $grid-common-selector : append( $grid-common-selector, unquote("#{_gridle_classname($gridle-grid-name-pattern, $media, $columnName)}"), comma );
483
- }
484
- @if $generate-push-classes and ($what == null or index($what, push) or index($what, default)) {
485
- $push-common-selector : append( $push-common-selector, unquote("#{_gridle_classname($gridle-push-name-pattern, $media, $columnName)}"), comma );
486
- }
487
- @if $generate-pull-classes and ($what == null or index($what, pull) or index($what, default)) {
488
- $pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_classname($gridle-pull-name-pattern, $media, $columnName)}"), comma );
489
- }
490
- @if $generate-prefix-classes and ($what == null or index($what, prefix) or index($what, default)) {
491
- $prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)}"), comma );
492
- }
493
- @if $generate-suffix-classes and ($what == null or index($what, suffix) or index($what, default)) {
494
- $suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)}"), comma );
495
- }
496
- }
497
- }
498
- }
499
-
500
- // common css :
501
- @if $what == null or index($what, grid) or index($what, default) {
502
- #{$grid-common-selector} {
503
- @include _gridle_grid_common();
504
- }
505
- }
506
- @if $what == null or index($what, push) or index($what, default) {
507
- #{$push-common-selector} {
508
- @include _gridle_push_common();
509
- }
510
- }
511
- @if $what == null or index($what, pull) or index($what, default) {
512
- #{$pull-common-selector} {
513
- @include _gridle_pull_common();
514
- }
515
- }
516
- @if $what == null or index($what, prefix) or index($what, default) {
517
- #{$prefix-common-selector} {
518
- @include _gridle_prefix_common();
519
- }
520
- }
521
- @if $what == null or index($what, suffix) or index($what, default) {
522
- #{$suffix-common-selector} {
523
- @include _gridle_suffix_common();
524
- }
525
- }
526
-
527
-
528
- // | ------------------------
529
- // | Media queries classes
530
- // | ------------------------
531
-
532
- // generate all classes for differents media queries :
533
- @each $stateName, $state in $states {
534
-
535
- // setup vars :
536
- $classes : _gridle_get_var_value(classes, $state);
537
- $context : _gridle_get_var_value(context, $state);
538
- $name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
539
- $generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
540
- $generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
541
- $generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
542
- $generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
543
- $generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
544
-
545
- // generate all media queries grid classes :
546
- @if $classes == true {
547
-
548
- // parent common css :
549
- $parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
550
- #{$parentSelector} {
551
- @extend %gridle-clearfix;
552
- @extend %gridle-parent-common;
553
- }
447
+ // get the actual state
448
+ $state : gridle_get_state($stateName);
554
449
 
555
- // generate all the classes :
556
- @include gridle_state($stateName, $has-parent) {
557
-
558
- // get specials columns :
559
- $columnsMap : map-merge((), $_gridle_columns);
450
+ // debug
451
+ @debug("Generate classes for state #{$stateName}");
560
452
 
561
- // register each default columns :
562
- @for $j from 0 through $context {
563
-
564
- // name :
565
- $columnName : "#{$j*$name-multiplicator}";
566
- $columnWidth : $j * $name-multiplicator;
453
+ // scope all the classes in a media query
454
+ @include gridle_state($state, false) {
567
455
 
568
- // // create a column :
569
- $col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
456
+ // setup vars :
457
+ $classes : gridle_get_state_var(classes, $state);
570
458
 
571
- // // add column in columns map :
572
- $columnsMap : map-set($columnsMap, $columnName, $col);
573
- }
459
+ // stop here if no classes wanted
460
+ @if $classes {
574
461
 
575
- // generate all classes for columns :
576
- @each $columnName, $column in $columnsMap {
462
+ // generate all classes for columns
463
+ $i : 0;
464
+ @each $columnName, $column in gridle_get_columns($state) {
577
465
 
578
- // variables :
466
+ // variables
579
467
  $columnsCount : map-get($column, columns);
580
468
  $columnsContext : map-get($column, context);
581
469
  $columnsNameMultiplicator : map-get($column, name-multiplicator);
582
470
 
583
- // extend context in state (for columns) :
471
+ // extend context in state (for columns)
584
472
  $extendedState : map-merge($state, (
585
473
  context : $columnsContext,
586
474
  name-multiplicator : $columnsNameMultiplicator // inject the name multiplicator here getted from column to handle custom registered columns
587
475
  ));
588
476
 
589
- // classes :
590
- @if $what == null or index($what, grid) or index($what, default) {
591
- #{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
592
- @include _gridle($columnsCount, $extendedState);
477
+ // classes
478
+ @if _gridle_need_to_generate(grid, $package) {
479
+ #{_gridle_classname(grid, $stateName, $columnName)} {
480
+ @include gridle($columnsCount, $columnsContext);
593
481
  }
594
482
  }
595
- @if $generate-push-classes == true and ($what == null or index($what, push) or index($what, default)) {
596
- #{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
597
- @include _gridle_push($columnsCount, $extendedState);
483
+ @if _gridle_need_to_generate(push, $package) {
484
+ #{_gridle_classname(push, $stateName, $columnName)} {
485
+ @include gridle_push($columnsCount, $columnsContext);
598
486
  }
599
487
  }
600
- @if $generate-pull-classes == true and ($what == null or index($what, pull) or index($what, default)) {
601
- #{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
602
- @include _gridle_pull($columnsCount, $extendedState);
488
+ @if _gridle_need_to_generate(pull, $package) {
489
+ #{_gridle_classname(pull, $stateName, $columnName)} {
490
+ @include gridle_pull($columnsCount, $columnsContext);
603
491
  }
604
492
  }
605
- @if $generate-prefix-classes == true and ($what == null or index($what, prefix) or index($what, default)) {
606
- #{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
607
- @include _gridle_prefix($columnsCount, $extendedState);
493
+ @if _gridle_need_to_generate(prefix, $package) {
494
+ #{_gridle_classname(prefix, $stateName, $columnName)} {
495
+ @include gridle_prefix($columnsCount, $columnsContext);
608
496
  }
609
497
  }
610
- @if $generate-suffix-classes == true and ($what == null or index($what, suffix) or index($what, default)) {
611
- #{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
612
- @include _gridle_suffix($columnsCount, $extendedState);
498
+ @if _gridle_need_to_generate(suffix, $package) {
499
+ #{_gridle_classname(suffix, $stateName, $columnName)} {
500
+ @include gridle_suffix($columnsCount, $columnsContext);
613
501
  }
614
502
  }
503
+ @if _gridle_need_to_generate(order, $package) {
504
+ #{_gridle_classname(order, $stateName, first)} {
505
+ @include gridle_order(-1);
506
+ }
507
+ #{_gridle_classname(order, $stateName, $i)} {
508
+ @include gridle_order($i);
509
+ }
510
+ #{_gridle_classname(order, $stateName, last)} {
511
+ @include gridle_order(9999);
512
+ }
513
+ }
514
+ // up $i
515
+ $i : $i + 1;
615
516
  }
616
-
617
- // media queries helpers classes :
618
- @if $generate-helpers-classes == true {
619
- @include _gridle_generate_helper_classes($stateName, $what);
517
+
518
+ // media queries helpers classes
519
+ @include _gridle_generate_helper_classes($stateName, $package);
520
+
521
+ // handle direction on body
522
+ body {
523
+ direction: gridle_get_state_var(direction);
620
524
  }
621
525
  }
622
526
  }
623
527
  }
528
+
529
+ // apply css for states of each elements
530
+ @each $map in $_gridle_apply_css_for {
531
+ @each $stateName, $fors in $map {
532
+ @include _gridle_state($stateName, false) {
533
+ @each $f, $rules in $fors {
534
+ @if map-get($fors, $f) {
535
+ @if _gridle_need_to_generate($f, $package) {
536
+ @include gridle_selector($f, null) {
537
+ @include _gridle_map_2_css($rules);
538
+ }
539
+ }
540
+ }
541
+ }
542
+ }
543
+ }
544
+ }
545
+
546
+ // make nested grids working automatically
547
+ @if _gridle_need_to_generate(col, $package) or _gridle_need_to_generate(row, $package) {
548
+ @each $stateName, $state in gridle_get_states() {
549
+ $gutter-left : gridle_get_state_var(gutter-left, $state);
550
+ $gutter-right : gridle_get_state_var(gutter-right, $state);
551
+ @include _gridle_state($stateName, false) {
552
+ [class*="#{str-slice(_gridle_classname(grid),2)}"] > [class*="#{str-slice(_gridle_classname(row),2)}"],
553
+ [class*="#{str-slice(_gridle_classname(grid),2)}"] > [class*="#{str-slice(_gridle_classname(col),2)}"] {
554
+ margin-left: -#{$gutter-left};
555
+ margin-right: -#{$gutter-right};
556
+ }
557
+ }
558
+ }
559
+ }
560
+
561
+ // reset the variable that track if we are in generate phase or not
562
+ $_gridle_is_in_generate_phase : false !global;
624
563
  }