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.
@@ -0,0 +1,60 @@
1
+ // |------------------------------------------------------
2
+ // |------------------------------------------------------
3
+ // Gridle (.scss)
4
+ // Gridle is an one and unique grid system file that allows you to generate almost all
5
+ // grid you've ever dreamt about.
6
+ // |------------------------------------------------------
7
+ // |------------------------------------------------------
8
+
9
+ // |------------------------------------------------------
10
+ // |------------------------------------------------------
11
+ // Copyright (c) 2014 Olivier Bossel
12
+
13
+ // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
14
+ // documentation files (the "Software"), to deal in the Software without restriction, including without limitation
15
+ // the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
16
+ // and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
17
+
18
+ // The above copyright notice and this permission notice shall be included in all copies or substantial portions
19
+ // of the Software.
20
+
21
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
22
+ // TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
23
+ // THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
24
+ // CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
25
+ // IN THE SOFTWARE.
26
+ // |------------------------------------------------------
27
+ // |------------------------------------------------------
28
+
29
+
30
+
31
+
32
+ // |------------------------------------------------------
33
+ // |------------------------------------------------------
34
+ // | Driver
35
+ // |------------------------------------------------------
36
+ // |------------------------------------------------------
37
+
38
+ $_gridle-driver : flex;
39
+
40
+
41
+
42
+
43
+ // |------------------------------------------------------
44
+ // |------------------------------------------------------
45
+ // | Default init
46
+ // |------------------------------------------------------
47
+ // |------------------------------------------------------
48
+
49
+ @import 'init';
50
+
51
+
52
+
53
+
54
+ // |------------------------------------------------------
55
+ // |------------------------------------------------------
56
+ // | Driver flex
57
+ // |------------------------------------------------------
58
+ // |------------------------------------------------------
59
+
60
+ @import 'driver-flex';
@@ -26,116 +26,34 @@
26
26
  // |------------------------------------------------------
27
27
  // |------------------------------------------------------
28
28
 
29
- // |------------------------------------------------------
30
- // |------------------------------------------------------
31
- // @created 25.03.13
32
- // @updated 29.01.15
33
- // @author Olivier Bossel <olivier.bossel@gmail.com>
34
- // @version 1.3.36
35
- // |------------------------------------------------------
36
- // |------------------------------------------------------
37
-
38
- $_gridle-version : "1.3.36";
39
-
40
-
41
-
42
29
 
43
- // |------------------------------------------------------
44
- // |------------------------------------------------------
45
- // | Variables
46
- // |------------------------------------------------------
47
- // |------------------------------------------------------
48
30
 
49
- $_gridle_settings : (); // the default settings
50
- $_gridle_states : (); // the variable map for each states
51
- $_gridle_clear_classes :(); // store each automatic clear count
52
- $_gridle_columns : (); // store the registered special columns
53
- $_gridle_states_debug_devices : (); // save the debug states devices
54
31
 
55
-
56
-
57
-
58
- // |------------------------------------------------------
59
32
  // |------------------------------------------------------
60
- // | Settings
61
33
  // |------------------------------------------------------
62
- // |------------------------------------------------------
63
-
64
- @import 'settings';
65
-
66
-
67
-
68
-
69
- // |------------------------------------------------------
70
- // |------------------------------------------------------
71
- // | Silent classes
72
- // |------------------------------------------------------
73
- // |------------------------------------------------------
74
-
75
- @import 'silent-classes';
76
-
77
-
78
-
79
-
34
+ // | Driver
80
35
  // |------------------------------------------------------
81
36
  // |------------------------------------------------------
82
- // | Common mixins
83
- // |------------------------------------------------------
84
- // |------------------------------------------------------
85
-
86
- @import 'common-mixins';
87
-
88
-
89
-
90
-
91
- // |------------------------------------------------------
92
- // |------------------------------------------------------
93
- // | Functions
94
- // |------------------------------------------------------
95
- // |------------------------------------------------------
96
-
97
- @import 'functions';
98
-
99
-
100
-
101
-
102
- // |------------------------------------------------------
103
- // |------------------------------------------------------
104
- // | Settings mixins
105
- // |------------------------------------------------------
106
- // |------------------------------------------------------
107
-
108
- @import 'settings-mixins';
109
-
110
-
111
-
112
-
113
- // |------------------------------------------------------
114
- // |------------------------------------------------------
115
- // | Mixins
116
- // |------------------------------------------------------
117
- // |------------------------------------------------------
118
-
119
- @import 'mixins';
120
37
 
38
+ $_gridle-driver : default;
121
39
 
122
40
 
123
41
 
124
42
  // |------------------------------------------------------
125
43
  // |------------------------------------------------------
126
- // | Generate mixins
44
+ // | Default init
127
45
  // |------------------------------------------------------
128
46
  // |------------------------------------------------------
129
47
 
130
- @import 'generate-mixins';
48
+ @import 'init';
131
49
 
132
50
 
133
51
 
134
52
 
135
53
  // |------------------------------------------------------
136
54
  // |------------------------------------------------------
137
- // | Default states
55
+ // | Driver default
138
56
  // |------------------------------------------------------
139
57
  // |------------------------------------------------------
140
58
 
