gridle 2.0.2 → 2.0.4

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.
@@ -19,6 +19,21 @@
19
19
  }
20
20
  padding-left: 0 !important;
21
21
  padding-right: 0 !important;
22
+ margin-left: -#{gridle_get_state_var(gutter-left)};
23
+ margin-right: -#{gridle_get_state_var(gutter-right)};
24
+
25
+ // do this only when not in generate phase
26
+ // mean that we use the mixin directly
27
+ @if _gridle_is_in_generate_phase() == false {
28
+ @each $stateName, $state in gridle_get_states() {
29
+ @include gridle_state($state) {
30
+ & #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
31
+ margin-left: -#{gridle_get_state_var(gutter-left, $state)};
32
+ margin-right: -#{gridle_get_state_var(gutter-right, $state)};
33
+ }
34
+ }
35
+ }
36
+ }
22
37
  }
23
38
  }
24
39
 
@@ -41,6 +56,21 @@
41
56
  }
42
57
  padding-left: 0 !important;
43
58
  padding-right: 0 !important;
59
+ margin-left: -#{gridle_get_state_var(gutter-left)};
60
+ margin-right: -#{gridle_get_state_var(gutter-right)};
61
+
62
+ // do this only when not in generate phase
63
+ // mean that we use the mixin directly
64
+ @if _gridle_is_in_generate_phase() == false {
65
+ @each $stateName, $state in gridle_get_states() {
66
+ @include gridle_state($state) {
67
+ & #{str-replace(#{&},".state-#{gridle_get_state_var(name, $state)}","")} {
68
+ margin-left: -#{gridle_get_state_var(gutter-left, $state)};
69
+ margin-right: -#{gridle_get_state_var(gutter-right, $state)};
70
+ }
71
+ }
72
+ }
73
+ }
44
74
  }
45
75
  }
46
76
 
@@ -97,14 +127,14 @@
97
127
  @include gridle_gutter();
98
128
 
99
129
  }
100
- @mixin gridle(
130
+ @mixin gridle_grid(
101
131
  $columns,
102
132
  $context : null
103
133
  ) {
104
134
  @if $columns == grow {
105
135
  @include gridle_grid_grow();
106
136
  } @else if $columns == adapt {
107
- @include gridle_grow_adapt();
137
+ @include gridle_grid_adapt();
108
138
  } @else {
109
139
 
110
140
  @include _gridle_call(grid) {
@@ -117,7 +147,8 @@
117
147
  $name-multiplicator : gridle_get_state_var(name-multiplicator);
118
148
  $gutter-left : gridle_get_state_var(gutter-left);
119
149
  $gutter-right : gridle_get_state_var(gutter-right);
120
-
150
+ $column-width : gridle_get_state_var(column-width);
151
+
121
152
  // manage columns
122
153
  @if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
123
154
  // the columns is a saved one, get the context and column value
@@ -131,7 +162,12 @@
131
162
  }
132
163
 
133
164
  // width :
134
- $width : percentage(1 / $context * $columns);
165
+ $width : 0;
166
+ @if $column-width {
167
+ $width : $column-width * $columns;
168
+ } @else {
169
+ $width : percentage(1 / $context * $columns);
170
+ }
135
171
 
136
172
  // if flex
137
173
  @include flex-basis($width);
@@ -140,14 +176,6 @@
140
176
 
141
177
  }
142
178
  }
143
- // alias to gridle
144
- @mixin gridle_grid(
145
- $columns,
146
- $context : null
147
- ) {
148
- @include gridle($columns, $context);
149
- }
150
-
151
179
 
152
180
  //
153
181
  // Grid table
@@ -196,6 +224,30 @@
196
224
  }
197
225
  transform: translateX(-50%);
198
226
  }
