gridle 1.0.7 → 1.0.8

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.
Files changed (4) hide show
  1. data/lib/gridle.rb +2 -2
  2. data/stylesheets/gridle/_gridle.scss +462 -327
  3. metadata +25 -6
  4. checksums.yaml +0 -7
data/lib/gridle.rb CHANGED
@@ -17,8 +17,8 @@ Compass::Frameworks.register('gridle', :path => extension_path)
17
17
  # a prerelease version
18
18
  # Date is in the form of YYYY-MM-DD
19
19
  module Extension
20
- VERSION = "1.0.7"
21
- DATE = "2013-11-06"
20
+ VERSION = "1.0.8"
21
+ DATE = "2013-11-19"
22
22
  end
23
23
 
24
24
  # This is where any custom SassScript should be placed. The functions will be
data/stylesheets/gridle/_gridle.scss CHANGED
@@ -29,9 +29,9 @@
29
29
  // |------------------------------------------------------
30
30
  // |------------------------------------------------------
31
31
  // @created 25.03.13
32
- // @updated 06.11.13
32
+ // @updated 12.11.13
33
33
  // @author Olivier Bossel <olivier.bossel@gmail.com>
34
- // @version 1.0.5
34
+ // @version 1.0.8
35
35
  // |------------------------------------------------------
36
36
  // |------------------------------------------------------
37
37
 
@@ -44,7 +44,6 @@
44
44
  // |------------------------------------------------------
45
45
  // |------------------------------------------------------
46
46
 
47
-
48
47
  // gridle configuration vars :
49
48
  $gridle-columns-count : 12 !default;
50
49
  $gridle-gutter-width : 20px !default;
@@ -57,6 +56,8 @@ $gridle-debug-show-class-names : true !default;
57
56
 
58
57
  $gridle-ie7-support : true !default;
59
58
 
59
+ $gridle-class-prefix : '' !default;
60
+
60
61
  $gridle-html-states-classes : false !default;
61
62
 
62
63
  $gridle-generate-helpers-classes : true !default;
@@ -67,6 +68,8 @@ $gridle-generate-suffix-classes : true !default;
67
68
 
68
69
  $gridle-generate-useful-states-classes : () !default;// retina | landscape | portrait | print | tv
69
70
 
71
+ $gridle-debug-selector : ".gridle-debug &, &.gridle-debug";
72
+
70
73
 
71
74
 
72
75
 
@@ -177,20 +180,9 @@ $_gridle-state-15-classes : true !default;
177
180
  // |------------------------------------------------------
178
181
  // |------------------------------------------------------
179
182
 
180
-
181
183
  // Init gridle
182
184
  // Creating the silent classes with user configuration :
183
- %gridle-push-pull-debug-background-common {
184
- background-size:50px 90%;
185
- background-position:0 50%;
186
- background-repeat:repeat-x;
187
- }
188
- %gridle-push-pull-common {
189
- position:relative;
190
- }
191
- %gridle-container-common {
192
- width:100%;
193
-
185
+ %gridle-clearfix {
194
186
  // For modern browser
195
187
  &:before,
196
188
  &:after {
@@ -205,6 +197,28 @@ $_gridle-state-15-classes : true !default;
205
197
  zoom:1;
206
198
  }
207
199
  }
200
+ %gridle-push-pull-debug-background-common {
201
+ background-size:50px 90%;
202
+ background-position:0 50%;
203
+ background-repeat:repeat-x;
204
+ }
205
+ %gridle-push-pull-common {
206
+ position:relative;
207
+ }
208
+ %gridle-container-common {
209
+ -webkit-box-sizing: border-box;
210
+ -moz-box-sizing: border-box;
211
+ box-sizing: border-box;
212
+
213
+ @extend gridle-clearfix;
214
+ }
215
+ %gridle-parent-common {
216
+ -webkit-box-sizing: border-box;
217
+ -moz-box-sizing: border-box;
218
+ box-sizing: border-box;
219
+
220
+ @extend gridle-clearfix;
221
+ }
208
222
  %gridle-container-debug-common {
209
223
  background-color:#f5f5f5;
210
224
 
@@ -217,9 +231,6 @@ $_gridle-state-15-classes : true !default;
217
231
  text-align:center;
218
232
  color:white;
219
233
  font-size:11px;
220
- -webkit-box-sizing: border-box;
221
- -moz-box-sizing: border-box;
222
- box-sizing: border-box;
223
234
  }
224
235
  }
225
236
  %gridle-grid-debug-common {
@@ -236,6 +247,7 @@ $_gridle-state-15-classes : true !default;
236
247
  -webkit-box-sizing: border-box;
237
248
  -moz-box-sizing: border-box;
238
249
  box-sizing: border-box;
250
+ display:block !important;
239
251
  }
240
252
  background-color:#daeff5;
241
253
  }
@@ -273,27 +285,33 @@ $_gridle-state-15-classes : true !default;
273
285
  float:left;
274
286
  direction:ltr;
275
287
  }
288
+
276
289
  // set padding :;
277
- padding:0 $gridle-gutter-width/2 !important;
290
+ padding:0 $gridle-gutter-width/2;
278
291
  @if $gridle-debug == true {
279
- @extend %gridle-grid-debug-common;
292
+ #{$gridle-debug-selector} {
293
+ @extend %gridle-grid-debug-common;
294
+ }
280
295
  }
281
296
  }
282
297
  @mixin _gridle_container_common() {
298
+ @extend %gridle-clearfix;
283
299
  @extend %gridle-container-common;
284
300
  // debug part :
285
301
  @if ($gridle-debug == true) {
286
- @extend %gridle-container-debug-common;
287
- &:before {
288
- @if $gridle-debug-show-class-names == true {
289
- padding:10px $gridle-gutter-width/2;
290
- content:"container-#{$gridle-columns-count}" !important;
302
+ #{$gridle-debug-selector} {
303
+ @extend %gridle-container-debug-common;
304
+ &:before {
305
+ @if $gridle-debug-show-class-names == true {
306
+ padding:10px $gridle-gutter-width/2;
307
+ content:"container-#{$gridle-columns-count}" !important;
308
+ }
291
309
  }
292
- }
293
- &:after {
294
- @if $gridle-debug-show-class-names == true {
295
- padding:10px $gridle-gutter-width/2;
296
- content:"end container-#{$gridle-columns-count}" !important;
310
+ &:after {
311
+ @if $gridle-debug-show-class-names == true {
312
+ padding:10px $gridle-gutter-width/2;
313
+ content:"end container-#{$gridle-columns-count}" !important;
314
+ }
297
315
  }
298
316
  }
299
317
  }
@@ -302,35 +320,43 @@ $_gridle-state-15-classes : true !default;
302
320
  // extend common :
303
321
  @extend %gridle-push-pull-common;
304
322
  @if $gridle-debug == true {
305
- @extend %gridle-push-pull-debug-background-common;
306
- background-color:#f4efdf !important;
307
- @if $gridle-direction == ltr {
308
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
309
- } @else {
310
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
323
+ #{$gridle-debug-selector} {
324
+ @extend %gridle-push-pull-debug-background-common;
325
+ background-color:#f4efdf !important;
326
+ @if $gridle-direction == ltr {
327
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
328
+ } @else {
329
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
330
+ }
311
331
  }
312
332
  }
313
333
  }
314
334
  @mixin _gridle_pull_common() {
315
335
  @extend %gridle-push-pull-common;
316
336
  @if $gridle-debug == true {
317
- @extend %gridle-push-pull-debug-background-common;
318
- background-color:#cfe4d5 !important;
319
- @if $gridle-direction == ltr {
320
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
321
- } @else {
322
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
337
+ #{$gridle-debug-selector} {
338
+ @extend %gridle-push-pull-debug-background-common;
339
+ background-color:#cfe4d5 !important;
340
+ @if $gridle-direction == ltr {
341
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
342
+ } @else {
343
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
344
+ }
323
345
  }
324
346
  }
325
347
  }
326
348
  @mixin _gridle_prefix_common() {
327
349
  @if $gridle-debug == true {
328
- @extend %gridle-prefix-debug-common;
350
+ #{$gridle-debug-selector} {
351
+ @extend %gridle-prefix-debug-common;
352
+ }
329
353
  }
330
354
  }
331
355
  @mixin _gridle_suffix_common() {
332
356
  @if $gridle-debug == true {
333
- @extend %gridle-suffix-debug-common;
357
+ #{$gridle-debug-selector} {
358
+ @extend %gridle-suffix-debug-common;
359
+ }
334
360
  }
335
361
  }
