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
@@ -446,19 +446,17 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
446
446
|
|
447
447
|
// get the actual state
|
448
448
|
$state : gridle_get_state($stateName);
|
449
|
+
$classes : gridle_get_state_var(classes, $state);
|
449
450
|
|
450
|
-
//
|
451
|
-
@
|
451
|
+
// stop here if no classes wanted
|
452
|
+
@if $classes {
|
452
453
|
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
// setup vars :
|
457
|
-
$classes : gridle_get_state_var(classes, $state);
|
458
|
-
|
459
|
-
// stop here if no classes wanted
|
460
|
-
@if $classes {
|
454
|
+
// debug
|
455
|
+
@debug("Generate classes for state #{$stateName}");
|
461
456
|
|
457
|
+
// scope all the classes in a media query
|
458
|
+
@include gridle_state($state, false) {
|
459
|
+
|
462
460
|
// generate all classes for columns
|
463
461
|
$i : 0;
|
464
462
|
@each $columnName, $column in gridle_get_columns($state) {
|
@@ -477,7 +475,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
477
475
|
// classes
|
478
476
|
@if _gridle_need_to_generate(grid, $package) {
|
479
477
|
#{_gridle_classname(grid, $stateName, $columnName)} {
|
480
|
-
@include
|
478
|
+
@include gridle_grid($columnsCount, $columnsContext);
|
481
479
|
}
|
482
480
|
}
|
483
481
|
@if _gridle_need_to_generate(push, $package) {
|
@@ -1,9 +1,9 @@
|
|
1
1
|
// |------------------------------------------------------
|
2
2
|
// |------------------------------------------------------
|
3
3
|
// @created 25.03.13
|
4
|
-
// @updated
|
4
|
+
// @updated 20.10.15
|
5
5
|
// @author Olivier Bossel <olivier.bossel@gmail.com>
|
6
|
-
// @version 2.0.
|
6
|
+
// @version 2.0.4
|
7
7
|
// |------------------------------------------------------
|
8
8
|
// |------------------------------------------------------
|
9
9
|
|
@@ -16,7 +16,7 @@
|
|
16
16
|
// |------------------------------------------------------
|
17
17
|
// |------------------------------------------------------
|
18
18
|
|
19
|
-
$_gridle-version : "2.0.
|
19
|
+
$_gridle-version : "2.0.4";
|
20
20
|
|
21
21
|
|
22
22
|
|
@@ -27,6 +27,7 @@ $_gridle-version : "2.0.2";
|
|
27
27
|
// |------------------------------------------------------
|
28
28
|
// |------------------------------------------------------
|
29
29
|
|
30
|
+
$gridle-debug : true;
|
30
31
|
$_gridle_is_in_generate_phase : false; // keep track if we are in generate phase or not anymore
|
31
32
|
$_gridle_inited : false; // keep track if gridle has been inited (silent classes, etc..) or not
|
32
33
|
$_gridle_settings : (); // the default settings
|
@@ -38,6 +39,8 @@ $_gridle_apply_css_for : (); // save the rules that will be applied for eac
|
|
38
39
|
|
39
40
|
$_gridle_current_state : (); // save the current state
|
40
41
|
$_gridle_current_stateName : default; // save the current state name
|
42
|
+
$_gridle_previous_state : (); // save the previous state
|
43
|
+
$_gridle_previous_stateName : default; // save the previous state name
|
41
44
|
|
42
45
|
$_content_arg_state : null; // this variable is used to pass state through global variable into an @content
|
43
46
|
|
@@ -128,4 +131,4 @@ $gridle-vendor-prefix : true; // set if need to add vendor prefixes when ne
|
|
128
131
|
// |------------------------------------------------------
|
129
132
|
// |------------------------------------------------------
|
130
133
|
|
131
|
-
|
134
|
+
@import 'default-states';
|
@@ -42,15 +42,11 @@
|
|
42
42
|
%#{$stateName}-#{$for} {
|
43
43
|
// inject content
|
44
44
|
@content;
|
45
|
-
// extend common class by the registered css
|
46
|
-
@include _gridle_extend_common_class($for, $stateName);
|
47
45
|
}
|
48
46
|
@at-root (without: media) {
|
49
47
|
%at-root-#{$stateName}-#{$for} {
|
50
48
|
// inject content
|
51
49
|
@content;
|
52
|
-
// extend common class by the registered css
|
53
|
-
@include _gridle_extend_common_class($for, $stateName);
|
54
50
|
}
|
55
51
|
}
|
56
52
|
}
|
@@ -61,150 +57,203 @@
|
|
61
57
|
// get state name
|
62
58
|
$stateName : gridle_get_state_var(name, $state);
|
63
59
|
|
60
|
+
// define packages to init
|
61
|
+
// the order can matter here
|
62
|
+
$packages : (
|
63
|
+
container,
|
64
|
+
grid-order,
|
65
|
+
row,
|
66
|
+
row-full,
|
67
|
+
col,
|
68
|
+
grid,
|
69
|
+
grid-table,
|
70
|
+
grid-adapt,
|
71
|
+
grid-grow,
|
72
|
+
push,
|
73
|
+
pull,
|
74
|
+
prefix,
|
75
|
+
suffix,
|
76
|
+
nowrap,
|
77
|
+
wrap,
|
78
|
+
clear-each,
|
79
|
+
grid-centered,
|
80
|
+
row-align,
|
81
|
+
hide,
|
82
|
+
not-visible,
|
83
|
+
show,
|
84
|
+
show-inline,
|
85
|
+
visible,
|
86
|
+
float,
|
87
|
+
clear,
|
88
|
+
no-gutter,
|
89
|
+
gutter,
|
90
|
+
row-debug
|
91
|
+
);
|
92
|
+
|
93
|
+
// loop on each packages to init their common silient classes
|
94
|
+
@each $package in $packages {
|
95
|
+
// include common
|
96
|
+
@include _gridle_common_silent_class_name($package, $stateName) {
|
97
|
+
@include _gridle_include_common($package, $stateName);
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
@mixin _gridle_include_common(
|
103
|
+
$package,
|
104
|
+
$state : current
|
105
|
+
) {
|
106
|
+
|
107
|
+
// get state name
|
108
|
+
$state : gridle_get_state($state);
|
109
|
+
|
64
110
|
// container
|
65
|
-
@
|
111
|
+
@if $package == container {
|
66
112
|
@include _gridle_common_container($state);
|
67
113
|
}
|
68
114
|
|
69
115
|
// order
|
70
|
-
@
|
116
|
+
@if $package == grid-order {
|
71
117
|
@include _gridle_common_grid_order($state);
|
72
118
|
}
|
73
119
|
|
74
120
|
// row
|
75
|
-
@
|
121
|
+
@if $package == row {
|
76
122
|
@include _gridle_common_row($state);
|
77
123
|
}
|
78
124
|
|
79
125
|
// row-full
|
80
|
-
@
|
126
|
+
@if $package == row-full {
|
81
127
|
@include _gridle_common_row_full($state);
|
82
128
|
}
|
83
129
|
|
84
130
|
// col
|
85
|
-
@
|
131
|
+
@if $package == col {
|
86
132
|
@include _gridle_common_col($state);
|
87
133
|
}
|
88
134
|
|
89
135
|
// grid
|
90
|
-
@
|
136
|
+
@if $package == grid {
|
91
137
|
@include _gridle_common_grid($state);
|
92
138
|
}
|
93
139
|
|
94
140
|
// grid-table
|
95
|
-
@
|
141
|
+
@if $package == grid-table {
|
96
142
|
@include _gridle_common_grid_table($state);
|
97
143
|
}
|
98
144
|
|
99
145
|
// grid-adapt
|
100
|
-
@
|
146
|
+
@if $package == grid-adapt {
|
101
147
|
@include _gridle_common_grid_adapt($state);
|
102
148
|
}
|
103
149
|
|
104
150
|
// grid-grow
|
105
|
-
@
|
151
|
+
@if $package == grid-grow {
|
106
152
|
@include _gridle_common_grid_grow($state);
|
107
153
|
}
|
108
154
|
|
109
155
|
// push
|
110
|
-
@
|
156
|
+
@if $package == push{
|
111
157
|
@include _gridle_common_push($state);
|
112
158
|
}
|
113
159
|
|
114
160
|
// pull
|
115
|
-
@
|
161
|
+
@if $package == pull{
|
116
162
|
@include _gridle_common_pull($state);
|
117
163
|
}
|
118
164
|
|
119
165
|
// prefix
|
120
|
-
@
|
166
|
+
@if $package == prefix{
|
121
167
|
@include _gridle_common_prefix($state);
|
122
168
|
}
|
123
169
|
|
124
170
|
// suffix
|
125
|
-
@
|
171
|
+
@if $package == suffix {
|
126
172
|
@include _gridle_common_suffix($state);
|
127
173
|
}
|
128
174
|
|
129
175
|
// nowrap
|
130
|
-
@
|
176
|
+
@if $package == nowrap {
|
131
177
|
@include _gridle_common_nowrap($state);
|
132
178
|
}
|
133
179
|
|
134
180
|
// wrap
|
135
|
-
@
|
181
|
+
@if $package == wrap {
|
136
182
|
@include _gridle_common_wrap($state);
|
137
183
|
}
|
138
184
|
|
139
185
|
// clear-each
|
140
|
-
@
|
186
|
+
@if $package == clear-each {
|
141
187
|
@include _gridle_common_clear_each($state);
|
142
188
|
}
|
143
189
|
|
144
190
|
// centered
|
145
|
-
@
|
191
|
+
@if $package == grid-centered {
|
146
192
|
@include _gridle_common_grid_centered($state);
|
147
193
|
}
|
148
194
|
|
149
|
-
// align
|
150
|
-
@
|
195
|
+
// row-align
|
196
|
+
@if $package == row-align {
|
151
197
|
@include _gridle_common_row_align($state);
|
152
198
|
}
|
153
199
|
|
154
200
|
// hide
|
155
|
-
@
|
201
|
+
@if $package == hide {
|
156
202
|
@include _gridle_common_hide($state);
|
157
203
|
}
|
158
204
|
|
159
205
|
// not-visible
|
160
|
-
@
|
206
|
+
@if $package == not-visible {
|
161
207
|
@include _gridle_common_not_visible($state);
|
162
208
|
}
|
163
209
|
|
164
210
|
// show
|
165
|
-
@
|
211
|
+
@if $package == show{
|
166
212
|
@include _gridle_common_show($state);
|
167
213
|
}
|
168
214
|
|
169
215
|
// show-inline
|
170
|
-
@
|
216
|
+
@if $package == show-inline {
|
171
217
|
@include _gridle_common_show_inline($state);
|
172
218
|
}
|
173
219
|
|
174
220
|
// visible
|
175
|
-
@
|
221
|
+
@if $package == visible {
|
176
222
|
@include _gridle_common_visible($state);
|
177
223
|
}
|
178
224
|
|
179
225
|
// float
|
180
|
-
@
|
226
|
+
@if $package == float {
|
181
227
|
@include _gridle_common_float($state);
|
182
228
|
}
|
183
229
|
|
184
230
|
// clear
|
185
|
-
@
|
231
|
+
@if $package == clear {
|
186
232
|
@include _gridle_common_clear($state);
|
187
233
|
}
|
188
234
|
|
189
235
|
// no-gutter
|
190
|
-
@
|
236
|
+
@if $package == no-gutter {
|
191
237
|
@include _gridle_common_no_gutter($state);
|
192
238
|
}
|
193
239
|
|
194
240
|
// gutter
|
195
|
-
@
|
241
|
+
@if $package == gutter {
|
196
242
|
@include _gridle_common_gutter($state);
|
197
243
|
}
|
198
244
|
|
199
245
|
// row debug
|
200
|
-
@
|
246
|
+
@if $package == row-debug {
|
201
247
|
@include _gridle_common_row_debug($state);
|
202
248
|
}
|
249
|
+
|
250
|
+
// extend common class by the registered css
|
251
|
+
@include _gridle_extend_common_class($package, $state);
|
203
252
|
}
|
204
253
|
|
205
254
|
|
206
255
|
//
|
207
|
-
// Wrap gridle mixin content to init if needed and then
|
256
|
+
// Wrap gridle mixin content to init if needed and then if needed
|
208
257
|
//
|
209
258
|
@mixin _gridle_call(
|
210
259
|
$for : null
|
@@ -231,21 +280,29 @@
|
|
231
280
|
// @calledBy _gridle_call
|
232
281
|
//
|
233
282
|
@mixin _gridle_extend(
|
234
|
-
$
|
283
|
+
$package
|
235
284
|
) {
|
236
285
|
// check if we need the state classes
|
237
286
|
$states-classes : gridle_get_state_var(states-classes);
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
287
|
+
$stateName : gridle_get_state_var(name);
|
288
|
+
|
289
|
+
// if is an existing gridle state
|
290
|
+
@if gridle_has_state($stateName) {
|
291
|
+
// extend the "at-root" version for the .state-{stateName} classes
|
292
|
+
@if $states-classes and str-index(#{&}, unquote(".state-#{$_gridle_current_stateName}")) {
|
293
|
+
@at-root (without: media) {
|
294
|
+
// @debug("%at-root-#{$_gridle_current_stateName}-#{$package}");
|
295
|
+
@extend %at-root-#{$_gridle_current_stateName}-#{$package} !optional;
|
296
|
+
}
|
297
|
+
} @else {
|
298
|
+
// extend using the current state name set in each gridle_state call
|
299
|
+
// @debug("%#{$_gridle_current_stateName}-#{$package}");
|
300
|
+
@extend %#{$_gridle_current_stateName}-#{$package} !optional;
|
244
301
|
}
|
245
302
|
} @else {
|
246
|
-
//
|
247
|
-
//
|
248
|
-
@
|
303
|
+
// it's not an existing state so we cannot extend.
|
304
|
+
// we need to include instead
|
305
|
+
@include _gridle_include_common($package, $stateName);
|
249
306
|
}
|
250
307
|
}
|
251
308
|
|
@@ -297,10 +354,26 @@ $_gridle_applied_for : ();
|
|
297
354
|
$states-classes : gridle_get_state_var(states-classes, $state);
|
298
355
|
$stateName : gridle_get_state_var(name, $state);
|
299
356
|
|
357
|
+
// manage previous state
|
358
|
+
$previous_state : null;
|
359
|
+
$previous_stateName : null;
|
360
|
+
|
300
361
|
// check if need to tack the current state
|
301
362
|
@if $track-current-state {
|
302
|
-
|
303
|
-
|
363
|
+
@if $_gridle_current_state {
|
364
|
+
$previous_state : $_gridle_current_state;
|
365
|
+
$previous_stateName : $_gridle_current_stateName;
|
366
|
+
}
|
367
|
+
// if we have a previous state that is not the default one, we
|
368
|
+
// make the inheritence process.
|
369
|
+
// if both states are registered ones : just take the wanted state
|
370
|
+
// if only previous_state is a registered one : extend previous_state with the wanted one
|
371
|
+
// if none of them are resitered : extend the wanted with the previous one
|
372
|
+
@if $previous_state {
|
373
|
+
$_gridle_current_state : _gridle_inherit_state($state, $previous_state) !global;
|
374
|
+
} @else {
|
375
|
+
$_gridle_current_state : $state !global;
|
376
|
+
}
|
304
377
|
$_gridle_current_stateName : $stateName !global;
|
305
378
|
}
|
306
379
|
|
@@ -334,9 +407,9 @@ $_gridle_applied_for : ();
|
|
334
407
|
}
|
335
408
|
|
336
409
|
// reset current state to default
|
337
|
-
@if $track-current-state {
|
338
|
-
$_gridle_current_state : $
|
339
|
-
$_gridle_current_stateName :
|
410
|
+
@if $track-current-state and $previous_state and $previous_stateName {
|
411
|
+
$_gridle_current_state : $previous_state !global;
|
412
|
+
$_gridle_current_stateName : $previous_stateName !global;
|
340
413
|
}
|
341
414
|
}
|
342
415
|
|
@@ -10,29 +10,8 @@
|
|
10
10
|
@mixin gridle_setup(
|
11
11
|
$settings : ()
|
12
12
|
) {
|
13
|
-
//
|
14
|
-
$
|
15
|
-
$gutter-bottom : map-get($settings, gutter-bottom);
|
16
|
-
$gutter-left : map-get($settings, gutter-left);
|
17
|
-
$gutter-right : map-get($settings, gutter-right);
|
18
|
-
$gutter-width : map-get($settings, gutter-width);
|
19
|
-
$gutter-height : map-get($settings, gutter-height);
|
20
|
-
@if $gutter-right and $gutter-left {
|
21
|
-
// calculate the gutter-width
|
22
|
-
$settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
|
23
|
-
} @else if $gutter-width {
|
24
|
-
// calculate the gutter-left and right
|
25
|
-
$settings : map-set($settings, gutter-left, $gutter-width * .5);
|
26
|
-
$settings : map-set($settings, gutter-right, $gutter-width * .5);
|
27
|
-
}
|
28
|
-
@if $gutter-top and $gutter-bottom {
|
29
|
-
// calculate the gutter-height
|
30
|
-
$settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
|
31
|
-
} @else if $gutter-height {
|
32
|
-
// calculate the gutter-bottom and top
|
33
|
-
$settings : map-set($settings, gutter-bottom, $gutter-height * .5);
|
34
|
-
$settings : map-set($settings, gutter-top, $gutter-height * .5);
|
35
|
-
}
|
13
|
+
// prepare state
|
14
|
+
$settings : _gridle_prepare_state_settings($settings);
|
36
15
|
|
37
16
|
// extend default settings
|
38
17
|
$_gridle-settings : map-merge((
|
@@ -42,6 +21,7 @@
|
|
42
21
|
query : null,
|
43
22
|
classes : true,
|
44
23
|
context : 12,
|
24
|
+
column-width : null,
|
45
25
|
gutter-width : 20px,
|
46
26
|
gutter-height : 0,
|
47
27
|
gutter-top : 0,
|
@@ -49,6 +29,7 @@
|
|
49
29
|
gutter-bottom : 0,
|
50
30
|
gutter-left : 10px,
|
51
31
|
direction : ltr,
|
32
|
+
dir-attribute : false,
|
52
33
|
name-multiplicator : 1,
|
53
34
|
states-classes : false,
|
54
35
|
classes-prefix : null
|
@@ -68,31 +49,10 @@
|
|
68
49
|
//
|
69
50
|
@mixin gridle_register_state(
|
70
51
|
$name,
|
71
|
-
$settings
|
52
|
+
$settings : ()
|
72
53
|
) {
|
73
|
-
//
|
74
|
-
$
|
75
|
-
$gutter-bottom : map-get($settings, gutter-bottom);
|
76
|
-
$gutter-left : map-get($settings, gutter-left);
|
77
|
-
$gutter-right : map-get($settings, gutter-right);
|
78
|
-
$gutter-width : map-get($settings, gutter-width);
|
79
|
-
$gutter-height : map-get($settings, gutter-height);
|
80
|
-
@if $gutter-right and $gutter-left {
|
81
|
-
// calculate the gutter-width
|
82
|
-
$settings : map-set($settings, gutter-width, $gutter-left + $gutter-right);
|
83
|
-
} @else if $gutter-width {
|
84
|
-
// calculate the gutter-left and right
|
85
|
-
$settings : map-set($settings, gutter-left, $gutter-width * .5);
|
86
|
-
$settings : map-set($settings, gutter-right, $gutter-width * .5);
|
87
|
-
}
|
88
|
-
@if $gutter-top and $gutter-bottom {
|
89
|
-
// calculate the gutter-height
|
90
|
-
$settings : map-set($settings, gutter-height, $gutter-bottom + $gutter-top);
|
91
|
-
} @else if $gutter-height {
|
92
|
-
// calculate the gutter-bottom and top
|
93
|
-
$settings : map-set($settings, gutter-bottom, $gutter-height * .5);
|
94
|
-
$settings : map-set($settings, gutter-top, $gutter-height * .5);
|
95
|
-
}
|
54
|
+
// prepare state
|
55
|
+
$settings : _gridle_prepare_state_settings($settings);
|
96
56
|
|
97
57
|
// settings :
|
98
58
|
$settings : map-merge($_gridle-settings, $settings);
|
@@ -390,15 +350,15 @@
|
|
390
350
|
//
|
391
351
|
@mixin gridle_register_default_mobile_first_states() {
|
392
352
|
@include gridle_register_state(xs, (
|
393
|
-
max-width :
|
353
|
+
max-width : 750px
|
394
354
|
));
|
395
355
|
@include gridle_register_state(sm, (
|
396
|
-
min-width :
|
356
|
+
min-width : 750px
|
397
357
|
));
|
398
358
|
@include gridle_register_state(md, (
|
399
|
-
min-width :
|
359
|
+
min-width : 970px
|
400
360
|
));
|
401
361
|
@include gridle_register_state(lg, (
|
402
|
-
min-width :
|
362
|
+
min-width : 1170px
|
403
363
|
));
|
404
364
|
}
|