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.
- checksums.yaml +4 -4
- data/lib/gridle.rb +2 -2
- data/stylesheets/gridle/_api.scss +286 -8
- data/stylesheets/gridle/_driver-default.scss +102 -157
- data/stylesheets/gridle/_driver-flex.scss +64 -128
- data/stylesheets/gridle/_functions.scss +188 -2
- data/stylesheets/gridle/_generate-mixins.scss +9 -11
- data/stylesheets/gridle/_init.scss +7 -4
- data/stylesheets/gridle/_mixins.scss +122 -49
- data/stylesheets/gridle/_settings-mixins.scss +11 -51
- metadata +3 -3
@@ -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
|
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
|
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 :
|
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 :
|
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 :
|
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
|
//
|