336
362
 
@@ -346,14 +372,23 @@ $_gridle-state-15-classes : true !default;
346
372
 
347
373
  // Get column width :
348
374
  @function gridle_get_columns_width(
349
- $columns : 1
375
+ $columns : 1,
376
+ $context : $gridle-columns-count
350
377
  ) {
351
- @return percentage(1 / $gridle-columns-count * $columns);
378
+ @return percentage(1 / $context * $columns);
352
379
  }
353
380
  @function gridle_get_column_width(
354
- $columns : 1
381
+ $columns : 1,
382
+ $context : $gridle-column-count
355
383
  ) {
356
- @return gridle_get_columns_width($columns);
384
+ @return gridle_get_columns_width($columns, $context);
385
+ }
386
+
387
+ // prefix classname :
388
+ @function _gridle_prefixed_class(
389
+ $name
390
+ ) {
391
+ @return ".#{$gridle-class-prefix}#{$name}";
357
392
  }
358
393
 
359
394
 
@@ -366,43 +401,44 @@ $_gridle-state-15-classes : true !default;
366
401
  // get the index of state :
367
402
  $idx : _gridle_get_media_query_index_by_name($state);
368
403
 
369
- // check if media_min-width is null :
370
- @if $state != null {
371
-
372
- @if $idx != null {
373
- // get vars :
374
- $m : _gridle_get_media_query_vars($idx,"name");
375
- $min-width : _gridle_get_media_query_vars($idx,"min-width");
376
- $max-width : _gridle_get_media_query_vars($idx,"max-width");
377
- $classes : _gridle_get_media_query_vars($idx,"classes");
378
- $query : _gridle_get_media_query_vars($idx,"query");
379
-
380
- // check if exist :
381
- @if $m != null {
382
- // check if query exist :
383
- @if $query != null {
384
- @return $query;
404
+ // if there's an idx, the state requested is a registered one :
405
+ @if $idx {
406
+ // get vars :
407
+ $name : _gridle_get_media_query_vars($idx,"name");
408
+ $min-width : _gridle_get_media_query_vars($idx,"min-width");
409
+ $max-width : _gridle_get_media_query_vars($idx,"max-width");
410
+ $classes : _gridle_get_media_query_vars($idx,"classes");
411
+ $query : _gridle_get_media_query_vars($idx,"query");
412
+
413
+ // check if exist :
414
+ @if $name != null {
415
+ // check if query exist :
416
+ @if $query != null {
417
+ @return $query;
418
+ } @else {
419
+
420
+ // write media query :
421
+ @if $min-width and $max-width {
422
+ @return "@media screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
423
+ } @else if $min-width == null and $max-width {
424
+ @return "@media screen and (max-width: #{$max-width})";
425
+ } @else if $min-width and $max-width == null {
426
+ @return "@media screen and (min-width: #{$min-width})";
385
427
  } @else {
386
- // process max and min width :
387
- @if $min-width == null { $min-width : 0; }
388
- @if $max-width == null { $max-width : 99999px; }
389
- // write media query :
390
- @return "screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
428
+ @return null;
391
429
  }
392
430
  }
393
- } @else if $state == 'print' or $state == print {
394
- @return "only print";
395
- } @else if $state == 'tv' or $state == tv {
396
- @return "only tv";
397
- } @else if $state == 'portrait' or $state == portrait {
398
- @return "only screen and (orientation: portrait)";
399
- } @else if $state == 'landscape' or $state == landscape {
400
- @return "only screen and (orientation: landscape)";
401
- } @else if $state == 'retina' or $state == retina {
402
- @return "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
403
431
  }
404
- } @else {
405
- @return null;
432
+ } @else if $state == 'print' or $state == print {
433
+ @return "only print";
434
+ } @else if $state == 'tv' or $state == tv {
435
+ @return "only tv";
436
+ } @else if $state == 'portrait' or $state == portrait {
437
+ @return "only screen and (orientation: portrait)";
438
+ } @else if $state == 'landscape' or $state == landscape {
439
+ @return "only screen and (orientation: landscape)";
440
+ } @else if $state == 'retina' or $state == retina {
441
+ @return "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
406
442
  }
407
443
  }
408
444
 
@@ -515,6 +551,9 @@ $_gridle-state-15-classes : true !default;
515
551
  @function _gridle_get_media_query_index_by_name(
516
552
  $name
517
553
  ) {
554
+ @if $name == null {
555
+ @return null;
556
+ }
518
557
  @if $_gridle-state-01-name == $name { @return 1; }
519
558
  @else if $_gridle-state-02-name == $name { @return 2; }
520
559
  @else if $_gridle-state-03-name == $name { @return 3; }
@@ -544,9 +583,6 @@ $_gridle-state-15-classes : true !default;
544
583
 
545
584
 
546
585
  // Register an state :
547
- // @param String $name The state name
548
- // @param int $min-width The min width
549
- // @param int $max-width The max width
550
586
  @mixin gridle_register_state(
551
587
  $name,
552
588
  $min-width-or-query : null,
@@ -557,7 +593,7 @@ $_gridle-state-15-classes : true !default;
557
593
  // register new state :
558
594
  @if $_gridle-state-01-name == null {
559
595
  $_gridle-state-01-name : $name;
560
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
596
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
561
597
  $_gridle-state-01-min-width : $min-width-or-query;
562
598
  $_gridle-state-01-max-width : $max-width-or-classes-generation;
563
599
  $_gridle-state-01-classes : $classes-generation;
@@ -569,7 +605,7 @@ $_gridle-state-15-classes : true !default;
569
605
  }
570
606
  } @else if $_gridle-state-02-name == null {
571
607
  $_gridle-state-02-name : $name;
572
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
608
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
573
609
  $_gridle-state-02-min-width : $min-width-or-query;
574
610
  $_gridle-state-02-max-width : $max-width-or-classes-generation;
575
611
  $_gridle-state-02-classes : $classes-generation;
@@ -581,7 +617,7 @@ $_gridle-state-15-classes : true !default;
581
617
  }
582
618
  } @else if $_gridle-state-03-name == null {
583
619
  $_gridle-state-03-name : $name;
584
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
620
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
585
621
  $_gridle-state-03-min-width : $min-width-or-query;
586
622
  $_gridle-state-03-max-width : $max-width-or-classes-generation;
587
623
  $_gridle-state-03-classes : $classes-generation;
@@ -593,7 +629,7 @@ $_gridle-state-15-classes : true !default;
593
629
  }
594
630
  } @else if $_gridle-state-04-name == null {
595
631
  $_gridle-state-04-name : $name;
596
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
632
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
597
633
  $_gridle-state-04-min-width : $min-width-or-query;
598
634
  $_gridle-state-04-max-width : $max-width-or-classes-generation;
599
635
  $_gridle-state-04-classes : $classes-generation;
@@ -605,7 +641,7 @@ $_gridle-state-15-classes : true !default;
605
641
  }
606
642
  } @else if $_gridle-state-05-name == null {
607
643
  $_gridle-state-05-name : $name;
608
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
644
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
609
645
  $_gridle-state-05-min-width : $min-width-or-query;
610
646
  $_gridle-state-05-max-width : $max-width-or-classes-generation;
611
647
  $_gridle-state-05-classes : $classes-generation;
@@ -617,7 +653,7 @@ $_gridle-state-15-classes : true !default;
617
653
  }
618
654
  } @else if $_gridle-state-06-name == null {
619
655
  $_gridle-state-06-name : $name;
620
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
656
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
621
657
  $_gridle-state-06-min-width : $min-width-or-query;
622
658
  $_gridle-state-06-max-width : $max-width-or-classes-generation;
623
659
  $_gridle-state-06-classes : $classes-generation;
@@ -629,7 +665,7 @@ $_gridle-state-15-classes : true !default;
629
665
  }
