gridle 1.3.3 → 1.3.11
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 +4 -5
- data/stylesheets/gridle/_common-mixins.scss +19 -24
- data/stylesheets/gridle/_functions.scss +29 -31
- data/stylesheets/gridle/_generate-mixins.scss +182 -339
- data/stylesheets/gridle/_gridle.scss +4 -15
- data/stylesheets/gridle/_mixins.scss +52 -159
- data/stylesheets/gridle/_settings-mixins.scss +3 -4
- data/stylesheets/gridle/_settings.scss +0 -3
- metadata +2 -3
- data/stylesheets/gridle/_default-states.scss +0 -35
@@ -8,7 +8,7 @@
|
|
8
8
|
|
9
9
|
// |------------------------------------------------------
|
10
10
|
// |------------------------------------------------------
|
11
|
-
// Copyright (c)
|
11
|
+
// Copyright (c) 2013 Olivier Bossel
|
12
12
|
|
13
13
|
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
14
14
|
// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
@@ -29,13 +29,13 @@
|
|
29
29
|
// |------------------------------------------------------
|
30
30
|
// |------------------------------------------------------
|
31
31
|
// @created 25.03.13
|
32
|
-
// @updated
|
32
|
+
// @updated 15.05.14
|
33
33
|
// @author Olivier Bossel <olivier.bossel@gmail.com>
|
34
|
-
// @version 1.3.
|
34
|
+
// @version 1.3.1
|
35
35
|
// |------------------------------------------------------
|
36
36
|
// |------------------------------------------------------
|
37
37
|
|
38
|
-
$_gridle-version : "1.3.
|
38
|
+
$_gridle-version : "1.3.1";
|
39
39
|
|
40
40
|
|
41
41
|
|
@@ -128,14 +128,3 @@ $_gridle_states_debug_devices : (); // save the debug states devices
|
|
128
128
|
// |------------------------------------------------------
|
129
129
|
|
130
130
|
@import 'generate-mixins';
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
// |------------------------------------------------------
|
136
|
-
// |------------------------------------------------------
|
137
|
-
// | Default states
|
138
|
-
// |------------------------------------------------------
|
139
|
-
// |------------------------------------------------------
|
140
|
-
|
141
|
-
@import 'default-states';
|
@@ -4,92 +4,6 @@
|
|
4
4
|
// |------------------------------------------------------
|
5
5
|
// |------------------------------------------------------
|
6
6
|
|
7
|
-
// Helper to apply multiple config for a certain state with one mixin
|
8
|
-
@mixin gridle_set(
|
9
|
-
$settings,
|
10
|
-
$state : default
|
11
|
-
) {
|
12
|
-
|
13
|
-
// loop on each settings
|
14
|
-
@each $settingName, $settingValue in $settings
|
15
|
-
{
|
16
|
-
$sn : unquote($settingName);
|
17
|
-
$sv : $settingValue;
|
18
|
-
|
19
|
-
// check if setting name is a state :
|
20
|
-
@if _gridle_has_state($sn) {
|
21
|
-
// process the state
|
22
|
-
@include gridle_set($sv, $sn);
|
23
|
-
} @else {
|
24
|
-
@if $sn == container {
|
25
|
-
@include gridle_container($state);
|
26
|
-
} @else if $sn == grid {
|
27
|
-
@include gridle($sv, $state);
|
28
|
-
} @else if $sn == push {
|
29
|
-
@include gridle_push($sv, $state);
|
30
|
-
} @else if $sn == pull {
|
31
|
-
@include gridle_pull($sv, $state);
|
32
|
-
} @else if $sn == prefix {
|
33
|
-
@include gridle_prefix($sv, $state);
|
34
|
-
} @else if $sn == suffix {
|
35
|
-
@include gridle_suffix($sv, $state);
|
36
|
-
} @else if $sn == pull {
|
37
|
-
@include gridle_pull($sv, $state);
|
38
|
-
} @else if $sn == clear_each {
|
39
|
-
@include gridle_clear_each(nth($sv,1), nth($sv,2), $state);
|
40
|
-
} @else if $sn == centered {
|
41
|
-
@include gridle_centered($state);
|
42
|
-
} @else if $sn == parent {
|
43
|
-
@include gridle_parent($state);
|
44
|
-
} @else if $sn == vertical_align {
|
45
|
-
@include gridle_vertical_align($sv, $state);
|
46
|
-
} @else if $sn == hide {
|
47
|
-
@if $sv == true {
|
48
|
-
@include gridle_hide($state);
|
49
|
-
} @else {
|
50
|
-
@include gridle_show($state);
|
51
|
-
}
|
52
|
-
} @else if $sn == show {
|
53
|
-
@if $sv == true {
|
54
|
-
@include gridle_show($state);
|
55
|
-
} @else {
|
56
|
-
@include gridle_hide($state);
|
57
|
-
}
|
58
|
-
} @else if $sn == visible {
|
59
|
-
@if $sv == true {
|
60
|
-
@include gridle_visible($state);
|
61
|
-
} @else {
|
62
|
-
@include gridle_not_visible($state);
|
63
|
-
}
|
64
|
-
} @else if $sn == not_visible {
|
65
|
-
@if $sv == true {
|
66
|
-
@include gridle_not_visible($state);
|
67
|
-
} @else {
|
68
|
-
@include gridle_visible($state);
|
69
|
-
}
|
70
|
-
} @else if $sn == show_inline {
|
71
|
-
@if $sv == true {
|
72
|
-
@include gridle_show_inline($state);
|
73
|
-
} @else {
|
74
|
-
@include gridle_hide($state);
|
75
|
-
}
|
76
|
-
} @else if $sn == float {
|
77
|
-
@include gridle_float($sv, $state);
|
78
|
-
} @else if $sn == clear {
|
79
|
-
@include gridle_clear($sv, $state);
|
80
|
-
} @else if $sn == no_gutter
|
81
|
-
or $sn == no_margin {
|
82
|
-
@include gridle_no_gutter($sv, $state);
|
83
|
-
} @else if $sn == gutter
|
84
|
-
or $sn == margin {
|
85
|
-
@include gridle_gutter($sv, $state);
|
86
|
-
} @else {
|
87
|
-
// we do nothing
|
88
|
-
}
|
89
|
-
}
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
7
|
// Responsive helpers mixins :
|
94
8
|
@mixin gridle_state(
|
95
9
|
$states,
|
@@ -173,7 +87,7 @@
|
|
173
87
|
|
174
88
|
// Container mixin :
|
175
89
|
@mixin gridle_container(
|
176
|
-
$state :
|
90
|
+
$state : null
|
177
91
|
) {
|
178
92
|
@include _gridle_container_common($state);
|
179
93
|
}
|
@@ -183,10 +97,10 @@
|
|
183
97
|
// Set the width of the specified grid column :
|
184
98
|
@mixin gridle(
|
185
99
|
$columns,
|
186
|
-
$state :
|
100
|
+
$state : null
|
187
101
|
) {
|
188
102
|
// common :
|
189
|
-
@include _gridle_grid_common();
|
103
|
+
@include _gridle_grid_common($state);
|
190
104
|
// check if need media query :
|
191
105
|
@if $state {
|
192
106
|
@include gridle_state($state) {
|
@@ -198,7 +112,7 @@
|
|
198
112
|
}
|
199
113
|
@mixin _gridle(
|
200
114
|
$columns,
|
201
|
-
$state :
|
115
|
+
$state : null
|
202
116
|
) {
|
203
117
|
// vars :
|
204
118
|
$name : _gridle_get_var_value(name, $state);
|
@@ -210,14 +124,14 @@
|
|
210
124
|
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
211
125
|
|
212
126
|
// vars :
|
213
|
-
$width : percentage(1 / $context *
|
127
|
+
$width : percentage(1 / $context * $columns);
|
214
128
|
|
215
129
|
// set value :
|
216
130
|
width:$width;
|
217
131
|
|
218
132
|
// ie7 support :
|
219
133
|
@if $ie7-support == true {
|
220
|
-
*width: expression((this.parentNode.clientWidth/#{$context}*#{
|
134
|
+
*width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
|
221
135
|
}
|
222
136
|
|
223
137
|
// debug :
|
@@ -225,16 +139,16 @@
|
|
225
139
|
#{$gridle-debug-selector} {
|
226
140
|
&:before {
|
227
141
|
@if $name == default {
|
228
|
-
content:"grid-#{$name}-#{$columns}";
|
142
|
+
content:"grid-#{$name}-#{$columns * $name-multiplicator}";
|
229
143
|
} @else {
|
230
|
-
content:"grid-#{$name}-#{$columns}" !important;
|
144
|
+
content:"grid-#{$name}-#{$columns * $name-multiplicator}" !important;
|
231
145
|
}
|
232
146
|
}
|
233
147
|
&.parent:before {
|
234
148
|
@if $name == default {
|
235
|
-
content:"grid-parent-#{$name}-#{$columns}";
|
149
|
+
content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}";
|
236
150
|
} @else {
|
237
|
-
content:"grid-parent-#{$name}-#{$columns}" !important;
|
151
|
+
content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}" !important;
|
238
152
|
}
|
239
153
|
}
|
240
154
|
}
|
@@ -246,7 +160,7 @@
|
|
246
160
|
// Push the element of the count of column wanted
|
247
161
|
@mixin gridle_push(
|
248
162
|
$columns,
|
249
|
-
$state :
|
163
|
+
$state : null
|
250
164
|
) {
|
251
165
|
// common :
|
252
166
|
@include _gridle_push_common($state);
|
@@ -262,7 +176,7 @@
|
|
262
176
|
}
|
263
177
|
@mixin _gridle_push(
|
264
178
|
$columns,
|
265
|
-
$state :
|
179
|
+
$state : null
|
266
180
|
) {
|
267
181
|
// variables :
|
268
182
|
$name : _gridle_get_var_value(name, $state);
|
@@ -273,7 +187,7 @@
|
|
273
187
|
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
274
188
|
|
275
189
|
// vars :
|
276
|
-
$width : percentage(1 / $context) *
|
190
|
+
$width : percentage(1 / $context) * $columns;
|
277
191
|
@if $direction == rtl { $width : $width*-1; }
|
278
192
|
left:$width;
|
279
193
|
|
@@ -282,9 +196,9 @@
|
|
282
196
|
#{$gridle-debug-selector} {
|
283
197
|
&:after {
|
284
198
|
@if $name == default {
|
285
|
-
content:"push-#{$name}-#{$columns}";
|
199
|
+
content:"push-#{$name}-#{$columns * $name-multiplicator}";
|
286
200
|
} @else {
|
287
|
-
content:"push-#{$name}-#{$columns}" !important;
|
201
|
+
content:"push-#{$name}-#{$columns * $name-multiplicator}" !important;
|
288
202
|
}
|
289
203
|
}
|
290
204
|
}
|
@@ -297,7 +211,7 @@
|
|
297
211
|
// Pull the element of the count of column wanted
|
298
212
|
@mixin gridle_pull(
|
299
213
|
$columns,
|
300
|
-
$state :
|
214
|
+
$state : null
|
301
215
|
) {
|
302
216
|
// common :
|
303
217
|
@include _gridle_pull_common($state);
|
@@ -313,7 +227,7 @@
|
|
313
227
|
}
|
314
228
|
@mixin _gridle_pull(
|
315
229
|
$columns,
|
316
|
-
$state :
|
230
|
+
$state : null
|
317
231
|
) {
|
318
232
|
// vars :
|
319
233
|
$name : _gridle_get_var_value(name, $state);
|
@@ -324,7 +238,7 @@
|
|
324
238
|
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
325
239
|
|
326
240
|
// vars :
|
327
|
-
$width : percentage(1 / $context) *
|
241
|
+
$width : percentage(1 / $context) * $columns;
|
328
242
|
@if $direction == rtl { $width : $width*-1; }
|
329
243
|
right:$width;
|
330
244
|
|
@@ -333,9 +247,9 @@
|
|
333
247
|
#{$gridle-debug-selector} {
|
334
248
|
&:after {
|
335
249
|
@if $name == default {
|
336
|
-
content:"pull-#{$name}-#{$columns}";
|
250
|
+
content:"pull-#{$name}-#{$columns * $name-multiplicator}";
|
337
251
|
} @else {
|
338
|
-
content:"pull-#{$name}-#{$columns}" !important;
|
252
|
+
content:"pull-#{$name}-#{$columns * $name-multiplicator}" !important;
|
339
253
|
}
|
340
254
|
}
|
341
255
|
}
|
@@ -347,7 +261,7 @@
|
|
347
261
|
// Push the element of the count of column wanted
|
348
262
|
@mixin gridle_prefix(
|
349
263
|
$columns,
|
350
|
-
$state :
|
264
|
+
$state : null
|
351
265
|
) {
|
352
266
|
// common :
|
353
267
|
@include _gridle_prefix_common($state);
|
@@ -363,7 +277,7 @@
|
|
363
277
|
}
|
364
278
|
@mixin _gridle_prefix(
|
365
279
|
$columns,
|
366
|
-
$state :
|
280
|
+
$state : null
|
367
281
|
) {
|
368
282
|
// vars :
|
369
283
|
$name : _gridle_get_var_value(name, $state);
|
@@ -375,7 +289,7 @@
|
|
375
289
|
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
376
290
|
|
377
291
|
// vars :
|
378
|
-
$width : percentage(1 / $context) *
|
292
|
+
$width : percentage(1 / $context) * $columns;
|
379
293
|
|
380
294
|
// set value :
|
381
295
|
@if $direction == rtl { margin-right:$width; }
|
@@ -386,9 +300,9 @@
|
|
386
300
|
#{$gridle-debug-selector} {
|
387
301
|
&:after {
|
388
302
|
@if $name == default {
|
389
|
-
content:"prefix-#{$name}-#{$columns}";
|
303
|
+
content:"prefix-#{$name}-#{$columns * $name-multiplicator}";
|
390
304
|
} @else {
|
391
|
-
content:"prefix-#{$name}-#{$columns}" !important;
|
305
|
+
content:"prefix-#{$name}-#{$columns * $name-multiplicator}" !important;
|
392
306
|
}
|
393
307
|
}
|
394
308
|
}
|
@@ -400,7 +314,7 @@
|
|
400
314
|
// Pull the element of the count of column wanted
|
401
315
|
@mixin gridle_suffix(
|
402
316
|
$columns,
|
403
|
-
$state :
|
317
|
+
$state : null
|
404
318
|
) {
|
405
319
|
// common :
|
406
320
|
@include _gridle_suffix_common($state);
|
@@ -416,7 +330,7 @@
|
|
416
330
|
}
|
417
331
|
@mixin _gridle_suffix(
|
418
332
|
$columns,
|
419
|
-
$state :
|
333
|
+
$state : null
|
420
334
|
) {
|
421
335
|
// vars :
|
422
336
|
$name : _gridle_get_var_value(name, $state);
|
@@ -428,7 +342,7 @@
|
|
428
342
|
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
429
343
|
|
430
344
|
// vars :
|
431
|
-
$width : percentage(1 / $context) *
|
345
|
+
$width : percentage(1 / $context) * $columns;
|
432
346
|
|
433
347
|
// set value :
|
434
348
|
@if $direction == rtl { margin-left:$width; }
|
@@ -439,9 +353,9 @@
|
|
439
353
|
#{$gridle-debug-selector} {
|
440
354
|
&:after {
|
441
355
|
@if $name == default {
|
442
|
-
content:"suffix-#{$name}-#{$columns}";
|
356
|
+
content:"suffix-#{$name}-#{$columns * $name-multiplicator}";
|
443
357
|
} @else {
|
444
|
-
content:"suffix-#{$name}-#{$columns}" !important;
|
358
|
+
content:"suffix-#{$name}-#{$columns * $name-multiplicator}" !important;
|
445
359
|
}
|
446
360
|
}
|
447
361
|
}
|
@@ -452,7 +366,7 @@
|
|
452
366
|
// grid background :
|
453
367
|
// Display the grid background debug
|
454
368
|
@mixin gridle_grid_background(
|
455
|
-
$state :
|
369
|
+
$state : null
|
456
370
|
) {
|
457
371
|
// check if need media query :
|
458
372
|
@if $state {
|
@@ -464,7 +378,7 @@
|
|
464
378
|
}
|
465
379
|
}
|
466
380
|
@mixin _gridle_grid_background(
|
467
|
-
$state :
|
381
|
+
$state : null
|
468
382
|
) {
|
469
383
|
|
470
384
|
// variables :
|
@@ -494,20 +408,21 @@
|
|
494
408
|
@mixin gridle_clear_each(
|
495
409
|
$clearEach,
|
496
410
|
$clearWhat : both,
|
497
|
-
$state :
|
411
|
+
$state : null
|
498
412
|
) {
|
499
413
|
// check if need media query :
|
500
414
|
@if $state {
|
501
415
|
@include gridle_state($state) {
|
502
|
-
@include _gridle_clear_each($clearEach, $clearWhat);
|
416
|
+
@include _gridle_clear_each($clearEach, $clearWhat, $state);
|
503
417
|
}
|
504
418
|
} @else {
|
505
|
-
@include _gridle_clear_each($clearEach, $clearWhat);
|
419
|
+
@include _gridle_clear_each($clearEach, $clearWhat, $state);
|
506
420
|
}
|
507
421
|
}
|
508
422
|
@mixin _gridle_clear_each(
|
509
423
|
$clearEach,
|
510
|
-
$clearWhat
|
424
|
+
$clearWhat,
|
425
|
+
$state : null
|
511
426
|
) {
|
512
427
|
> *:nth-child(#{$clearEach}n+1) {
|
513
428
|
clear : $clearWhat;
|
@@ -517,7 +432,7 @@
|
|
517
432
|
|
518
433
|
// Grid centered :
|
519
434
|
@mixin gridle_centered(
|
520
|
-
$state :
|
435
|
+
$state : null
|
521
436
|
) {
|
522
437
|
// check if need media query :
|
523
438
|
@if $state {
|
@@ -539,7 +454,7 @@
|
|
539
454
|
|
540
455
|
// Grid parent :
|
541
456
|
@mixin gridle_parent(
|
542
|
-
$state :
|
457
|
+
$state : null
|
543
458
|
) {
|
544
459
|
// common :
|
545
460
|
@include _gridle_parent_common();
|
@@ -562,7 +477,7 @@
|
|
562
477
|
*/
|
563
478
|
@mixin gridle_vertical_align(
|
564
479
|
$align : middle,
|
565
|
-
$state :
|
480
|
+
$state : null
|
566
481
|
) {
|
567
482
|
// check if need media query :
|
568
483
|
@if $state {
|
@@ -591,7 +506,7 @@
|
|
591
506
|
// Hide on :
|
592
507
|
// @param String $media On what state
|
593
508
|
@mixin gridle_hide(
|
594
|
-
$state :
|
509
|
+
$state : null
|
595
510
|
) {
|
596
511
|
// check if need media query :
|
597
512
|
@if $state {
|
@@ -610,7 +525,7 @@
|
|
610
525
|
// Not visible on :
|
611
526
|
// @param String $media What to hide (one of the 3 state classes name)
|
612
527
|
@mixin gridle_not_visible(
|
613
|
-
$state :
|
528
|
+
$state : null
|
614
529
|
) {
|
615
530
|
// check if need media query :
|
616
531
|
@if $state {
|
@@ -629,7 +544,7 @@
|
|
629
544
|
// Show on
|
630
545
|
// @param String $media What to hide (one of the 3 state classes name)
|
631
546
|
@mixin gridle_show(
|
632
|
-
$state :
|
547
|
+
$state : null
|
633
548
|
) {
|
634
549
|
// check if need media query :
|
635
550
|
@if $state {
|
@@ -645,32 +560,10 @@
|
|
645
560
|
}
|
646
561
|
|
647
562
|
|
648
|
-
/**
|
649
|
-
* Show inline
|
650
|
-
*
|
651
|
-
* @param String $state The state name
|
652
|
-
*/
|
653
|
-
@mixin gridle_show_inline(
|
654
|
-
$state : default
|
655
|
-
) {
|
656
|
-
// check if need media query :
|
657
|
-
@if $state {
|
658
|
-
@include gridle_state($state) {
|
659
|
-
@include _gridle_show_inline();
|
660
|
-
}
|
661
|
-
} @else {
|
662
|
-
@include _gridle_show_inline();
|
663
|
-
}
|
664
|
-
}
|
665
|
-
@mixin _gridle_show_inline() {
|
666
|
-
display:inline-block;
|
667
|
-
}
|
668
|
-
|
669
|
-
|
670
563
|
// Visible on :
|
671
564
|
// @param String $media On what state
|
672
565
|
@mixin gridle_visible(
|
673
|
-
$state :
|
566
|
+
$state : null
|
674
567
|
) {
|
675
568
|
// check if need media query :
|
676
569
|
@if $state {
|
@@ -689,7 +582,7 @@
|
|
689
582
|
// Gridle Right :
|
690
583
|
@mixin gridle_float(
|
691
584
|
$float-direction : left,
|
692
|
-
$state :
|
585
|
+
$state : null
|
693
586
|
) {
|
694
587
|
// check if need media query :
|
695
588
|
@if $state {
|
@@ -712,7 +605,7 @@
|
|
712
605
|
// @param String $state The state
|
713
606
|
@mixin gridle_clear(
|
714
607
|
$clear-direction : both,
|
715
|
-
$state :
|
608
|
+
$state : null
|
716
609
|
) {
|
717
610
|
// check if need media query :
|
718
611
|
@if $state {
|
@@ -735,7 +628,7 @@
|
|
735
628
|
// @param String $state The state
|
736
629
|
@mixin gridle_no_gutter(
|
737
630
|
$side : left right,
|
738
|
-
$state :
|
631
|
+
$state : null
|
739
632
|
) {
|
740
633
|
// check if need media query :
|
741
634
|
@if $state {
|
@@ -748,7 +641,7 @@
|
|
748
641
|
}
|
749
642
|
@mixin gridle_no_margin(
|
750
643
|
$side : left right,
|
751
|
-
$state :
|
644
|
+
$state : null
|
752
645
|
) {
|
753
646
|
@include gridle_no_gutter($side, $state);
|
754
647
|
}
|
@@ -756,7 +649,7 @@
|
|
756
649
|
$side : left right
|
757
650
|
) {
|
758
651
|
@each $s in $side {
|
759
|
-
padding-#{$s} : 0;
|
652
|
+
padding-#{$s} : 0 !important;
|
760
653
|
}
|
761
654
|
}
|
762
655
|
|
@@ -766,7 +659,7 @@
|
|
766
659
|
// @param String $state The state
|
767
660
|
@mixin gridle_gutter(
|
768
661
|
$side : left right,
|
769
|
-
$state :
|
662
|
+
$state : null
|
770
663
|
) {
|
771
664
|
// check if need media query :
|
772
665
|
@if $state {
|
@@ -780,13 +673,13 @@
|
|
780
673
|
// shortcut :
|
781
674
|
@mixin gridle_margin(
|
782
675
|
$side : left right,
|
783
|
-
$state :
|
676
|
+
$state : null
|
784
677
|
) {
|
785
678
|
@include gridle_gutter($side, $state);
|
786
679
|
}
|
787
680
|
@mixin _gridle_gutter(
|
788
681
|
$side : left right,
|
789
|
-
$state :
|
682
|
+
$state : null
|
790
683
|
) {
|
791
684
|
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
792
685
|
@each $s in $side {
|