227
+ @if gridle_get_state_var(dir-attribute) {
228
+ [dir="ltr"] & {
229
+ margin-left:50% !important;
230
+ margin-right:0 !important;
231
+ @if $gridle-vendor-prefix {
232
+ -webkit-transform: translateX(-50%);
233
+ -moz-transition: translateX(-50%);
234
+ -ms-transform: translateX(-50%);
235
+ -o-transform: translateX(-50%);
236
+ }
237
+ transform: translateX(-50%);
238
+ }
239
+ [dir="rtl"] & {
240
+ margin-right:50% !important;
241
+ margin-left:0 !important;
242
+ @if $gridle-vendor-prefix {
243
+ -webkit-transform: translateX(50%);
244
+ -moz-transition: translateX(50%);
245
+ -ms-transform: translateX(50%);
246
+ -o-transform: translateX(50%);
247
+ }
248
+ transform: translateX(50%);
249
+ }
250
+ }
199
251
  }
200
252
  }
201
253
 
@@ -249,122 +301,6 @@
249
301
  }
250
302
 
251
303
 
252
- //
253
- // Push
254
- //
255
- @mixin _gridle_common_push(
256
- $state : default
257
- ) {
258
- // css
259
- position:relative;
260
- }
261
- @mixin gridle_push(
262
- $columns,
263
- $context : null
264
- ) {
265
- @include _gridle_call(push) {
266
- // variables :
267
- @if type-of($context) != number {
268
- $context : gridle_get_state_var(context);
269
- }
270
- $direction : gridle_get_state_var(direction);
271
- $name-multiplicator : gridle_get_state_var(name-multiplicator);
272
-
273
- // vars :
274
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
275
- @if $direction == rtl { $width : $width*-1; }
276
- left:$width;
277
- }
278
- }
279
-
280
-
281
- //
282
- // Pull
283
- //
284
- @mixin _gridle_common_pull(
285
- $state : default
286
- ) {
287
- // css
288
- position:relative;
289
- }
290
- @mixin gridle_pull(
291
- $columns,
292
- $context : null
293
- ) {
294
- @include _gridle_call(pull) {
295
- // variables :
296
- @if type-of($context) != number {
297
- $context : gridle_get_state_var(context);
298
- }
299
- $direction : gridle_get_state_var(direction);
300
- $name-multiplicator : gridle_get_state_var(name-multiplicator);
301
-
302
- // vars :
303
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
304
- @if $direction == rtl { $width : $width*-1; }
305
- right:$width;
306
- }
307
- }
308
-
309
-
310
- //
311
- // Prefix
312
- //
313
- @mixin _gridle_common_prefix(
314
- $state : default
315
- ) {
316
- }
317
- @mixin gridle_prefix(
318
- $columns,
319
- $context : null
320
- ) {
321
- @include _gridle_call(prefix) {
322
- // vars :
323
- @if type-of($context) != number {
324
- $context : gridle_get_state_var(context);
325
- }
326
- $direction : gridle_get_state_var(direction);
327
- $name-multiplicator : gridle_get_state_var(name-multiplicator);
328
-
329
- // vars :
330
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
331
-
332
- // set value :
333
- @if $direction == rtl { margin-right:$width; }
334
- @else { margin-left:$width; }
335
- }
336
- }
337
-
338
-
339
- //
340
- // Suffix
341
- //
342
- @mixin _gridle_common_suffix(
343
- $state : default
344
- ) {
345
- }
346
- @mixin gridle_suffix(
347
- $columns,
348
- $context : null
349
- ) {
350
- @include _gridle_call(suffix) {
351
- // vars :
352
- @if type-of($context) != number {
353
- $context : gridle_get_state_var(context);
354
- }
355
- $direction : gridle_get_state_var(direction);
356
- $name-multiplicator : gridle_get_state_var(name-multiplicator);
357
-
358
- // vars :
359
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
360
-
361
- // set value :
362
- @if $direction == rtl { margin-left:$width; }
363
- @else { margin-right:$width; }
364
- }
365
- }
366
-
367
-
368
304
  //
369
305
  // Order
370
306
  //
@@ -158,7 +158,7 @@
158
158
  //