630
666
  } @else if $_gridle-state-07-name == null {
631
667
  $_gridle-state-07-name : $name;
632
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
668
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
633
669
  $_gridle-state-07-min-width : $min-width-or-query;
634
670
  $_gridle-state-07-max-width : $max-width-or-classes-generation;
635
671
  $_gridle-state-07-classes : $classes-generation;
@@ -641,7 +677,7 @@ $_gridle-state-15-classes : true !default;
641
677
  }
642
678
  } @else if $_gridle-state-08-name == null {
643
679
  $_gridle-state-08-name : $name;
644
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
680
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
645
681
  $_gridle-state-08-min-width : $min-width-or-query;
646
682
  $_gridle-state-08-max-width : $max-width-or-classes-generation;
647
683
  $_gridle-state-08-classes : $classes-generation;
@@ -653,7 +689,7 @@ $_gridle-state-15-classes : true !default;
653
689
  }
654
690
  } @else if $_gridle-state-09-name == null {
655
691
  $_gridle-state-09-name : $name;
656
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
692
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
657
693
  $_gridle-state-09-min-width : $min-width-or-query;
658
694
  $_gridle-state-09-max-width : $max-width-or-classes-generation;
659
695
  $_gridle-state-09-classes : $classes-generation;
@@ -665,7 +701,7 @@ $_gridle-state-15-classes : true !default;
665
701
  }
666
702
  } @else if $_gridle-state-10-name == null {
667
703
  $_gridle-state-10-name : $name;
668
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
704
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
669
705
  $_gridle-state-10-min-width : $min-width-or-query;
670
706
  $_gridle-state-10-max-width : $max-width-or-classes-generation;
671
707
  $_gridle-state-10-classes : $classes-generation;
@@ -677,7 +713,7 @@ $_gridle-state-15-classes : true !default;
677
713
  }
678
714
  } @else if $_gridle-state-11-name == null {
679
715
  $_gridle-state-11-name : $name;
680
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
716
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
681
717
  $_gridle-state-11-min-width : $min-width-or-query;
682
718
  $_gridle-state-11-max-width : $max-width-or-classes-generation;
683
719
  $_gridle-state-11-classes : $classes-generation;
@@ -689,7 +725,7 @@ $_gridle-state-15-classes : true !default;
689
725
  }
690
726
  } @else if $_gridle-state-12-name == null {
691
727
  $_gridle-state-12-name : $name;
692
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
728
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
693
729
  $_gridle-state-12-min-width : $min-width-or-query;
694
730
  $_gridle-state-12-max-width : $max-width-or-classes-generation;
695
731
  $_gridle-state-12-classes : $classes-generation;
@@ -701,7 +737,7 @@ $_gridle-state-15-classes : true !default;
701
737
  }
702
738
  } @else if $_gridle-state-13-name == null {
703
739
  $_gridle-state-13-name : $name;
704
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
740
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
705
741
  $_gridle-state-13-min-width : $min-width-or-query;
706
742
  $_gridle-state-13-max-width : $max-width-or-classes-generation;
707
743
  $_gridle-state-13-classes : $classes-generation;
@@ -713,7 +749,7 @@ $_gridle-state-15-classes : true !default;
713
749
  }
714
750
  } @else if $_gridle-state-14-name == null {
715
751
  $_gridle-state-14-name : $name;
716
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
752
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
717
753
  $_gridle-state-14-min-width : $min-width-or-query;
718
754
  $_gridle-state-14-max-width : $max-width-or-classes-generation;
719
755
  $_gridle-state-14-classes : $classes-generation;
@@ -725,7 +761,7 @@ $_gridle-state-15-classes : true !default;
725
761
  }
