gridle 1.2.1 → 1.3.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 +4 -4
- data/lib/gridle.rb +2 -2
- data/stylesheets/gridle/_common-mixins.scss +51 -35
- data/stylesheets/gridle/_functions.scss +109 -67
- data/stylesheets/gridle/_generate-mixins.scss +63 -117
- data/stylesheets/gridle/_gridle.scss +4 -3
- data/stylesheets/gridle/_mixins.scss +186 -180
- data/stylesheets/gridle/_settings-mixins.scss +58 -63
- data/stylesheets/gridle/_settings.scss +0 -20
- metadata +2 -2
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
// |------------------------------------------------------
|
|
30
30
|
// |------------------------------------------------------
|
|
31
31
|
// @created 25.03.13
|
|
32
|
-
// @updated
|
|
32
|
+
// @updated 14.05.14
|
|
33
33
|
// @author Olivier Bossel <olivier.bossel@gmail.com>
|
|
34
|
-
// @version 1.
|
|
34
|
+
// @version 1.3.0
|
|
35
35
|
// |------------------------------------------------------
|
|
36
36
|
// |------------------------------------------------------
|
|
37
37
|
|
|
38
|
-
$_gridle-version : "1.
|
|
38
|
+
$_gridle-version : "1.3.0";
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
|
|
@@ -46,6 +46,7 @@ $_gridle-version : "1.2.0";
|
|
|
46
46
|
// |------------------------------------------------------
|
|
47
47
|
// |------------------------------------------------------
|
|
48
48
|
|
|
49
|
+
$_gridle_settings : (); // the default settings
|
|
49
50
|
$_gridle_states : (); // the variable map for each states
|
|
50
51
|
$_gridle_clear_classes :(); // store each automatic clear count
|
|
51
52
|
$_gridle_columns : (); // store the registered special columns
|
|
@@ -6,39 +6,79 @@
|
|
|
6
6
|
|
|
7
7
|
// Responsive helpers mixins :
|
|
8
8
|
@mixin gridle_state(
|
|
9
|
-
$state
|
|
10
|
-
$max-width : null,
|
|
9
|
+
$state,
|
|
11
10
|
$has-parent : true
|
|
12
11
|
) {
|
|
12
|
+
// variables :
|
|
13
|
+
$html-states-classes : _gridle_get_var_value(html-states-classes, $state);
|
|
14
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
15
|
+
$stateName : _gridle_get_var_value(name, $state);
|
|
16
|
+
|
|
17
|
+
// check if is a state :
|
|
18
|
+
@if ($html-states-classes or $debug)
|
|
19
|
+
and $stateName {
|
|
20
|
+
// html class :
|
|
21
|
+
@if $has-parent {
|
|
22
|
+
html#{_gridle_classname("#{$stateName}")} & { @content; }
|
|
23
|
+
} @else {
|
|
24
|
+
html#{_gridle_classname("#{$stateName}")} { @content; }
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// get the media query :
|
|
29
|
+
$q : _gridle_get_media_query($state);
|
|
13
30
|
|
|
14
|
-
// query
|
|
15
|
-
$
|
|
31
|
+
// make the media query if a query exist :
|
|
32
|
+
@if $q {
|
|
33
|
+
@media #{$q} {
|
|
34
|
+
@content;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
@else
|
|
38
|
+
{
|
|
39
|
+
@content;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
16
42
|
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* States :
|
|
46
|
+
*/
|
|
47
|
+
@mixin gridle_states(
|
|
48
|
+
$states,
|
|
49
|
+
$has-parent : true
|
|
50
|
+
) {
|
|
51
|
+
|
|
17
52
|
// loop on each states :
|
|
18
|
-
@each $
|
|
53
|
+
@each $state in $states
|
|
54
|
+
{
|
|
55
|
+
// variables :
|
|
56
|
+
$html-states-classes : _gridle_get_var_value(html-states-classes, $state);
|
|
57
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
58
|
+
$stateName : _gridle_get_var_value(name, $state);
|
|
19
59
|
|
|
20
60
|
// check if is a state :
|
|
21
|
-
@if
|
|
22
|
-
and
|
|
23
|
-
and _gridle_get_state($_state-or-min-width) {
|
|
61
|
+
@if ($html-states-classes or $debug)
|
|
62
|
+
and $stateName {
|
|
24
63
|
// html class :
|
|
25
64
|
@if $has-parent {
|
|
26
|
-
html#{_gridle_classname("#{$
|
|
65
|
+
html#{_gridle_classname("#{$stateName}")} & { @content; }
|
|
27
66
|
} @else {
|
|
28
|
-
html#{_gridle_classname("#{$
|
|
67
|
+
html#{_gridle_classname("#{$stateName}")} { @content; }
|
|
29
68
|
}
|
|
30
69
|
}
|
|
31
70
|
|
|
32
71
|
// get the media query :
|
|
33
|
-
$q :
|
|
72
|
+
$q : _gridle_get_media_query($state);
|
|
73
|
+
|
|
74
|
+
// make the media query if a query exist :
|
|
34
75
|
@if $q {
|
|
35
|
-
|
|
76
|
+
@media #{$q} {
|
|
77
|
+
@content;
|
|
78
|
+
}
|
|
36
79
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// check and print media query :
|
|
40
|
-
@if type-of($query) == list {
|
|
41
|
-
@media #{$query} {
|
|
80
|
+
@else
|
|
81
|
+
{
|
|
42
82
|
@content;
|
|
43
83
|
}
|
|
44
84
|
}
|
|
@@ -48,76 +88,61 @@
|
|
|
48
88
|
|
|
49
89
|
// Container mixin :
|
|
50
90
|
@mixin gridle_container(
|
|
91
|
+
$state : null
|
|
51
92
|
) {
|
|
52
|
-
@include _gridle_container_common();
|
|
93
|
+
@include _gridle_container_common($state);
|
|
53
94
|
}
|
|
54
95
|
|
|
55
96
|
|
|
56
97
|
// Grid mixin :
|
|
57
98
|
// Set the width of the specified grid column :
|
|
58
99
|
@mixin gridle(
|
|
59
|
-
$columns
|
|
60
|
-
$state-context : null,
|
|
100
|
+
$columns,
|
|
61
101
|
$state : null
|
|
62
102
|
) {
|
|
63
103
|
// common :
|
|
64
|
-
@include _gridle_grid_common();
|
|
65
|
-
// variables :
|
|
66
|
-
$context : $gridle-columns-count;
|
|
67
|
-
@if type-of($state-context) == number {
|
|
68
|
-
$state : $state;
|
|
69
|
-
$context : $state-context;
|
|
70
|
-
} @elseif $state-context {
|
|
71
|
-
$state : $state-context;
|
|
72
|
-
$context : _gridle_get_state_var($state,'context');
|
|
73
|
-
}
|
|
104
|
+
@include _gridle_grid_common($state);
|
|
74
105
|
// check if need media query :
|
|
75
106
|
@if $state {
|
|
76
107
|
@include gridle_state($state) {
|
|
77
|
-
@include _gridle($columns, $state
|
|
108
|
+
@include _gridle($columns, $state);
|
|
78
109
|
}
|
|
79
110
|
} @else {
|
|
80
|
-
@include _gridle($columns
|
|
111
|
+
@include _gridle($columns, $state);
|
|
81
112
|
}
|
|
82
113
|
}
|
|
83
114
|
@mixin _gridle(
|
|
84
|
-
$columns
|
|
85
|
-
$state : null
|
|
86
|
-
$context : $gridle-columns-count
|
|
115
|
+
$columns,
|
|
116
|
+
$state : null
|
|
87
117
|
) {
|
|
118
|
+
// vars :
|
|
119
|
+
$name : _gridle_get_var_value(name, $state);
|
|
120
|
+
$context : _gridle_get_var_value(context, $state);
|
|
121
|
+
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
|
122
|
+
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
|
123
|
+
$ie7-support : _gridle_get_var_value(ie7-support, $state);
|
|
124
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
125
|
+
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
|
126
|
+
|
|
88
127
|
// vars :
|
|
89
128
|
$width : percentage(1 / $context * $columns);
|
|
90
|
-
|
|
91
|
-
// check if is paddings or margin for gutters :
|
|
92
|
-
@if unquote($gridle-gutter-type) == margin
|
|
93
|
-
{
|
|
94
|
-
width:calc(#{$width} - #{$gridle-gutter-width});
|
|
95
|
-
margin:0 $gridle-gutter-width/2;
|
|
96
|
-
|
|
97
|
-
// if has the parent class, need to adapt :
|
|
98
|
-
$parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
|
|
99
|
-
&#{$parentSelector} {
|
|
100
|
-
width:$width;
|
|
101
|
-
margin:0;
|
|
102
|
-
}
|
|
103
129
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
130
|
+
// set value :
|
|
131
|
+
width:$width;
|
|
107
132
|
|
|
108
133
|
// ie7 support :
|
|
109
|
-
@if $
|
|
134
|
+
@if $ie7-support == true {
|
|
110
135
|
*width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
|
|
111
136
|
}
|
|
112
137
|
|
|
113
138
|
// debug :
|
|
114
|
-
@if $
|
|
139
|
+
@if $debug == true and $debug-show-class-names == true {
|
|
115
140
|
#{$gridle-debug-selector} {
|
|
116
141
|
&:before {
|
|
117
|
-
content:"grid-#{$
|
|
142
|
+
content:"grid-#{$name}-#{$columns * $name-multiplicator}";
|
|
118
143
|
}
|
|
119
144
|
&.parent:before {
|
|
120
|
-
content:"grid-parent-#{$
|
|
145
|
+
content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}";
|
|
121
146
|
}
|
|
122
147
|
}
|
|
123
148
|
}
|
|
@@ -127,45 +152,47 @@
|
|
|
127
152
|
// push :
|
|
128
153
|
// Push the element of the count of column wanted
|
|
129
154
|
@mixin gridle_push(
|
|
130
|
-
$columns
|
|
131
|
-
$state-context : null,
|
|
155
|
+
$columns,
|
|
132
156
|
$state : null
|
|
133
157
|
) {
|
|
134
158
|
// common :
|
|
135
|
-
@include _gridle_push_common();
|
|
136
|
-
|
|
137
|
-
$context : $gridle-columns-count;
|
|
138
|
-
@if type-of($state-context) == number {
|
|
139
|
-
$state : $state;
|
|
140
|
-
$context : $state-context;
|
|
141
|
-
} @else {
|
|
142
|
-
$state : $state-context;
|
|
143
|
-
$context : _gridle_get_state_var($state,'context');
|
|
144
|
-
}
|
|
159
|
+
@include _gridle_push_common($state);
|
|
160
|
+
|
|
145
161
|
// check if need media query :
|
|
146
162
|
@if $state {
|
|
147
163
|
@include gridle_state($state) {
|
|
148
|
-
@include _gridle_push($columns,$state
|
|
164
|
+
@include _gridle_push($columns,$state);
|
|
149
165
|
}
|
|
150
166
|
} @else {
|
|
151
|
-
@include _gridle_push($columns,$state
|
|
167
|
+
@include _gridle_push($columns,$state);
|
|
152
168
|
}
|
|
153
169
|
}
|
|
154
170
|
@mixin _gridle_push(
|
|
155
|
-
$columns
|
|
156
|
-
$state : null
|
|
157
|
-
$context : $gridle-columns-count
|
|
171
|
+
$columns,
|
|
172
|
+
$state : null
|
|
158
173
|
) {
|
|
174
|
+
// variables :
|
|
175
|
+
$name : _gridle_get_var_value(name, $state);
|
|
176
|
+
$context : _gridle_get_var_value(context, $state);
|
|
177
|
+
$direction : _gridle_get_var_value(direction, $state);
|
|
178
|
+
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
|
179
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
180
|
+
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
|
181
|
+
|
|
159
182
|
// vars :
|
|
160
183
|
$width : percentage(1 / $context) * $columns;
|
|
161
|
-
@if $
|
|
184
|
+
@if $direction == rtl { $width : $width*-1; }
|
|
162
185
|
left:$width;
|
|
163
186
|
|
|
164
187
|
// debug css :
|
|
165
|
-
@if $
|
|
188
|
+
@if $debug == true and $debug-show-class-names == true {
|
|
166
189
|
#{$gridle-debug-selector} {
|
|
167
190
|
&:after {
|
|
168
|
-
|
|
191
|
+
@if $name == default {
|
|
192
|
+
content:"push-#{$name}-#{$columns * $name-multiplicator}";
|
|
193
|
+
} @else {
|
|
194
|
+
content:"push-#{$name}-#{$columns * $name-multiplicator}" !important;
|
|
195
|
+
}
|
|
169
196
|
}
|
|
170
197
|
}
|
|
171
198
|
}
|
|
@@ -176,45 +203,47 @@
|
|
|
176
203
|
// pull :
|
|
177
204
|
// Pull the element of the count of column wanted
|
|
178
205
|
@mixin gridle_pull(
|
|
179
|
-
$columns
|
|
180
|
-
$state-context : null,
|
|
206
|
+
$columns,
|
|
181
207
|
$state : null
|
|
182
208
|
) {
|
|
183
209
|
// common :
|
|
184
|
-
@include _gridle_pull_common();
|
|
185
|
-
|
|
186
|
-
$context : $gridle-columns-count;
|
|
187
|
-
@if type-of($state-context) == number {
|
|
188
|
-
$state : $state;
|
|
189
|
-
$context : $state-context;
|
|
190
|
-
} @else {
|
|
191
|
-
$state : $state-context;
|
|
192
|
-
$context : _gridle_get_state_var($state,'context');
|
|
193
|
-
}
|
|
210
|
+
@include _gridle_pull_common($state);
|
|
211
|
+
|
|
194
212
|
// check if need media query :
|
|
195
213
|
@if $state {
|
|
196
214
|
@include gridle_state($state) {
|
|
197
|
-
@include _gridle_pull($columns,$state
|
|
215
|
+
@include _gridle_pull($columns,$state);
|
|
198
216
|
}
|
|
199
217
|
} @else {
|
|
200
|
-
@include _gridle_pull($columns,$state
|
|
218
|
+
@include _gridle_pull($columns,$state);
|
|
201
219
|
}
|
|
202
220
|
}
|
|
203
221
|
@mixin _gridle_pull(
|
|
204
|
-
$columns
|
|
205
|
-
$state : null
|
|
206
|
-
$context : $gridle-columns-count
|
|
222
|
+
$columns,
|
|
223
|
+
$state : null
|
|
207
224
|
) {
|
|
225
|
+
// vars :
|
|
226
|
+
$name : _gridle_get_var_value(name, $state);
|
|
227
|
+
$context : _gridle_get_var_value(context, $state);
|
|
228
|
+
$direction : _gridle_get_var_value(direction, $state);
|
|
229
|
+
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
|
230
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
231
|
+
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
|
232
|
+
|
|
208
233
|
// vars :
|
|
209
234
|
$width : percentage(1 / $context) * $columns;
|
|
210
|
-
@if $
|
|
235
|
+
@if $direction == rtl { $width : $width*-1; }
|
|
211
236
|
right:$width;
|
|
212
237
|
|
|
213
238
|
// debug css :
|
|
214
|
-
@if $
|
|
239
|
+
@if $debug == true and $debug-show-class-names == true {
|
|
215
240
|
#{$gridle-debug-selector} {
|
|
216
241
|
&:after {
|
|
217
|
-
|
|
242
|
+
@if $name == default {
|
|
243
|
+
content:"pull-#{$name}-#{$columns * $name-multiplicator}";
|
|
244
|
+
} @else {
|
|
245
|
+
content:"pull-#{$name}-#{$columns * $name-multiplicator}" !important;
|
|
246
|
+
}
|
|
218
247
|
}
|
|
219
248
|
}
|
|
220
249
|
}
|
|
@@ -224,56 +253,50 @@
|
|
|
224
253
|
// push :
|
|
225
254
|
// Push the element of the count of column wanted
|
|
226
255
|
@mixin gridle_prefix(
|
|
227
|
-
$columns
|
|
228
|
-
$state-context : null,
|
|
256
|
+
$columns,
|
|
229
257
|
$state : null
|
|
230
258
|
) {
|
|
231
259
|
// common :
|
|
232
|
-
@include _gridle_prefix_common();
|
|
233
|
-
|
|
234
|
-
$context : $gridle-columns-count;
|
|
235
|
-
@if type-of($state-context) == number {
|
|
236
|
-
$state : $state;
|
|
237
|
-
$context : $state-context;
|
|
238
|
-
} @else {
|
|
239
|
-
$state : $state-context;
|
|
240
|
-
$context : _gridle_get_state_var($state,'context');
|
|
241
|
-
}
|
|
260
|
+
@include _gridle_prefix_common($state);
|
|
261
|
+
|
|
242
262
|
// check if need media query :
|
|
243
263
|
@if $state {
|
|
244
264
|
@include gridle_state($state) {
|
|
245
|
-
@include _gridle_prefix($columns,$state
|
|
265
|
+
@include _gridle_prefix($columns,$state);
|
|
246
266
|
}
|
|
247
267
|
} @else {
|
|
248
|
-
@include _gridle_prefix($columns,$state
|
|
268
|
+
@include _gridle_prefix($columns,$state);
|
|
249
269
|
}
|
|
250
270
|
}
|
|
251
271
|
@mixin _gridle_prefix(
|
|
252
|
-
$columns
|
|
253
|
-
$state : null
|
|
254
|
-
$context : $gridle-columns-count
|
|
272
|
+
$columns,
|
|
273
|
+
$state : null
|
|
255
274
|
) {
|
|
275
|
+
// vars :
|
|
276
|
+
$name : _gridle_get_var_value(name, $state);
|
|
277
|
+
$context : _gridle_get_var_value(context, $state);
|
|
278
|
+
$direction : _gridle_get_var_value(direction, $state);
|
|
279
|
+
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
|
280
|
+
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
|
281
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
282
|
+
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
|
283
|
+
|
|
256
284
|
// vars :
|
|
257
285
|
$width : percentage(1 / $context) * $columns;
|
|
258
286
|
|
|
259
|
-
//
|
|
260
|
-
@if
|
|
261
|
-
{
|
|
262
|
-
@if $gridle-direction == rtl { margin-right:$width; }
|
|
263
|
-
@else { margin-left:$width; }
|
|
264
|
-
} @else {
|
|
265
|
-
@if $gridle-direction == rtl {
|
|
266
|
-
margin-right:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
|
|
267
|
-
} @else {
|
|
268
|
-
margin-left:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
|
|
269
|
-
}
|
|
270
|
-
}
|
|
287
|
+
// set value :
|
|
288
|
+
@if $direction == rtl { margin-right:$width; }
|
|
289
|
+
@else { margin-left:$width; }
|
|
271
290
|
|
|
272
291
|
// debug css :
|
|
273
|
-
@if $
|
|
292
|
+
@if $debug == true and $debug-show-class-names == true {
|
|
274
293
|
#{$gridle-debug-selector} {
|
|
275
294
|
&:after {
|
|
276
|
-
|
|
295
|
+
@if $name == default {
|
|
296
|
+
content:"èrefix-#{$name}-#{$columns * $name-multiplicator}";
|
|
297
|
+
} @else {
|
|
298
|
+
content:"èrefix-#{$name}-#{$columns * $name-multiplicator}" !important;
|
|
299
|
+
}
|
|
277
300
|
}
|
|
278
301
|
}
|
|
279
302
|
}
|
|
@@ -283,56 +306,50 @@
|
|
|
283
306
|
// pull :
|
|
284
307
|
// Pull the element of the count of column wanted
|
|
285
308
|
@mixin gridle_suffix(
|
|
286
|
-
$columns
|
|
287
|
-
$state-context : null,
|
|
309
|
+
$columns,
|
|
288
310
|
$state : null
|
|
289
311
|
) {
|
|
290
312
|
// common :
|
|
291
|
-
@include _gridle_suffix_common();
|
|
292
|
-
|
|
293
|
-
$context : $gridle-columns-count;
|
|
294
|
-
@if type-of($state-context) == number {
|
|
295
|
-
$state : $state;
|
|
296
|
-
$context : $state-context;
|
|
297
|
-
} @else {
|
|
298
|
-
$state : $state-context;
|
|
299
|
-
$context : _gridle_get_state_var($state,'context');
|
|
300
|
-
}
|
|
313
|
+
@include _gridle_suffix_common($state);
|
|
314
|
+
|
|
301
315
|
// check if need media query :
|
|
302
316
|
@if $state {
|
|
303
317
|
@include gridle_state($state) {
|
|
304
|
-
@include _gridle_suffix($columns,$state
|
|
318
|
+
@include _gridle_suffix($columns,$state);
|
|
305
319
|
}
|
|
306
320
|
} @else {
|
|
307
|
-
@include _gridle_suffix($columns,$state
|
|
321
|
+
@include _gridle_suffix($columns,$state);
|
|
308
322
|
}
|
|
309
323
|
}
|
|
310
324
|
@mixin _gridle_suffix(
|
|
311
|
-
$columns
|
|
312
|
-
$state : null
|
|
313
|
-
$context : $gridle-columns-count
|
|
325
|
+
$columns,
|
|
326
|
+
$state : null
|
|
314
327
|
) {
|
|
328
|
+
// vars :
|
|
329
|
+
$name : _gridle_get_var_value(name, $state);
|
|
330
|
+
$context : _gridle_get_var_value(context, $state);
|
|
331
|
+
$direction : _gridle_get_var_value(direction, $state);
|
|
332
|
+
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
|
333
|
+
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
|
|
334
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
335
|
+
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
|
|
336
|
+
|
|
315
337
|
// vars :
|
|
316
338
|
$width : percentage(1 / $context) * $columns;
|
|
317
339
|
|
|
318
|
-
//
|
|
319
|
-
@if
|
|
320
|
-
{
|
|
321
|
-
@if $gridle-direction == rtl { margin-left:$width; }
|
|
322
|
-
@else { margin-right:$width; }
|
|
323
|
-
} @else {
|
|
324
|
-
@if $gridle-direction == rtl {
|
|
325
|
-
margin-left:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
|
|
326
|
-
} @else {
|
|
327
|
-
margin-right:calc(#{$width} + #{$gridle-gutter-width/2}) !important;
|
|
328
|
-
}
|
|
329
|
-
}
|
|
340
|
+
// set value :
|
|
341
|
+
@if $direction == rtl { margin-left:$width; }
|
|
342
|
+
@else { margin-right:$width; }
|
|
330
343
|
|
|
331
344
|
// debug css :
|
|
332
|
-
@if $
|
|
345
|
+
@if $debug == true and $debug-show-class-names == true {
|
|
333
346
|
#{$gridle-debug-selector} {
|
|
334
347
|
&:after {
|
|
335
|
-
|
|
348
|
+
@if $name == default {
|
|
349
|
+
content:"suffix-#{$name}-#{$columns * $name-multiplicator}";
|
|
350
|
+
} @else {
|
|
351
|
+
content:"suffix-#{$name}-#{$columns * $name-multiplicator}" !important;
|
|
352
|
+
}
|
|
336
353
|
}
|
|
337
354
|
}
|
|
338
355
|
}
|
|
@@ -342,38 +359,28 @@
|
|
|
342
359
|
// grid background :
|
|
343
360
|
// Display the grid background debug
|
|
344
361
|
@mixin gridle_grid_background(
|
|
345
|
-
$state-context : null,
|
|
346
362
|
$state : null
|
|
347
363
|
) {
|
|
348
|
-
|
|
349
|
-
// variables :
|
|
350
|
-
$context : $gridle-columns-count;
|
|
351
|
-
@if type-of($state-context) == number {
|
|
352
|
-
$state : $state;
|
|
353
|
-
$context : $state-context;
|
|
354
|
-
} @elseif $state {
|
|
355
|
-
$state : $state-context;
|
|
356
|
-
$context : _gridle_get_state_var($state,'context');
|
|
357
|
-
}
|
|
358
|
-
|
|
359
364
|
// check if need media query :
|
|
360
365
|
@if $state {
|
|
361
366
|
@include gridle_state($state) {
|
|
362
|
-
@include _gridle_grid_background($state
|
|
367
|
+
@include _gridle_grid_background($state);
|
|
363
368
|
}
|
|
364
369
|
} @else {
|
|
365
|
-
@include _gridle_grid_background($state
|
|
370
|
+
@include _gridle_grid_background($state);
|
|
366
371
|
}
|
|
367
372
|
}
|
|
368
373
|
@mixin _gridle_grid_background(
|
|
369
|
-
$state : null
|
|
370
|
-
$context : $gridle-columns-count
|
|
374
|
+
$state : null
|
|
371
375
|
) {
|
|
372
376
|
|
|
377
|
+
// variables :
|
|
378
|
+
$context : _gridle_get_var_value(context, $state);
|
|
379
|
+
|
|
373
380
|
position:relative;
|
|
374
381
|
z-index:9999;
|
|
375
382
|
&:before {
|
|
376
|
-
content:'
|
|
383
|
+
content:'';
|
|
377
384
|
position:absolute;
|
|
378
385
|
top:0; left:0;
|
|
379
386
|
width:100%; height:100% !important;
|
|
@@ -454,10 +461,7 @@
|
|
|
454
461
|
}
|
|
455
462
|
}
|
|
456
463
|
@mixin _gridle_parent() {
|
|
457
|
-
@
|
|
458
|
-
{
|
|
459
|
-
@include gridle_no_gutter();
|
|
460
|
-
}
|
|
464
|
+
@include gridle_no_gutter();
|
|
461
465
|
}
|
|
462
466
|
|
|
463
467
|
|
|
@@ -663,9 +667,11 @@
|
|
|
663
667
|
@include gridle_gutter($side, $state);
|
|
664
668
|
}
|
|
665
669
|
@mixin _gridle_gutter(
|
|
666
|
-
$side : left right
|
|
670
|
+
$side : left right,
|
|
671
|
+
$state : null
|
|
667
672
|
) {
|
|
673
|
+
$gutter-width : _gridle_get_var_value(gutter-width, $state);
|
|
668
674
|
@each $s in $side {
|
|
669
|
-
padding-#{$s} : $
|
|
675
|
+
padding-#{$s} : $gutter-width / 2;
|
|
670
676
|
}
|
|
671
677
|
}
|