141
- @import 'default-states';
59
+ @import 'driver-default';
@@ -0,0 +1,131 @@
1
+ // |------------------------------------------------------
2
+ // |------------------------------------------------------
3
+ // @created 25.03.13
4
+ // @updated 29.09.15
5
+ // @author Olivier Bossel <olivier.bossel@gmail.com>
6
+ // @version 2.0.0
7
+ // |------------------------------------------------------
8
+ // |------------------------------------------------------
9
+
10
+
11
+
12
+
13
+ // |------------------------------------------------------
14
+ // |------------------------------------------------------
15
+ // | Version
16
+ // |------------------------------------------------------
17
+ // |------------------------------------------------------
18
+
19
+ $_gridle-version : "2.0.0";
20
+
21
+
22
+
23
+
24
+ // |------------------------------------------------------
25
+ // |------------------------------------------------------
26
+ // | Variables
27
+ // |------------------------------------------------------
28
+ // |------------------------------------------------------
29
+
30
+ $_gridle_is_in_generate_phase : false; // keep track if we are in generate phase or not anymore
31
+ $_gridle_inited : false; // keep track if gridle has been inited (silent classes, etc..) or not
32
+ $_gridle_settings : (); // the default settings
33
+ $_gridle_states : (); // the variable map for each states
34
+ $_gridle_clear_classes : (); // store each automatic clear count
35
+ $_gridle_columns : (); // store the registered special columns
36
+ $_gridle_extend_base_classes : (); // save the rules that will extend the default gridle onces
37
+ $_gridle_apply_css_for : (); // save the rules that will be applied for each states on a specified gridle mixin type
38
+
39
+ $_gridle_current_state : (); // save the current state
40
+ $_gridle_current_stateName : default; // save the current state name
41
+
42
+ $_content_arg_state : null; // this variable is used to pass state through global variable into an @content
43
+
44
+ $gridle-vendor-prefix : true; // set if need to add vendor prefixes when needed
45
+
46
+
47
+
48
+ // |------------------------------------------------------
49
+ // |------------------------------------------------------
50
+ // | Vendors
51
+ // |------------------------------------------------------
52
+ // |------------------------------------------------------
53
+
54
+ @import 'flexbox';
55
+
56
+
57
+
58
+
59
+ // |------------------------------------------------------
60
+ // |------------------------------------------------------
61
+ // | Settings
62
+ // |------------------------------------------------------
63
+ // |------------------------------------------------------
64
+
65
+ @import 'settings';
66
+
67
+
68
+
69
+
70
+ // |------------------------------------------------------
71
+ // |------------------------------------------------------
72
+ // | Functions
73
+ // |------------------------------------------------------
74
+ // |------------------------------------------------------
75
+
76
+ @import 'functions';
77
+
78
+
79
+
80
+
81
+ // |------------------------------------------------------
82
+ // |------------------------------------------------------
83
+ // | Settings mixins
84
+ // |------------------------------------------------------
85
+ // |------------------------------------------------------
86
+
87
+ @import 'settings-mixins';
88
+
89
+
90
+
91
+
92
+ // |------------------------------------------------------
93
+ // |------------------------------------------------------
94
+ // | Mixins
95
+ // |------------------------------------------------------
96
+ // |------------------------------------------------------
97
+
98
+ @import 'mixins';
99
+
100
+
101
+
102
+
103
+ // |------------------------------------------------------
104
+ // |------------------------------------------------------
105
+ // | Api
106
+ // |------------------------------------------------------
107
+ // |------------------------------------------------------
108
+
109
+ @import 'api';
110
+
111
+
112
+
113
+
114
+ // |------------------------------------------------------
115
+ // |------------------------------------------------------
116
+ // | Generate mixins
117
+ // |------------------------------------------------------
118
+ // |------------------------------------------------------
119
+
120
+ @import 'generate-mixins';
121
+
122
+
123
+
124
+
125
+ // |------------------------------------------------------
126
+ // |------------------------------------------------------
127
+ // | Default states
128
+ // |------------------------------------------------------
129
+ // |------------------------------------------------------
130
+
131
+ // @import 'default-states';
@@ -4,828 +4,389 @@
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);
7
+
8
+ //
9
+ // Init
10
+ // called by _gridle_call mixin multiple times
11
+ //
12
+ @mixin gridle_init() {
13
+ @if $_gridle_inited == false {
14
+ $_gridle_inited : true !global;
15
+ @each $stateName, $state in $_gridle_states {
16
+ $classes : gridle_get_state_var(classes, $state);
17
+ @if $classes {
18
+ @at-root (without:all) {
19
+ $q : gridle_get_media_query($state);
20
+ @if $q {
21
+ @media #{$q} {
22
+ @include _gridle_init_common_silent_classes($state);
23
+ }
24
+ } @else {
25
+ @include _gridle_init_common_silent_classes($state);
26
+ }
75
27
  }
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
28
  }
89
29
  }
90
30
  }
91
31
  }
92
32
 