726
762
  } @else if $_gridle-state-15-name == null {
727
763
  $_gridle-state-15-name : $name;
728
- @if type-of($min-width-or-query) == number and type-of($max-width-or-classes-generation) == number {
764
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
729
765
  $_gridle-state-15-min-width : $min-width-or-query;
730
766
  $_gridle-state-15-max-width : $max-width-or-classes-generation;
731
767
  $_gridle-state-15-classes : $classes-generation;
@@ -742,19 +778,17 @@ $_gridle-state-15-classes : true !default;
742
778
  // Register default states :
743
779
  @mixin gridle_register_default_states() {
744
780
  // register mobile and tablet states :
745
- @include gridle_register_state("mobile",0,480px);
781
+ @include gridle_register_state("mobile",null,480px);
746
782
  @include gridle_register_state("tablet",481px,1024px);
747
783
  }
748
784
 
749
785
 
750
786
  // Responsive helpers mixins :
751
- // @param String $media The media name to response for
752
- @mixin gridle_responseTo(
787
+ @mixin gridle_state(
753
788
  $state-or-min-width,
754
789
  $max-width : null,
755
790
  $has-parent : true
756
791
  ) {
757
-
758
792
  // get the index of state :
759
793
  $idx : _gridle_get_media_query_index_by_name($state-or-min-width);
760
794
 
@@ -762,80 +796,83 @@ $_gridle-state-15-classes : true !default;
762
796
  @if type-of($state-or-min-width) == string and $gridle-html-states-classes {
763
797
  // html class :
764
798
  @if $has-parent {
765
- html.#{$state-or-min-width} & { @content; }
799
+ html#{_gridle_prefixed_class("#{$state-or-min-width}")} & { @content; }
766
800
  } @else {
767
- html.#{$state-or-min-width} { @content; }
801
+ html#{_gridle_prefixed_class("#{$state-or-min-width}")} { @content; }
768
802
  }
769
803
  }
770
804
 
771
- // check if media_min-width is null :
772
- @if $state-or-min-width != null {
773
-
774
- @if $idx != null {
775
- // get vars :
776
- $m : _gridle_get_media_query_vars($idx,"name");
777
- $min-width : _gridle_get_media_query_vars($idx,"min-width");
778
- $max-width : _gridle_get_media_query_vars($idx,"max-width");
779
- $classes : _gridle_get_media_query_vars($idx,"classes");
780
- $query : _gridle_get_media_query_vars($idx,"query");
781
-
782
- // check if exist :
783
- @if $m != null {
784
- // check if query exist :
785
- @if $query != null {
786
- @media #{$query} {
787
- @content;
788
- }
789
- } @else {
790
- // process max and min width :
791
- @if $min-width == null { $min-width : 0; }
792
- @if $max-width == null { $max-width : 99999px; }
793
- // write media query :
805
+ // if an idx exist, mean that it's a registered state :
806
+ @if $idx {
807
+ // get vars :
808
+ $name : _gridle_get_media_query_vars($idx,"name");
809
+ $min-width : _gridle_get_media_query_vars($idx,"min-width");
810
+ $max-width : _gridle_get_media_query_vars($idx,"max-width");
811
+ $classes : _gridle_get_media_query_vars($idx,"classes");
812
+ $query : _gridle_get_media_query_vars($idx,"query");
813
+
814
+ // check if exist :
815
+ @if $name != null {
816
+ // check if query exist :
817
+ @if $query != null {
818
+ @media #{$query} {
819
+ @content;
820
+ }
821
+ } @else {
822
+ // write media query :
823
+ @if $min-width and $max-width {
794
824
  @media screen and (min-width: $min-width) and (max-width: $max-width) { @content; }
825
+ } @else if $min-width == null and $max-width {
826
+ @media screen and (max-width: $max-width) { @content; }
827
+ } @else if $min-width and $max-width == null {
828
+ @media screen and (min-width: $min-width) { @content; }
829
+ } @else {
830
+ @content;
795
831
  }
796
832
  }
797
- } @else if $state-or-min-width == 'print' or $state-or-min-width == print {
798
- @media only print {
799
- @content;
800
- }
801
- } @else if $state-or-min-width == 'tv' or $state-or-min-width == tv {
802
- @media only tv {
803
- @content;
804
- }
805
- } @else if $state-or-min-width == 'portrait' or $state-or-min-width == portrait {
806
- @media only screen and (orientation: portrait) {
807
- @content;
808
- }
809
- } @else if $state-or-min-width == 'landscape' or $state-or-min-width == landscape {
810
- @media only screen and (orientation: landscape) {
811
- @content;
812
- }
813
- } @else if $state-or-min-width == 'retina' or $state-or-min-width == retina {
814
- @media only screen and (-webkit-min-device-pixel-ratio: 2),
815
- only screen and ( min--moz-device-pixel-ratio: 2),
816
- only screen and ( -o-min-device-pixel-ratio: 2/1),
817
- only screen and ( min-device-pixel-ratio: 2),
818
- only screen and ( min-resolution: 192dpi),
819
- only screen and ( min-resolution: 2dppx)
820
- {
821
- @content;
822
- }
823
- } @else {
824
- // check for min and max width :
825
- @if $state-or-min-width != null and $max-width != null {
826
- @media screen and (min-width: $state-or-min-width) and (max-width: $max-width) { @content; }
827
- } @else if $state-or-min-width != null and $max-width == null {
828
- @media screen and (min-width: $state-or-min-width) { @content; }
829
- } @else if $state-or-min-width == null and $max-width != null {
830
- @media screen and (max-width: $max-width) { @content; }
831
- }
833
+ }
834
+ } @else if $state-or-min-width == 'print' or $state-or-min-width == print {
835
+ @media only print {
836
+ @content;
837
+ }
838
+ } @else if $state-or-min-width == 'tv' or $state-or-min-width == tv {
839
+ @media only tv {
840
+ @content;
841
+ }
842
+ } @else if $state-or-min-width == 'portrait' or $state-or-min-width == portrait {
843
+ @media only screen and (orientation: portrait) {
844
+ @content;
845
+ }
846
+ } @else if $state-or-min-width == 'landscape' or $state-or-min-width == landscape {
847
+ @media only screen and (orientation: landscape) {
848
+ @content;
849
+ }
850
+ } @else if $state-or-min-width == 'retina' or $state-or-min-width == retina {
851
+ @media only screen and (-webkit-min-device-pixel-ratio: 2),
852
+ only screen and ( min--moz-device-pixel-ratio: 2),
853
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
854
+ only screen and ( min-device-pixel-ratio: 2),
855
+ only screen and ( min-resolution: 192dpi),
856
+ only screen and ( min-resolution: 2dppx)
857
+ {
858
+ @content;
832
859
  }
833
860
  } @else {
834
- @content;
861
+ // check for min and max width :
862
+ @if $state-or-min-width and $max-width {
863
+ @media screen and (min-width: $state-or-min-width) and (max-width: $max-width) { @content; }
864
+ } @else if $state-or-min-width and $max-width == null {
865
+ @media screen and (min-width: $state-or-min-width) { @content; }
866
+ } @else if $state-or-min-width == null and $max-width {
867
+ @media screen and (max-width: $max-width) { @content; }
868
+ } @else {
869
+ @content;
870
+ }
835
871
  }
836
872
  }
837
873
 
838
874
 
875
+
839
876
  // Container mixin :
840
877
  @mixin gridle_container(
841
878
  ) {
@@ -845,50 +882,49 @@ $_gridle-state-15-classes : true !default;
845
882
 
846
883
  // Grid mixin :
847
884
  // Set the width of the specified grid column :
848
- // @param int $columns The columns to generate
849
885
  @mixin gridle(
850
- $columns : 12,
851
- $state : null,
852
- $debug-state : null
886
+ $columns : $gridle-columns-count,
887
+ $state-context : null,
888
+ $state : null
853
889
  ) {
890
+ $context : $gridle-columns-count;
891
+ @if type-of($state-context) == number {
892
+ $state : $state;
893
+ $context : $state-context;
894
+ } @else {
895
+ $state : $state-context;
896
+ }
854
897
  @include _gridle_grid_common();
855
898
  @if $state {
856
- @include gridle_responseTo($state) {
857
- @include _gridle($columns, $state, $debug-state);
899
+ @include gridle_state($state) {
900
+ @include _gridle($columns, $state, $context);
858
901
  }
859
902
  } @else {
860
- @include _gridle($columns,$state,$debug-state);
903
+ @include _gridle($columns,$state,$context);
861
904
  }
862
905
  }
863
906
  @mixin _gridle(
864
- $columns : 12,
907
+ $columns : $gridle-columns-count,
865
908
  $state : null,
866
- $debug-state : null
909
+ $context : $gridle-columns-count
867
910
  ) {
868
911
  // vars :
869
- @if $debug-state == null { $debug-state : $state; }
870
- $width : percentage(1 / $gridle-columns-count) * $columns;
912
+ $width : percentage(1 / $context * $columns);
871
913
  width:$width;
872
-
914
+
873
915
  // ie7 support :
874
916
  @if $gridle-ie7-support == true {
875
- *width: expression((this.parentNode.clientWidth/#{$gridle-columns-count}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
917
+ *width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
876
918
  }
877
919
 
878
920
  // debug :
879
921
  @if $gridle-debug == true and $gridle-debug-show-class-names == true {
880
- &:before {
881
- @if $debug-state != null {
882
- content:"grid-#{$debug-state}-#{$columns * $gridle-name-multiplicator}";
883
- } @else {
884
- content:"grid-#{$columns * $gridle-name-multiplicator}";
922
+ #{$gridle-debug-selector} {
923
+ &:before {
924
+ content:"grid-#{$state}-#{$columns * $gridle-name-multiplicator}";
885
925
  }
886
- }
887
- &.grid-parent:before {
888
- @if $debug-state != null {
889
- content:"grid-parent-#{$debug-state}-#{$columns * $gridle-name-multiplicator}";
890
- } @else {
891
- content:"grid-parent-#{$columns * $gridle-name-multiplicator}";
926
+ &.parent:before {
927
+ content:"grid-parent-#{$state}-#{$columns * $gridle-name-multiplicator}";
892
928
  }
893
929
  }
894
930
  }
@@ -897,40 +933,42 @@ $_gridle-state-15-classes : true !default;
897
933
 
898
934
  // push :
899
935
  // Push the element of the count of column wanted
900
- // @param int $columns The columns to generate
901
- // @param boolean $important Define if need to add !important at the end of the properties
902
936
  @mixin gridle_push(
903
- $columns : 12,
904
- $state : null,
905
- $debug-state : null
937
+ $columns : $gridle-columns-count,
938
+ $state-context : null,
939
+ $state : null
906
940
  ) {
941
+ $context : $gridle-columns-count;
942
+ @if type-of($state-context) == number {
943
+ $state : $state;
944
+ $context : $state-context;
945
+ } @else {
946
+ $state : $state-context;
947
+ }
907
948
  @include _gridle_push_common();
908
949
  @if $state {
909
- @include gridle_responseTo($state) {
910
- @include _gridle_push($columns,$debug-state);
950
+ @include gridle_state($state) {
951
+ @include _gridle_push($columns,$state,$context);
911
952
  }
912
953
  } @else {
913
- @include _gridle_push($columns,$debug-state);
954
+ @include _gridle_push($columns,$state,$context);
914
955
  }
915
956
  }
916
957
  @mixin _gridle_push(
917
- $columns : 12,
918
- $debug-state : null
958
+ $columns : $gridle-columns-count,
959
+ $state : null,
960
+ $context : $gridle-columns-count
919
961
  ) {
920
962
  // vars :
921
- $width : percentage(1 / $gridle-columns-count) * $columns;
963
+ $width : percentage(1 / $context) * $columns;
922
964
  @if $gridle-direction == rtl { $width : $width*-1; }
923
965
  left:$width;
924
966
 
925
967
  // debug css :
926
- @if $gridle-debug == true {
927
- @if $gridle-debug-show-class-names == true {
968
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
969
+ #{$gridle-debug-selector} {
928
970
  &:after {
929
- @if $debug-state != null {
930
- content:"push-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
931
- } @else {
932
- content:"push-#{$columns * $gridle-name-multiplicator}" !important;
933
- }
971
+ content:"push-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
934
972
  }
935
973
  }
936
974
  }
@@ -939,40 +977,42 @@ $_gridle-state-15-classes : true !default;
939
977
 
940
978
  // pull :
941
979
  // Pull the element of the count of column wanted
942
- // @param int $columns The columns to generate
943
- // @param boolean $important Define if need to add !important at the end of the properties
944
980
  @mixin gridle_pull(
945
- $columns : 12,
946
- $state : null,
947
- $debug-state : null
981
+ $columns : $gridle-columns-count,
982
+ $state-context : null,
983
+ $state : null
948
984
  ) {
985
+ $context : $gridle-columns-count;
986
+ @if type-of($state-context) == number {
987
+ $state : $state;
988
+ $context : $state-context;
989
+ } @else {
990
+ $state : $state-context;
991
+ }
949
992
  @include _gridle_pull_common();
950
993
  @if $state {
951
- @include gridle_responseTo($state) {
952
- @include _gridle_pull($columns,$debug-state);
994
+ @include gridle_state($state) {
995
+ @include _gridle_pull($columns,$state,$context);
953
996
  }
954
997
  } @else {
955
- @include _gridle_pull($columns,$debug-state);
998
+ @include _gridle_pull($columns,$state,$context);
956
999
  }
957
1000
  }
958
1001
  @mixin _gridle_pull(
959
- $columns : 12,
960
- $debug-state : null
1002
+ $columns : $gridle-columns-count,
1003
+ $state : null,
1004
+ $context : $gridle-columns-count
961
1005
  ) {
962
1006
  // vars :
963
- $width : percentage(1 / $gridle-columns-count) * $columns;
1007
+ $width : percentage(1 / $context) * $columns;
964
1008
  @if $gridle-direction == rtl { $width : $width*-1; }
965
1009
  right:$width;
966
1010
 
967
1011
  // debug css :
968
- @if $gridle-debug == true {
969
- @if $gridle-debug-show-class-names == true {
1012
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
1013
+ #{$gridle-debug-selector} {
970
1014
  &:after {
971
- @if $debug-state != null {
972
- content:"pull-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
973
- } @else {
974
- content:"pull-#{$columns * $gridle-name-multiplicator}" !important;
975
- }
1015
+ content:"pull-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
976
1016
  }
977
1017
  }
978
1018
  }
@@ -981,40 +1021,42 @@ $_gridle-state-15-classes : true !default;
981
1021
 
982
1022
  // push :
983
1023
  // Push the element of the count of column wanted
984
- // @param int $columns The columns to generate
985
- // @param boolean $important Define if need to add !important at the end of the properties
986
1024
  @mixin gridle_prefix(
987
- $columns : 12,
988
- $state : null,
989
- $debug-state : null
1025
+ $columns : $gridle-columns-count,
1026
+ $state-context : null,
1027
+ $state : null
990
1028
  ) {
1029
+ $context : $gridle-columns-count;
1030
+ @if type-of($state-context) == number {
1031
+ $state : $state;
1032
+ $context : $state-context;
1033
+ } @else {
1034
+ $state : $state-context;
1035
+ }
991
1036
  @include _gridle_prefix_common();
992
1037
  @if $state {
993
- @include gridle_responseTo($state) {
994
- @include _gridle_prefix($columns,$debug-state);
1038
+ @include gridle_state($state) {
1039
+ @include _gridle_prefix($columns,$state,$context);
995
1040
  }
996
1041
  } @else {
997
- @include _gridle_prefix($columns,$debug-state);
1042
+ @include _gridle_prefix($columns,$state,$context);
998
1043
  }
999
1044
  }
1000
1045
  @mixin _gridle_prefix(
1001
- $columns : 12,
1002
- $debug-state : null
1046
+ $columns : $gridle-columns-count,
1047
+ $state : null,
1048
+ $context : $gridle-columns-count
1003
1049
  ) {
1004
1050
  // vars :
1005
- $width : percentage(1 / $gridle-columns-count) * $columns;
1051
+ $width : percentage(1 / $context) * $columns;
1006
1052
  @if $gridle-direction == rtl { margin-right:$width; }
1007
1053
  @else { margin-left:$width; }
1008
1054
 
1009
1055
  // debug css :
1010
- @if $gridle-debug == true {
1011
- @if $gridle-debug-show-class-names == true {
1056
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
1057
+ #{$gridle-debug-selector} {
1012
1058
  &:after {
1013
- @if $debug-state != null {
1014
- content:"prefix-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
1015
- } @else {
1016
- content:"prefix-#{$columns * $gridle-name-multiplicator}" !important;
1017
- }
1059
+ content:"prefix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
1018
1060
  }
1019
1061
  }
1020
1062
  }
@@ -1023,39 +1065,42 @@ $_gridle-state-15-classes : true !default;
1023
1065
 
1024
1066
  // pull :
1025
1067
  // Pull the element of the count of column wanted
1026
- // @param int $columns The columns to generate
1027
- // @param boolean $important Define if need to add !important at the end of the properties
1028
1068
  @mixin gridle_suffix(
1029
- $columns : 12,
1069
+ $columns : $gridle-columns-count,
1070
+ $state-context : null,
1030
1071
  $state : null
1031
1072
  ) {
1073
+ $context : $gridle-columns-count;
1074
+ @if type-of($state-context) == number {
1075
+ $state : $state;
1076
+ $context : $state-context;
1077
+ } @else {
1078
+ $state : $state-context;
1079
+ }
1032
1080
  @include _gridle_suffix_common();
1033
1081
  @if $state {
1034
- @include gridle_responseTo($state) {
1035
- @include _gridle_suffix($columns,$state);
1082
+ @include gridle_state($state) {
1083
+ @include _gridle_suffix($columns,$state,$context);
1036
1084
  }
1037
1085
  } @else {
1038
- @include _gridle_suffix($columns,$state);
1086
+ @include _gridle_suffix($columns,$state,$context);
1039
1087
  }
1040
1088
  }
1041
1089
  @mixin _gridle_suffix(
1042
- $columns : 12,
1043
- $debug-state : null
1090
+ $columns : $gridle-columns-count,
1091
+ $state : null,
1092
+ $context : $gridle-columns-count
1044
1093
  ) {
1045
1094
  // vars :
1046
- $width : percentage(1 / $gridle-columns-count) * $columns;
1095
+ $width : percentage(1 / $context) * $columns;
1047
1096
  @if $gridle-direction == rtl { margin-left:$width; }
1048
1097
  @else { margin-right:$width; }
1049
1098
 
1050
1099
  // debug css :
1051
- @if $gridle-debug == true {
1052
- @if $gridle-debug-show-class-names == true {
1100
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
1101
+ #{$gridle-debug-selector} {
1053
1102
  &:after {
1054
- @if $debug-state != null {
1055
- content:"suffix-#{$debug-state}-#{$columns * $gridle-name-multiplicator}" !important;
1056
- } @else {
1057
- content:"suffix-#{$columns * $gridle-name-multiplicator}" !important;
1058
- }
1103
+ content:"suffix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
1059
1104
  }
1060
1105
  }
1061
1106
  }
@@ -1067,7 +1112,7 @@ $_gridle-state-15-classes : true !default;
1067
1112
  $state : null
1068
1113
  ) {
1069
1114
  @if $state {
1070
- @include gridle_responseTo($state) {
1115
+ @include gridle_state($state) {
1071
1116
  @include _gridle_centered();
1072
1117
  }
1073
1118
  } @else {
@@ -1088,7 +1133,7 @@ $_gridle-state-15-classes : true !default;
1088
1133
  $state : null
1089
1134
  ) {
1090
1135
  @if $state {
1091
- @include gridle_responseTo($state) {
1136
+ @include gridle_state($state) {
1092
1137
  @include _gridle_parent();
1093
1138
  }
1094
1139
  } @else {
@@ -1096,6 +1141,8 @@ $_gridle-state-15-classes : true !default;
1096
1141
  }
1097
1142
  }
1098
1143
  @mixin _gridle_parent() {
1144
+ @extend gridle-parent-common;
1145
+
1099
1146
  padding-left:0 !important;
1100
1147
  padding-right:0 !important;
1101
1148
  }
@@ -1107,7 +1154,7 @@ $_gridle-state-15-classes : true !default;
1107
1154
  $state : null
1108
1155
  ) {
1109
1156
  @if $state {
1110
- @include gridle_responseTo($state) {
1157
+ @include gridle_state($state) {
1111
1158
  @include _gridle_hide();
1112
1159
  }
1113
1160
  } @else {
@@ -1125,7 +1172,7 @@ $_gridle-state-15-classes : true !default;
1125
1172
  $state : null
1126
1173
  ) {
1127
1174
  @if $state {
1128
- @include gridle_responseTo($state) {
1175
+ @include gridle_state($state) {
1129
1176
  @include _gridle_not_visible();
1130
1177
  }
1131
1178
  } @else {
@@ -1143,7 +1190,7 @@ $_gridle-state-15-classes : true !default;
1143
1190
  $state : null
1144
1191
  ) {
1145
1192
  @if $state {
1146
- @include gridle_responseTo($state) {
1193
+ @include gridle_state($state) {
1147
1194
  @include _gridle_show();
1148
1195
  }
1149
1196
  } @else {
@@ -1161,7 +1208,7 @@ $_gridle-state-15-classes : true !default;
1161
1208
  $state : null
1162
1209
  ) {
1163
1210
  @if $state {
1164
- @include gridle_responseTo($state) {
1211
+ @include gridle_state($state) {
1165
1212
  @include _gridle_visible();
1166
1213
  }
1167
1214
  } @else {
@@ -1179,7 +1226,7 @@ $_gridle-state-15-classes : true !default;
1179
1226
  $state : null
1180
1227
  ) {
1181
1228
  @if $state {
1182
- @include gridle_responseTo($state) {
1229
+ @include gridle_state($state) {
1183
1230
  @include gridle_float($float-direction);
1184
1231
  }
1185
1232
  } @else {
@@ -1201,7 +1248,7 @@ $_gridle-state-15-classes : true !default;
1201
1248
  $state : null
1202
1249
  ) {
1203
1250
  @if $state {
1204
- @include gridle_responseTo($state) {
1251
+ @include gridle_state($state) {
1205
1252
  @include _gridle_clear($clear-direction);
1206
1253
  }
1207
1254
  } @else {
@@ -1223,36 +1270,69 @@ $_gridle-state-15-classes : true !default;
1223
1270
  $state : null
1224
1271
  ) {
1225
1272
  @if $state {
1226
- @include gridle_responseTo($state) {
1273
+ @include gridle_state($state) {
1227
1274
  @include _gridle_no_gutter($side);
1228
1275
  }
1229
1276
  } @else {
1230
1277
  @include _gridle_no_gutter($side);
1231
1278
  }
1232
1279
  }
1280
+ @mixin gridle_no_margin(
1281
+ $side : null,
1282
+ $state : null
1283
+ ) {
1284
+ @include gridle_no_gutter($side, $state);
1285
+ }
1233
1286
  @mixin _gridle_no_gutter(
1234
1287
  $side : null
1235
1288
  ) {
1289
+ @if $side == null {
1290
+ padding : 0 !important;
1291
+ } @else {
1292
+ @each $s in $side {
1293
+ padding-#{$s} : 0 !important;
1294
+ }
1295
+ }
1296
+ }
1297
+
1236
1298
 
1237
- @if $side == 'left' or $side == left {
1238
- padding-left:0 !important;
1239
- } @else if $side == 'right' or $side == right {
1240
- padding-right:0 !important;
1299
+ // Gridle gutter :
1300
+ // @param String $side The side to clear
1301
+ // @param String $state The state
1302
+ @mixin gridle_gutter(
1303
+ $side : null,
1304
+ $state : null
1305
+ ) {
1306
+ @if $state {
1307
+ @include gridle_state($state) {
1308
+ @include _gridle_gutter($side);
1309
+ }
1241
1310
  } @else {
1242
- padding-left:0 !important;
1243
- padding-right:0 !important;
1311
+ @include _gridle_gutter($side);
1244
1312
  }
1245
1313
  }
1246
- @mixin gridle_no_margin(
1314
+ // shortcut :
1315
+ @mixin gridle_margin(
1247
1316
  $side : null,
1248
1317
  $state : null
1249
1318
  ) {
1250
- @include gridle_no_gutter($side, $state);
1319
+ @include gridle_gutter($side, $state);
1320
+ }
1321
+ @mixin _gridle_gutter(
1322
+ $side : null
1323
+ ) {
1324
+ @if $side == null {
1325
+ padding : $gridle-gutter-width / 2 !important;
1326
+ } @else {
1327
+ @each $s in $side {
1328
+ padding-#{$s} : $gridle-gutter-width / 2 !important;
1329
+ }
1330
+ }
1251
1331
  }
1252
1332
 
1253
1333
 
1254
1334
  // Generate all helpers classes
1255
- // All the classes generated are not wrapper in gridle_responseTo
1335
+ // All the classes generated are not wrapper in gridle_state
1256
1336
  // in this mixin... Just the names are generated accordingly to the
1257
1337
  // requested state
1258
1338
  @mixin _gridle_generate_helper_classes (
@@ -1262,54 +1342,108 @@ $_gridle-state-15-classes : true !default;
1262
1342
  @if ($state != null) { $media : -#{$state}; }
1263
1343
  @else { $media : ''; }
1264
1344
 
1265
- .hide#{$media} {
1345
+ #{_gridle_prefixed_class("hide#{$media}")} {
1266
1346
  @include gridle_hide(null);
1267
1347
  }
1268
- .not-visible#{$media} {
1348
+ #{_gridle_prefixed_class("not-visible#{$media}")} {
1269
1349
  @include gridle_not_visible(null);
1270
1350
  }
1271
- .show#{$media} {
1351
+ #{_gridle_prefixed_class("show#{$media}")} {
1272
1352
  @include gridle_show(null);
1273
1353
  }
1274
- .visible#{$media} {
1354
+ #{_gridle_prefixed_class("visible#{$media}")} {
1275
1355
  @include gridle_visible(null);
1276
1356
  }
1277
- .float#{$media}-left {
1357
+ #{_gridle_prefixed_class("float#{$media}-left")} {
1278
1358
  @include gridle_float(left);
1279
1359
  }
1280
- .float#{$media}-right {
1360
+ #{_gridle_prefixed_class("float#{$media}-right")} {
1281
1361
  @include gridle_float(right);
1282
1362
  }
1283
- .clear#{$media} {
1363
+ #{_gridle_prefixed_class("clear#{$media}")} {
1284
1364
  @include gridle_clear(both);
1285
1365
  }
1286
- .clear#{$media}-left {
1366
+ #{_gridle_prefixed_class("clear#{$media}-left")} {
1287
1367
  @include gridle_clear(left);
1288
1368
  }
1289
- .clear#{$media}-right {
1369
+ #{_gridle_prefixed_class("clear#{$media}-right")} {
1290
1370
  @include gridle_clear(right);
1291
1371
  }
1292
- .no-gutter#{$media},
1293
- .no-margin#{$media} {
1372
+ #{_gridle_prefixed_class("no-gutter#{$media}")},
1373
+ #{_gridle_prefixed_class("no-margin#{$media}")} {
1294
1374
  @include gridle_no_margin();
1295
1375
  }
1296
- .no-gutter#{$media}-left,
1297
- .no-margin#{$media}-left {
1376
+ #{_gridle_prefixed_class("no-gutter#{$media}-left")},
1377
+ #{_gridle_prefixed_class("no-margin#{$media}-left")} {
1298
1378
  @include gridle_no_margin(left);
1299
1379
  }
1300
- .no-gutter#{$media}-right,
1301
- .no-margin#{$media}-right {
1380
+ #{_gridle_prefixed_class("no-gutter#{$media}-right")},
1381
+ #{_gridle_prefixed_class("no-margin#{$media}-right")} {
1302
1382
  @include gridle_no_margin(right);
1303
1383
  }
1304
- .auto-height#{$media} {
1384
+ #{_gridle_prefixed_class("gutter#{$media}")},
1385
+ #{_gridle_prefixed_class("margin#{$media}")} {
1386
+ @include gridle_margin();
1387
+ }
1388
+ #{_gridle_prefixed_class("gutter#{$media}-left")},
1389
+ #{_gridle_prefixed_class("margin#{$media}-left")} {
1390
+ @include gridle_margin(left);
1391
+ }
1392
+ #{_gridle_prefixed_class("gutter#{$media}-right")},
1393
+ #{_gridle_prefixed_class("margin#{$media}-right")} {
1394
+ @include gridle_margin(right);
1395
+ }
1396
+ #{_gridle_prefixed_class("gutter#{$media}-top")},
1397
+ #{_gridle_prefixed_class("margin#{$media}-top")} {
1398
+ @include gridle_margin(top);
1399
+ }
1400
+ #{_gridle_prefixed_class("gutter#{$media}-bottom")},
1401
+ #{_gridle_prefixed_class("margin#{$media}-bottom")} {
1402
+ @include gridle_margin(bottom);
1403
+ }
1404
+ #{_gridle_prefixed_class("auto-height#{$media}")} {
1305
1405
  height:inherit;
1306
1406
  }
1307
- .centered#{$media} {
1407
+ #{_gridle_prefixed_class("centered#{$media}")} {
1308
1408
  @include gridle_centered(null);
1309
1409
  }
1310
- [class*="grid-"].grid-parent#{$media} {
1410
+ [class*="#{"#{$gridle-class-prefix}grid-"}"]#{_gridle_prefixed_class("parent#{$media}")} {
1311
1411
  @include gridle_parent(null);
1312
1412
  }
1413
+
1414
+ @if $gridle-debug {
1415
+ // debug color classes :
1416
+ #{_gridle_prefixed_class("debug-color#{$media}-1")} {
1417
+ #{$gridle-debug-selector} {
1418
+ background-color : #edeeb2;
1419
+ }
1420
+ }
1421
+ #{_gridle_prefixed_class("debug-color#{$media}-2")} {
1422
+ #{$gridle-debug-selector} {
1423
+ background-color : #fae4a7;
1424
+ }
1425
+ }
1426
+ #{_gridle_prefixed_class("debug-color#{$media}-3")} {
1427
+ #{$gridle-debug-selector} {
1428
+ background-color : #f5eacc;
1429
+ }
1430
+ }
1431
+ #{_gridle_prefixed_class("debug-color#{$media}-4")} {
1432
+ #{$gridle-debug-selector} {
1433
+ background-color : #eebdb2;
1434
+ }
1435
+ }
1436
+ #{_gridle_prefixed_class("debug-color#{$media}-5")} {
1437
+ #{$gridle-debug-selector} {
1438
+ background-color : #d4b2ee;
1439
+ }
1440
+ }
1441
+ #{_gridle_prefixed_class("debug-color#{$media}-6")} {
1442
+ #{$gridle-debug-selector} {
1443
+ background-color : #b2d8ee;
1444
+ }
1445
+ }
1446
+ }
1313
1447
  }
1314
1448
 
1315
1449
 
@@ -1343,7 +1477,7 @@ $_gridle-state-15-classes : true !default;
1343
1477
 
1344
1478
  // generate container class :
1345
1479
  $container-selector : ();
1346
- $container-selector : $container-selector, unquote(".container, .grid-container, .container-#{$gridle-columns-count}");
1480
+ $container-selector : $container-selector, unquote("#{_gridle_prefixed_class("container")}, #{_gridle_prefixed_class("container-#{$gridle-columns-count}")}");
1347
1481
  #{$container-selector} {
1348
1482
  @include gridle_container();
1349
1483
  }
@@ -1351,26 +1485,26 @@ $_gridle-state-15-classes : true !default;
1351
1485
  // generate all grid-x classes :
1352
1486
  @for $i from 0 through $gridle-columns-count {
1353
1487
 
1354
- .grid-#{$i*$gridle-name-multiplicator} {
1488
+ #{_gridle_prefixed_class("grid-#{$i*$gridle-name-multiplicator}")} {
1355
1489
  @include _gridle($i);
1356
1490
  }
1357
1491
  @if $gridle-generate-push-classes == true {
1358
- .push-#{$i*$gridle-name-multiplicator} {
1492
+ #{_gridle_prefixed_class("push-#{$i*$gridle-name-multiplicator}")} {
1359
1493
  @include _gridle_push($i);
1360
1494
  }
1361
1495
  }
1362
1496
  @if $gridle-generate-pull-classes == true {
1363
- .pull-#{$i*$gridle-name-multiplicator} {
1497
+ #{_gridle_prefixed_class("pull-#{$i*$gridle-name-multiplicator}")} {
1364
1498
  @include _gridle_pull($i);
1365
1499
  }
1366
1500
  }
1367
1501
  @if $gridle-generate-prefix-classes == true {
1368
- .prefix-#{$i*$gridle-name-multiplicator} {
1502
+ #{_gridle_prefixed_class("prefix-#{$i*$gridle-name-multiplicator}")} {
1369
1503
  @include _gridle_prefix($i);
1370
1504
  }
1371
1505
  }
1372
1506
  @if $gridle-generate-suffix-classes == true {
1373
- .suffix-#{$i*$gridle-name-multiplicator} {
1507
+ #{_gridle_prefixed_class("suffix-#{$i*$gridle-name-multiplicator}")} {
1374
1508
  @include _gridle_suffix($i);
1375
1509
  }
1376
1510
  }
@@ -1388,11 +1522,11 @@ $_gridle-state-15-classes : true !default;
1388
1522
  $suffix-common-selector : ();
1389
1523
  $common-selector : ();
1390
1524
  @for $i from 0 through $gridle-columns-count {
1391
- $push-common-selector : $push-common-selector, unquote(".push-#{$i*$gridle-name-multiplicator}");
1392
- $pull-common-selector : $pull-common-selector, unquote(".pull-#{$i*$gridle-name-multiplicator}");
1393
- $prefix-common-selector : $prefix-common-selector, unquote(".prefix-#{$i*$gridle-name-multiplicator}");
1394
- $suffix-common-selector : $suffix-common-selector, unquote(".suffix-#{$i*$gridle-name-multiplicator}");
1395
- $common-selector : $common-selector, unquote(".grid-#{$i*$gridle-name-multiplicator}");
1525
+ $push-common-selector : $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$i*$gridle-name-multiplicator}")}");
1526
+ $pull-common-selector : $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$i*$gridle-name-multiplicator}")}");
1527
+ $prefix-common-selector : $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$i*$gridle-name-multiplicator}")}");
1528
+ $suffix-common-selector : $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$i*$gridle-name-multiplicator}")}");
1529
+ $common-selector : $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$i*$gridle-name-multiplicator}")}");
1396
1530
 
