gridle 1.3.3 → 1.3.11
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 +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
|
}
|