93
- // Responsive helpers mixins :
94
- @mixin gridle_state(
95
- $states,
96
- $has-parent : true
97
- ) {
98
33
 
99
- // check first param if is a state :
100
- $firstState : nth($states,1);
101
- @if _gridle_has_state($firstState) {
102
-
103
- // loop on each states :
104
- @each $state in $states
105
- {
106
- // variables :
107
- $html-states-classes : _gridle_get_var_value(html-states-classes, $state);
108
- $debug : _gridle_get_var_value(debug, $state);
109
- $stateName : _gridle_get_var_value(name, $state);
110
-
111
- // check if is a state :
112
- @if ($html-states-classes or $debug)
113
- and $stateName {
114
- // html class :
115
- @if $has-parent {
116
- html#{_gridle_classname("#{$stateName}")} & { @content; }
117
- } @else {
118
- html#{_gridle_classname("#{$stateName}")} { @content; }
119
- }
120
- }
121
-
122
- // get the media query :
123
- $q : _gridle_get_media_query($state);
124
-
125
- // make the media query if a query exist :
126
- @if $q {
127
- @media #{$q} {
128
- @content;
129
- }
130
- }
131
- @else
132
- {
133
- @content;
134
- }
135
- }
136
-
137
- } @else {
138
-
139
- // variables :
140
- $html-states-classes : _gridle_get_var_value(html-states-classes, $states);
141
- $debug : _gridle_get_var_value(debug, $states);
142
- $stateName : _gridle_get_var_value(name, $states);
143
-
144
- // check if is a state :
145
- @if ($html-states-classes or $debug)
146
- and $stateName {
147
- // html class :
148
- @if $has-parent {
149
- html#{_gridle_classname("#{$stateName}")} & { @content; }
150
- } @else {
151
- html#{_gridle_classname("#{$stateName}")} { @content; }
152
- }
34
+ //
35
+ // Init silent classes
36
+ //
37
+ @mixin _gridle_common_silent_class_name(
38
+ $for,
39
+ $stateName : default
40
+ ) {
41
+ @if mixin-exists('_gridle_common_#{$for}') {
42
+ %#{$stateName}-#{$for} {
43
+ // inject content
44
+ @content;
45
+ // extend common class by the registered css
46
+ @include _gridle_extend_common_class($for, $stateName);
153
47
  }
154
-
155
- // get the media query :
156
- $q : _gridle_get_media_query($states);
157
-
158
- // make the media query if a query exist :
159
- @if $q {
160
- @media #{$q} {
48
+ @at-root (without: media) {
49
+ %at-root-#{$stateName}-#{$for} {
50
+ // inject content
161
51
  @content;
52
+ // extend common class by the registered css
53
+ @include _gridle_extend_common_class($for, $stateName);
162
54
  }
163
55
  }
164
- @else
165
- {
166
- @content;
167
- }
168
-
169
56
  }
170
57
  }
171
-
172
-
173
-
174
- // Container mixin :
175
- @mixin gridle_container(
58
+ @mixin _gridle_init_common_silent_classes(
176
59
  $state : default
177
60
  ) {
178
- @include _gridle_container_common($state);
179
- }
61
+ // get state name
62
+ $stateName : gridle_get_state_var(name, $state);
180
63
 
181
-
182
- // Grid mixin :
183
- // Set the width of the specified grid column :
184
- @mixin gridle(
185
- $columns,
186
- $state-or-context : default,
187
- $state : default
188
- ) {
189
- // manage state and context :
190
- $context : null;
191
- @if type-of($state-or-context) == number {
192
- $context : $state-or-context;
193
- } @else {
194
- $state : $state-or-context;
64
+ // container
65
+ @include _gridle_common_silent_class_name(container, $stateName) {
66
+ @include _gridle_common_container($state);
195
67
  }
196
68
 
197
- // common :
198
- @include _gridle_grid_common();
199
- // check if need media query :
200
- @if $state {
201
- @include gridle_state($state) {
202
- @include _gridle($columns, $state, $context);
203
- }
204
- } @else {
205
- @include _gridle($columns, $state, $context);
206
- }
207
- }
208
- @mixin _gridle(
209
- $columns,
210
- $state : default,
211
- $context : null
212
- ) {
213
- // vars :
214
- $name : _gridle_get_var_value(name, $state);
215
- @if type-of($context) != number {
216
- $context : _gridle_get_var_value(context, $state);
217
- }
218
- $name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
219
- $gutter-width : _gridle_get_var_value(gutter-width, $state);
220
- $ie7-support : _gridle_get_var_value(ie7-support, $state);
221
- $debug : _gridle_get_var_value(debug, $state);
222
- $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
223
-
224
- // manage columns
225
- @if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
226
- // the columns is a saved one, get the context and column value
227
- $column : map-get($_gridle_columns, $columns);
228
- $context : map-get($column, context);
229
- $columns : map-get($column, columns);
230
- } @else if type-of($columns) == number {
231
- $columns : $columns / $name-multiplicator;
232
- } @else {
233
- @error "the column #{$columns} does not exist...";
234
- }
235
-
236
- // vars :
237
- $width : percentage(1 / $context * $columns);
238
-
239
- // set value :
240
- width:$width;
241
-
242
- // ie7 support :
243
- @if $ie7-support == true {
244
- *width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
245
- }
246
-
247
- // debug :
248
- @if $debug == true and $debug-show-class-names == true {
249
- #{$gridle-debug-selector} {
250
- &:before {
251
- @if $name == default {
252
- content:"grid-#{$name}-#{$columns}";
253
- } @else {
254
- content:"grid-#{$name}-#{$columns}" !important;
255
- }
256
- }
257
- &.parent:before {
258
- @if $name == default {
259
- content:"grid-parent-#{$name}-#{$columns}";
260
- } @else {
261
- content:"grid-parent-#{$name}-#{$columns}" !important;
262
- }
263
- }
264
- }
69
+ // order
70
+ @include _gridle_common_silent_class_name(grid-order, $stateName) {
71
+ @include _gridle_common_grid_order($state);
265
72
  }
266
- }
267
-
268
73
 
269
- // push :
270
- // Push the element of the count of column wanted
271
- @mixin gridle_push(
272
- $columns,
273
- $state-or-context : default,
274
- $state : default
275
- ) {
276
- // manage state and context
277
- $context : null;
278
- @if type-of($state-or-context) == number {
279
- $context : $state-or-context;
280
- } @else {
281
- $state : $state-or-context;
74
+ // row
75
+ @include _gridle_common_silent_class_name(row, $stateName) {
76
+ @include _gridle_common_row($state);
282
77
  }
283
78
 
284
- // common :
285
- @include _gridle_push_common($state);
286
-
287
- // check if need media query :
288
- @if $state {
289
- @include gridle_state($state) {
290
- @include _gridle_push($columns, $state, $context);
291
- }
292
- } @else {
293
- @include _gridle_push($columns, $state, $context);
79
+ // row-full
80
+ @include _gridle_common_silent_class_name(row-full, $stateName) {
81
+ @include _gridle_common_row_full($state);
294
82
  }
295
- }
296
- @mixin _gridle_push(
297
- $columns,
298
- $state : default,
299
- $context : null
300
- ) {
301
- // variables :
302
- $name : _gridle_get_var_value(name, $state);
303
- @if type-of($context) != number {
304
- $context : _gridle_get_var_value(context, $state);
305
- }
306
- $direction : _gridle_get_var_value(direction, $state);
307
- $name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
308
- $debug : _gridle_get_var_value(debug, $state);
309
- $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
310
-
311
- // vars :
312
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
313
- @if $direction == rtl { $width : $width*-1; }
314
- left:$width;
315
-
316
- // debug css :
317
- @if $debug == true and $debug-show-class-names == true {
318
- #{$gridle-debug-selector} {
319
- &:after {
320
- @if $name == default {
321
- content:"push-#{$name}-#{$columns}";
322
- } @else {
323
- content:"push-#{$name}-#{$columns}" !important;
324
- }
325
- }
326
- }
327
- }
328
-
329
- }
330
83
 
331
-
332
- // pull :
333
- // Pull the element of the count of column wanted
334
- @mixin gridle_pull(
335
- $columns,
336
- $state : default
337
- ) {
338
- // common :
339
- @include _gridle_pull_common($state);
340
-
341
- // check if need media query :
342
- @if $state {
343
- @include gridle_state($state) {
344
- @include _gridle_pull($columns,$state);
345
- }
346
- } @else {
347
- @include _gridle_pull($columns,$state);
348
- }
349
- }
350
- @mixin _gridle_pull(
351
- $columns,
352
- $state : default
353
- ) {
354
- // vars :
355
- $name : _gridle_get_var_value(name, $state);
356
- $context : _gridle_get_var_value(context, $state);
357
- $direction : _gridle_get_var_value(direction, $state);
358
- $name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
359
- $debug : _gridle_get_var_value(debug, $state);
360
- $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
361
-
362
- // vars :
363
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
364
- @if $direction == rtl { $width : $width*-1; }
365
- right:$width;
366
-
367
- // debug css :
368
- @if $debug == true and $debug-show-class-names == true {
369
- #{$gridle-debug-selector} {
370
- &:after {
371
- @if $name == default {
372
- content:"pull-#{$name}-#{$columns}";
373
- } @else {
374
- content:"pull-#{$name}-#{$columns}" !important;
375
- }
376
- }
377
- }
84
+ // col
85
+ @include _gridle_common_silent_class_name(col, $stateName) {
86
+ @include _gridle_common_col($state);
378
87
  }
379
- }
380
88
 
381
-
382
- // push :
383
- // Push the element of the count of column wanted
384
- @mixin gridle_prefix(
385
- $columns,
386
- $state : default
387
- ) {
388
- // common :
389
- @include _gridle_prefix_common($state);
390
-
391
- // check if need media query :
392
- @if $state {
393
- @include gridle_state($state) {
394
- @include _gridle_prefix($columns,$state);
395
- }
396
- } @else {
397
- @include _gridle_prefix($columns,$state);
398
- }
399
- }
400
- @mixin _gridle_prefix(
401
- $columns,
402
- $state : default
403
- ) {
404
- // vars :
405
- $name : _gridle_get_var_value(name, $state);
406
- $context : _gridle_get_var_value(context, $state);
407
- $direction : _gridle_get_var_value(direction, $state);
408
- $gutter-width : _gridle_get_var_value(gutter-width, $state);
409
- $name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
410
- $debug : _gridle_get_var_value(debug, $state);
411
- $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
412
-
413
- // vars :
414
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
415
-
416
- // set value :
417
- @if $direction == rtl { margin-right:$width; }
418
- @else { margin-left:$width; }
419
-
420
- // debug css :
421
- @if $debug == true and $debug-show-class-names == true {
422
- #{$gridle-debug-selector} {
423
- &:after {
424
- @if $name == default {
425
- content:"prefix-#{$name}-#{$columns}";
426
- } @else {
427
- content:"prefix-#{$name}-#{$columns}" !important;
428
- }
429
- }
430
- }
89
+ // grid
90
+ @include _gridle_common_silent_class_name(grid, $stateName) {
91
+ @include _gridle_common_grid($state);
431
92
  }
432
- }
433
-
434
93
 
435
- // pull :
436
- // Pull the element of the count of column wanted
437
- @mixin gridle_suffix(
438
- $columns,
439
- $state : default
440
- ) {
441
- // common :
442
- @include _gridle_suffix_common($state);
94
+ // grid-table
95
+ @include _gridle_common_silent_class_name(grid-table, $stateName) {
96
+ @include _gridle_common_grid_table($state);
97
+ }
443
98
 
444
- // check if need media query :
445
- @if $state {
446
- @include gridle_state($state) {
447
- @include _gridle_suffix($columns,$state);
448
- }
449
- } @else {
450
- @include _gridle_suffix($columns,$state);
99
+ // grid-adapt
100
+ @include _gridle_common_silent_class_name(grid-adapt, $stateName) {
101
+ @include _gridle_common_grid_adapt($state);
451
102
  }
452
- }
453
- @mixin _gridle_suffix(
454
- $columns,
455
- $state : default
456
- ) {
457
- // vars :
458
- $name : _gridle_get_var_value(name, $state);
459
- $context : _gridle_get_var_value(context, $state);
460
- $direction : _gridle_get_var_value(direction, $state);
461
- $gutter-width : _gridle_get_var_value(gutter-width, $state);
462
- $name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
463
- $debug : _gridle_get_var_value(debug, $state);
464
- $debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
465
-
466
- // vars :
467
- $width : percentage(1 / $context) * ($columns / $name-multiplicator);
468
-
469
- // set value :
470
- @if $direction == rtl { margin-left:$width; }
471
- @else { margin-right:$width; }
472
-
473
- // debug css :
474
- @if $debug == true and $debug-show-class-names == true {
475
- #{$gridle-debug-selector} {
476
- &:after {
477
- @if $name == default {
478
- content:"suffix-#{$name}-#{$columns}";
479
- } @else {
480
- content:"suffix-#{$name}-#{$columns}" !important;
481
- }
482
- }
483
- }
103
+
104
+ // grid-grow
105
+ @include _gridle_common_silent_class_name(grid-grow, $stateName) {
106
+ @include _gridle_common_grid_grow($state);
484
107
  }
485
- }
486
108
 
109
+ // push
110
+ @include _gridle_common_silent_class_name(push, $stateName) {
111
+ @include _gridle_common_push($state);
112
+ }
487
113
 
488
- // grid background :
489
- // Display the grid background debug
490
- @mixin gridle_grid_background(
491
- $state : default
492
- ) {
493
- // check if need media query :
494
- @if $state {
495
- @include gridle_state($state) {
496
- @include _gridle_grid_background($state);
497
- }
498
- } @else {
499
- @include _gridle_grid_background($state);
114
+ // pull
115
+ @include _gridle_common_silent_class_name(pull, $stateName) {
116
+ @include _gridle_common_pull($state);
500
117
  }
501
- }
502
- @mixin _gridle_grid_background(
503
- $state : default
504
- ) {
505
-
506
- // variables :
507
- $context : _gridle_get_var_value(context, $state);
508
-
509
- position:relative;
510
- z-index:9999;
511
- &:before {
512
- content:'';
513
- position:absolute;
514
- top:0; left:0;
515
- width:100%; height:100% !important;
516
- // vars :
517
- $width : percentage(1 / $context);
518
- background: linear-gradient(to right, rgba(0,0,0,.01) 50% , rgba(0,0,0,.04) 50%); /* Standard syntax */
519
- background-size:($width*2) 100%;
520
- // background-position:$gridle-gutter-width/2 0;
118
+
119
+ // prefix
120
+ @include _gridle_common_silent_class_name(prefix, $stateName) {
121
+ @include _gridle_common_prefix($state);
521
122
  }
522
- }
523
123
 
124
+ // suffix
125
+ @include _gridle_common_silent_class_name(suffix, $stateName) {
126
+ @include _gridle_common_suffix($state);
127
+ }
524
128
 
525
- /**
526
- * Parent clear each
527
- */
528
- // Grid mixin :
529
- // Set the width of the specified grid column :
530
- @mixin gridle_clear_each(
531
- $clearEach,
532
- $clearWhat : both,
533
- $state : default
534
- ) {
535
- // check if need media query :
536
- @if $state {
537
- @include gridle_state($state) {
538
- @include _gridle_clear_each($clearEach, $clearWhat);
539
- }
540
- } @else {
541
- @include _gridle_clear_each($clearEach, $clearWhat);
129
+ // nowrap
130
+ @include _gridle_common_silent_class_name(nowrap, $stateName) {
131
+ @include _gridle_common_nowrap($state);
542
132
  }
543
- }
544
- @mixin _gridle_clear_each(
545
- $clearEach,
546
- $clearWhat
547
- ) {
548
- > *:nth-child(#{$clearEach}n+1) {
549
- clear : $clearWhat;
133
+
134
+ // wrap
135
+ @include _gridle_common_silent_class_name(wrap, $stateName) {
136
+ @include _gridle_common_wrap($state);
550
137
  }
551
- }
552
138
 
139
+ // clear-each
140
+ @include _gridle_common_silent_class_name(clear-each, $stateName) {
141
+ @include _gridle_common_clear_each($state);
142
+ }
553
143
 
554
- // Grid centered :
555
- @mixin gridle_centered(
556
- $state : default
557
- ) {
558
- // check if need media query :
559
- @if $state {
560
- @include gridle_state($state) {
561
- @include _gridle_centered();
562
- }
563
- } @else {
564
- @include _gridle_centered();
144
+ // centered
145
+ @include _gridle_common_silent_class_name(grid-centered, $stateName) {
146
+ @include _gridle_common_grid_centered($state);
565
147
  }
566
- }
567
- @mixin _gridle_centered() {
568
- display:block !important;
569
- float:none !important;
570
- margin-left:auto !important;
571
- margin-right:auto !important;
572
- clear:both !important;
573
- }
574
148
 
149
+ // align
150
+ @include _gridle_common_silent_class_name(row-align, $stateName) {
151
+ @include _gridle_common_row_align($state);
152
+ }
575
153
 
576
- // Grid parent :
577
- @mixin gridle_parent(
578
- $state : default
579
- ) {
580
- // common :
581
- @include _gridle_parent_common();
582
- // check if need media query :
583
- @if $state {
584
- @include gridle_state($state) {
585
- @include _gridle_parent();
586
- }
587
- } @else {
588
- @include _gridle_parent();
154
+ // hide
155
+ @include _gridle_common_silent_class_name(hide, $stateName) {
156
+ @include _gridle_common_hide($state);
589
157
  }
590
- }
591
- @mixin _gridle_parent() {
592
- @include gridle_no_gutter();
593
- }
594
158
 
159
+ // not-visible
160
+ @include _gridle_common_silent_class_name(not-visible, $stateName) {
161
+ @include _gridle_common_not_visible($state);
162
+ }
595
163
 
596
- /**
597
- * Vertical align :
598
- */
599
- @mixin gridle_vertical_align(
600
- $align : middle,
601
- $state : default
602
- ) {
603
- // check if need media query :
604
- @if $state {
605
- @include gridle_state($state) {
606
- @include _gridle_vertical_align($align);
607
- }
608
- } @else {
609
- @include _gridle_vertical_align($align);
164
+ // show
165
+ @include _gridle_common_silent_class_name(show, $stateName) {
166
+ @include _gridle_common_show($state);
610
167
  }
611
- }
612
- @mixin _gridle_vertical_align(
613
- $align : middle
614
- ) {
615
- font-size:0;
616
- clear:both;
617
168
 
618
- > * {
619
- display:inline-block;
620
- float:none !important;
621
- vertical-align:$align;
622
- font-size:1rem;
169
+ // show-inline
170
+ @include _gridle_common_silent_class_name(show-inline, $stateName) {
171
+ @include _gridle_common_show_inline($state);
623
172
  }
624
- }
625
173
 
174
+ // visible
175
+ @include _gridle_common_silent_class_name(visible, $stateName) {
176
+ @include _gridle_common_visible($state);
177
+ }
626
178
 
627
- // Hide on :
628
- // @param String $media On what state
629
- @mixin gridle_hide(
630
- $state : default
631
- ) {
632
- // check if need media query :
633
- @if $state {
634
- @include gridle_state($state) {
635
- @include _gridle_hide();
636
- }
637
- } @else {
638
- @include _gridle_hide();
179
+ // float
180
+ @include _gridle_common_silent_class_name(float, $stateName) {
181
+ @include _gridle_common_float($state);
639
182
  }
640
- }
641
- @mixin _gridle_hide() {
642
- display:none;
643
- }
644
183
 
184
+ // clear
185
+ @include _gridle_common_silent_class_name(clear, $stateName) {
186
+ @include _gridle_common_clear($state);
187
+ }
645
188
 
646
- // Not visible on :
647
- // @param String $media What to hide (one of the 3 state classes name)
648
- @mixin gridle_not_visible(
649
- $state : default
650
- ) {
651
- // check if need media query :
652
- @if $state {
653
- @include gridle_state($state) {
654
- @include _gridle_not_visible();
655
- }
656
- } @else {
657
- @include _gridle_not_visible();
189
+ // no-gutter
190
+ @include _gridle_common_silent_class_name(no-gutter, $stateName) {
191
+ @include _gridle_common_no_gutter($state);
658
192
  }
659
- }
660
- @mixin _gridle_not_visible() {
661
- visibility:hidden;
662
- }
663
193
 
194
+ // gutter
195
+ @include _gridle_common_silent_class_name(gutter, $stateName) {
196
+ @include _gridle_common_gutter($state);
197
+ }
664
198
 
665
- // Show on
666
- // @param String $media What to hide (one of the 3 state classes name)
667
- @mixin gridle_show(
668
- $state : default
669
- ) {
670
- // check if need media query :
671
- @if $state {
672
- @include gridle_state($state) {
673
- @include _gridle_show();
674
- }
675
- } @else {
676
- @include _gridle_show();
199
+ // row debug
200
+ @include _gridle_common_silent_class_name(row-debug, $stateName) {
201
+ @include _gridle_common_row_debug($state);
677
202
  }
678
203
  }
679
- @mixin _gridle_show() {
680
- display:block;
681
- }
682
204
 
683
205
 
684
- /**
685
- * Show inline
686
- *
687
- * @param String $state The state name
688
- */
689
- @mixin gridle_show_inline(
690
- $state : default
206
+ //
207
+ // Wrap gridle mixin content to init if needed and then extend if needed
208
+ //
209
+ @mixin _gridle_call(
210
+ $for : null
691
211
  ) {
692
- // check if need media query :
693
- @if $state {
694
- @include gridle_state($state) {
695
- @include _gridle_show_inline();
696
- }
697
- } @else {
698
- @include _gridle_show_inline();
699
- }
700
- }
701
- @mixin _gridle_show_inline() {
702
- display:inline-block;
703
- }
212
+ // init if needed
213
+ @include gridle_init();
704
214
 
215
+ // put content
216
+ @content;
705
217
 
706
- // Visible on :
707
- // @param String $media On what state
708
- @mixin gridle_visible(
709
- $state : default
710
- ) {
711
- // check if need media query :
712
- @if $state {
713
- @include gridle_state($state) {
714
- @include _gridle_visible();
218
+ // extend and apply css for different states
219
+ @if $for {
220
+ @include _gridle_extend($for);
221
+ @if _gridle_is_in_generate_phase() == false {
222
+ @include _gridle_apply_css_for($for);
715
223
  }
716
- } @else {
717
- @include _gridle_visible();
718
224
  }
719
225
  }
720
- @mixin _gridle_visible() {
721
- visibility:visible;
722
- }
723
226
 
724
227
 
725
- // Gridle Right :
726
- @mixin gridle_float(
727
- $float-direction : left,
728
- $state : default
228
+ //
229
+ // Extend
230
+ // @stateContext
231
+ // @calledBy _gridle_call
232
+ //
233
+ @mixin _gridle_extend(
234
+ $for
729
235
  ) {
730
- // check if need media query :
731
- @if $state {
732
- @include gridle_state($state) {
733
- @include _gridle_float($float-direction);
236
+ // check if we need the state classes
237
+ $states-classes : gridle_get_state_var(states-classes);
238
+
239
+ // extend the "at-root" version for the .state-{stateName} classes
240
+ @if $states-classes and str-index(#{&}, unquote(".state-#{$_gridle_current_stateName}")) {
241
+ @at-root (without: media) {
242
+ // @debug("%at-root-#{$_gridle_current_stateName}-#{$for}");
243
+ @extend %at-root-#{$_gridle_current_stateName}-#{$for} !optional;
734
244
  }
735
245
  } @else {
736
- @include _gridle_float($float-direction);
246
+ // extend using the current state name set in each gridle_state call
247
+ // @debug("%#{$_gridle_current_stateName}-#{$for}");
248
+ @extend %#{$_gridle_current_stateName}-#{$for} !optional;
249
+ }
250
+ }
251
+
252
+
253
+ //
254
+ // Apply the registered css for a certain type (grid, push, etc...)
255
+ // in each states
256
+ //
257
+ $_gridle_applied_for : ();
258
+ @mixin _gridle_apply_css_for(
259
+ $_for
260
+ ) {
261
+ $selector : "#{&}-#{$_for}"; // generate a unique name that will be stacked in a map to generate only 1 time
262
+ @if map-get($_gridle_applied_for, $selector) == null {
263
+ $_gridle_applied_for : map-set($_gridle_applied_for, $selector, true) !global;
264
+ $fors-patterns : $_gridle-packages;
265
+ @each $map in $_gridle_apply_css_for {
266
+ @each $stateName, $fors in $map {
267
+ $rules : map-get($fors, $_for);
268
+ @if $rules and map-get($fors-patterns, $_for) {
269
+ @at-root (without : media) {
270
+ @include _gridle_state($stateName, true, false) {
271
+ @include gridle_use_state($stateName) {
272
+ @include _gridle_map_2_css($rules);
273
+ }
274
+ }
275
+ }
276
+ }
277
+ }
278
+ }
737
279
  }
738
280
  }
739
- @mixin _gridle_float(
740
- $float-direction : left
741
- ) {
742
- float:#{$float-direction};
743
- }
744
281
 
745
282
 
746
- // Gridle clear :
747
- // @param String $clear-direction The direction to clear
748
- // @param String $state The state
749
- @mixin gridle_clear(
750
- $clear-direction : both,
751
- $state : default
283
+ //
284
+ // Gridle state
285
+ //
286
+ // @param string|map|list $states A list of states, a state name or a state map
287
+ // @param boolean $has-parent Mostly always true, mean that the mixin is used in a css selector and not in css root level
288
+ //
289
+ @mixin _gridle_state(
290
+ $state : default,
291
+ $has-parent : true,
292
+ $track-current-state : true
752
293
  ) {
753
- // check if need media query :
754
- @if $state {
755
- @include gridle_state($state) {
756
- @include _gridle_clear($clear-direction);
294
+
295
+ // variables :
296
+ $state : gridle_get_state($state);
297
+ $states-classes : gridle_get_state_var(states-classes, $state);
298
+ $stateName : gridle_get_state_var(name, $state);
299
+
300
+ // check if need to tack the current state
301
+ @if $track-current-state {
302
+ // save current state
303
+ $_gridle_current_state : $state !global;
304
+ $_gridle_current_stateName : $stateName !global;
305
+ }
306
+
307
+ // check if is a state :
308
+ @if ($states-classes)
309
+ and $stateName {
310
+ // html class :
311
+ @at-root (without: media) {
312
+ @if $has-parent {
313
+ .state-#{$stateName} & {
314
+ @content;
315
+ }
316
+ } @else {
317
+ .state-#{$stateName} {
318
+ @content;
319
+ }
320
+ }
757
321
  }
758
- } @else {
759
- @include _gridle_clear($clear-direction);
760
322
  }
761
- }
762
- @mixin _gridle_clear(
763
- $clear-direction : both
764
- ) {
765
- clear:#{$clear-direction};
766
- }
767
323
 
324
+ // get the media query :
325
+ $q : gridle_get_media_query($state);
768
326
 
769
- // Gridle no gutter :
770
- // @param String $side The side to clear
771
- // @param String $state The state
772
- @mixin gridle_no_gutter(
773
- $side : left right,
774
- $state : default
775
- ) {
776
- // check if need media query :
777
- @if $state {
778
- @include gridle_state($state) {
779
- @include _gridle_no_gutter($side);
327
+ // make the media query if a query exist :
328
+ @if $q {
329
+ @media #{$q} {
330
+ @content;
780
331
  }
781
332
  } @else {
782
- @include _gridle_no_gutter($side);
333
+ @content;
783
334
  }
784
- }
785
- @mixin gridle_no_margin(
786
- $side : left right,
787
- $state : default
788
- ) {
789
- @include gridle_no_gutter($side, $state);
790
- }
791
- @mixin _gridle_no_gutter(
792
- $side : left right
793
- ) {
794
- @each $s in $side {
795
- padding-#{$s} : 0;
335
+
336
+ // reset current state to default
337
+ @if $track-current-state {
338
+ $_gridle_current_state : $_gridle_settings !global;
339
+ $_gridle_current_stateName : default !global;
796
340
  }
797
341
  }
798
342
 
799
343
 
800
- // Gridle gutter :
801
- // @param String $side The side to clear
802
- // @param String $state The state
803
- @mixin gridle_gutter(
804
- $side : left right,
805
- $state : default
344
+ //
345
+ // Transform map to css
346
+ //
347
+ @mixin _gridle_map_2_css(
348
+ $map
806
349
  ) {
807
- // check if need media query :
808
- @if $state {
809
- @include gridle_state($state) {
810
- @include _gridle_gutter($side);
350
+ @each $key, $value in $map {
351
+ @if type-of($value) == map {
352
+ &#{$key} {
353
+ @each $k, $v in $value {
354
+ @if $k != null and str-index($k, gridle) and mixin-exists($k) {
355
+ $set-name : str-replace($k, "gridle_", "");
356
+ $set-name : str-replace($set-name, "_", "-", 1);
357
+ @include _gridle_set((
358
+ $set-name : $v
359
+ ));
360
+ } @else {
361
+ #{$k}:#{$v};
362
+ }
363
+ }
364
+ }
365
+ } @else {
366
+ @if $key != null and str-index($key, gridle) and mixin-exists($key) {
367
+ $set-name : str-replace($key, "gridle_", "");
368
+ $set-name : str-replace($set-name, "_", "-", 1);
369
+ @include _gridle_set((
370
+ $set-name : $value
371
+ ));
372
+ } @else {
373
+ #{$key}:#{$value};
374
+ }
811
375
  }
812
- } @else {
813
- @include _gridle_gutter($side);
814
376
  }
815
377
  }
816
- // shortcut :
817
- @mixin gridle_margin(
818
- $side : left right,
819
- $state : default
820
- ) {
821
- @include gridle_gutter($side, $state);
822
- }
823
- @mixin _gridle_gutter(
824
- $side : left right,
378
+
379
+ //
380
+ // Extend common class
381
+ //
382
+ @mixin _gridle_extend_common_class(
383
+ $what,
825
384
  $state : default
826
385
  ) {
827
- $gutter-width : _gridle_get_var_value(gutter-width, $state);
828
- @each $s in $side {
829
- padding-#{$s} : $gutter-width / 2;
386
+ // extend
387
+ $stateName : gridle_get_state_var(name, $state);
388
+ $extend : gridle_get_extend_class_map($what, $stateName);
389
+ @if $extend != null {
390
+ @include _gridle_map_2_css($extend);
830
391
  }
831
392
  }