1397
1531
  // generate all classes for media queries :
1398
1532
  @for $j from 1 through 15 {
@@ -1407,22 +1541,22 @@ $_gridle-state-15-classes : true !default;
1407
1541
  // generate classes :
1408
1542
  @if $media != null and $classes == true {
1409
1543
 
1410
- $push-common-selector : $push-common-selector, unquote(".push-#{$media}-#{$i*$gridle-name-multiplicator}");
1411
- $pull-common-selector : $pull-common-selector, unquote(".pull-#{$media}-#{$i*$gridle-name-multiplicator}");
1412
- $prefix-common-selector : $prefix-common-selector, unquote(".prefix-#{$media}-#{$i*$gridle-name-multiplicator}");
1413
- $suffix-common-selector : $suffix-common-selector, unquote(".suffix-#{$media}-#{$i*$gridle-name-multiplicator}");
1414
- $common-selector : $common-selector, unquote(".grid-#{$media}-#{$i*$gridle-name-multiplicator}");
1544
+ $push-common-selector : $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$media}-#{$i*$gridle-name-multiplicator}")}");
1545
+ $pull-common-selector : $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$media}-#{$i*$gridle-name-multiplicator}")}");
1546
+ $prefix-common-selector : $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$media}-#{$i*$gridle-name-multiplicator}")}");
1547
+ $suffix-common-selector : $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$media}-#{$i*$gridle-name-multiplicator}")}");
1548
+ $common-selector : $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$media}-#{$i*$gridle-name-multiplicator}")}");
1415
1549
  }