159
159
  @function gridle_column_width(
160
160
  $columns : 1,
161
- $stateMap-or-stateName : null
161
+ $stateMap-or-stateName : current
162
162
  ) {
163
163
  $context : gridle_get_state_var(context, $stateMap-or-stateName);
164
164
  @return percentage(1 / $context * $columns);
@@ -200,6 +200,8 @@
200
200
  @if $stateMap-or-stateName
201
201
  and type-of($stateMap-or-stateName) == map
202
202
  {
203
+ // prepare state
204
+ $stateMap-or-stateName : _gridle_prepare_state_settings($stateMap-or-stateName);
203
205
  // create a new state by merging given one with defaul one
204
206
  $state : map-merge($_gridle-settings, $stateMap-or-stateName);
205
207
  // set the name with random name
@@ -228,6 +230,9 @@
228
230
  @function gridle_has_state(
229
231
  $stateName
230
232
  ) {
233
+ @if $stateName == current {
234
+ @return true;
235
+ }
231
236
  @if map-has-key($_gridle_states, unquote("#{$stateName}")) {
232
237
  @return true;
233
238
  } @else {
@@ -245,7 +250,7 @@
245
250
  //
246
251
  @function gridle_get_state_var(
247
252
  $varName,
248
- $stateMap-or-stateName : null
253
+ $stateMap-or-stateName : current
249
254
  ) {
250
255
  // if is a state :
251
256
  $state : null;
@@ -315,6 +320,9 @@
315
320
  }
316
321
  @return $list;
317
322
  }
323
+ @function gridle_states_names() {
324
+ @return gridle_get_states_names();
325
+ }
318
326
 
319
327
 
320
328
  //
@@ -408,6 +416,80 @@
408
416
  }
409
417
 
410
418
 
419
+ //
420
+ // Check if has column
421
+ //
422
+ @function gridle_has_column(
423
+ $name
424
+ ) {
425
+ $column : map-get($_gridle_columns,$name);
426
+ @if $column {
427
+ @return true;
428
+ } @else {
429
+ @return false;
430
+ }
431
+ }
432
+
433
+
434
+ @function _gridle_prepare_state_settings(
435
+ $settings
436
+ ) {
437
+ // manage gutters
438
+ $gutter-top : map-get($settings, gutter-top);
439
+ $gutter-bottom : map-get($settings, gutter-bottom);
440
+ $gutter-left : map-get($settings, gutter-left);
441
+ $gutter-right : map-get($settings, gutter-right);
442
+ $gutter-width : map-get($settings, gutter-width);
443
+ $gutter-height : map-get($settings, gutter-height);
444
+ @if $gutter-right and $gutter-left {
445
+ // calculate the gutter-width
446
+ $settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
447
+ } @else if $gutter-width {
448
+ // calculate the gutter-left and right
449
+ $settings : map-set($settings, gutter-left, $gutter-width * .5);
450
+ $settings : map-set($settings, gutter-right, $gutter-width * .5);
451
+ }
452
+ @if $gutter-top and $gutter-bottom {
453
+ // calculate the gutter-height
454
+ $settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
455
+ } @else if $gutter-height {
456
+ // calculate the gutter-bottom and top
457
+ $settings : map-set($settings, gutter-bottom, $gutter-height * .5);
458
+ $settings : map-set($settings, gutter-top, $gutter-height * .5);
459
+ }
460
+
461
+ // return prepared settings
462
+ @return $settings;
463
+ }
464
+
465
+
466
+ //
467
+ // Extend a state
468
+ //
469
+ @function _gridle_inherit_state(
470
+ $state,
471
+ $extend-state
472
+ ) {
473
+ $extend-state-name : gridle_get_state_var(name, $extend-state);
474
+ $state-name : gridle_get_state_var(name, $state);
475
+ $has-state : gridle_has_state($state-name);
476
+ $has-extend-state : gridle_has_state($extend-state-name);
477
+ @if $has-state and $has-extend-state {
478
+ // we do nothing if this is nested existing states
479
+ @return $state;
480
+ } @else if $has-extend-state {
481
+ // if the base state is a registered one
482
+ // keep the extend state and extend it with the wanted state
483
+ @return map-merge($extend-state, $state);
484
+ } @else {
485
+ // otherwise, the base state is a custom one so we keep
486
+ // it and extend the wanted state with it
487
+ $new-state : map-remove($extend-state, name); // remove the name is important here!
488
+ @return map-merge($state, $new-state);
489
+ }
490
+ }
491
+
492
+
411
493
  //
412
494
  // Get the padding value
413
495
  //
@@ -723,6 +805,110 @@
723
805
  }
724
806
 
725
807
 
808
+ //
809
+ // Parse gridle mixin list
810
+ //
811
+ @function _gridle_parse_gridle_mixin_list(
812
+ $list
813
+ ) {
814
+ // map
815
+ $map : ();
816
+
817
+ // context
818
+ $context : null;
819
+ $of : index($list, of);
820
+ @if $of {
821
+ $context : nth($list, ($of + 1));
822
+ $list : remove-nth($list,$of);
823
+ $list : remove-nth($list,$of);
824
+ } @else {
825
+ $ctx : index($list, context);
826
+ @if $ctx {
827
+ $context : nth($list, ($ctx + 1));
828
+ $list : remove-nth($list,$ctx);
829
+ $list : remove-nth($list,$ctx);
830
+ }
831
+ }
832
+
833
+ // grid
834
+ $gr : nth($list, 1);
835
+ @if type-of($gr) == number or $gr == adapt or $gr == grow or gridle_has_column($gr) {
836
+ $map : map-set($map, grid, $gr $context);
837
+ $list : remove-nth($list,1);
838
+ }
839
+
840
+ // prefix
841
+ $prefix : null;
842
+ $at : index($list, at);
843
+ @if $at {
844
+ $map : map-set($map, prefix, nth($list,($at + 1)) $context);
845
+ $list : remove-nth($list,$at);
846
+ $list : remove-nth($list,$at);
847
+ }
848
+
849
+ // loop on each parameters
850
+ $prop_values : ();
851
+ $prop_name : null;
852
+ $list : append($list, _gridle-last);
853
+ @each $param in $list {
854
+
855
+ @if $param != with and $param != 'and' {
856
+ @if map-get($_gridle-packages, $param) or $param == _gridle-last {
857
+ @if $prop_name {
858
+ $values : true;
859
+ @if length($prop_values) > 0 {
860
+ $values : $prop_values;
861
+ $prop_values : ();
862
+ }
863
+ $map : map-set($map, $prop_name, $values);
864
+ }
865
+ $prop_name : $param;
866
+ } @else {
867
+ $prop_values : append($prop_values, $param);
868
+ }
869
+ }
870
+ }
871
+
872
+ // return the map
873
+ @return $map;
874
+ }
875
+
876
+
877
+ //
878
+ // Get set map from string
879
+ //
880
+ @function _gridle_get_gridle_set_map_from_list(
881
+ $list
882
+ ) {
883
+ // loop on each list element to split into states lists
884
+ $state : current;
885
+ $map : ();
886
+ @each $prop in $list {
887
+ @if map-get($map, $state) == null {
888
+ $map : map-set($map, $state, ());
889
+ }
890
+ @if type-of($prop) == string and gridle_has_state($prop) {
891
+ $state : $prop;
892
+ } @else {
893
+ $ls : map-get($map, $state);
894
+ $ls : append($ls, $prop);
895
+ $map : map-set($map, $state, $ls);
896
+ }
897
+ }
898
+
899
+ // loop on each states
900
+ @each $stateName, $props in $map {
901
+ $props_map : _gridle_parse_gridle_mixin_list($props);
902
+ @if type-of($props_map) == map {
903
+ $map : map-set($map, $stateName, $props_map);
904
+ } @else {
905
+ $map : map-set($map, $stateName, null);
906
+ }
907
+ }
908
+ @return $map;
909
+ }
910
+
911
+
726
912
  //
727
913
  // Get the media query for a particular state, or with, etc...
728
914
  //