gridle 1.3.36 → 2.0.0
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-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
|
}
|