1416
1550
  }
1417
1551
 
1418
1552
  // generate all classes for usefull states :
1419
1553
  @if $gridle-generate-useful-states-classes != null {
1420
1554
  @each $state in $gridle-generate-useful-states-classes {
1421
- $push-common-selector : $push-common-selector, unquote(".push-#{$state}-#{$i*$gridle-name-multiplicator}");
1422
- $pull-common-selector : $pull-common-selector, unquote(".pull-#{$state}-#{$i*$gridle-name-multiplicator}");
1423
- $prefix-common-selector : $prefix-common-selector, unquote(".prefix-#{$state}-#{$i*$gridle-name-multiplicator}");
1424
- $suffix-common-selector : $suffix-common-selector, unquote(".suffix-#{$state}-#{$i*$gridle-name-multiplicator}");
1425
- $common-selector : $common-selector, unquote(".grid-#{$state}-#{$i*$gridle-name-multiplicator}");
1555
+ $push-common-selector : $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$state}-#{$i*$gridle-name-multiplicator}")}");
1556
+ $pull-common-selector : $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$state}-#{$i*$gridle-name-multiplicator}")}");
1557
+ $prefix-common-selector : $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$state}-#{$i*$gridle-name-multiplicator}")}");
1558
+ $suffix-common-selector : $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$state}-#{$i*$gridle-name-multiplicator}")}");
1559
+ $common-selector : $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$state}-#{$i*$gridle-name-multiplicator}")}");
1426
1560
  }
