gridle 1.3.3 → 1.3.11
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/gridle.rb +4 -5
- data/stylesheets/gridle/_common-mixins.scss +19 -24
- data/stylesheets/gridle/_functions.scss +29 -31
- data/stylesheets/gridle/_generate-mixins.scss +182 -339
- data/stylesheets/gridle/_gridle.scss +4 -15
- data/stylesheets/gridle/_mixins.scss +52 -159
- data/stylesheets/gridle/_settings-mixins.scss +3 -4
- data/stylesheets/gridle/_settings.scss +0 -3
- metadata +2 -3
- data/stylesheets/gridle/_default-states.scss +0 -35
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 25fa3ed88400ba41e7b6ceef686ed42b540b0b1d
|
4
|
+
data.tar.gz: f0d6ffa72c5367764dcd9feec78c21b02bad69c8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5c20b35c956d35e10da537deb2c480fb648c05d571e0cf4a3d88cfc62111e69fb1dcf0426b0d40e55217a71d84955d8e6705e59a959fcb06ffde1e460063cebc
|
7
|
+
data.tar.gz: 064e220551da92e88b8e44b5f149680411cb5169ae80a65cc636e38c4380f2e7dbd6280c31c67018d0ad74b0684f7bb1e8fb8e65deee591863734129dd599481
|
data/lib/gridle.rb
CHANGED
@@ -2,13 +2,12 @@
|
|
2
2
|
# These are the requires you would normally put in your config.rb file
|
3
3
|
# By default, you should always included Compass. Do not include your
|
4
4
|
# extension.
|
5
|
-
require 'compass'
|
6
5
|
|
7
6
|
# This tells Compass what your Compass extension is called, and where to find
|
8
7
|
# its files
|
9
8
|
# Replace 'extension' with the name of your extension. Spaces allowed.
|
10
|
-
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
11
|
-
Compass::Frameworks.register('gridle', :path => extension_path)
|
9
|
+
# extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
10
|
+
# Compass::Frameworks.register('gridle', :path => extension_path)
|
12
11
|
|
13
12
|
# Version and date of version for your Compass extension.
|
14
13
|
# Replace Extension with the name of your extension
|
@@ -17,8 +16,8 @@ Compass::Frameworks.register('gridle', :path => extension_path)
|
|
17
16
|
# a prerelease version
|
18
17
|
# Date is in the form of YYYY-MM-DD
|
19
18
|
module Extension
|
20
|
-
VERSION = "1.3.
|
21
|
-
DATE = "2014-
|
19
|
+
VERSION = "1.3.11"
|
20
|
+
DATE = "2014-05-15"
|
22
21
|
end
|
23
22
|
|
24
23
|
# This is where any custom SassScript should be placed. The functions will be
|
@@ -5,7 +5,7 @@
|
|
5
5
|
// |------------------------------------------------------
|
6
6
|
|
7
7
|
@mixin _gridle_container_common(
|
8
|
-
$state :
|
8
|
+
$state : null
|
9
9
|
) {
|
10
10
|
@extend %gridle-simple-clearfix;
|
11
11
|
@extend %gridle-container-common;
|
@@ -25,29 +25,24 @@
|
|
25
25
|
{
|
26
26
|
// vars :
|
27
27
|
$direction : _gridle_get_var_value(direction, $state);
|
28
|
-
$classes : _gridle_get_var_value(classes, $state);
|
29
28
|
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
30
29
|
$debug : _gridle_get_var_value(debug, $state);
|
31
30
|
|
32
|
-
@
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
float:left;
|
40
|
-
direction:ltr;
|
41
|
-
}
|
42
|
-
|
43
|
-
padding-left:$gutter-width/2;
|
44
|
-
padding-right:$gutter-width/2;
|
31
|
+
@include gridle_state($state) {
|
32
|
+
@if $direction == rtl {
|
33
|
+
float:right;
|
34
|
+
direction:rtl;
|
35
|
+
} @else {
|
36
|
+
float:left;
|
37
|
+
direction:ltr;
|
45
38
|
}
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
39
|
+
|
40
|
+
padding:0 $gutter-width/2;
|
41
|
+
}
|
42
|
+
|
43
|
+
@if $debug == true {
|
44
|
+
#{$gridle-debug-selector} {
|
45
|
+
@extend %gridle-grid-debug-common;
|
51
46
|
}
|
52
47
|
}
|
53
48
|
}
|
@@ -57,7 +52,7 @@
|
|
57
52
|
@extend %gridle-parent-common;
|
58
53
|
}
|
59
54
|
@mixin _gridle_push_common(
|
60
|
-
$state :
|
55
|
+
$state : null
|
61
56
|
) {
|
62
57
|
$debug : _gridle_get_var_value(debug, $state);
|
63
58
|
|
@@ -71,7 +66,7 @@
|
|
71
66
|
}
|
72
67
|
}
|
73
68
|
@mixin _gridle_pull_common(
|
74
|
-
$state :
|
69
|
+
$state : null
|
75
70
|
) {
|
76
71
|
$debug : _gridle_get_var_value(debug, $state);
|
77
72
|
|
@@ -84,7 +79,7 @@
|
|
84
79
|
}
|
85
80
|
}
|
86
81
|
@mixin _gridle_prefix_common(
|
87
|
-
$state :
|
82
|
+
$state : null
|
88
83
|
) {
|
89
84
|
$debug : _gridle_get_var_value(debug, $state);
|
90
85
|
@if $debug == true {
|
@@ -94,7 +89,7 @@
|
|
94
89
|
}
|
95
90
|
}
|
96
91
|
@mixin _gridle_suffix_common(
|
97
|
-
$state :
|
92
|
+
$state : null
|
98
93
|
) {
|
99
94
|
$debug : _gridle_get_var_value(debug, $state);
|
100
95
|
@if $debug == true {
|
@@ -44,25 +44,17 @@
|
|
44
44
|
$stateMap-or-stateName
|
45
45
|
) {
|
46
46
|
// check if has a state named like this :
|
47
|
-
@if (
|
48
|
-
and map-has-key($_gridle_states, unquote($stateMap-or-stateName)))
|
47
|
+
@if (map-has-key($_gridle_states, $stateMap-or-stateName))
|
49
48
|
{
|
50
49
|
@return map-get($_gridle_states, unquote($stateMap-or-stateName));
|
51
50
|
}
|
52
51
|
|
53
52
|
// nothing finded, so return the default state :
|
54
53
|
@if $stateMap-or-stateName
|
55
|
-
and type-of($stateMap-or-stateName) == map
|
56
54
|
{
|
57
55
|
@return map-merge($_gridle-settings, $stateMap-or-stateName);
|
58
56
|
}
|
59
57
|
|
60
|
-
// return the default one if exist
|
61
|
-
@if map-has-key($_gridle_states, default)
|
62
|
-
{
|
63
|
-
@return map-get($_gridle_states, default);
|
64
|
-
}
|
65
|
-
|
66
58
|
// nothing finded, return the default state :
|
67
59
|
@return $_gridle-settings;
|
68
60
|
}
|
@@ -186,14 +178,12 @@
|
|
186
178
|
@function _gridle_create_column(
|
187
179
|
$name,
|
188
180
|
$columns,
|
189
|
-
$context
|
190
|
-
$name-multiplicator : 1 // used to extend the state on custom registered columns
|
181
|
+
$context
|
191
182
|
) {
|
192
183
|
@return (
|
193
184
|
name : $name,
|
194
185
|
columns : $columns,
|
195
|
-
context : $context
|
196
|
-
name-multiplicator : $name-multiplicator
|
186
|
+
context : $context
|
197
187
|
);
|
198
188
|
}
|
199
189
|
|
@@ -238,34 +228,22 @@
|
|
238
228
|
@if $var == '%count' and $count {
|
239
229
|
$sel : "#{$sel}#{$count}";
|
240
230
|
}
|
241
|
-
@if $var != '%state' and $var != '%count' and $var != '%-' and $var != '
|
231
|
+
@if $var != '%state' and $var != '%count' and $var != '%-' and $var != '%prefix' {
|
242
232
|
$sel : "#{$sel}#{$var}";
|
243
233
|
}
|
244
234
|
|
245
235
|
// handle separators :
|
246
|
-
@if
|
236
|
+
@if $var == '%-' and $i < length($pattern) {
|
247
237
|
$index : $i + 1;
|
248
238
|
$value : nth($pattern, $index);
|
249
|
-
@if $value != '%state' and $value != '%count' and $value != '%-' and $value != '
|
250
|
-
|
251
|
-
$sel : "#{$sel}#{$gridle-class-separator}";
|
252
|
-
} @else {
|
253
|
-
$sel : "#{$sel}#{$var}";
|
254
|
-
}
|
239
|
+
@if $value != '%state' and $value != '%count' and $value != '%-' and $value != '%prefix' {
|
240
|
+
$sel : "#{$sel}#{$gridle-class-separator}";
|
255
241
|
}
|
256
242
|
@if $value == '%state' and $state {
|
257
|
-
|
258
|
-
$sel : "#{$sel}#{$gridle-class-separator}";
|
259
|
-
} @else {
|
260
|
-
$sel : "#{$sel}#{$var}";
|
261
|
-
}
|
243
|
+
$sel : "#{$sel}#{$gridle-class-separator}";
|
262
244
|
}
|
263
245
|
@if $value == '%count' and $count {
|
264
|
-
|
265
|
-
$sel : "#{$sel}#{$gridle-class-separator}";
|
266
|
-
} @else {
|
267
|
-
$sel : "#{$sel}#{$var}";
|
268
|
-
}
|
246
|
+
$sel : "#{$sel}#{$gridle-class-separator}";
|
269
247
|
}
|
270
248
|
}
|
271
249
|
|
@@ -335,6 +313,26 @@
|
|
335
313
|
}
|
336
314
|
|
337
315
|
}
|
316
|
+
@else if unquote($state-or-settings) == print
|
317
|
+
{
|
318
|
+
@return "only print";
|
319
|
+
}
|
320
|
+
@else if unquote($state-or-settings) == tv
|
321
|
+
{
|
322
|
+
@return "only tv";
|
323
|
+
}
|
324
|
+
@else if unquote($state-or-settings) == portrait
|
325
|
+
{
|
326
|
+
@return "only screen and (orientation: portrait)";
|
327
|
+
}
|
328
|
+
@else if unquote($state-or-settings) == landscape
|
329
|
+
{
|
330
|
+
@return "only screen and (orientation: landscape)";
|
331
|
+
}
|
332
|
+
@else if unquote($state-or-settings) == retina
|
333
|
+
{
|
334
|
+
@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)";
|
335
|
+
}
|
338
336
|
@else
|
339
337
|
{
|
340
338
|
@return null;
|
@@ -4,206 +4,117 @@
|
|
4
4
|
// |------------------------------------------------------
|
5
5
|
// |------------------------------------------------------
|
6
6
|
|
7
|
-
|
8
|
-
/**
|
9
|
-
* Generate a custom class for all the states
|
10
|
-
*
|
11
|
-
* @param list $pattern The name pattern of the class
|
12
|
-
* @param list $statesNames The states names to generate
|
13
|
-
*/
|
14
|
-
@mixin gridle_generate_custom_class(
|
15
|
-
$pattern,
|
16
|
-
$statesNames : null
|
17
|
-
) {
|
18
|
-
// manage states to generate :
|
19
|
-
$states : ();
|
20
|
-
@if $statesNames == null {
|
21
|
-
// loop on each states to generate names list :
|
22
|
-
@each $stateName, $state in $_gridle_states {
|
23
|
-
$states : append($states, $stateName);
|
24
|
-
}
|
25
|
-
} @else {
|
26
|
-
$states : $statesNames;
|
27
|
-
}
|
28
|
-
|
29
|
-
// loop on each states :
|
30
|
-
@each $stateName in $states
|
31
|
-
{
|
32
|
-
// manage statename :
|
33
|
-
@if type-of($stateName) != string {
|
34
|
-
$stateName : map-get($stateName, name);
|
35
|
-
}
|
36
|
-
|
37
|
-
// classes :
|
38
|
-
$classes : _gridle_get_var_value(classes, $stateName);
|
39
|
-
|
40
|
-
// genrate the classname :
|
41
|
-
@if $classes
|
42
|
-
{
|
43
|
-
@include gridle_state($stateName, false) {
|
44
|
-
#{_gridle_classname($pattern, $stateName)} {
|
45
|
-
@content;
|
46
|
-
}
|
47
|
-
}
|
48
|
-
}
|
49
|
-
}
|
50
|
-
}
|
51
|
-
|
52
7
|
// Generate all helpers classes
|
53
8
|
// All the classes generated are not wrapper in gridle_state
|
54
9
|
// in this mixin... Just the names are generated accordingly to the
|
55
10
|
// requested state
|
56
11
|
@mixin _gridle_generate_helper_classes (
|
57
|
-
$state : null
|
58
|
-
$what : null
|
12
|
+
$state : null
|
59
13
|
) {
|
60
14
|
// helpers :
|
61
|
-
|
62
|
-
|
63
|
-
@include gridle_float(left);
|
64
|
-
}
|
65
|
-
#{_gridle_classname($gridle-float-right-name-pattern, $state)} {
|
66
|
-
@include gridle_float(right);
|
67
|
-
}
|
15
|
+
#{_gridle_classname($gridle-hide-name-pattern, $state)} {
|
16
|
+
@include gridle_hide(null);
|
68
17
|
}
|
69
|
-
|
70
|
-
|
71
|
-
#{_gridle_classname($gridle-clear-name-pattern, $state)} {
|
72
|
-
@include gridle_clear(both);
|
73
|
-
}
|
74
|
-
#{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
|
75
|
-
@include gridle_clear(left);
|
76
|
-
}
|
77
|
-
#{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
|
78
|
-
@include gridle_clear(right);
|
79
|
-
}
|
18
|
+
#{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
|
19
|
+
@include gridle_not_visible(null);
|
80
20
|
}
|
81
|
-
|
82
|
-
|
83
|
-
#{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
|
84
|
-
#{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
|
85
|
-
@include gridle_no_margin();
|
86
|
-
}
|
87
|
-
#{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
|
88
|
-
#{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
|
89
|
-
@include gridle_no_margin(left);
|
90
|
-
}
|
91
|
-
#{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
|
92
|
-
#{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
|
93
|
-
@include gridle_no_margin(right);
|
94
|
-
}
|
95
|
-
#{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
|
96
|
-
#{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
|
97
|
-
@include gridle_no_margin(top);
|
98
|
-
}
|
99
|
-
#{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
|
100
|
-
#{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
|
101
|
-
@include gridle_no_margin(bottom);
|
102
|
-
}
|
21
|
+
#{_gridle_classname($gridle-show-name-pattern, $state)} {
|
22
|
+
@include gridle_show(null);
|
103
23
|
}
|
104
|
-
|
105
|
-
|
106
|
-
#{_gridle_classname($gridle-gutter-name-pattern, $state)},
|
107
|
-
#{_gridle_classname($gridle-margin-name-pattern, $state)} {
|
108
|
-
@include gridle_margin(left right);
|
109
|
-
}
|
110
|
-
#{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
|
111
|
-
#{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
|
112
|
-
@include gridle_margin(left);
|
113
|
-
}
|
114
|
-
#{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
|
115
|
-
#{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
|
116
|
-
@include gridle_margin(right);
|
117
|
-
}
|
118
|
-
#{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
|
119
|
-
#{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
|
120
|
-
@include gridle_margin(top);
|
121
|
-
}
|
122
|
-
#{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
|
123
|
-
#{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
|
124
|
-
@include gridle_margin(bottom);
|
125
|
-
}
|
24
|
+
#{_gridle_classname($gridle-visible-name-pattern, $state)} {
|
25
|
+
@include gridle_visible(null);
|
126
26
|
}
|
127
|
-
|
128
|
-
|
129
|
-
#{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
|
130
|
-
height:inherit;
|
131
|
-
}
|
27
|
+
#{_gridle_classname($gridle-float-left-name-pattern, $state)} {
|
28
|
+
@include gridle_float(left);
|
132
29
|
}
|
133
|
-
|
134
|
-
|
135
|
-
#{_gridle_classname($gridle-centered-name-pattern, $state)} {
|
136
|
-
@include gridle_centered(null);
|
137
|
-
}
|
30
|
+
#{_gridle_classname($gridle-float-right-name-pattern, $state)} {
|
31
|
+
@include gridle_float(right);
|
138
32
|
}
|
139
|
-
|
140
|
-
|
141
|
-
#{_gridle_classname($gridle-parent-name-pattern, $state)} {
|
142
|
-
@include _gridle_parent();
|
143
|
-
}
|
33
|
+
#{_gridle_classname($gridle-clear-name-pattern, $state)} {
|
34
|
+
@include gridle_clear(both);
|
144
35
|
}
|
145
|
-
|
146
|
-
|
147
|
-
#{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
|
148
|
-
@include _gridle_vertical_align();
|
149
|
-
}
|
150
|
-
#{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
|
151
|
-
@include _gridle_vertical_align(top);
|
152
|
-
}
|
153
|
-
#{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
|
154
|
-
@include _gridle_vertical_align(bottom);
|
155
|
-
}
|
36
|
+
#{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
|
37
|
+
@include gridle_clear(left);
|
156
38
|
}
|
157
|
-
|
158
|
-
|
159
|
-
* Visible, hide, etc...
|
160
|
-
*/
|
161
|
-
@if $what == null or index($what, hide) or index($what, helpers) {
|
162
|
-
#{_gridle_classname($gridle-hide-name-pattern, $state)} {
|
163
|
-
@include gridle_hide(null);
|
164
|
-
}
|
39
|
+
#{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
|
40
|
+
@include gridle_clear(right);
|
165
41
|
}
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
@include gridle_not_visible(null);
|
170
|
-
}
|
42
|
+
#{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
|
43
|
+
#{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
|
44
|
+
@include gridle_no_margin();
|
171
45
|
}
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
@include gridle_show(null);
|
176
|
-
}
|
177
|
-
#{_gridle_classname($gridle-show-inline-name-pattern, $state)} {
|
178
|
-
@include gridle_show_inline(null);
|
179
|
-
}
|
46
|
+
#{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
|
47
|
+
#{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
|
48
|
+
@include gridle_no_margin(left);
|
180
49
|
}
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
50
|
+
#{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
|
51
|
+
#{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
|
52
|
+
@include gridle_no_margin(right);
|
53
|
+
}
|
54
|
+
#{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
|
55
|
+
#{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
|
56
|
+
@include gridle_no_margin(top);
|
57
|
+
}
|
58
|
+
#{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
|
59
|
+
#{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
|
60
|
+
@include gridle_no_margin(bottom);
|
61
|
+
}
|
62
|
+
#{_gridle_classname($gridle-gutter-name-pattern, $state)},
|
63
|
+
#{_gridle_classname($gridle-margin-name-pattern, $state)} {
|
64
|
+
@include gridle_margin(left right);
|
65
|
+
}
|
66
|
+
#{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
|
67
|
+
#{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
|
68
|
+
@include gridle_margin(left);
|
69
|
+
}
|
70
|
+
#{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
|
71
|
+
#{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
|
72
|
+
@include gridle_margin(right);
|
73
|
+
}
|
74
|
+
#{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
|
75
|
+
#{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
|
76
|
+
@include gridle_margin(top);
|
77
|
+
}
|
78
|
+
#{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
|
79
|
+
#{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
|
80
|
+
@include gridle_margin(bottom);
|
81
|
+
}
|
82
|
+
#{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
|
83
|
+
height:inherit;
|
84
|
+
}
|
85
|
+
#{_gridle_classname($gridle-centered-name-pattern, $state)} {
|
86
|
+
@include gridle_centered(null);
|
87
|
+
}
|
88
|
+
#{_gridle_classname($gridle-parent-name-pattern, $state)} {
|
89
|
+
@include _gridle_parent();
|
90
|
+
}
|
91
|
+
#{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
|
92
|
+
@include _gridle_vertical_align();
|
93
|
+
}
|
94
|
+
#{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
|
95
|
+
@include _gridle_vertical_align(top);
|
96
|
+
}
|
97
|
+
#{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
|
98
|
+
@include _gridle_vertical_align(bottom);
|
186
99
|
}
|
187
100
|
|
188
101
|
/**
|
189
102
|
* Clear each class :
|
190
103
|
*/
|
191
|
-
@
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
@include _gridle_clear_each($clearCount, $clearWhat);
|
200
|
-
}
|
104
|
+
@each $clearName, $clearMap in $_gridle_clear_classes {
|
105
|
+
// get count :
|
106
|
+
$clearCount : map-get($clearMap, clearEach);
|
107
|
+
// what to clear :
|
108
|
+
$clearWhat : map-get($clearMap, clearWhat);
|
109
|
+
// generate the class :
|
110
|
+
#{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
|
111
|
+
@include _gridle_clear_each($clearCount, $clearWhat, $state);
|
201
112
|
}
|
202
113
|
}
|
203
114
|
|
204
115
|
// debug colors :
|
205
116
|
$debug : _gridle_get_var_value(debug, $state);
|
206
|
-
@if $debug
|
117
|
+
@if $debug {
|
207
118
|
// debug color classes :
|
208
119
|
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
|
209
120
|
#{$gridle-debug-selector} {
|
@@ -240,14 +151,14 @@
|
|
240
151
|
|
241
152
|
|
242
153
|
// generate settings json :
|
243
|
-
@mixin gridle_generate_json_settings(
|
154
|
+
@mixin gridle_generate_json_settings(
|
155
|
+
$scope : default
|
156
|
+
) {
|
244
157
|
|
245
158
|
// settings content :
|
246
159
|
$gridle-settings-states : "{";
|
247
160
|
|
248
161
|
// generate all classes for differents media queries :
|
249
|
-
$statesCount : length($_gridle_states);
|
250
|
-
$i : 0;
|
251
162
|
@each $stateName, $state in $_gridle_states {
|
252
163
|
|
253
164
|
$name : $stateName;
|
@@ -258,30 +169,22 @@
|
|
258
169
|
|
259
170
|
$value : null;
|
260
171
|
@if $varName == "query" {
|
261
|
-
$value :
|
172
|
+
$value : _gridle_get_media_query_for_state($stateName);
|
262
173
|
} @else {
|
263
174
|
$value : map-get($state,$varName);
|
175
|
+
// $value : _gridle_get_state_var($i,$var);
|
264
176
|
}
|
265
177
|
|
266
178
|
@if $value == null {
|
267
179
|
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : null,";
|
268
|
-
} @elseif
|
180
|
+
} @elseif $var == 'context' or $var == 'classes' {
|
269
181
|
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : #{$value},";
|
270
182
|
} @else {
|
271
183
|
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : \"#{$value}\",";
|
272
184
|
}
|
273
185
|
}
|
274
186
|
|
275
|
-
$gridle-settings-states : "#{$gridle-settings-states}
|
276
|
-
|
277
|
-
@if $i >= $statesCount - 1 {
|
278
|
-
$gridle-settings-states : "#{$gridle-settings-states} }";
|
279
|
-
} @else {
|
280
|
-
$gridle-settings-states : "#{$gridle-settings-states} },";
|
281
|
-
}
|
282
|
-
|
283
|
-
// update i :
|
284
|
-
$i : $i + 1;
|
187
|
+
$gridle-settings-states : "#{$gridle-settings-states} },";
|
285
188
|
|
286
189
|
}
|
287
190
|
|
@@ -298,12 +201,25 @@
|
|
298
201
|
@if length($_gridle_states_debug_devices) <= 0 {
|
299
202
|
$debug_devices : null;
|
300
203
|
}
|
301
|
-
|
204
|
+
$gridle-settings : "#{$gridle-settings}, \"debugDevices\" : { #{$debug_devices} }";
|
302
205
|
|
303
206
|
// settings :
|
304
|
-
|
207
|
+
$gridle-settings : "#{$gridle-settings}, \"columnsCount\" : #{$gridle-columns-count}";
|
208
|
+
$gridle-settings : "#{$gridle-settings}, \"gutterWidth\" : \"#{$gridle-gutter-width}\"";
|
209
|
+
$gridle-settings : "#{$gridle-settings}, \"nameMultiplicator\" : #{$gridle-name-multiplicator}";
|
210
|
+
$gridle-settings : "#{$gridle-settings}, \"direction\" : \"#{$gridle-direction}\"";
|
211
|
+
$gridle-settings : "#{$gridle-settings}, \"ie7Support\" : #{$gridle-ie7-support}";
|
212
|
+
$gridle-settings : "#{$gridle-settings}, \"debug\" : #{$gridle-debug}";
|
213
|
+
$gridle-settings : "#{$gridle-settings}, \"debugShowClassNames\" : #{$gridle-debug-show-class-names}";
|
214
|
+
$gridle-settings : "#{$gridle-settings}, \"htmlStatesClasses\" : #{$gridle-html-states-classes}";
|
215
|
+
$gridle-settings : "#{$gridle-settings}, \"generateHelpersClasses\" : #{$gridle-generate-helpers-classes}";
|
216
|
+
$gridle-settings : "#{$gridle-settings}, \"generatePushClasses\" : #{$gridle-generate-push-classes}";
|
217
|
+
$gridle-settings : "#{$gridle-settings}, \"generatePullClasses\" : #{$gridle-generate-pull-classes}";
|
218
|
+
$gridle-settings : "#{$gridle-settings}, \"generatePrefixClasses\" : #{$gridle-generate-prefix-classes}";
|
219
|
+
$gridle-settings : "#{$gridle-settings}, \"generateSuffixClasses\" : #{$gridle-generate-suffix-classes}";
|
220
|
+
$gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
|
305
221
|
$gridle-settings : "#{$gridle-settings} }";
|
306
|
-
#gridle-settings {
|
222
|
+
#gridle-settings-#{$scope} {
|
307
223
|
content : $gridle-settings;
|
308
224
|
}
|
309
225
|
}
|
@@ -312,125 +228,62 @@
|
|
312
228
|
// gridle mixin :
|
313
229
|
// Generate all the classes needed for a grid
|
314
230
|
@mixin gridle_generate_classes(
|
315
|
-
$stateName : null,
|
316
|
-
$what : null,
|
317
231
|
$scope : null
|
318
232
|
) {
|
319
|
-
// if
|
320
|
-
@if $
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
{
|
325
|
-
// check if a scope exist :
|
326
|
-
@if $scope {
|
327
|
-
// wrapp grid into scope :
|
328
|
-
.#{$scope} {
|
329
|
-
@include _gridle_generate_classes($stateName, ( $w ), true);
|
330
|
-
}
|
331
|
-
} @else {
|
332
|
-
// generate classes :
|
333
|
-
@include _gridle_generate_classes($stateName, ( $w ), false);
|
334
|
-
}
|
335
|
-
}
|
336
|
-
}
|
337
|
-
@else
|
338
|
-
{
|
339
|
-
// don't have any "what" parameter so generate all the classes
|
340
|
-
// check if a scope exist :
|
341
|
-
@if $scope {
|
342
|
-
// wrapp grid into scope :
|
343
|
-
.#{$scope} {
|
344
|
-
@include _gridle_generate_classes($stateName, null, true);
|
345
|
-
}
|
346
|
-
} @else {
|
347
|
-
// generate classes :
|
348
|
-
@include _gridle_generate_classes($stateName, null, false);
|
233
|
+
// check if a scope exist :
|
234
|
+
@if $scope {
|
235
|
+
// wrapp grid into scope :
|
236
|
+
.#{$scope} {
|
237
|
+
@include _gridle_generate_classes(true);
|
349
238
|
}
|
239
|
+
} @else {
|
240
|
+
// generate classes :
|
241
|
+
@include _gridle_generate_classes(false);
|
350
242
|
}
|
351
243
|
}
|
352
|
-
$_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
353
244
|
@mixin _gridle_generate_classes(
|
354
|
-
$
|
355
|
-
$what : null,
|
356
|
-
$has-parent : false
|
245
|
+
$has-parent
|
357
246
|
) {
|
358
247
|
|
359
|
-
//
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
// | Windows 8 fix
|
368
|
-
// | ------------------------
|
369
|
-
|
370
|
-
// Windows 8 fix for snap mode :
|
371
|
-
@media screen and (max-width: 400px) {
|
372
|
-
@-ms-viewport { width: device-width; }
|
373
|
-
}
|
374
|
-
|
375
|
-
|
376
|
-
// | ------------------------
|
377
|
-
// | Container
|
378
|
-
// | ------------------------
|
379
|
-
|
380
|
-
// generate container class :
|
381
|
-
@if $what == null or index($what, container) or index($what, default)
|
382
|
-
{
|
383
|
-
$container-selector : ();
|
384
|
-
$container-selector : append( $container-selector, unquote(_gridle_classname($gridle-container-name-pattern)), comma);
|
385
|
-
#{$container-selector} {
|
386
|
-
@include gridle_container();
|
387
|
-
}
|
388
|
-
}
|
389
|
-
|
390
|
-
|
391
|
-
// | ------------------------
|
392
|
-
// | Parent selector
|
393
|
-
// | ------------------------
|
394
|
-
|
395
|
-
// parent common css :
|
396
|
-
@if $what == null or index($what, parent) or index($what, default)
|
397
|
-
{
|
398
|
-
$parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
|
399
|
-
#{$parentSelector} {
|
400
|
-
@extend %gridle-clearfix;
|
401
|
-
@extend %gridle-parent-common;
|
402
|
-
}
|
403
|
-
}
|
404
|
-
|
248
|
+
// | ------------------------
|
249
|
+
// | Windows 8 fix
|
250
|
+
// | ------------------------
|
251
|
+
|
252
|
+
// Windows 8 fix for snap mode :
|
253
|
+
@media screen and (max-width: 400px) {
|
254
|
+
@-ms-viewport { width: device-width; }
|
255
|
+
}
|
405
256
|
|
406
|
-
// // | ------------------------
|
407
|
-
// // | JSON Settings
|
408
|
-
// // | ------------------------
|
409
|
-
|
410
|
-
// // generate json settings :
|
411
|
-
@if $gridle-generate-json-settings
|
412
|
-
{
|
413
|
-
@include gridle_generate_json_settings();
|
414
|
-
}
|
415
257
|
|
258
|
+
// | ------------------------
|
259
|
+
// | Container
|
260
|
+
// | ------------------------
|
261
|
+
|
262
|
+
// generate container class :
|
263
|
+
$container-selector : ();
|
264
|
+
$container-selector : append( $container-selector, unquote(_gridle_classname($gridle-container-name-pattern)), comma);
|
265
|
+
#{$container-selector} {
|
266
|
+
@include gridle_container();
|
416
267
|
}
|
417
268
|
|
418
269
|
|
419
270
|
// | ------------------------
|
420
|
-
// |
|
271
|
+
// | Parent selector
|
421
272
|
// | ------------------------
|
422
|
-
$states : $_gridle_states;
|
423
|
-
@if $stateName and _gridle_has_state($stateName) {
|
424
|
-
$states : map-set((), $stateName, _gridle_get_state($stateName));
|
425
|
-
}
|
426
273
|
|
274
|
+
// parent common css :
|
275
|
+
$parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
|
276
|
+
#{$parentSelector} {
|
277
|
+
@extend %gridle-clearfix;
|
278
|
+
@extend %gridle-parent-common;
|
279
|
+
}
|
427
280
|
|
428
281
|
// | ------------------------
|
429
282
|
// | Store all the generated common selectors
|
430
283
|
// | ------------------------
|
431
284
|
|
432
285
|
// generate all selector for extends :
|
433
|
-
$
|
286
|
+
$common-selector : ();
|
434
287
|
$push-common-selector : ();
|
435
288
|
$pull-common-selector : ();
|
436
289
|
$prefix-common-selector : ();
|
@@ -442,7 +295,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
442
295
|
// | ------------------------
|
443
296
|
|
444
297
|
// generate all classes for media queries :
|
445
|
-
@each $stateName, $state in $
|
298
|
+
@each $stateName, $state in $_gridle_states {
|
446
299
|
|
447
300
|
// setup vars :
|
448
301
|
$media : $stateName;
|
@@ -465,10 +318,9 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
465
318
|
|
466
319
|
// name :
|
467
320
|
$columnName : "#{$j*$name-multiplicator}";
|
468
|
-
$columnWidth : $j * $name-multiplicator;
|
469
321
|
|
470
322
|
// // create a column :
|
471
|
-
$col : _gridle_create_column($columnName, $
|
323
|
+
$col : _gridle_create_column($columnName, $j, $context);
|
472
324
|
|
473
325
|
// // add column in columns map :
|
474
326
|
$columnsMap : map-set($columnsMap, $columnName, $col);
|
@@ -478,19 +330,17 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
478
330
|
@each $columnName, $column in $columnsMap {
|
479
331
|
|
480
332
|
// add selector :
|
481
|
-
|
482
|
-
|
483
|
-
}
|
484
|
-
@if $generate-push-classes and ($what == null or index($what, push) or index($what, default)) {
|
333
|
+
$common-selector : append( $common-selector, unquote(_gridle_classname($gridle-grid-name-pattern, $media, $columnName)), comma );
|
334
|
+
@if $generate-push-classes {
|
485
335
|
$push-common-selector : append( $push-common-selector, unquote(_gridle_classname($gridle-push-name-pattern, $media, $columnName)), comma );
|
486
336
|
}
|
487
|
-
@if $generate-pull-classes
|
337
|
+
@if $generate-pull-classes {
|
488
338
|
$pull-common-selector : append( $pull-common-selector, unquote(_gridle_classname($gridle-pull-name-pattern, $media, $columnName)), comma );
|
489
339
|
}
|
490
|
-
@if $generate-prefix-classes
|
340
|
+
@if $generate-prefix-classes {
|
491
341
|
$prefix-common-selector : append( $prefix-common-selector, unquote(_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)), comma );
|
492
342
|
}
|
493
|
-
@if $generate-suffix-classes
|
343
|
+
@if $generate-suffix-classes {
|
494
344
|
$suffix-common-selector : append( $suffix-common-selector, unquote(_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)), comma );
|
495
345
|
}
|
496
346
|
}
|
@@ -498,30 +348,20 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
498
348
|
}
|
499
349
|
|
500
350
|
// common css :
|
501
|
-
|
502
|
-
|
503
|
-
@include _gridle_grid_common();
|
504
|
-
}
|
351
|
+
#{$push-common-selector} {
|
352
|
+
@include _gridle_push_common();
|
505
353
|
}
|
506
|
-
|
507
|
-
|
508
|
-
@include _gridle_push_common();
|
509
|
-
}
|
354
|
+
#{$pull-common-selector} {
|
355
|
+
@include _gridle_pull_common();
|
510
356
|
}
|
511
|
-
|
512
|
-
|
513
|
-
@include _gridle_pull_common();
|
514
|
-
}
|
357
|
+
#{$prefix-common-selector} {
|
358
|
+
@include _gridle_prefix_common();
|
515
359
|
}
|
516
|
-
|
517
|
-
|
518
|
-
@include _gridle_prefix_common();
|
519
|
-
}
|
360
|
+
#{$suffix-common-selector} {
|
361
|
+
@include _gridle_suffix_common();
|
520
362
|
}
|
521
|
-
|
522
|
-
|
523
|
-
@include _gridle_suffix_common();
|
524
|
-
}
|
363
|
+
#{$common-selector} {
|
364
|
+
@include _gridle_grid_common();
|
525
365
|
}
|
526
366
|
|
527
367
|
|
@@ -530,7 +370,7 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
530
370
|
// | ------------------------
|
531
371
|
|
532
372
|
// generate all classes for differents media queries :
|
533
|
-
@each $stateName, $state in $
|
373
|
+
@each $stateName, $state in $_gridle_states {
|
534
374
|
|
535
375
|
// setup vars :
|
536
376
|
$classes : _gridle_get_var_value(classes, $state);
|
@@ -542,16 +382,16 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
542
382
|
$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
|
543
383
|
$generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
|
544
384
|
|
385
|
+
// parent common css :
|
386
|
+
$parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
|
387
|
+
#{$parentSelector} {
|
388
|
+
@extend %gridle-clearfix;
|
389
|
+
@extend %gridle-parent-common;
|
390
|
+
}
|
391
|
+
|
545
392
|
// generate all media queries grid classes :
|
546
393
|
@if $classes == true {
|
547
394
|
|
548
|
-
// parent common css :
|
549
|
-
$parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
|
550
|
-
#{$parentSelector} {
|
551
|
-
@extend %gridle-clearfix;
|
552
|
-
@extend %gridle-parent-common;
|
553
|
-
}
|
554
|
-
|
555
395
|
// generate all the classes :
|
556
396
|
@include gridle_state($stateName, $has-parent) {
|
557
397
|
|
@@ -563,10 +403,9 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
563
403
|
|
564
404
|
// name :
|
565
405
|
$columnName : "#{$j*$name-multiplicator}";
|
566
|
-
$columnWidth : $j * $name-multiplicator;
|
567
406
|
|
568
407
|
// // create a column :
|
569
|
-
$col : _gridle_create_column($columnName, $
|
408
|
+
$col : _gridle_create_column($columnName, $j, $context);
|
570
409
|
|
571
410
|
// // add column in columns map :
|
572
411
|
$columnsMap : map-set($columnsMap, $columnName, $col);
|
@@ -578,36 +417,32 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
578
417
|
// variables :
|
579
418
|
$columnsCount : map-get($column, columns);
|
580
419
|
$columnsContext : map-get($column, context);
|
581
|
-
$columnsNameMultiplicator : map-get($column, name-multiplicator);
|
582
420
|
|
583
421
|
// extend context in state (for columns) :
|
584
422
|
$extendedState : map-merge($state, (
|
585
|
-
context : $columnsContext
|
586
|
-
name-multiplicator : $columnsNameMultiplicator // inject the name multiplicator here getted from column to handle custom registered columns
|
423
|
+
context : $columnsContext
|
587
424
|
));
|
588
425
|
|
589
426
|
// classes :
|
590
|
-
|
591
|
-
|
592
|
-
@include _gridle($columnsCount, $extendedState);
|
593
|
-
}
|
427
|
+
#{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
|
428
|
+
@include _gridle($columnsCount, $extendedState);
|
594
429
|
}
|
595
|
-
@if $generate-push-classes == true
|
430
|
+
@if $generate-push-classes == true {
|
596
431
|
#{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
|
597
432
|
@include _gridle_push($columnsCount, $extendedState);
|
598
433
|
}
|
599
434
|
}
|
600
|
-
@if $generate-pull-classes == true
|
435
|
+
@if $generate-pull-classes == true {
|
601
436
|
#{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
|
602
437
|
@include _gridle_pull($columnsCount, $extendedState);
|
603
438
|
}
|
604
439
|
}
|
605
|
-
@if $generate-prefix-classes == true
|
440
|
+
@if $generate-prefix-classes == true {
|
606
441
|
#{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
|
607
442
|
@include _gridle_prefix($columnsCount, $extendedState);
|
608
443
|
}
|
609
444
|
}
|
610
|
-
@if $generate-suffix-classes == true
|
445
|
+
@if $generate-suffix-classes == true {
|
611
446
|
#{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
|
612
447
|
@include _gridle_suffix($columnsCount, $extendedState);
|
613
448
|
}
|
@@ -616,9 +451,17 @@ $_gridle_generateOnlyOnce : true; // keep track of generate once classes
|
|
616
451
|
|
617
452
|
// media queries helpers classes :
|
618
453
|
@if $generate-helpers-classes == true {
|
619
|
-
@include _gridle_generate_helper_classes($stateName
|
454
|
+
@include _gridle_generate_helper_classes($stateName);
|
620
455
|
}
|
621
456
|
}
|
622
457
|
}
|
623
458
|
}
|
459
|
+
|
460
|
+
|
461
|
+
// // | ------------------------
|
462
|
+
// // | JSON Settings
|
463
|
+
// // | ------------------------
|
464
|
+
|
465
|
+
// // generate json settings :
|
466
|
+
// @include gridle_generate_json_settings();
|
624
467
|
}
|