gridle-rails 1.1.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.
Files changed (36) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +7 -0
  6. data/Rakefile +1 -0
  7. data/gridle-rails.gemspec +21 -0
  8. data/lib/gridle/rails.rb +8 -0
  9. data/lib/gridle/rails/version.rb +5 -0
  10. data/vendor/assets/stylesheets/.DS_Store +0 -0
  11. data/vendor/assets/stylesheets/_settings.scss +12 -0
  12. data/vendor/assets/stylesheets/grid.scss +11 -0
  13. data/vendor/assets/stylesheets/gridle/.DS_Store +0 -0
  14. data/vendor/assets/stylesheets/gridle/_12-columns-classes.scss +9 -0
  15. data/vendor/assets/stylesheets/gridle/_12-columns-responsive-classes.scss +9 -0
  16. data/vendor/assets/stylesheets/gridle/_12-columns-responsive.scss +14 -0
  17. data/vendor/assets/stylesheets/gridle/_12-columns.scss +9 -0
  18. data/vendor/assets/stylesheets/gridle/_16-columns-classes.scss +9 -0
  19. data/vendor/assets/stylesheets/gridle/_16-columns-responsive-classes.scss +9 -0
  20. data/vendor/assets/stylesheets/gridle/_16-columns-responsive.scss +14 -0
  21. data/vendor/assets/stylesheets/gridle/_16-columns.scss +9 -0
  22. data/vendor/assets/stylesheets/gridle/_24-columns-classes.scss +9 -0
  23. data/vendor/assets/stylesheets/gridle/_24-columns-responsive-classes.scss +9 -0
  24. data/vendor/assets/stylesheets/gridle/_24-columns-responsive.scss +14 -0
  25. data/vendor/assets/stylesheets/gridle/_24-columns.scss +9 -0
  26. data/vendor/assets/stylesheets/gridle/_960gs-classes.scss +9 -0
  27. data/vendor/assets/stylesheets/gridle/_960gs-responsive-classes.scss +9 -0
  28. data/vendor/assets/stylesheets/gridle/_960gs-responsive.scss +23 -0
  29. data/vendor/assets/stylesheets/gridle/_960gs.scss +18 -0
  30. data/vendor/assets/stylesheets/gridle/_gridle.scss +1762 -0
  31. data/vendor/assets/stylesheets/gridle/_unsementic-classes.scss +9 -0
  32. data/vendor/assets/stylesheets/gridle/_unsementic-responsive-classes.scss +9 -0
  33. data/vendor/assets/stylesheets/gridle/_unsementic-responsive.scss +23 -0
  34. data/vendor/assets/stylesheets/gridle/_unsementic.scss +18 -0
  35. data/vendor/assets/stylesheets/style.scss +55 -0
  36. metadata +107 -0
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 791ce67def64b48faed632cc32e8b29c4aaacfc7
4
+ data.tar.gz: 2c4d397616db236bc83c18c55fbe01547efe79d6
5
+ SHA512:
6
+ metadata.gz: 398beeaccee859d58e51e79ff01d30c9d01f89e571b361a5c0bb29506c10506379b40336b2f3e7878c205e1c82e36ec816eab4b27ceba4a45bc6b1b78f791fc0
7
+ data.tar.gz: 593880207385c42fe688798b82044567ec45405610998bbcc60cb231cd53bcd3665d7b55d59046ebb152d94b6569b4774872c8fdc0cb01af8e451a6440815c15
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in gridle-rails.gemspec
4
+ gemspec
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2014 polymatt
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,7 @@
1
+ # Rails wrapper for Gridle{.SCSS} grid library.
2
+
3
+ Created by Olivier Bossel.
4
+
5
+ See code & documentation here:
6
+ • [Library Website](http://gridle.org/)
7
+ • [Github Repo](https://github.com/olivierbossel/gridle)
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,21 @@
1
+ # coding: utf-8
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'gridle/rails/version'
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "gridle-rails"
8
+ spec.version = Gridle::Rails::VERSION
9
+ spec.authors = ["polymatt"]
10
+ spec.email = ["matt@polymathic.me"]
11
+ spec.description = "Rails wrapper for Gridle{.SCSS} grid library."
12
+ spec.summary = "Gridle is a set of complete and simple settings, mixins and classes that make the creation and usage of grid systems (even complex ones) really simple."
13
+ spec.homepage = "https://github.com/olivierbossel/gridle"
14
+ spec.license = "MIT"
15
+
16
+ spec.files = `git ls-files`.split($/)
17
+ spec.require_paths = ["lib"]
18
+
19
+ spec.add_development_dependency "bundler", "~> 1.3"
20
+ spec.add_development_dependency "rake"
21
+ end
@@ -0,0 +1,8 @@
1
+ require "gridle/rails/version"
2
+
3
+ module Gridle
4
+ module Rails
5
+ class Engine < ::Rails::Engine
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,5 @@
1
+ module Gridle
2
+ module Rails
3
+ VERSION = "1.1.0"
4
+ end
5
+ end
@@ -0,0 +1,12 @@
1
+ // Import gridle :
2
+ @import 'gridle/gridle';
3
+
4
+
5
+ // Configure :
6
+ $gridle-columns-count : 12;
7
+ $gridle-gutter-width : 20px;
8
+ $gridle-debug : true;
9
+ $gridle-html-states-classes : true; // not really for production, used for demo here...
10
+
11
+ @include gridle_register_default_states();
12
+ @include gridle_register_state('ipad-landscape', 'only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)');
@@ -0,0 +1,11 @@
1
+ // Import grid settings :
2
+ @import 'settings';
3
+
4
+ // Generate classes :
5
+ @include gridle_generate_classes();
6
+
7
+ // Max size :
8
+ .container {
9
+ margin:0 auto;
10
+ max-width:960px;
11
+ }
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '12-columns';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '12-columns-responsive';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 12;
10
+
11
+ /**
12
+ * Register states :
13
+ */
14
+ @include gridle_register_default_states();
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 12;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '16-columns';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '16-columns-responsive';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 16;
10
+
11
+ /**
12
+ * Register states :
13
+ */
14
+ @include gridle_register_default_states();
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 16;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '24-columns';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '24-columns-responsive';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 24;
10
+
11
+ /**
12
+ * Register states :
13
+ */
14
+ @include gridle_register_default_states();
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 24;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '960gs';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Imports :
3
+ */
4
+ @import '960gs-responsive';
5
+
6
+ /**
7
+ * Generate classes :
8
+ */
9
+ @include gridle_generate_classes();
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 12;
10
+ $gridle-gutter-width : 20px;
11
+
12
+ /**
13
+ * Register states :
14
+ */
15
+ @include gridle_register_default_states();
16
+
17
+ /**
18
+ * Fix width of container :
19
+ */
20
+ .container, .grid-container, .container-12, .c-12 {
21
+ max-width:960px;
22
+ margin:0 auto;
23
+ }
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Imports
3
+ */
4
+ @import 'gridle';
5
+
6
+ /**
7
+ * Configuration :
8
+ */
9
+ $gridle-columns-count : 12;
10
+ $gridle-gutter-width : 20px;
11
+
12
+ /**
13
+ * Fix width of container :
14
+ */
15
+ .container, .grid-container, .container-12, .c-12 {
16
+ max-width:960px;
17
+ margin:0 auto;
18
+ }
@@ -0,0 +1,1762 @@
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
+ // The MIT License (MIT)
12
+
13
+ // Copyright (c) 2014 olivierbossel
14
+
15
+ // Permission is hereby granted, free of charge, to any person obtaining a copy of
16
+ // this software and associated documentation files (the "Software"), to deal in
17
+ // the Software without restriction, including without limitation the rights to
18
+ // use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
19
+ // the Software, and to permit persons to whom the Software is furnished to do so,
20
+ // subject to the following conditions:
21
+
22
+ // The above copyright notice and this permission notice shall be included in all
23
+ // copies or substantial portions of the Software.
24
+
25
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
26
+ // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
27
+ // FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
28
+ // COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
29
+ // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
30
+ // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
31
+ // |------------------------------------------------------
32
+ // |------------------------------------------------------
33
+
34
+ // |------------------------------------------------------
35
+ // |------------------------------------------------------
36
+ // @created 25.03.13
37
+ // @updated 06.12.13
38
+ // @author Olivier Bossel <olivier.bossel@gmail.com>
39
+ // @version 1.1.0
40
+ // |------------------------------------------------------
41
+ // |------------------------------------------------------
42
+
43
+
44
+
45
+
46
+ // |------------------------------------------------------
47
+ // |------------------------------------------------------
48
+ // | Settings
49
+ // |------------------------------------------------------
50
+ // |------------------------------------------------------
51
+
52
+ // gridle configuration vars :
53
+ $gridle-columns-count : 12 !default;
54
+ $gridle-gutter-width : 20px !default;
55
+ $gridle-name-multiplicator : 1 !default;
56
+
57
+ $gridle-direction : ltr !default;
58
+
59
+ $gridle-debug : false !default;
60
+ $gridle-debug-show-class-names : true !default;
61
+
62
+ $gridle-ie7-support : true !default;
63
+
64
+ $gridle-class-prefix : '' !default;
65
+
66
+ $gridle-html-states-classes : false !default;
67
+
68
+ $gridle-generate-helpers-classes : true !default;
69
+ $gridle-generate-push-classes : true !default;
70
+ $gridle-generate-pull-classes : true !default;
71
+ $gridle-generate-prefix-classes : true !default;
72
+ $gridle-generate-suffix-classes : true !default;
73
+
74
+ $gridle-generate-useful-states-classes : null !default;// retina | landscape | portrait | print | tv
75
+
76
+ $gridle-debug-selector : ".gridle-debug &, &.gridle-debug";
77
+
78
+
79
+
80
+
81
+ // |------------------------------------------------------
82
+ // |------------------------------------------------------
83
+ // | Variables
84
+ // |------------------------------------------------------
85
+ // |------------------------------------------------------
86
+
87
+
88
+
89
+ $_gridle-state-01-min-width : null !default;
90
+ $_gridle-state-01-max-width : null !default;
91
+ $_gridle-state-01-name : null !default;
92
+ $_gridle-state-01-query : null !default;
93
+ $_gridle-state-01-classes : true !default;
94
+
95
+ $_gridle-state-02-min-width : null !default;
96
+ $_gridle-state-02-max-width : null !default;
97
+ $_gridle-state-02-name : null !default;
98
+ $_gridle-state-02-query : null !default;
99
+ $_gridle-state-02-classes : true !default;
100
+
101
+ $_gridle-state-03-min-width : null !default;
102
+ $_gridle-state-03-max-width : null !default;
103
+ $_gridle-state-03-name : null !default;
104
+ $_gridle-state-03-query : null !default;
105
+ $_gridle-state-03-classes : true !default;
106
+
107
+ $_gridle-state-04-min-width : null !default;
108
+ $_gridle-state-04-max-width : null !default;
109
+ $_gridle-state-04-name : null !default;
110
+ $_gridle-state-04-query : null !default;
111
+ $_gridle-state-04-classes : true !default;
112
+
113
+ $_gridle-state-05-min-width : null !default;
114
+ $_gridle-state-05-max-width : null !default;
115
+ $_gridle-state-05-name : null !default;
116
+ $_gridle-state-05-query : null !default;
117
+ $_gridle-state-05-classes : true !default;
118
+
119
+ $_gridle-state-06-min-width : null !default;
120
+ $_gridle-state-06-max-width : null !default;
121
+ $_gridle-state-06-name : null !default;
122
+ $_gridle-state-06-query : null !default;
123
+ $_gridle-state-06-classes : true !default;
124
+
125
+ $_gridle-state-07-min-width : null !default;
126
+ $_gridle-state-07-max-width : null !default;
127
+ $_gridle-state-07-name : null !default;
128
+ $_gridle-state-07-query : null !default;
129
+ $_gridle-state-07-classes : true !default;
130
+
131
+ $_gridle-state-08-min-width : null !default;
132
+ $_gridle-state-08-max-width : null !default;
133
+ $_gridle-state-08-name : null !default;
134
+ $_gridle-state-08-query : null !default;
135
+ $_gridle-state-08-classes : true !default;
136
+
137
+ $_gridle-state-09-min-width : null !default;
138
+ $_gridle-state-09-max-width : null !default;
139
+ $_gridle-state-09-name : null !default;
140
+ $_gridle-state-09-query : null !default;
141
+ $_gridle-state-09-classes : true !default;
142
+
143
+ $_gridle-state-10-min-width : null !default;
144
+ $_gridle-state-10-max-width : null !default;
145
+ $_gridle-state-10-name : null !default;
146
+ $_gridle-state-10-query : null !default;
147
+ $_gridle-state-10-classes : true !default;
148
+
149
+ $_gridle-state-11-min-width : null !default;
150
+ $_gridle-state-11-max-width : null !default;
151
+ $_gridle-state-11-name : null !default;
152
+ $_gridle-state-11-query : null !default;
153
+ $_gridle-state-11-classes : true !default;
154
+
155
+ $_gridle-state-12-min-width : null !default;
156
+ $_gridle-state-12-max-width : null !default;
157
+ $_gridle-state-12-name : null !default;
158
+ $_gridle-state-12-query : null !default;
159
+ $_gridle-state-12-classes : true !default;
160
+
161
+ $_gridle-state-13-min-width : null !default;
162
+ $_gridle-state-13-max-width : null !default;
163
+ $_gridle-state-13-name : null !default;
164
+ $_gridle-state-13-query : null !default;
165
+ $_gridle-state-13-classes : true !default;
166
+
167
+ $_gridle-state-14-min-width : null !default;
168
+ $_gridle-state-14-max-width : null !default;
169
+ $_gridle-state-14-name : null !default;
170
+ $_gridle-state-14-query : null !default;
171
+ $_gridle-state-14-classes : true !default;
172
+
173
+ $_gridle-state-15-min-width : null !default;
174
+ $_gridle-state-15-max-width : null !default;
175
+ $_gridle-state-15-name : null !default;
176
+ $_gridle-state-15-query : null !default;
177
+ $_gridle-state-15-classes : true !default;
178
+
179
+
180
+
181
+
182
+ // |------------------------------------------------------
183
+ // |------------------------------------------------------
184
+ // | Silent classes
185
+ // |------------------------------------------------------
186
+ // |------------------------------------------------------
187
+
188
+ // Init gridle
189
+ // Creating the silent classes with user configuration :
190
+ %gridle-clearfix {
191
+ // For modern browser
192
+ &:before,
193
+ &:after {
194
+ content:"";
195
+ display:table;
196
+ }
197
+ &:after {
198
+ clear:both;
199
+ }
200
+ // For IE 6/7 (trigger hasLayout
201
+ & {
202
+ zoom:1;
203
+ }
204
+ }
205
+ %gridle-push-pull-debug-background-common {
206
+ background-size:50px 90%;
207
+ background-position:0 50%;
208
+ background-repeat:repeat-x;
209
+ }
210
+ %gridle-push-pull-common {
211
+ position:relative;
212
+ }
213
+ %gridle-container-common {
214
+ -webkit-box-sizing: border-box;
215
+ -moz-box-sizing: border-box;
216
+ box-sizing: border-box;
217
+ }
218
+ %gridle-parent-common {
219
+ -webkit-box-sizing: border-box;
220
+ -moz-box-sizing: border-box;
221
+ box-sizing: border-box;
222
+ }
223
+ %gridle-container-debug-common {
224
+ background-color:#f5f5f5;
225
+
226
+ &:before,
227
+ &:after {
228
+ content:"";
229
+ display:block;
230
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkEzNzVFNTg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkEzNzVFNjg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGQTM3NUUzODU2ODExRTI5QjhGOEQzODhDMzhCNkU4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGQTM3NUU0ODU2ODExRTI5QjhGOEQzODhDMzhCNkU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++5+BhQAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==);
231
+ height:inherit;
232
+ text-align:center;
233
+ color:white;
234
+ font-size:11px;
235
+ }
236
+ }
237
+ %gridle-grid-debug-common {
238
+ &:before,
239
+ &:after {
240
+ content:"";
241
+ display:block;
242
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkEzNzVFNTg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkEzNzVFNjg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGQTM3NUUzODU2ODExRTI5QjhGOEQzODhDMzhCNkU4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGQTM3NUU0ODU2ODExRTI5QjhGOEQzODhDMzhCNkU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++5+BhQAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==);
243
+ margin:10px 0;
244
+ padding:5px 0;
245
+ text-align:center;
246
+ color:white;
247
+ font-size:11px;
248
+ -webkit-box-sizing: border-box;
249
+ -moz-box-sizing: border-box;
250
+ box-sizing: border-box;
251
+ display:block !important;
252
+ }
253
+ background-color:#daeff5;
254
+ }
255
+ %gridle-grid-common {
256
+ display:inline-block;
257
+ min-height:1px;
258
+ -webkit-box-sizing: border-box;
259
+ -moz-box-sizing: border-box;
260
+ box-sizing: border-box;
261
+ }
262
+ %gridle-prefix-debug-common {
263
+ background-color:#dae7e9 !important;
264
+ }
265
+ %gridle-suffix-debug-common {
266
+ background-color:#dae7e9 !important;
267
+ }
268
+
269
+
270
+
271
+
272
+ // |------------------------------------------------------
273
+ // |------------------------------------------------------
274
+ // | Common mixins
275
+ // |------------------------------------------------------
276
+ // |------------------------------------------------------
277
+
278
+
279
+ // Common css that cannot be extended cause of variables :
280
+ @mixin _gridle_container_common() {
281
+ @extend %gridle-clearfix;
282
+ @extend %gridle-container-common;
283
+ // debug part :
284
+ @if ($gridle-debug == true) {
285
+ #{$gridle-debug-selector} {
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;
291
+ }
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;
297
+ }
298
+ }
299
+ }
300
+ }
301
+ }
302
+ @mixin _gridle_grid_common() {
303
+ @extend %gridle-grid-common;
304
+ @if $gridle-direction == rtl {
305
+ float:right;
306
+ direction:rtl;
307
+ } @else {
308
+ float:left;
309
+ direction:ltr;
310
+ }
311
+
312
+ // set padding :
313
+ padding:0 $gridle-gutter-width/2;
314
+ @if $gridle-debug == true {
315
+ #{$gridle-debug-selector} {
316
+ @extend %gridle-grid-debug-common;
317
+ }
318
+ }
319
+ }
320
+ @mixin _gridle_parent_common() {
321
+ @extend %gridle-clearfix;
322
+ @extend %gridle-parent-common;
323
+ }
324
+ @mixin _gridle_push_common() {
325
+ // extend common :
326
+ @extend %gridle-push-pull-common;
327
+ @if $gridle-debug == true {
328
+ #{$gridle-debug-selector} {
329
+ @extend %gridle-push-pull-debug-background-common;
330
+ background-color:#f4efdf !important;
331
+ @if $gridle-direction == ltr {
332
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
333
+ } @else {
334
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
335
+ }
336
+ }
337
+ }
338
+ }
339
+ @mixin _gridle_pull_common() {
340
+ @extend %gridle-push-pull-common;
341
+ @if $gridle-debug == true {
342
+ #{$gridle-debug-selector} {
343
+ @extend %gridle-push-pull-debug-background-common;
344
+ background-color:#cfe4d5 !important;
345
+ @if $gridle-direction == ltr {
346
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Qjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ0Qzg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdDQjlFNzVFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRBODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ee9ybwAAA3JJREFUeNrs3dEKgkAQQNE27f9/uJoM6iXKwFLH8Vzw1WjdwxZt2iLiIOl9R0MgASJNqp/z5K01I5znOle9GOeY8XuCFQQOOACBAw5ABAcggiMW/G0CEDjgAAQOOACBAw5ABAcggiMBjufgapvdUXRwWEG0QxzDkWKbOSBwwAEIHHAAAgccgMABByCCAxDBkRsHIHDAAQgccAACBxyAwAEHIHDAAYjgAERwbBoHIHDAAQgccAACBxyAwAEHIHDAAQgccAAiOAARHFVxAAIHHIDAAQcgcMABCBxwAAIHHIDAAQcgcMABiOAARHAAIjjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOQOCAAxA44NhjPRxligcOAQLHS9fhuJjOPmLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwqCwQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMObRUIHAIEDgECBxyAwAEHIHDAUbo+MY6qN5SAwwoCBxyAwAEHIHDAAQgccCgtEDgECBwCBA44AIEDDkDggEMrAIFDgMAhQOCAAxA4vhRwAPJrXeHxgwMQk2ik/lD3ablaCEj1p69CAggkkAACCSRaEQgkAgQSSACBBBJAIIFEa/9hChIBAgkkgEACCSCLIAlIBMhnJBdIBAgkAgQSSACBBBJAIIEEEEgg0eaAQCJAICl7YwtAIPlbJ1MSEEggAQQSSACBBBJAIIEEEEggUVEgkAgQSCABBBJIAIEEEkAggQQQSFZHYoMjIJCMZBcwIJBAAggkkAACCSSAQAIJIJBAAggkkACy4/cOiQCBBBJAIIEEEEggAQQSSACBBBJAIIEEEEggAQQSSAARJAIEEkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBBAogggQQQSCABBBJIAIEEEkAggQQQSCABBBJIABEkgAiSwkgAgQQSQCCBBBBIIAEEEkgAgQQSQCCBBBBB0gARJEWRAAIJJIBAAgkgkEACCCSQACJIABEk+ZEAAgkkgEACCSCQQAIIJJAAojEkZ0gA0XiQACJIABEkH5G0IUAESWIkgEACCSCQQAKIIAFEkAAiSJIgAQQSSACBBJKJLzLnySPCFM2BRFYQCRBp0W4CDAAOV/Wfo7G12gAAAABJRU5ErkJggg==);
347
+ } @else {
348
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQzZDQUQ0Rjg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQzZDQUQ1MDg1MDYxMUUyOEQwMjgzRjhGQkEwMDdDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkNBRDREODUwNjExRTI4RDAyODNGOEZCQTAwN0M3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNDNkNBRDRFODUwNjExRTI4RDAyODNGOEZCQTAwN0M3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+FdXphgAAA39JREFUeNrs3cGKwjAUQNGm7f//8FQyo66E6oAS8/Jy7qY7peEdGyFoqbUuks5bLYEEiPRWe8sXL6XcLq3fp2PX/elhjBotboDt/2qIPvsMSIxfX9xiQSJAIBEgkEACCCSQqBcQSAQIJJAAAgkkgEACCSCQQKLAQCARIJDckBRjBwgkz5FskAACCSSAQAIJIJBAAggkkGhUIJAIEEggAQQSSACBBBJAIIEEEEggAWTsIBEgkEACCCSQAAIJJIBAAgkgkEACCCSQAJI2SAQIJJAAAgkkgEACCSCQQAIIJJAAAgkkgEACCSALJJAIEEgECCSQAAIJJIBAAgkgkEACCCSQAAIJJIBAAgkggkSAQAIJIJBAAggkkAACCSSAQAIJIJBAAggkkAAiSAARJPMiAQQSSACBBBJAIIEEEEggAQQSSACBBBJAIIEEEP2L5AcSQPQ6SAARJIAIkmmQAAIJJIBAAgkgkEACCCSQAAIJJIAIEkAEydBIAIEEEkCGywFHQPQip4ABESTxkQACCSSAQAIJIJBAAggkkAAiSAARJKdI9khIAIEkYmGQAAJJWCTlL0AESWAkgEACCSCQQAIIJJAAIkgAESRBkAACCSSAQAIJIJoPydbaCCD52xLf26XWCog+wpH1z22O2loHIOlxrHAAIjgAERzfxgEIHHAAAgccgMABByCCAxDBEQQHIHCExbHcj8ksgAiOoDgAgQMOQOCA4/12MwdH564oLhFxeILAAQcgcMABCBxwAAIHHIAIDkAEByCCY2gcgMABByBwwAEIHHAAAgccgMABByBwwAGI4ABEcGTFAQgccAACBxyAwAEHIHDAAQgccATKjza0W9cCByB6rCRe0+lw2GLBAQcgcMABCBxwAAIHHIDAAQcgcMABCBxwAAIHHIAIDkAEhwCBAw5A4IADEDjgAAQOOACBAw5A4IADEDjgAAQOOACBAw5NDwQOAQKHAIEDDkDggAMQOOAABA44AIEDDkDggAMQOOAABA44NAcQOAQIHAIEDjgAgQMOQOCAAxA44AAEDjgAgQMOrXDAoVxA4BAgcAgQOOAABA44AIEDDkDggAMQOOBQeCBwCBA4BAgccAACBxyAwAHHdO1wNMdxGDNPEDjgAAQOOACBAw51BQKHAIFDgMABByBwwAEIHHCoAxA4NHSlVicgpAhf0iVApEz9CjAA65/oofjgOdQAAAAASUVORK5CYII=);
349
+ }
350
+ }
351
+ }
352
+ }
353
+ @mixin _gridle_prefix_common() {
354
+ @if $gridle-debug == true {
355
+ #{$gridle-debug-selector} {
356
+ @extend %gridle-prefix-debug-common;
357
+ }
358
+ }
359
+ }
360
+ @mixin _gridle_suffix_common() {
361
+ @if $gridle-debug == true {
362
+ #{$gridle-debug-selector} {
363
+ @extend %gridle-suffix-debug-common;
364
+ }
365
+ }
366
+ }
367
+
368
+
369
+
370
+
371
+ // |------------------------------------------------------
372
+ // |------------------------------------------------------
373
+ // | Functions
374
+ // |------------------------------------------------------
375
+ // |------------------------------------------------------
376
+
377
+
378
+ // Get column width :
379
+ @function gridle_get_columns_width(
380
+ $columns : 1,
381
+ $context : $gridle-columns-count
382
+ ) {
383
+ @return percentage(1 / $context * $columns);
384
+ }
385
+ @function gridle_get_column_width(
386
+ $columns : 1,
387
+ $context : $gridle-columns-count
388
+ ) {
389
+ @return gridle_get_columns_width($columns, $context);
390
+ }
391
+
392
+ // prefix classname :
393
+ @function _gridle_prefixed_class(
394
+ $name
395
+ ) {
396
+ @return ".#{$gridle-class-prefix}#{$name}";
397
+ }
398
+
399
+
400
+ // Get media query by state :
401
+ // @param String $state The state name
402
+ // @return String The query
403
+ @function _get_media_query_for_state(
404
+ $state-or-min-width : null,
405
+ $max-width : null
406
+ ) {
407
+ // get the index of state :
408
+ $idx : _gridle_get_media_query_index_by_name($state-or-min-width);
409
+
410
+ // if there's an idx, the state requested is a registered one :
411
+ @if $idx {
412
+ // get vars :
413
+ $name : _gridle_get_media_query_vars($idx,"name");
414
+ $min-width : _gridle_get_media_query_vars($idx,"min-width");
415
+ $max-width : _gridle_get_media_query_vars($idx,"max-width");
416
+ $classes : _gridle_get_media_query_vars($idx,"classes");
417
+ $query : _gridle_get_media_query_vars($idx,"query");
418
+
419
+ // check if exist :
420
+ @if $name {
421
+ // check if query exist :
422
+ @if $query {
423
+ @return $query;
424
+ } @else {
425
+
426
+ // write media query :
427
+ @if $min-width and $max-width {
428
+ @return "screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
429
+ } @else if $min-width == null and $max-width {
430
+ @return "screen and (max-width: #{$max-width})";
431
+ } @else if $min-width and $max-width == null {
432
+ @return "screen and (min-width: #{$min-width})";
433
+ } @else {
434
+ @return null;
435
+ }
436
+ }
437
+ }
438
+ } @else if $state-or-min-width == 'print' or $state-or-min-width == print {
439
+ @return "only print";
440
+ } @else if $state-or-min-width == 'tv' or $state-or-min-width == tv {
441
+ @return "only tv";
442
+ } @else if $state-or-min-width == 'portrait' or $state-or-min-width == portrait {
443
+ @return "only screen and (orientation: portrait)";
444
+ } @else if $state-or-min-width == 'landscape' or $state-or-min-width == landscape {
445
+ @return "only screen and (orientation: landscape)";
446
+ } @else if $state-or-min-width == 'retina' or $state-or-min-width == retina {
447
+ @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)";
448
+ } @else {
449
+ // check for min and max width :
450
+ @if $state-or-min-width and $max-width {
451
+ @return "screen and (min-width: #{$state-or-min-width}) and (max-width: #{$max-width})";
452
+ } @else if $state-or-min-width and $max-width == null {
453
+ @return "screen and (min-width: #{$state-or-min-width})";
454
+ } @else if $state-or-min-width == null and $max-width {
455
+ @return "screen and (max-width: #{$max-width})";
456
+ } @else {
457
+ @return null;
458
+ }
459
+ }
460
+ }
461
+
462
+
463
+ // Get the media queries variables :
464
+ // @param int $index The media query indes
465
+ // @param String $var The media query variable name
466
+ // @return String|int The variable value
467
+ @function _gridle_get_media_query_vars(
468
+ $index : 1,
469
+ $var : "name"
470
+ ) {
471
+ @if $index == 1 {
472
+ @if $var == "name" { @return $_gridle-state-01-name; }
473
+ @else if $var == "min-width" { @return $_gridle-state-01-min-width; }
474
+ @else if $var == "max-width" { @return $_gridle-state-01-max-width; }
475
+ @else if $var == "query" { @return $_gridle-state-01-query; }
476
+ @else if $var == "classes" { @return $_gridle-state-01-classes; }
477
+ } @else if $index == 2 {
478
+ @if $var == "name" { @return $_gridle-state-02-name; }
479
+ @else if $var == "min-width" { @return $_gridle-state-02-min-width; }
480
+ @else if $var == "max-width" { @return $_gridle-state-02-max-width; }
481
+ @else if $var == "query" { @return $_gridle-state-02-query; }
482
+ @else if $var == "classes" { @return $_gridle-state-02-classes; }
483
+ } @else if $index == 3 {
484
+ @if $var == "name" { @return $_gridle-state-03-name; }
485
+ @else if $var == "min-width" { @return $_gridle-state-03-min-width; }
486
+ @else if $var == "max-width" { @return $_gridle-state-03-max-width; }
487
+ @else if $var == "query" { @return $_gridle-state-03-query; }
488
+ @else if $var == "classes" { @return $_gridle-state-03-classes; }
489
+ } @else if $index == 4 {
490
+ @if $var == "name" { @return $_gridle-state-04-name; }
491
+ @else if $var == "min-width" { @return $_gridle-state-04-min-width; }
492
+ @else if $var == "max-width" { @return $_gridle-state-04-max-width; }
493
+ @else if $var == "query" { @return $_gridle-state-04-query; }
494
+ @else if $var == "classes" { @return $_gridle-state-04-classes; }
495
+ } @else if $index == 5 {
496
+ @if $var == "name" { @return $_gridle-state-05-name; }
497
+ @else if $var == "min-width" { @return $_gridle-state-05-min-width; }
498
+ @else if $var == "max-width" { @return $_gridle-state-05-max-width; }
499
+ @else if $var == "query" { @return $_gridle-state-05-query; }
500
+ @else if $var == "classes" { @return $_gridle-state-05-classes; }
501
+ } @else if $index == 6 {
502
+ @if $var == "name" { @return $_gridle-state-06-name; }
503
+ @else if $var == "min-width" { @return $_gridle-state-06-min-width; }
504
+ @else if $var == "max-width" { @return $_gridle-state-06-max-width; }
505
+ @else if $var == "query" { @return $_gridle-state-06-query; }
506
+ @else if $var == "classes" { @return $_gridle-state-06-classes; }
507
+ } @else if $index == 7 {
508
+ @if $var == "name" { @return $_gridle-state-07-name; }
509
+ @else if $var == "min-width" { @return $_gridle-state-07-min-width; }
510
+ @else if $var == "max-width" { @return $_gridle-state-07-max-width; }
511
+ @else if $var == "query" { @return $_gridle-state-07-query; }
512
+ @else if $var == "classes" { @return $_gridle-state-07-classes; }
513
+ } @else if $index == 8 {
514
+ @if $var == "name" { @return $_gridle-state-08-name; }
515
+ @else if $var == "min-width" { @return $_gridle-state-08-min-width; }
516
+ @else if $var == "max-width" { @return $_gridle-state-08-max-width; }
517
+ @else if $var == "query" { @return $_gridle-state-08-query; }
518
+ @else if $var == "classes" { @return $_gridle-state-08-classes; }
519
+ } @else if $index == 9 {
520
+ @if $var == "name" { @return $_gridle-state-09-name; }
521
+ @else if $var == "min-width" { @return $_gridle-state-09-min-width; }
522
+ @else if $var == "max-width" { @return $_gridle-state-09-max-width; }
523
+ @else if $var == "query" { @return $_gridle-state-09-query; }
524
+ @else if $var == "classes" { @return $_gridle-state-09-classes; }
525
+ } @else if $index == 10 {
526
+ @if $var == "name" { @return $_gridle-state-10-name; }
527
+ @else if $var == "min-width" { @return $_gridle-state-10-min-width; }
528
+ @else if $var == "max-width" { @return $_gridle-state-10-max-width; }
529
+ @else if $var == "query" { @return $_gridle-state-10-query; }
530
+ @else if $var == "classes" { @return $_gridle-state-10-classes; }
531
+ } @else if $index == 11 {
532
+ @if $var == "name" { @return $_gridle-state-11-name; }
533
+ @else if $var == "min-width" { @return $_gridle-state-11-min-width; }
534
+ @else if $var == "max-width" { @return $_gridle-state-11-max-width; }
535
+ @else if $var == "query" { @return $_gridle-state-11-query; }
536
+ @else if $var == "classes" { @return $_gridle-state-11-classes; }
537
+ } @else if $index == 12 {
538
+ @if $var == "name" { @return $_gridle-state-12-name; }
539
+ @else if $var == "min-width" { @return $_gridle-state-12-min-width; }
540
+ @else if $var == "max-width" { @return $_gridle-state-12-max-width; }
541
+ @else if $var == "query" { @return $_gridle-state-12-query; }
542
+ @else if $var == "classes" { @return $_gridle-state-12-classes; }
543
+ } @else if $index == 13 {
544
+ @if $var == "name" { @return $_gridle-state-13-name; }
545
+ @else if $var == "min-width" { @return $_gridle-state-13-min-width; }
546
+ @else if $var == "max-width" { @return $_gridle-state-13-max-width; }
547
+ @else if $var == "query" { @return $_gridle-state-13-query; }
548
+ @else if $var == "classes" { @return $_gridle-state-13-classes; }
549
+ } @else if $index == 14 {
550
+ @if $var == "name" { @return $_gridle-state-14-name; }
551
+ @else if $var == "min-width" { @return $_gridle-state-14-min-width; }
552
+ @else if $var == "max-width" { @return $_gridle-state-14-max-width; }
553
+ @else if $var == "query" { @return $_gridle-state-14-query; }
554
+ @else if $var == "classes" { @return $_gridle-state-14-classes; }
555
+ } @else if $index == 15 {
556
+ @if $var == "name" { @return $_gridle-state-15-name; }
557
+ @else if $var == "min-width" { @return $_gridle-state-15-min-width; }
558
+ @else if $var == "max-width" { @return $_gridle-state-15-max-width; }
559
+ @else if $var == "query" { @return $_gridle-state-15-query; }
560
+ @else if $var == "classes" { @return $_gridle-state-15-classes; }
561
+ }
562
+ }
563
+
564
+
565
+ // Get the index of an media query by name
566
+ // @param String $name The nme of the media query
567
+ // @return int The index of the media query
568
+ @function _gridle_get_media_query_index_by_name(
569
+ $name
570
+ ) {
571
+ @if $name == null {
572
+ @return null;
573
+ }
574
+ @if $_gridle-state-01-name == $name { @return 1; }
575
+ @else if $_gridle-state-02-name == $name { @return 2; }
576
+ @else if $_gridle-state-03-name == $name { @return 3; }
577
+ @else if $_gridle-state-04-name == $name { @return 4; }
578
+ @else if $_gridle-state-05-name == $name { @return 5; }
579
+ @else if $_gridle-state-06-name == $name { @return 6; }
580
+ @else if $_gridle-state-07-name == $name { @return 7; }
581
+ @else if $_gridle-state-08-name == $name { @return 8; }
582
+ @else if $_gridle-state-09-name == $name { @return 9; }
583
+ @else if $_gridle-state-10-name == $name { @return 10; }
584
+ @else if $_gridle-state-11-name == $name { @return 11; }
585
+ @else if $_gridle-state-12-name == $name { @return 12; }
586
+ @else if $_gridle-state-13-name == $name { @return 13; }
587
+ @else if $_gridle-state-14-name == $name { @return 14; }
588
+ @else if $_gridle-state-15-name == $name { @return 15; }
589
+ @else { @return null; }
590
+ }
591
+
592
+
593
+
594
+
595
+ // |------------------------------------------------------
596
+ // |------------------------------------------------------
597
+ // | Mixins
598
+ // |------------------------------------------------------
599
+ // |------------------------------------------------------
600
+
601
+
602
+ // Register an state :
603
+ @mixin gridle_register_state(
604
+ $name,
605
+ $min-width-or-query : null,
606
+ $max-width-or-classes-generation : null,
607
+ $classes-generation : true
608
+ ) {
609
+
610
+ // register new state :
611
+ @if $_gridle-state-01-name == null {
612
+ $_gridle-state-01-name : $name;
613
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
614
+ $_gridle-state-01-min-width : $min-width-or-query;
615
+ $_gridle-state-01-max-width : $max-width-or-classes-generation;
616
+ $_gridle-state-01-classes : $classes-generation;
617
+ } @else if type-of($min-width-or-query) == string {
618
+ $_gridle-state-01-query : $min-width-or-query;
619
+ @if type-of($max-width-or-classes-generation) == bool {
620
+ $_gridle-state-01-classes : $max-width-or-classes-generation;
621
+ }
622
+ }
623
+ } @else if $_gridle-state-02-name == null {
624
+ $_gridle-state-02-name : $name;
625
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
626
+ $_gridle-state-02-min-width : $min-width-or-query;
627
+ $_gridle-state-02-max-width : $max-width-or-classes-generation;
628
+ $_gridle-state-02-classes : $classes-generation;
629
+ } @else if type-of($min-width-or-query) == string {
630
+ $_gridle-state-02-query : $min-width-or-query;
631
+ @if type-of($max-width-or-classes-generation) == bool {
632
+ $_gridle-state-02-classes : $max-width-or-classes-generation;
633
+ }
634
+ }
635
+ } @else if $_gridle-state-03-name == null {
636
+ $_gridle-state-03-name : $name;
637
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
638
+ $_gridle-state-03-min-width : $min-width-or-query;
639
+ $_gridle-state-03-max-width : $max-width-or-classes-generation;
640
+ $_gridle-state-03-classes : $classes-generation;
641
+ } @else if type-of($min-width-or-query) == string {
642
+ $_gridle-state-03-query : $min-width-or-query;
643
+ @if type-of($max-width-or-classes-generation) == bool {
644
+ $_gridle-state-03-classes : $max-width-or-classes-generation;
645
+ }
646
+ }
647
+ } @else if $_gridle-state-04-name == null {
648
+ $_gridle-state-04-name : $name;
649
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
650
+ $_gridle-state-04-min-width : $min-width-or-query;
651
+ $_gridle-state-04-max-width : $max-width-or-classes-generation;
652
+ $_gridle-state-04-classes : $classes-generation;
653
+ } @else if type-of($min-width-or-query) == string {
654
+ $_gridle-state-04-query : $min-width-or-query;
655
+ @if type-of($max-width-or-classes-generation) == bool {
656
+ $_gridle-state-04-classes : $max-width-or-classes-generation;
657
+ }
658
+ }
659
+ } @else if $_gridle-state-05-name == null {
660
+ $_gridle-state-05-name : $name;
661
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
662
+ $_gridle-state-05-min-width : $min-width-or-query;
663
+ $_gridle-state-05-max-width : $max-width-or-classes-generation;
664
+ $_gridle-state-05-classes : $classes-generation;
665
+ } @else if type-of($min-width-or-query) == string {
666
+ $_gridle-state-05-query : $min-width-or-query;
667
+ @if type-of($max-width-or-classes-generation) == bool {
668
+ $_gridle-state-05-classes : $max-width-or-classes-generation;
669
+ }
670
+ }
671
+ } @else if $_gridle-state-06-name == null {
672
+ $_gridle-state-06-name : $name;
673
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
674
+ $_gridle-state-06-min-width : $min-width-or-query;
675
+ $_gridle-state-06-max-width : $max-width-or-classes-generation;
676
+ $_gridle-state-06-classes : $classes-generation;
677
+ } @else if type-of($min-width-or-query) == string {
678
+ $_gridle-state-06-query : $min-width-or-query;
679
+ @if type-of($max-width-or-classes-generation) == bool {
680
+ $_gridle-state-06-classes : $max-width-or-classes-generation;
681
+ }
682
+ }
683
+ } @else if $_gridle-state-07-name == null {
684
+ $_gridle-state-07-name : $name;
685
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
686
+ $_gridle-state-07-min-width : $min-width-or-query;
687
+ $_gridle-state-07-max-width : $max-width-or-classes-generation;
688
+ $_gridle-state-07-classes : $classes-generation;
689
+ } @else if type-of($min-width-or-query) == string {
690
+ $_gridle-state-07-query : $min-width-or-query;
691
+ @if type-of($max-width-or-classes-generation) == bool {
692
+ $_gridle-state-07-classes : $max-width-or-classes-generation;
693
+ }
694
+ }
695
+ } @else if $_gridle-state-08-name == null {
696
+ $_gridle-state-08-name : $name;
697
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
698
+ $_gridle-state-08-min-width : $min-width-or-query;
699
+ $_gridle-state-08-max-width : $max-width-or-classes-generation;
700
+ $_gridle-state-08-classes : $classes-generation;
701
+ } @else if type-of($min-width-or-query) == string {
702
+ $_gridle-state-08-query : $min-width-or-query;
703
+ @if type-of($max-width-or-classes-generation) == bool {
704
+ $_gridle-state-08-classes : $max-width-or-classes-generation;
705
+ }
706
+ }
707
+ } @else if $_gridle-state-09-name == null {
708
+ $_gridle-state-09-name : $name;
709
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
710
+ $_gridle-state-09-min-width : $min-width-or-query;
711
+ $_gridle-state-09-max-width : $max-width-or-classes-generation;
712
+ $_gridle-state-09-classes : $classes-generation;
713
+ } @else if type-of($min-width-or-query) == string {
714
+ $_gridle-state-09-query : $min-width-or-query;
715
+ @if type-of($max-width-or-classes-generation) == bool {
716
+ $_gridle-state-09-classes : $max-width-or-classes-generation;
717
+ }
718
+ }
719
+ } @else if $_gridle-state-10-name == null {
720
+ $_gridle-state-10-name : $name;
721
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
722
+ $_gridle-state-10-min-width : $min-width-or-query;
723
+ $_gridle-state-10-max-width : $max-width-or-classes-generation;
724
+ $_gridle-state-10-classes : $classes-generation;
725
+ } @else if type-of($min-width-or-query) == string {
726
+ $_gridle-state-10-query : $min-width-or-query;
727
+ @if type-of($max-width-or-classes-generation) == bool {
728
+ $_gridle-state-10-classes : $max-width-or-classes-generation;
729
+ }
730
+ }
731
+ } @else if $_gridle-state-11-name == null {
732
+ $_gridle-state-11-name : $name;
733
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
734
+ $_gridle-state-11-min-width : $min-width-or-query;
735
+ $_gridle-state-11-max-width : $max-width-or-classes-generation;
736
+ $_gridle-state-11-classes : $classes-generation;
737
+ } @else if type-of($min-width-or-query) == string {
738
+ $_gridle-state-11-query : $min-width-or-query;
739
+ @if type-of($max-width-or-classes-generation) == bool {
740
+ $_gridle-state-11-classes : $max-width-or-classes-generation;
741
+ }
742
+ }
743
+ } @else if $_gridle-state-12-name == null {
744
+ $_gridle-state-12-name : $name;
745
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
746
+ $_gridle-state-12-min-width : $min-width-or-query;
747
+ $_gridle-state-12-max-width : $max-width-or-classes-generation;
748
+ $_gridle-state-12-classes : $classes-generation;
749
+ } @else if type-of($min-width-or-query) == string {
750
+ $_gridle-state-12-query : $min-width-or-query;
751
+ @if type-of($max-width-or-classes-generation) == bool {
752
+ $_gridle-state-12-classes : $max-width-or-classes-generation;
753
+ }
754
+ }
755
+ } @else if $_gridle-state-13-name == null {
756
+ $_gridle-state-13-name : $name;
757
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
758
+ $_gridle-state-13-min-width : $min-width-or-query;
759
+ $_gridle-state-13-max-width : $max-width-or-classes-generation;
760
+ $_gridle-state-13-classes : $classes-generation;
761
+ } @else if type-of($min-width-or-query) == string {
762
+ $_gridle-state-13-query : $min-width-or-query;
763
+ @if type-of($max-width-or-classes-generation) == bool {
764
+ $_gridle-state-13-classes : $max-width-or-classes-generation;
765
+ }
766
+ }
767
+ } @else if $_gridle-state-14-name == null {
768
+ $_gridle-state-14-name : $name;
769
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
770
+ $_gridle-state-14-min-width : $min-width-or-query;
771
+ $_gridle-state-14-max-width : $max-width-or-classes-generation;
772
+ $_gridle-state-14-classes : $classes-generation;
773
+ } @else if type-of($min-width-or-query) == string {
774
+ $_gridle-state-14-query : $min-width-or-query;
775
+ @if type-of($max-width-or-classes-generation) == bool {
776
+ $_gridle-state-14-classes : $max-width-or-classes-generation;
777
+ }
778
+ }
779
+ } @else if $_gridle-state-15-name == null {
780
+ $_gridle-state-15-name : $name;
781
+ @if type-of($min-width-or-query) != string and type-of($max-width-or-classes-generation) != bool {
782
+ $_gridle-state-15-min-width : $min-width-or-query;
783
+ $_gridle-state-15-max-width : $max-width-or-classes-generation;
784
+ $_gridle-state-15-classes : $classes-generation;
785
+ } @else if type-of($min-width-or-query) == string {
786
+ $_gridle-state-15-query : $min-width-or-query;
787
+ @if type-of($max-width-or-classes-generation) == bool {
788
+ $_gridle-state-15-classes : $max-width-or-classes-generation;
789
+ }
790
+ }
791
+ }
792
+ }
793
+
794
+
795
+ // Register default states :
796
+ @mixin gridle_register_default_states() {
797
+ // register mobile and tablet states :
798
+ @include gridle_register_state("mobile",null,480px);
799
+ @include gridle_register_state("tablet",481px,1024px);
800
+ }
801
+
802
+
803
+ // Responsive helpers mixins :
804
+ @mixin gridle_state(
805
+ $state-or-min-width,
806
+ $max-width : null,
807
+ $has-parent : true
808
+ ) {
809
+
810
+ // query list :
811
+ $query : ();
812
+
813
+ // loop on each states :
814
+ @each $_state-or-min-width in $state-or-min-width {
815
+
816
+ // check if is a state :
817
+ @if type-of($_state-or-min-width) == string and $gridle-html-states-classes {
818
+ // html class :
819
+ @if $has-parent {
820
+ html#{_gridle_prefixed_class("#{$_state-or-min-width}")} & { @content; }
821
+ } @else {
822
+ html#{_gridle_prefixed_class("#{$_state-or-min-width}")} { @content; }
823
+ }
824
+ }
825
+
826
+ // get the media query :
827
+ $q : _get_media_query_for_state($_state-or-min-width, $max-width);
828
+ @if $q {
829
+ $query : append($query, unquote("#{$q}"), comma);
830
+ }
831
+ }
832
+
833
+ // check and print media query :
834
+ @if length($query) {
835
+ @media #{$query} {
836
+ @content;
837
+ }
838
+ }
839
+ }
840
+
841
+
842
+
843
+ // Container mixin :
844
+ @mixin gridle_container(
845
+ ) {
846
+ @include _gridle_container_common();
847
+ }
848
+
849
+
850
+ // Grid mixin :
851
+ // Set the width of the specified grid column :
852
+ @mixin gridle(
853
+ $columns : $gridle-columns-count,
854
+ $state-context : null,
855
+ $state : null
856
+ ) {
857
+ // common :
858
+ @include _gridle_grid_common();
859
+ // variables :
860
+ $context : $gridle-columns-count;
861
+ @if type-of($state-context) == number {
862
+ $state : $state;
863
+ $context : $state-context;
864
+ } @else {
865
+ $state : $state-context;
866
+ }
867
+ // check if need media query :
868
+ @if $state {
869
+ @include gridle_state($state) {
870
+ @include _gridle($columns, $state, $context);
871
+ }
872
+ } @else {
873
+ @include _gridle($columns,$state,$context);
874
+ }
875
+ }
876
+ @mixin _gridle(
877
+ $columns : $gridle-columns-count,
878
+ $state : null,
879
+ $context : $gridle-columns-count
880
+ ) {
881
+ // vars :
882
+ $width : percentage(1 / $context * $columns);
883
+ width:$width;
884
+
885
+ // ie7 support :
886
+ @if $gridle-ie7-support == true {
887
+ *width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
888
+ }
889
+
890
+ // debug :
891
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
892
+ #{$gridle-debug-selector} {
893
+ &:before {
894
+ content:"grid-#{$state}-#{$columns * $gridle-name-multiplicator}";
895
+ }
896
+ &.parent:before {
897
+ content:"grid-parent-#{$state}-#{$columns * $gridle-name-multiplicator}";
898
+ }
899
+ }
900
+ }
901
+ }
902
+
903
+
904
+ // push :
905
+ // Push the element of the count of column wanted
906
+ @mixin gridle_push(
907
+ $columns : $gridle-columns-count,
908
+ $state-context : null,
909
+ $state : null
910
+ ) {
911
+ // common :
912
+ @include _gridle_push_common();
913
+ // variables :
914
+ $context : $gridle-columns-count;
915
+ @if type-of($state-context) == number {
916
+ $state : $state;
917
+ $context : $state-context;
918
+ } @else {
919
+ $state : $state-context;
920
+ }
921
+ // check if need media query :
922
+ @if $state {
923
+ @include gridle_state($state) {
924
+ @include _gridle_push($columns,$state,$context);
925
+ }
926
+ } @else {
927
+ @include _gridle_push($columns,$state,$context);
928
+ }
929
+ }
930
+ @mixin _gridle_push(
931
+ $columns : $gridle-columns-count,
932
+ $state : null,
933
+ $context : $gridle-columns-count
934
+ ) {
935
+ // vars :
936
+ $width : percentage(1 / $context) * $columns;
937
+ @if $gridle-direction == rtl { $width : $width*-1; }
938
+ left:$width;
939
+
940
+ // debug css :
941
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
942
+ #{$gridle-debug-selector} {
943
+ &:after {
944
+ content:"push-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
945
+ }
946
+ }
947
+ }
948
+ }
949
+
950
+
951
+ // pull :
952
+ // Pull the element of the count of column wanted
953
+ @mixin gridle_pull(
954
+ $columns : $gridle-columns-count,
955
+ $state-context : null,
956
+ $state : null
957
+ ) {
958
+ // common :
959
+ @include _gridle_pull_common();
960
+ // variables :
961
+ $context : $gridle-columns-count;
962
+ @if type-of($state-context) == number {
963
+ $state : $state;
964
+ $context : $state-context;
965
+ } @else {
966
+ $state : $state-context;
967
+ }
968
+ // check if need media query :
969
+ @if $state {
970
+ @include gridle_state($state) {
971
+ @include _gridle_pull($columns,$state,$context);
972
+ }
973
+ } @else {
974
+ @include _gridle_pull($columns,$state,$context);
975
+ }
976
+ }
977
+ @mixin _gridle_pull(
978
+ $columns : $gridle-columns-count,
979
+ $state : null,
980
+ $context : $gridle-columns-count
981
+ ) {
982
+ // vars :
983
+ $width : percentage(1 / $context) * $columns;
984
+ @if $gridle-direction == rtl { $width : $width*-1; }
985
+ right:$width;
986
+
987
+ // debug css :
988
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
989
+ #{$gridle-debug-selector} {
990
+ &:after {
991
+ content:"pull-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
992
+ }
993
+ }
994
+ }
995
+ }
996
+
997
+
998
+ // push :
999
+ // Push the element of the count of column wanted
1000
+ @mixin gridle_prefix(
1001
+ $columns : $gridle-columns-count,
1002
+ $state-context : null,
1003
+ $state : null
1004
+ ) {
1005
+ // common :
1006
+ @include _gridle_prefix_common();
1007
+ // variables :
1008
+ $context : $gridle-columns-count;
1009
+ @if type-of($state-context) == number {
1010
+ $state : $state;
1011
+ $context : $state-context;
1012
+ } @else {
1013
+ $state : $state-context;
1014
+ }
1015
+ // check if need media query :
1016
+ @if $state {
1017
+ @include gridle_state($state) {
1018
+ @include _gridle_prefix($columns,$state,$context);
1019
+ }
1020
+ } @else {
1021
+ @include _gridle_prefix($columns,$state,$context);
1022
+ }
1023
+ }
1024
+ @mixin _gridle_prefix(
1025
+ $columns : $gridle-columns-count,
1026
+ $state : null,
1027
+ $context : $gridle-columns-count
1028
+ ) {
1029
+ // vars :
1030
+ $width : percentage(1 / $context) * $columns;
1031
+ @if $gridle-direction == rtl { margin-right:$width; }
1032
+ @else { margin-left:$width; }
1033
+
1034
+ // debug css :
1035
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
1036
+ #{$gridle-debug-selector} {
1037
+ &:after {
1038
+ content:"prefix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
1039
+ }
1040
+ }
1041
+ }
1042
+ }
1043
+
1044
+
1045
+ // pull :
1046
+ // Pull the element of the count of column wanted
1047
+ @mixin gridle_suffix(
1048
+ $columns : $gridle-columns-count,
1049
+ $state-context : null,
1050
+ $state : null
1051
+ ) {
1052
+ // common :
1053
+ @include _gridle_suffix_common();
1054
+ // variables :
1055
+ $context : $gridle-columns-count;
1056
+ @if type-of($state-context) == number {
1057
+ $state : $state;
1058
+ $context : $state-context;
1059
+ } @else {
1060
+ $state : $state-context;
1061
+ }
1062
+ // check if need media query :
1063
+ @if $state {
1064
+ @include gridle_state($state) {
1065
+ @include _gridle_suffix($columns,$state,$context);
1066
+ }
1067
+ } @else {
1068
+ @include _gridle_suffix($columns,$state,$context);
1069
+ }
1070
+ }
1071
+ @mixin _gridle_suffix(
1072
+ $columns : $gridle-columns-count,
1073
+ $state : null,
1074
+ $context : $gridle-columns-count
1075
+ ) {
1076
+ // vars :
1077
+ $width : percentage(1 / $context) * $columns;
1078
+ @if $gridle-direction == rtl { margin-left:$width; }
1079
+ @else { margin-right:$width; }
1080
+
1081
+ // debug css :
1082
+ @if $gridle-debug == true and $gridle-debug-show-class-names == true {
1083
+ #{$gridle-debug-selector} {
1084
+ &:after {
1085
+ content:"suffix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
1086
+ }
1087
+ }
1088
+ }
1089
+ }
1090
+
1091
+
1092
+ // Grid centered :
1093
+ @mixin gridle_centered(
1094
+ $state : null
1095
+ ) {
1096
+ // check if need media query :
1097
+ @if $state {
1098
+ @include gridle_state($state) {
1099
+ @include _gridle_centered();
1100
+ }
1101
+ } @else {
1102
+ @include _gridle_centered();
1103
+ }
1104
+ }
1105
+ @mixin _gridle_centered() {
1106
+ display:block !important;
1107
+ float:none !important;
1108
+ margin-left:auto !important;
1109
+ margin-right:auto !important;
1110
+ clear:both !important;
1111
+ }
1112
+
1113
+
1114
+ // Grid parent :
1115
+ @mixin gridle_parent(
1116
+ $state : null
1117
+ ) {
1118
+ // common :
1119
+ @include _gridle_parent_common();
1120
+ // check if need media query :
1121
+ @if $state {
1122
+ @include gridle_state($state) {
1123
+ @include _gridle_parent();
1124
+ }
1125
+ } @else {
1126
+ @include _gridle_parent();
1127
+ }
1128
+ }
1129
+ @mixin _gridle_parent() {
1130
+ @include gridle_no_gutter();
1131
+ }
1132
+
1133
+
1134
+ // Hide on :
1135
+ // @param String $media On what state
1136
+ @mixin gridle_hide(
1137
+ $state : null
1138
+ ) {
1139
+ // check if need media query :
1140
+ @if $state {
1141
+ @include gridle_state($state) {
1142
+ @include _gridle_hide();
1143
+ }
1144
+ } @else {
1145
+ @include _gridle_hide();
1146
+ }
1147
+ }
1148
+ @mixin _gridle_hide() {
1149
+ display:none;
1150
+ }
1151
+
1152
+
1153
+ // Not visible on :
1154
+ // @param String $media What to hide (one of the 3 state classes name)
1155
+ @mixin gridle_not_visible(
1156
+ $state : null
1157
+ ) {
1158
+ // check if need media query :
1159
+ @if $state {
1160
+ @include gridle_state($state) {
1161
+ @include _gridle_not_visible();
1162
+ }
1163
+ } @else {
1164
+ @include _gridle_not_visible();
1165
+ }
1166
+ }
1167
+ @mixin _gridle_not_visible() {
1168
+ visibility:hidden;
1169
+ }
1170
+
1171
+
1172
+ // Show on
1173
+ // @param String $media What to hide (one of the 3 state classes name)
1174
+ @mixin gridle_show(
1175
+ $state : null
1176
+ ) {
1177
+ // check if need media query :
1178
+ @if $state {
1179
+ @include gridle_state($state) {
1180
+ @include _gridle_show();
1181
+ }
1182
+ } @else {
1183
+ @include _gridle_show();
1184
+ }
1185
+ }
1186
+ @mixin _gridle_show() {
1187
+ display:block;
1188
+ }
1189
+
1190
+
1191
+ // Visible on :
1192
+ // @param String $media On what state
1193
+ @mixin gridle_visible(
1194
+ $state : null
1195
+ ) {
1196
+ // check if need media query :
1197
+ @if $state {
1198
+ @include gridle_state($state) {
1199
+ @include _gridle_visible();
1200
+ }
1201
+ } @else {
1202
+ @include _gridle_visible();
1203
+ }
1204
+ }
1205
+ @mixin _gridle_visible() {
1206
+ visibility:visible;
1207
+ }
1208
+
1209
+
1210
+ // Gridle Right :
1211
+ @mixin gridle_float(
1212
+ $float-direction : left,
1213
+ $state : null
1214
+ ) {
1215
+ // check if need media query :
1216
+ @if $state {
1217
+ @include gridle_state($state) {
1218
+ @include gridle_float($float-direction);
1219
+ }
1220
+ } @else {
1221
+ @include gridle_float($float-direction);
1222
+ }
1223
+ }
1224
+ @mixin gridle_float(
1225
+ $float-direction : left
1226
+ ) {
1227
+ float:#{$float-direction};
1228
+ }
1229
+
1230
+
1231
+ // Gridle clear :
1232
+ // @param String $clear-direction The direction to clear
1233
+ // @param String $state The state
1234
+ @mixin gridle_clear(
1235
+ $clear-direction : both,
1236
+ $state : null
1237
+ ) {
1238
+ // check if need media query :
1239
+ @if $state {
1240
+ @include gridle_state($state) {
1241
+ @include _gridle_clear($clear-direction);
1242
+ }
1243
+ } @else {
1244
+ @include _gridle_clear($clear-direction);
1245
+ }
1246
+ }
1247
+ @mixin _gridle_clear(
1248
+ $clear-direction : both
1249
+ ) {
1250
+ clear:#{$clear-direction};
1251
+ }
1252
+
1253
+
1254
+ // Gridle no gutter :
1255
+ // @param String $side The side to clear
1256
+ // @param String $state The state
1257
+ @mixin gridle_no_gutter(
1258
+ $side : left right,
1259
+ $state : null
1260
+ ) {
1261
+ // check if need media query :
1262
+ @if $state {
1263
+ @include gridle_state($state) {
1264
+ @include _gridle_no_gutter($side);
1265
+ }
1266
+ } @else {
1267
+ @include _gridle_no_gutter($side);
1268
+ }
1269
+ }
1270
+ @mixin gridle_no_margin(
1271
+ $side : left right,
1272
+ $state : null
1273
+ ) {
1274
+ @include gridle_no_gutter($side, $state);
1275
+ }
1276
+ @mixin _gridle_no_gutter(
1277
+ $side : left right
1278
+ ) {
1279
+ @each $s in $side {
1280
+ padding-#{$s} : 0 !important;
1281
+ }
1282
+ }
1283
+
1284
+
1285
+ // Gridle gutter :
1286
+ // @param String $side The side to clear
1287
+ // @param String $state The state
1288
+ @mixin gridle_gutter(
1289
+ $side : left right,
1290
+ $state : null
1291
+ ) {
1292
+ // check if need media query :
1293
+ @if $state {
1294
+ @include gridle_state($state) {
1295
+ @include _gridle_gutter($side);
1296
+ }
1297
+ } @else {
1298
+ @include _gridle_gutter($side);
1299
+ }
1300
+ }
1301
+ // shortcut :
1302
+ @mixin gridle_margin(
1303
+ $side : left right,
1304
+ $state : null
1305
+ ) {
1306
+ @include gridle_gutter($side, $state);
1307
+ }
1308
+ @mixin _gridle_gutter(
1309
+ $side : left right
1310
+ ) {
1311
+ @each $s in $side {
1312
+ padding-#{$s} : $gridle-gutter-width / 2;
1313
+ }
1314
+ }
1315
+
1316
+
1317
+ // Generate all helpers classes
1318
+ // All the classes generated are not wrapper in gridle_state
1319
+ // in this mixin... Just the names are generated accordingly to the
1320
+ // requested state
1321
+ @mixin _gridle_generate_helper_classes (
1322
+ $state : null
1323
+ ) {
1324
+ // variables :
1325
+ $media : '';
1326
+ @if $state { $media : -#{$state}; }
1327
+ @else { $media : ''; }
1328
+
1329
+ // helpers :
1330
+ #{_gridle_prefixed_class("hide#{$media}")} {
1331
+ @include gridle_hide(null);
1332
+ }
1333
+ #{_gridle_prefixed_class("not-visible#{$media}")} {
1334
+ @include gridle_not_visible(null);
1335
+ }
1336
+ #{_gridle_prefixed_class("show#{$media}")} {
1337
+ @include gridle_show(null);
1338
+ }
1339
+ #{_gridle_prefixed_class("visible#{$media}")} {
1340
+ @include gridle_visible(null);
1341
+ }
1342
+ #{_gridle_prefixed_class("float#{$media}-left")} {
1343
+ @include gridle_float(left);
1344
+ }
1345
+ #{_gridle_prefixed_class("float#{$media}-right")} {
1346
+ @include gridle_float(right);
1347
+ }
1348
+ #{_gridle_prefixed_class("clear#{$media}")} {
1349
+ @include gridle_clear(both);
1350
+ }
1351
+ #{_gridle_prefixed_class("clear#{$media}-left")} {
1352
+ @include gridle_clear(left);
1353
+ }
1354
+ #{_gridle_prefixed_class("clear#{$media}-right")} {
1355
+ @include gridle_clear(right);
1356
+ }
1357
+ #{_gridle_prefixed_class("no-gutter#{$media}")},
1358
+ #{_gridle_prefixed_class("no-margin#{$media}")} {
1359
+ @include gridle_no_margin();
1360
+ }
1361
+ #{_gridle_prefixed_class("no-gutter#{$media}-left")},
1362
+ #{_gridle_prefixed_class("no-margin#{$media}-left")} {
1363
+ @include gridle_no_margin(left);
1364
+ }
1365
+ #{_gridle_prefixed_class("no-gutter#{$media}-right")},
1366
+ #{_gridle_prefixed_class("no-margin#{$media}-right")} {
1367
+ @include gridle_no_margin(right);
1368
+ }
1369
+ #{_gridle_prefixed_class("no-gutter#{$media}-top")},
1370
+ #{_gridle_prefixed_class("no-margin#{$media}-top")} {
1371
+ @include gridle_no_margin(top);
1372
+ }
1373
+ #{_gridle_prefixed_class("no-gutter#{$media}-bottom")},
1374
+ #{_gridle_prefixed_class("no-margin#{$media}-bottom")} {
1375
+ @include gridle_no_margin(bottom);
1376
+ }
1377
+ #{_gridle_prefixed_class("gutter#{$media}")},
1378
+ #{_gridle_prefixed_class("margin#{$media}")} {
1379
+ @include gridle_margin();
1380
+ }
1381
+ #{_gridle_prefixed_class("gutter#{$media}-left")},
1382
+ #{_gridle_prefixed_class("margin#{$media}-left")} {
1383
+ @include gridle_margin(left);
1384
+ }
1385
+ #{_gridle_prefixed_class("gutter#{$media}-right")},
1386
+ #{_gridle_prefixed_class("margin#{$media}-right")} {
1387
+ @include gridle_margin(right);
1388
+ }
1389
+ #{_gridle_prefixed_class("gutter#{$media}-top")},
1390
+ #{_gridle_prefixed_class("margin#{$media}-top")} {
1391
+ @include gridle_margin(top);
1392
+ }
1393
+ #{_gridle_prefixed_class("gutter#{$media}-bottom")},
1394
+ #{_gridle_prefixed_class("margin#{$media}-bottom")} {
1395
+ @include gridle_margin(bottom);
1396
+ }
1397
+ #{_gridle_prefixed_class("auto-height#{$media}")} {
1398
+ height:inherit;
1399
+ }
1400
+ #{_gridle_prefixed_class("centered#{$media}")} {
1401
+ @include gridle_centered(null);
1402
+ }
1403
+ #{_gridle_prefixed_class("parent#{$media}")} {
1404
+ @include _gridle_parent(); // gridle_parent contain extend so can not be here in a media query
1405
+ }
1406
+
1407
+ // debug colors :
1408
+ @if $gridle-debug {
1409
+ // debug color classes :
1410
+ #{_gridle_prefixed_class("debug-color#{$media}-1")} {
1411
+ #{$gridle-debug-selector} {
1412
+ background-color : #edeeb2;
1413
+ }
1414
+ }
1415
+ #{_gridle_prefixed_class("debug-color#{$media}-2")} {
1416
+ #{$gridle-debug-selector} {
1417
+ background-color : #fae4a7;
1418
+ }
1419
+ }
1420
+ #{_gridle_prefixed_class("debug-color#{$media}-3")} {
1421
+ #{$gridle-debug-selector} {
1422
+ background-color : #f5eacc;
1423
+ }
1424
+ }
1425
+ #{_gridle_prefixed_class("debug-color#{$media}-4")} {
1426
+ #{$gridle-debug-selector} {
1427
+ background-color : #eebdb2;
1428
+ }
1429
+ }
1430
+ #{_gridle_prefixed_class("debug-color#{$media}-5")} {
1431
+ #{$gridle-debug-selector} {
1432
+ background-color : #d4b2ee;
1433
+ }
1434
+ }
1435
+ #{_gridle_prefixed_class("debug-color#{$media}-6")} {
1436
+ #{$gridle-debug-selector} {
1437
+ background-color : #b2d8ee;
1438
+ }
1439
+ }
1440
+ }
1441
+ }
1442
+
1443
+
1444
+ // generate settings json :
1445
+ @mixin gridle_generate_json_settings(
1446
+ $scope : default
1447
+ ) {
1448
+
1449
+ // settings content :
1450
+ $gridle-settings-states : "{";
1451
+
1452
+ // generate all classes for differents media queries :
1453
+ @for $i from 1 through 15 {
1454
+ // setup vars :
1455
+ $media : _gridle_get_media_query_vars($i,"name");
1456
+ $classes : _gridle_get_media_query_vars($i,"classes");
1457
+
1458
+ // generate all media queries grid classes :
1459
+ @if $media and $classes == true {
1460
+
1461
+ // manage body query :
1462
+ $body-query : _get_media_query_for_state($media);
1463
+ @if $body-query {
1464
+ @if $i == 1 {
1465
+ $gridle-settings-states : "#{$gridle-settings-states}\"#{$media}\":\"#{$body-query}\"";
1466
+ } @else {
1467
+ $gridle-settings-states : "#{$gridle-settings-states},\"#{$media}\":\"#{$body-query}\"";
1468
+ }
1469
+ }
1470
+
1471
+ }
1472
+ }
1473
+
1474
+ // usefull states :
1475
+ @if $gridle-generate-useful-states-classes != null {
1476
+ @each $state in $gridle-generate-useful-states-classes {
1477
+
1478
+ // manage body query :
1479
+ $body-query : _get_media_query_for_state($state);
1480
+ @if $body-query {
1481
+ $gridle-settings-states : "#{$gridle-settings-states},\"#{$state}\":\"#{$body-query}\"";
1482
+ }
1483
+ }
1484
+ }
1485
+
1486
+ // generate settings json :
1487
+ $gridle-settings-states : "#{$gridle-settings-states}}";
1488
+ $gridle-settings : "{";
1489
+ $gridle-settings : "#{$gridle-settings} \"states\" : #{$gridle-settings-states}";
1490
+ $gridle-settings : "#{$gridle-settings}, \"columnsCount\" : #{$gridle-columns-count}";
1491
+ $gridle-settings : "#{$gridle-settings}, \"gutterWidth\" : \"#{$gridle-gutter-width}\"";
1492
+ $gridle-settings : "#{$gridle-settings}, \"nameMultiplicator\" : #{$gridle-name-multiplicator}";
1493
+ $gridle-settings : "#{$gridle-settings}, \"direction\" : \"#{$gridle-direction}\"";
1494
+ $gridle-settings : "#{$gridle-settings}, \"ie7Support\" : #{$gridle-ie7-support}";
1495
+ $gridle-settings : "#{$gridle-settings}, \"debug\" : #{$gridle-debug}";
1496
+ $gridle-settings : "#{$gridle-settings}, \"debugShowClassNames\" : #{$gridle-debug-show-class-names}";
1497
+ $gridle-settings : "#{$gridle-settings}, \"htmlStatesClasses\" : #{$gridle-html-states-classes}";
1498
+ $gridle-settings : "#{$gridle-settings}, \"generateHelpersClasses\" : #{$gridle-generate-helpers-classes}";
1499
+ $gridle-settings : "#{$gridle-settings}, \"generatePushClasses\" : #{$gridle-generate-push-classes}";
1500
+ $gridle-settings : "#{$gridle-settings}, \"generatePullClasses\" : #{$gridle-generate-pull-classes}";
1501
+ $gridle-settings : "#{$gridle-settings}, \"generatePrefixClasses\" : #{$gridle-generate-prefix-classes}";
1502
+ $gridle-settings : "#{$gridle-settings}, \"generateSuffixClasses\" : #{$gridle-generate-suffix-classes}";
1503
+ $gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
1504
+ $useful-states-classes : "[";
1505
+ @if type-of($gridle-generate-useful-states-classes) == list
1506
+ {
1507
+ @for $i from 1 through length($gridle-generate-useful-states-classes) {
1508
+ @if $i > 1 {
1509
+ $useful-states-classes : "#{$useful-states-classes},";
1510
+ }
1511
+ $useful-states-classes : "#{$useful-states-classes}\"#{nth($gridle-generate-useful-states-classes,$i)}\"";
1512
+ }
1513
+ }
1514
+ $useful-states-classes : "#{$useful-states-classes}]";
1515
+ $gridle-settings : "#{$gridle-settings}, \"generateUsefulStatesClasses\" : #{$useful-states-classes}";
1516
+ $gridle-settings : "#{$gridle-settings}}";
1517
+ #gridle-settings-#{$scope} {
1518
+ content : $gridle-settings;
1519
+ }
1520
+ }
1521
+
1522
+
1523
+ // gridle mixin :
1524
+ // Generate all the classes needed for a grid
1525
+ @mixin gridle_generate_classes(
1526
+ $scope : null
1527
+ ) {
1528
+ // check if a scope exist :
1529
+ @if $scope {
1530
+ // wrapp grid into scope :
1531
+ .#{$scope} {
1532
+ @include _gridle_generate_classes(true);
1533
+ }
1534
+ } @else {
1535
+ // generate classes :
1536
+ @include _gridle_generate_classes(false);
1537
+ }
1538
+ }
1539
+ @mixin _gridle_generate_classes(
1540
+ $has-parent
1541
+ ) {
1542
+
1543
+ // Windows 8 fix for snap mode :
1544
+ @media screen and (max-width: 400px) {
1545
+ @-ms-viewport { width: device-width; }
1546
+ }
1547
+
1548
+ // generate container class :
1549
+ $container-selector : ();
1550
+ $container-selector : $container-selector, unquote("#{_gridle_prefixed_class("container")}, #{_gridle_prefixed_class("container-#{$gridle-columns-count}")}");
1551
+ #{$container-selector} {
1552
+ @include gridle_container();
1553
+ }
1554
+
1555
+ // parent common css :
1556
+ $parentSelector : "#{"#{$gridle-class-prefix}parent"}";
1557
+ $gridSelector : "#{"#{$gridle-class-prefix}grid-"}";
1558
+ [class*="#{$gridSelector}"][class*="#{$parentSelector}"] {
1559
+ @extend %gridle-clearfix;
1560
+ @extend %gridle-parent-common;
1561
+ }
1562
+
1563
+ // generate all grid-x classes :
1564
+ @for $i from 0 through $gridle-columns-count {
1565
+
1566
+ // variables :
1567
+ $calculatedSelector : "#{$i*$gridle-name-multiplicator}";
1568
+
1569
+ // classes :
1570
+ #{_gridle_prefixed_class("grid-#{$calculatedSelector}")} {
1571
+ @include _gridle($i);
1572
+ }
1573
+ @if $gridle-generate-push-classes == true {
1574
+ #{_gridle_prefixed_class("push-#{$calculatedSelector}")} {
1575
+ @include _gridle_push($i);
1576
+ }
1577
+ }
1578
+ @if $gridle-generate-pull-classes == true {
1579
+ #{_gridle_prefixed_class("pull-#{$calculatedSelector}")} {
1580
+ @include _gridle_pull($i);
1581
+ }
1582
+ }
1583
+ @if $gridle-generate-prefix-classes == true {
1584
+ #{_gridle_prefixed_class("prefix-#{$calculatedSelector}")} {
1585
+ @include _gridle_prefix($i);
1586
+ }
1587
+ }
1588
+ @if $gridle-generate-suffix-classes == true {
1589
+ #{_gridle_prefixed_class("suffix-#{$calculatedSelector}")} {
1590
+ @include _gridle_suffix($i);
1591
+ }
1592
+ }
1593
+ }
1594
+
1595
+ // helpers classes :
1596
+ @if $gridle-generate-helpers-classes == true {
1597
+ @include _gridle_generate_helper_classes();
1598
+ }
1599
+
1600
+ // generate all selector for extends :
1601
+ $push-common-selector : ();
1602
+ $pull-common-selector : ();
1603
+ $prefix-common-selector : ();
1604
+ $suffix-common-selector : ();
1605
+ $common-selector : ();
1606
+ @for $i from 0 through $gridle-columns-count {
1607
+
1608
+ // variables :
1609
+ $calculatedSelector : "#{$i*$gridle-name-multiplicator}";
1610
+
1611
+ // selectors :
1612
+ $push-common-selector : append( $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$calculatedSelector}")}"), comma );
1613
+ $pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$calculatedSelector}")}"), comma );
1614
+ $prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$calculatedSelector}")}"), comma );
1615
+ $suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$calculatedSelector}")}"), comma );
1616
+ $common-selector : append( $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$calculatedSelector}")}"), comma );
1617
+
1618
+ // generate all classes for media queries :
1619
+ @for $j from 1 through 15 {
1620
+ // setup vars :
1621
+ $media : _gridle_get_media_query_vars($j,"name");
1622
+ $classes : _gridle_get_media_query_vars($j,"classes");
1623
+
1624
+ // generate classes :
1625
+ @if $media and $classes == true {
1626
+
1627
+ $push-common-selector : append( $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$media}-#{$calculatedSelector}")}"), comma );
1628
+ $pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$media}-#{$calculatedSelector}")}"), comma );
1629
+ $prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$media}-#{$calculatedSelector}")}"), comma );
1630
+ $suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$media}-#{$calculatedSelector}")}"), comma );
1631
+ $common-selector : append( $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$media}-#{$calculatedSelector}")}"), comma );
1632
+ }
1633
+ }
1634
+
1635
+ // generate all classes for usefull states :
1636
+ @if $gridle-generate-useful-states-classes != null {
1637
+ @each $state in $gridle-generate-useful-states-classes {
1638
+ $push-common-selector : append( $push-common-selector, unquote("#{_gridle_prefixed_class("push-#{$state}-#{$calculatedSelector}")}"), comma );
1639
+ $pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_prefixed_class("pull-#{$state}-#{$calculatedSelector}")}"), comma );
1640
+ $prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_prefixed_class("prefix-#{$state}-#{$calculatedSelector}")}"), comma );
1641
+ $suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_prefixed_class("suffix-#{$state}-#{$calculatedSelector}")}"), comma );
1642
+ $common-selector : append( $common-selector, unquote("#{_gridle_prefixed_class("grid-#{$state}-#{$calculatedSelector}")}"), comma );
1643
+ }
1644
+ }
1645
+ }
1646
+
1647
+ // common css :
1648
+ #{$push-common-selector} {
1649
+ @include _gridle_push_common();
1650
+ }
1651
+ #{$pull-common-selector} {
1652
+ @include _gridle_pull_common();
1653
+ }
1654
+ #{$prefix-common-selector} {
1655
+ @include _gridle_prefix_common();
1656
+ }
1657
+ #{$suffix-common-selector} {
1658
+ @include _gridle_suffix_common();
1659
+ }
1660
+ #{$common-selector} {
1661
+ @include _gridle_grid_common();
1662
+ }
1663
+
1664
+ // generate all classes for differents media queries :
1665
+ @for $i from 1 through 15 {
1666
+ // setup vars :
1667
+ $media : _gridle_get_media_query_vars($i,"name");
1668
+ $classes : _gridle_get_media_query_vars($i,"classes");
1669
+
1670
+ // generate all media queries grid classes :
1671
+ @if $media and $classes == true {
1672
+
1673
+ // generate all the classes :
1674
+ @include gridle_state($media, null, $has-parent) {
1675
+
1676
+ @for $j from 0 through $gridle-columns-count {
1677
+
1678
+ // variables :
1679
+ $calculatedSelector : "#{$j*$gridle-name-multiplicator}";
1680
+
1681
+ // classes :
1682
+ #{_gridle_prefixed_class("grid-#{$media}-#{$calculatedSelector}")} {
1683
+ @include _gridle($j,$media);
1684
+ }
1685
+ @if $gridle-generate-push-classes == true {
1686
+ #{_gridle_prefixed_class("push-#{$media}-#{$calculatedSelector}")} {
1687
+ @include _gridle_push($j,$media);
1688
+ }
1689
+ }
1690
+ @if $gridle-generate-pull-classes == true {
1691
+ #{_gridle_prefixed_class("pull-#{$media}-#{$calculatedSelector}")} {
1692
+ @include _gridle_pull($j,$media);
1693
+ }
1694
+ }
1695
+ @if $gridle-generate-prefix-classes == true {
1696
+ #{_gridle_prefixed_class("prefix-#{$media}-#{$calculatedSelector}")} {
1697
+ @include _gridle_prefix($j,$media);
1698
+ }
1699
+ }
1700
+ @if $gridle-generate-suffix-classes == true {
1701
+ #{_gridle_prefixed_class("suffix-#{$media}-#{$calculatedSelector}")} {
1702
+ @include _gridle_suffix($j,$media);
1703
+ }
1704
+ }
1705
+ }
1706
+
1707
+ // media queries helpers classes :
1708
+ @if $gridle-generate-helpers-classes == true and $media {
1709
+ @include _gridle_generate_helper_classes($media);
1710
+ }
1711
+ }
1712
+ }
1713
+ }
1714
+
1715
+ // usefull states :
1716
+ @if $gridle-generate-useful-states-classes != null {
1717
+ @each $state in $gridle-generate-useful-states-classes {
1718
+
1719
+ // creating classes :
1720
+ @include gridle_state($state, null, $has-parent) {
1721
+
1722
+ @for $k from 0 through $gridle-columns-count {
1723
+
1724
+ // variables :
1725
+ $calculatedSelector : "#{$k*$gridle-name-multiplicator}";
1726
+
1727
+ // classes :
1728
+ #{_gridle_prefixed_class("grid-#{$state}-#{$calculatedSelector}")} {
1729
+ @include _gridle($k,$state);
1730
+ }
1731
+ @if $gridle-generate-push-classes == true {
1732
+ #{_gridle_prefixed_class("push-#{$state}-#{$calculatedSelector}")} {
1733
+ @include _gridle_push($k,$state);
1734
+ }
1735
+ }
1736
+ @if $gridle-generate-pull-classes == true {
1737
+ #{_gridle_prefixed_class("pull-#{$state}-#{$calculatedSelector}")} {
1738
+ @include _gridle_pull($k,$state);
1739
+ }
1740
+ }
1741
+ @if $gridle-generate-prefix-classes == true {
1742
+ #{_gridle_prefixed_class("prefix-#{$state}-#{$calculatedSelector}")} {
1743
+ @include _gridle_prefix($k,$state);
1744
+ }
1745
+ }
1746
+ @if $gridle-generate-suffix-classes == true {
1747
+ #{_gridle_prefixed_class("suffix-#{$state}-#{$calculatedSelector}")} {
1748
+ @include _gridle_suffix($k,$state);
1749
+ }
1750
+ }
1751
+ }
1752
+
1753
+ @if $gridle-generate-helpers-classes == true {
1754
+ @include _gridle_generate_helper_classes($state);
1755
+ }
1756
+ }
1757
+ }
1758
+ }
1759
+
1760
+ // generate json settings :
1761
+ @include gridle_generate_json_settings();
1762
+ }