1427
1561
  }
1428
1562
  }
@@ -1466,30 +1600,30 @@ $_gridle-state-15-classes : true !default;
1466
1600
  }
1467
1601
 
1468
1602
  // generate all the classes :
1469
- @include gridle_responseTo($media, null, $has-parent) {
1603
+ @include gridle_state($media, null, $has-parent) {
1470
1604
 
1471
1605
  @for $j from 0 through $gridle-columns-count {
1472
1606
 
1473
- .grid-#{$media}-#{$j*$gridle-name-multiplicator} {
1607
+ #{_gridle_prefixed_class("grid-#{$media}-#{$j*$gridle-name-multiplicator}")} {
1474
1608
  @include _gridle($j,$media);
1475
1609
  }
1476
1610
  @if $gridle-generate-push-classes == true {
1477
- .push-#{$media}-#{$j*$gridle-name-multiplicator} {
1611
+ #{_gridle_prefixed_class("push-#{$media}-#{$j*$gridle-name-multiplicator}")} {
1478
1612
  @include _gridle_push($j,$media);
1479
1613
  }
1480
1614
  }
1481
1615
  @if $gridle-generate-pull-classes == true {
1482
- .pull-#{$media}-#{$j*$gridle-name-multiplicator} {
1616
+ #{_gridle_prefixed_class("pull-#{$media}-#{$j*$gridle-name-multiplicator}")} {
1483
1617
  @include _gridle_pull($j,$media);
1484
1618
  }
1485
1619
  }
