gridle 1.3.36 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/gridle.rb +2 -2
- data/stylesheets/_gridle-flex.scss +4 -0
- data/stylesheets/gridle/_api.scss +508 -0
- data/stylesheets/gridle/_driver-default.scss +445 -0
- data/stylesheets/gridle/_driver-flex.scss +418 -0
- data/stylesheets/gridle/_flexbox.scss +422 -0
- data/stylesheets/gridle/_functions.scss +575 -175
- data/stylesheets/gridle/_generate-mixins.scss +320 -381
- data/stylesheets/gridle/_gridle-flex.scss +60 -0
- data/stylesheets/gridle/_gridle.scss +6 -88
- data/stylesheets/gridle/_init.scss +131 -0
- data/stylesheets/gridle/_mixins.scss +289 -728
- data/stylesheets/gridle/_settings-mixins.scss +310 -45
- data/stylesheets/gridle/_settings.scss +128 -61
- metadata +9 -4
- data/stylesheets/gridle/_common-mixins.scss +0 -124
- data/stylesheets/gridle/_silent-classes.scss +0 -104
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
// |------------------------------------------------------
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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 :
|
|
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
|
-
//
|
|
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
|
-
$
|
|
58
|
+
$package : null
|
|
59
59
|
) {
|
|
60
60
|
// helpers :
|
|
61
|
-
@if
|
|
62
|
-
#{_gridle_classname(
|
|
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(
|
|
65
|
+
#{_gridle_classname(float, $state, right)} {
|
|
66
66
|
@include gridle_float(right);
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
@if
|
|
71
|
-
#{_gridle_classname(
|
|
70
|
+
@if _gridle_need_to_generate(clear, $package) {
|
|
71
|
+
#{_gridle_classname(clear, $state)} {
|
|
72
72
|
@include gridle_clear(both);
|
|
73
73
|
}
|
|
74
|
-
#{_gridle_classname(
|
|
74
|
+
#{_gridle_classname(clear, $state, left)} {
|
|
75
75
|
@include gridle_clear(left);
|
|
76
76
|
}
|
|
77
|
-
#{_gridle_classname(
|
|
77
|
+
#{_gridle_classname(clear, $state, right)} {
|
|
78
78
|
@include gridle_clear(right);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
@if
|
|
83
|
-
#{_gridle_classname(
|
|
84
|
-
|
|
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(
|
|
88
|
-
|
|
89
|
-
@include gridle_no_margin(left);
|
|
86
|
+
#{_gridle_classname(no-gutter, $state, left)} {
|
|
87
|
+
@include gridle_no_gutter(left);
|
|
90
88
|
}
|
|
91
|
-
#{_gridle_classname(
|
|
92
|
-
|
|
93
|
-
@include gridle_no_margin(right);
|
|
89
|
+
#{_gridle_classname(no-gutter, $state, right)} {
|
|
90
|
+
@include gridle_no_gutter(right);
|
|
94
91
|
}
|
|
95
|
-
#{_gridle_classname(
|
|
96
|
-
|
|
97
|
-
@include gridle_no_margin(top);
|
|
92
|
+
#{_gridle_classname(no-gutter, $state, top)} {
|
|
93
|
+
@include gridle_no_gutter(top);
|
|
98
94
|
}
|
|
99
|
-
#{_gridle_classname(
|
|
100
|
-
|
|
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
|
|
106
|
-
#{_gridle_classname(
|
|
107
|
-
|
|
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(
|
|
111
|
-
|
|
112
|
-
@include gridle_margin(left);
|
|
104
|
+
#{_gridle_classname(gutter, $state, left)} {
|
|
105
|
+
@include gridle_gutter(left);
|
|
113
106
|
}
|
|
114
|
-
#{_gridle_classname(
|
|
115
|
-
|
|
116
|
-
@include gridle_margin(right);
|
|
107
|
+
#{_gridle_classname(gutter, $state, right)} {
|
|
108
|
+
@include gridle_gutter(right);
|
|
117
109
|
}
|
|
118
|
-
#{_gridle_classname(
|
|
119
|
-
|
|
120
|
-
@include gridle_margin(top);
|
|
110
|
+
#{_gridle_classname(gutter, $state, top)} {
|
|
111
|
+
@include gridle_gutter(top);
|
|
121
112
|
}
|
|
122
|
-
#{_gridle_classname(
|
|
123
|
-
|
|
124
|
-
@include gridle_margin(bottom);
|
|
113
|
+
#{_gridle_classname(gutter, $state, bottom)} {
|
|
114
|
+
@include gridle_gutter(bottom);
|
|
125
115
|
}
|
|
126
116
|
}
|
|
127
117
|
|
|
128
|
-
@if
|
|
129
|
-
#{_gridle_classname(
|
|
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
|
|
135
|
-
#{_gridle_classname(
|
|
136
|
-
@include
|
|
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
|
|
141
|
-
#{_gridle_classname(
|
|
142
|
-
@include
|
|
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
|
|
147
|
-
#{_gridle_classname(
|
|
148
|
-
@include
|
|
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(
|
|
151
|
-
@include
|
|
185
|
+
#{_gridle_classname(row-align, $state, right)} {
|
|
186
|
+
@include gridle_row_align(right);
|
|
152
187
|
}
|
|
153
|
-
#{_gridle_classname(
|
|
154
|
-
@include
|
|
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
|
-
|
|
160
|
-
|
|
161
|
-
@if
|
|
162
|
-
#{_gridle_classname(
|
|
163
|
-
@include gridle_hide(
|
|
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
|
|
168
|
-
#{_gridle_classname(
|
|
169
|
-
@include gridle_not_visible(
|
|
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
|
|
174
|
-
#{_gridle_classname(
|
|
175
|
-
@include gridle_show(
|
|
236
|
+
@if _gridle_need_to_generate(show, $package) {
|
|
237
|
+
#{_gridle_classname(show, $state)} {
|
|
238
|
+
@include gridle_show();
|
|
176
239
|
}
|
|
177
|
-
|
|
178
|
-
|
|
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
|
|
183
|
-
#{_gridle_classname(
|
|
184
|
-
@include gridle_visible(
|
|
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
|
-
|
|
190
|
-
|
|
191
|
-
@if
|
|
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(
|
|
199
|
-
@include
|
|
264
|
+
#{_gridle_classname(clear-each, $state, $clearCount)} {
|
|
265
|
+
@include gridle_clear_each($clearCount, $clearWhat);
|
|
200
266
|
}
|
|
201
267
|
}
|
|
202
268
|
}
|
|
203
269
|
|
|
204
|
-
//
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
#{_gridle_classname(
|
|
209
|
-
|
|
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
|
-
//
|
|
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 :
|
|
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} \"
|
|
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
|
-
//
|
|
313
|
-
// Generate
|
|
352
|
+
//
|
|
353
|
+
// Generate classes
|
|
354
|
+
//
|
|
314
355
|
@mixin gridle_generate_classes(
|
|
315
|
-
$
|
|
316
|
-
$
|
|
356
|
+
$states : all,
|
|
357
|
+
$package : all,
|
|
317
358
|
$scope : null
|
|
318
359
|
) {
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
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
|
-
$
|
|
355
|
-
$
|
|
377
|
+
$states : all,
|
|
378
|
+
$package : all,
|
|
356
379
|
$has-parent : false
|
|
357
|
-
) {
|
|
358
|
-
|
|
359
|
-
// generate
|
|
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
|
-
// |
|
|
433
|
+
// | JSON Settings
|
|
378
434
|
// | ------------------------
|
|
379
435
|
|
|
380
|
-
// generate
|
|
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
|
-
|
|
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
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
// get specials columns :
|
|
559
|
-
$columnsMap : map-merge((), $_gridle_columns);
|
|
450
|
+
// debug
|
|
451
|
+
@debug("Generate classes for state #{$stateName}");
|
|
560
452
|
|
|
561
|
-
|
|
562
|
-
|
|
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
|
-
|
|
569
|
-
|
|
456
|
+
// setup vars :
|
|
457
|
+
$classes : gridle_get_state_var(classes, $state);
|
|
570
458
|
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
}
|
|
459
|
+
// stop here if no classes wanted
|
|
460
|
+
@if $classes {
|
|
574
461
|
|
|
575
|
-
// generate all classes for columns
|
|
576
|
-
|
|
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
|
|
591
|
-
#{_gridle_classname(
|
|
592
|
-
@include
|
|
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
|
|
596
|
-
#{_gridle_classname(
|
|
597
|
-
@include
|
|
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
|
|
601
|
-
#{_gridle_classname(
|
|
602
|
-
@include
|
|
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
|
|
606
|
-
#{_gridle_classname(
|
|
607
|
-
@include
|
|
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
|
|
611
|
-
#{_gridle_classname(
|
|
612
|
-
@include
|
|
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
|
-
@
|
|
619
|
-
|
|
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
|
}
|