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.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +7 -0
- data/Rakefile +1 -0
- data/gridle-rails.gemspec +21 -0
- data/lib/gridle/rails.rb +8 -0
- data/lib/gridle/rails/version.rb +5 -0
- data/vendor/assets/stylesheets/.DS_Store +0 -0
- data/vendor/assets/stylesheets/_settings.scss +12 -0
- data/vendor/assets/stylesheets/grid.scss +11 -0
- data/vendor/assets/stylesheets/gridle/.DS_Store +0 -0
- data/vendor/assets/stylesheets/gridle/_12-columns-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_12-columns-responsive-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_12-columns-responsive.scss +14 -0
- data/vendor/assets/stylesheets/gridle/_12-columns.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_16-columns-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_16-columns-responsive-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_16-columns-responsive.scss +14 -0
- data/vendor/assets/stylesheets/gridle/_16-columns.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_24-columns-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_24-columns-responsive-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_24-columns-responsive.scss +14 -0
- data/vendor/assets/stylesheets/gridle/_24-columns.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_960gs-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_960gs-responsive-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_960gs-responsive.scss +23 -0
- data/vendor/assets/stylesheets/gridle/_960gs.scss +18 -0
- data/vendor/assets/stylesheets/gridle/_gridle.scss +1762 -0
- data/vendor/assets/stylesheets/gridle/_unsementic-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_unsementic-responsive-classes.scss +9 -0
- data/vendor/assets/stylesheets/gridle/_unsementic-responsive.scss +23 -0
- data/vendor/assets/stylesheets/gridle/_unsementic.scss +18 -0
- data/vendor/assets/stylesheets/style.scss +55 -0
- metadata +107 -0
checksums.yaml
ADDED
@@ -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
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -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.
|
data/README.md
ADDED
data/Rakefile
ADDED
@@ -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
|
data/lib/gridle/rails.rb
ADDED
Binary file
|
@@ -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)');
|
Binary file
|
@@ -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
|
+
}
|