1486
1620
  @if $gridle-generate-prefix-classes == true {
1487
- .prefix-#{$media}-#{$j*$gridle-name-multiplicator} {
1621
+ #{_gridle_prefixed_class("prefix-#{$media}-#{$j*$gridle-name-multiplicator}")} {
1488
1622
  @include _gridle_prefix($j,$media);
1489
1623
  }
1490
1624
  }
1491
1625
  @if $gridle-generate-suffix-classes == true {
1492
- .suffix-#{$media}-#{$j*$gridle-name-multiplicator} {
1626
+ #{_gridle_prefixed_class("suffix-#{$media}-#{$j*$gridle-name-multiplicator}")} {
1493
1627
  @include _gridle_suffix($j,$media);
1494
1628
  }
1495
1629
  }
@@ -1514,30 +1648,30 @@ $_gridle-state-15-classes : true !default;
1514
1648
  }
1515
1649
 
1516
1650
  // creating classes :
1517
- @include gridle_responseTo($state, null, $has-parent) {
1651
+ @include gridle_state($state, null, $has-parent) {
1518
1652
 
1519
1653
  @for $k from 0 through $gridle-columns-count {
1520
1654
 
1521
- .grid-#{$state}-#{$k*$gridle-name-multiplicator} {
1655
+ #{_gridle_prefixed_class("grid-#{$state}-#{$k*$gridle-name-multiplicator}")} {
1522
1656
  @include _gridle($k,$state);
1523
1657
  }
1524
1658
  @if $gridle-generate-push-classes == true {
1525
- .push-#{$state}-#{$k*$gridle-name-multiplicator} {
1659
+ #{_gridle_prefixed_class("push-#{$state}-#{$k*$gridle-name-multiplicator}")} {
1526
1660
  @include _gridle_push($k,$state);
1527
1661
  }
1528
1662
  }
1529
1663
  @if $gridle-generate-pull-classes == true {
1530
- .pull-#{$state}-#{$k*$gridle-name-multiplicator} {
1664
+ #{_gridle_prefixed_class("pull-#{$state}-#{$k*$gridle-name-multiplicator}")} {
1531
1665
  @include _gridle_pull($k,$state);
1532
1666
  }
1533
1667
  }
1534
1668
  @if $gridle-generate-prefix-classes == true {
1535
- .prefix-#{$state}-#{$k*$gridle-name-multiplicator} {
1669
+ #{_gridle_prefixed_class("prefix-#{$state}-#{$k*$gridle-name-multiplicator}")} {
1536
1670
  @include _gridle_prefix($k,$state);
1537
1671
  }
1538
1672
  }
1539
1673
  @if $gridle-generate-suffix-classes == true {
1540
- .suffix-#{$state}-#{$k*$gridle-name-multiplicator} {
1674
+ #{_gridle_prefixed_class("suffix-#{$state}-#{$k*$gridle-name-multiplicator}")} {
1541
1675
  @include _gridle_suffix($k,$state);
1542
1676
  }
1543
1677
  }
@@ -1567,6 +1701,7 @@ $_gridle-state-15-classes : true !default;
1567
1701
  $gridle-settings : "#{$gridle-settings}, \"generatePullClasses\" : #{$gridle-generate-pull-classes}";
1568
1702
  $gridle-settings : "#{$gridle-settings}, \"generatePrefixClasses\" : #{$gridle-generate-prefix-classes}";
1569
1703
  $gridle-settings : "#{$gridle-settings}, \"generateSuffixClasses\" : #{$gridle-generate-suffix-classes}";
1704
+ $gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
1570
1705
  $useful-states-classes : "[";
1571
1706
  @for $i from 1 through length($gridle-generate-useful-states-classes) {
1572
1707
  @if $i > 1 {