gridle 1.1.0 → 1.2.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 +4 -5
- data/stylesheets/gridle/_common-mixins.scss +84 -0
- data/stylesheets/gridle/_functions.scss +291 -0
- data/stylesheets/gridle/_generate-mixins.scss +515 -0
- data/stylesheets/gridle/_gridle.scss +28 -1653
- data/stylesheets/gridle/_mixins.scss +670 -0
- data/stylesheets/gridle/_settings-mixins.scss +143 -0
- data/stylesheets/gridle/_settings.scss +84 -0
- data/stylesheets/gridle/_silent-classes.scss +102 -0
- metadata +12 -39
- data/stylesheets/gridle/_12-columns-classes.scss +0 -9
- data/stylesheets/gridle/_12-columns-responsive-classes.scss +0 -9
- data/stylesheets/gridle/_12-columns-responsive.scss +0 -14
- data/stylesheets/gridle/_12-columns.scss +0 -9
- data/stylesheets/gridle/_16-columns-classes.scss +0 -9
- data/stylesheets/gridle/_16-columns-responsive-classes.scss +0 -9
- data/stylesheets/gridle/_16-columns-responsive.scss +0 -14
- data/stylesheets/gridle/_16-columns.scss +0 -9
- data/stylesheets/gridle/_24-columns-classes.scss +0 -9
- data/stylesheets/gridle/_24-columns-responsive-classes.scss +0 -9
- data/stylesheets/gridle/_24-columns-responsive.scss +0 -14
- data/stylesheets/gridle/_24-columns.scss +0 -9
- data/stylesheets/gridle/_960gs-classes.scss +0 -9
- data/stylesheets/gridle/_960gs-responsive-classes.scss +0 -9
- data/stylesheets/gridle/_960gs-responsive.scss +0 -23
- data/stylesheets/gridle/_960gs.scss +0 -18
- data/stylesheets/gridle/_unsementic-classes.scss +0 -9
- data/stylesheets/gridle/_unsementic-responsive-classes.scss +0 -9
- data/stylesheets/gridle/_unsementic-responsive.scss +0 -23
- data/stylesheets/gridle/_unsementic.scss +0 -18
@@ -0,0 +1,670 @@
|
|
1
|
+
// |------------------------------------------------------
|
2
|
+
// |------------------------------------------------------
|
3
|
+
// | Mixins
|
4
|
+
// |------------------------------------------------------
|
5
|
+
// |------------------------------------------------------
|
6
|
+
|
7
|
+
// Responsive helpers mixins :
|
8
|
+
@mixin gridle_state(
|
9
|
+
$state-or-min-width,
|
10
|
+
$max-width : null,
|
11
|
+
$has-parent : true
|
12
|
+
) {
|
13
|
+
|
14
|
+
// query list :
|
15
|
+
$query : ();
|
16
|
+
|
17
|
+
// loop on each states :
|
18
|
+
@each $_state-or-min-width in $state-or-min-width {
|
19
|
+
|
20
|
+
// check if is a state :
|
21
|
+
@if type-of($_state-or-min-width) == string
|
22
|
+
and ($gridle-html-states-classes or $gridle-debug)
|
23
|
+
and _gridle_get_state($_state-or-min-width) {
|
24
|
+
// html class :
|
25
|
+
@if $has-parent {
|
26
|
+
html#{_gridle_classname("#{$_state-or-min-width}")} & { @content; }
|
27
|
+
} @else {
|
28
|
+
html#{_gridle_classname("#{$_state-or-min-width}")} { @content; }
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
// get the media query :
|
33
|
+
$q : _get_media_query_for_state($_state-or-min-width, $max-width);
|
34
|
+
@if $q {
|
35
|
+
$query : append($query, unquote("#{$q}"), comma);
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
// check and print media query :
|
40
|
+
@if type-of($query) == list {
|
41
|
+
@media #{$query} {
|
42
|
+
@content;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
// Container mixin :
|
50
|
+
@mixin gridle_container(
|
51
|
+
) {
|
52
|
+
@include _gridle_container_common();
|
53
|
+
}
|
54
|
+
|
55
|
+
|
56
|
+
// Grid mixin :
|
57
|
+
// Set the width of the specified grid column :
|
58
|
+
@mixin gridle(
|
59
|
+
$columns : $gridle-columns-count,
|
60
|
+
$state-context : null,
|
61
|
+
$state : null
|
62
|
+
) {
|
63
|
+
// 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
|
+
}
|
74
|
+
// check if need media query :
|
75
|
+
@if $state {
|
76
|
+
@include gridle_state($state) {
|
77
|
+
@include _gridle($columns, $state, $context);
|
78
|
+
}
|
79
|
+
} @else {
|
80
|
+
@include _gridle($columns,$state,$context);
|
81
|
+
}
|
82
|
+
}
|
83
|
+
@mixin _gridle(
|
84
|
+
$columns : $gridle-columns-count,
|
85
|
+
$state : null,
|
86
|
+
$context : $gridle-columns-count
|
87
|
+
) {
|
88
|
+
// vars :
|
89
|
+
$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
|
+
|
104
|
+
} @else {
|
105
|
+
width:$width;
|
106
|
+
}
|
107
|
+
|
108
|
+
// ie7 support :
|
109
|
+
@if $gridle-ie7-support == true {
|
110
|
+
*width: expression((this.parentNode.clientWidth/#{$context}*#{$columns} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
|
111
|
+
}
|
112
|
+
|
113
|
+
// debug :
|
114
|
+
@if $gridle-debug == true and $gridle-debug-show-class-names == true {
|
115
|
+
#{$gridle-debug-selector} {
|
116
|
+
&:before {
|
117
|
+
content:"grid-#{$state}-#{$columns * $gridle-name-multiplicator}";
|
118
|
+
}
|
119
|
+
&.parent:before {
|
120
|
+
content:"grid-parent-#{$state}-#{$columns * $gridle-name-multiplicator}";
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
124
|
+
}
|
125
|
+
|
126
|
+
|
127
|
+
// push :
|
128
|
+
// Push the element of the count of column wanted
|
129
|
+
@mixin gridle_push(
|
130
|
+
$columns : $gridle-columns-count,
|
131
|
+
$state-context : null,
|
132
|
+
$state : null
|
133
|
+
) {
|
134
|
+
// common :
|
135
|
+
@include _gridle_push_common();
|
136
|
+
// variables :
|
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
|
+
}
|
145
|
+
// check if need media query :
|
146
|
+
@if $state {
|
147
|
+
@include gridle_state($state) {
|
148
|
+
@include _gridle_push($columns,$state,$context);
|
149
|
+
}
|
150
|
+
} @else {
|
151
|
+
@include _gridle_push($columns,$state,$context);
|
152
|
+
}
|
153
|
+
}
|
154
|
+
@mixin _gridle_push(
|
155
|
+
$columns : $gridle-columns-count,
|
156
|
+
$state : null,
|
157
|
+
$context : $gridle-columns-count
|
158
|
+
) {
|
159
|
+
// vars :
|
160
|
+
$width : percentage(1 / $context) * $columns;
|
161
|
+
@if $gridle-direction == rtl { $width : $width*-1; }
|
162
|
+
left:$width;
|
163
|
+
|
164
|
+
// debug css :
|
165
|
+
@if $gridle-debug == true and $gridle-debug-show-class-names == true {
|
166
|
+
#{$gridle-debug-selector} {
|
167
|
+
&:after {
|
168
|
+
content:"push-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
|
169
|
+
}
|
170
|
+
}
|
171
|
+
}
|
172
|
+
|
173
|
+
}
|
174
|
+
|
175
|
+
|
176
|
+
// pull :
|
177
|
+
// Pull the element of the count of column wanted
|
178
|
+
@mixin gridle_pull(
|
179
|
+
$columns : $gridle-columns-count,
|
180
|
+
$state-context : null,
|
181
|
+
$state : null
|
182
|
+
) {
|
183
|
+
// common :
|
184
|
+
@include _gridle_pull_common();
|
185
|
+
// variables :
|
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
|
+
}
|
194
|
+
// check if need media query :
|
195
|
+
@if $state {
|
196
|
+
@include gridle_state($state) {
|
197
|
+
@include _gridle_pull($columns,$state,$context);
|
198
|
+
}
|
199
|
+
} @else {
|
200
|
+
@include _gridle_pull($columns,$state,$context);
|
201
|
+
}
|
202
|
+
}
|
203
|
+
@mixin _gridle_pull(
|
204
|
+
$columns : $gridle-columns-count,
|
205
|
+
$state : null,
|
206
|
+
$context : $gridle-columns-count
|
207
|
+
) {
|
208
|
+
// vars :
|
209
|
+
$width : percentage(1 / $context) * $columns;
|
210
|
+
@if $gridle-direction == rtl { $width : $width*-1; }
|
211
|
+
right:$width;
|
212
|
+
|
213
|
+
// debug css :
|
214
|
+
@if $gridle-debug == true and $gridle-debug-show-class-names == true {
|
215
|
+
#{$gridle-debug-selector} {
|
216
|
+
&:after {
|
217
|
+
content:"pull-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
|
218
|
+
}
|
219
|
+
}
|
220
|
+
}
|
221
|
+
}
|
222
|
+
|
223
|
+
|
224
|
+
// push :
|
225
|
+
// Push the element of the count of column wanted
|
226
|
+
@mixin gridle_prefix(
|
227
|
+
$columns : $gridle-columns-count,
|
228
|
+
$state-context : null,
|
229
|
+
$state : null
|
230
|
+
) {
|
231
|
+
// common :
|
232
|
+
@include _gridle_prefix_common();
|
233
|
+
// variables :
|
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
|
+
}
|
242
|
+
// check if need media query :
|
243
|
+
@if $state {
|
244
|
+
@include gridle_state($state) {
|
245
|
+
@include _gridle_prefix($columns,$state,$context);
|
246
|
+
}
|
247
|
+
} @else {
|
248
|
+
@include _gridle_prefix($columns,$state,$context);
|
249
|
+
}
|
250
|
+
}
|
251
|
+
@mixin _gridle_prefix(
|
252
|
+
$columns : $gridle-columns-count,
|
253
|
+
$state : null,
|
254
|
+
$context : $gridle-columns-count
|
255
|
+
) {
|
256
|
+
// vars :
|
257
|
+
$width : percentage(1 / $context) * $columns;
|
258
|
+
|
259
|
+
// different method if gutter is padding or margin :
|
260
|
+
@if unquote($gridle-gutter-type) == padding
|
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
|
+
}
|
271
|
+
|
272
|
+
// debug css :
|
273
|
+
@if $gridle-debug == true and $gridle-debug-show-class-names == true {
|
274
|
+
#{$gridle-debug-selector} {
|
275
|
+
&:after {
|
276
|
+
content:"prefix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
|
277
|
+
}
|
278
|
+
}
|
279
|
+
}
|
280
|
+
}
|
281
|
+
|
282
|
+
|
283
|
+
// pull :
|
284
|
+
// Pull the element of the count of column wanted
|
285
|
+
@mixin gridle_suffix(
|
286
|
+
$columns : $gridle-columns-count,
|
287
|
+
$state-context : null,
|
288
|
+
$state : null
|
289
|
+
) {
|
290
|
+
// common :
|
291
|
+
@include _gridle_suffix_common();
|
292
|
+
// variables :
|
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
|
+
}
|
301
|
+
// check if need media query :
|
302
|
+
@if $state {
|
303
|
+
@include gridle_state($state) {
|
304
|
+
@include _gridle_suffix($columns,$state,$context);
|
305
|
+
}
|
306
|
+
} @else {
|
307
|
+
@include _gridle_suffix($columns,$state,$context);
|
308
|
+
}
|
309
|
+
}
|
310
|
+
@mixin _gridle_suffix(
|
311
|
+
$columns : $gridle-columns-count,
|
312
|
+
$state : null,
|
313
|
+
$context : $gridle-columns-count
|
314
|
+
) {
|
315
|
+
// vars :
|
316
|
+
$width : percentage(1 / $context) * $columns;
|
317
|
+
|
318
|
+
// different method if gutter is padding or margin :
|
319
|
+
@if unquote($gridle-gutter-type) == padding
|
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
|
+
}
|
330
|
+
|
331
|
+
// debug css :
|
332
|
+
@if $gridle-debug == true and $gridle-debug-show-class-names == true {
|
333
|
+
#{$gridle-debug-selector} {
|
334
|
+
&:after {
|
335
|
+
content:"suffix-#{$state}-#{$columns * $gridle-name-multiplicator}" !important;
|
336
|
+
}
|
337
|
+
}
|
338
|
+
}
|
339
|
+
}
|
340
|
+
|
341
|
+
|
342
|
+
// grid background :
|
343
|
+
// Display the grid background debug
|
344
|
+
@mixin gridle_grid_background(
|
345
|
+
$state-context : null,
|
346
|
+
$state : null
|
347
|
+
) {
|
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
|
+
// check if need media query :
|
360
|
+
@if $state {
|
361
|
+
@include gridle_state($state) {
|
362
|
+
@include _gridle_grid_background($state,$context);
|
363
|
+
}
|
364
|
+
} @else {
|
365
|
+
@include _gridle_grid_background($state,$context);
|
366
|
+
}
|
367
|
+
}
|
368
|
+
@mixin _gridle_grid_background(
|
369
|
+
$state : null,
|
370
|
+
$context : $gridle-columns-count
|
371
|
+
) {
|
372
|
+
|
373
|
+
position:relative;
|
374
|
+
z-index:9999;
|
375
|
+
&:before {
|
376
|
+
content:'.';
|
377
|
+
position:absolute;
|
378
|
+
top:0; left:0;
|
379
|
+
width:100%; height:100% !important;
|
380
|
+
// vars :
|
381
|
+
$width : percentage(1 / $context);
|
382
|
+
background: linear-gradient(to right, rgba(0,0,0,.01) 50% , rgba(0,0,0,.04) 50%); /* Standard syntax */
|
383
|
+
background-size:($width*2) 100%;
|
384
|
+
// background-position:$gridle-gutter-width/2 0;
|
385
|
+
}
|
386
|
+
}
|
387
|
+
|
388
|
+
|
389
|
+
/**
|
390
|
+
* Parent clear each
|
391
|
+
*/
|
392
|
+
// Grid mixin :
|
393
|
+
// Set the width of the specified grid column :
|
394
|
+
@mixin gridle_clear_each(
|
395
|
+
$clearEach,
|
396
|
+
$clearWhat : both,
|
397
|
+
$state : null
|
398
|
+
) {
|
399
|
+
// check if need media query :
|
400
|
+
@if $state {
|
401
|
+
@include gridle_state($state) {
|
402
|
+
@include _gridle_clear_each($clearEach, $clearWhat, $state);
|
403
|
+
}
|
404
|
+
} @else {
|
405
|
+
@include _gridle_clear_each($clearEach, $clearWhat, $state);
|
406
|
+
}
|
407
|
+
}
|
408
|
+
@mixin _gridle_clear_each(
|
409
|
+
$clearEach,
|
410
|
+
$clearWhat,
|
411
|
+
$state : null
|
412
|
+
) {
|
413
|
+
> *:nth-child(#{$clearEach}n+1) {
|
414
|
+
clear : $clearWhat;
|
415
|
+
}
|
416
|
+
}
|
417
|
+
|
418
|
+
|
419
|
+
// Grid centered :
|
420
|
+
@mixin gridle_centered(
|
421
|
+
$state : null
|
422
|
+
) {
|
423
|
+
// check if need media query :
|
424
|
+
@if $state {
|
425
|
+
@include gridle_state($state) {
|
426
|
+
@include _gridle_centered();
|
427
|
+
}
|
428
|
+
} @else {
|
429
|
+
@include _gridle_centered();
|
430
|
+
}
|
431
|
+
}
|
432
|
+
@mixin _gridle_centered() {
|
433
|
+
display:block !important;
|
434
|
+
float:none !important;
|
435
|
+
margin-left:auto !important;
|
436
|
+
margin-right:auto !important;
|
437
|
+
clear:both !important;
|
438
|
+
}
|
439
|
+
|
440
|
+
|
441
|
+
// Grid parent :
|
442
|
+
@mixin gridle_parent(
|
443
|
+
$state : null
|
444
|
+
) {
|
445
|
+
// common :
|
446
|
+
@include _gridle_parent_common();
|
447
|
+
// check if need media query :
|
448
|
+
@if $state {
|
449
|
+
@include gridle_state($state) {
|
450
|
+
@include _gridle_parent();
|
451
|
+
}
|
452
|
+
} @else {
|
453
|
+
@include _gridle_parent();
|
454
|
+
}
|
455
|
+
}
|
456
|
+
@mixin _gridle_parent() {
|
457
|
+
@if unquote($gridle-gutter-type) == padding
|
458
|
+
{
|
459
|
+
@include gridle_no_gutter();
|
460
|
+
}
|
461
|
+
}
|
462
|
+
|
463
|
+
|
464
|
+
/**
|
465
|
+
* Vertical align :
|
466
|
+
*/
|
467
|
+
@mixin gridle_parent_vertical_align(
|
468
|
+
$state : null
|
469
|
+
) {
|
470
|
+
// check if need media query :
|
471
|
+
@if $state {
|
472
|
+
@include gridle_state($state) {
|
473
|
+
@include _gridle_parent_vertical_align();
|
474
|
+
}
|
475
|
+
} @else {
|
476
|
+
@include _gridle_parent_vertical_align();
|
477
|
+
}
|
478
|
+
}
|
479
|
+
@mixin _gridle_parent_vertical_align() {
|
480
|
+
vertical-align:middle;
|
481
|
+
|
482
|
+
> * {
|
483
|
+
display:inline-block;
|
484
|
+
float:none !important;
|
485
|
+
vertical-align:middle;
|
486
|
+
}
|
487
|
+
}
|
488
|
+
|
489
|
+
|
490
|
+
// Hide on :
|
491
|
+
// @param String $media On what state
|
492
|
+
@mixin gridle_hide(
|
493
|
+
$state : null
|
494
|
+
) {
|
495
|
+
// check if need media query :
|
496
|
+
@if $state {
|
497
|
+
@include gridle_state($state) {
|
498
|
+
@include _gridle_hide();
|
499
|
+
}
|
500
|
+
} @else {
|
501
|
+
@include _gridle_hide();
|
502
|
+
}
|
503
|
+
}
|
504
|
+
@mixin _gridle_hide() {
|
505
|
+
display:none;
|
506
|
+
}
|
507
|
+
|
508
|
+
|
509
|
+
// Not visible on :
|
510
|
+
// @param String $media What to hide (one of the 3 state classes name)
|
511
|
+
@mixin gridle_not_visible(
|
512
|
+
$state : null
|
513
|
+
) {
|
514
|
+
// check if need media query :
|
515
|
+
@if $state {
|
516
|
+
@include gridle_state($state) {
|
517
|
+
@include _gridle_not_visible();
|
518
|
+
}
|
519
|
+
} @else {
|
520
|
+
@include _gridle_not_visible();
|
521
|
+
}
|
522
|
+
}
|
523
|
+
@mixin _gridle_not_visible() {
|
524
|
+
visibility:hidden;
|
525
|
+
}
|
526
|
+
|
527
|
+
|
528
|
+
// Show on
|
529
|
+
// @param String $media What to hide (one of the 3 state classes name)
|
530
|
+
@mixin gridle_show(
|
531
|
+
$state : null
|
532
|
+
) {
|
533
|
+
// check if need media query :
|
534
|
+
@if $state {
|
535
|
+
@include gridle_state($state) {
|
536
|
+
@include _gridle_show();
|
537
|
+
}
|
538
|
+
} @else {
|
539
|
+
@include _gridle_show();
|
540
|
+
}
|
541
|
+
}
|
542
|
+
@mixin _gridle_show() {
|
543
|
+
display:block;
|
544
|
+
}
|
545
|
+
|
546
|
+
|
547
|
+
// Visible on :
|
548
|
+
// @param String $media On what state
|
549
|
+
@mixin gridle_visible(
|
550
|
+
$state : null
|
551
|
+
) {
|
552
|
+
// check if need media query :
|
553
|
+
@if $state {
|
554
|
+
@include gridle_state($state) {
|
555
|
+
@include _gridle_visible();
|
556
|
+
}
|
557
|
+
} @else {
|
558
|
+
@include _gridle_visible();
|
559
|
+
}
|
560
|
+
}
|
561
|
+
@mixin _gridle_visible() {
|
562
|
+
visibility:visible;
|
563
|
+
}
|
564
|
+
|
565
|
+
|
566
|
+
// Gridle Right :
|
567
|
+
@mixin gridle_float(
|
568
|
+
$float-direction : left,
|
569
|
+
$state : null
|
570
|
+
) {
|
571
|
+
// check if need media query :
|
572
|
+
@if $state {
|
573
|
+
@include gridle_state($state) {
|
574
|
+
@include gridle_float($float-direction);
|
575
|
+
}
|
576
|
+
} @else {
|
577
|
+
@include gridle_float($float-direction);
|
578
|
+
}
|
579
|
+
}
|
580
|
+
@mixin gridle_float(
|
581
|
+
$float-direction : left
|
582
|
+
) {
|
583
|
+
float:#{$float-direction};
|
584
|
+
}
|
585
|
+
|
586
|
+
|
587
|
+
// Gridle clear :
|
588
|
+
// @param String $clear-direction The direction to clear
|
589
|
+
// @param String $state The state
|
590
|
+
@mixin gridle_clear(
|
591
|
+
$clear-direction : both,
|
592
|
+
$state : null
|
593
|
+
) {
|
594
|
+
// check if need media query :
|
595
|
+
@if $state {
|
596
|
+
@include gridle_state($state) {
|
597
|
+
@include _gridle_clear($clear-direction);
|
598
|
+
}
|
599
|
+
} @else {
|
600
|
+
@include _gridle_clear($clear-direction);
|
601
|
+
}
|
602
|
+
}
|
603
|
+
@mixin _gridle_clear(
|
604
|
+
$clear-direction : both
|
605
|
+
) {
|
606
|
+
clear:#{$clear-direction};
|
607
|
+
}
|
608
|
+
|
609
|
+
|
610
|
+
// Gridle no gutter :
|
611
|
+
// @param String $side The side to clear
|
612
|
+
// @param String $state The state
|
613
|
+
@mixin gridle_no_gutter(
|
614
|
+
$side : left right,
|
615
|
+
$state : null
|
616
|
+
) {
|
617
|
+
// check if need media query :
|
618
|
+
@if $state {
|
619
|
+
@include gridle_state($state) {
|
620
|
+
@include _gridle_no_gutter($side);
|
621
|
+
}
|
622
|
+
} @else {
|
623
|
+
@include _gridle_no_gutter($side);
|
624
|
+
}
|
625
|
+
}
|
626
|
+
@mixin gridle_no_margin(
|
627
|
+
$side : left right,
|
628
|
+
$state : null
|
629
|
+
) {
|
630
|
+
@include gridle_no_gutter($side, $state);
|
631
|
+
}
|
632
|
+
@mixin _gridle_no_gutter(
|
633
|
+
$side : left right
|
634
|
+
) {
|
635
|
+
@each $s in $side {
|
636
|
+
padding-#{$s} : 0 !important;
|
637
|
+
}
|
638
|
+
}
|
639
|
+
|
640
|
+
|
641
|
+
// Gridle gutter :
|
642
|
+
// @param String $side The side to clear
|
643
|
+
// @param String $state The state
|
644
|
+
@mixin gridle_gutter(
|
645
|
+
$side : left right,
|
646
|
+
$state : null
|
647
|
+
) {
|
648
|
+
// check if need media query :
|
649
|
+
@if $state {
|
650
|
+
@include gridle_state($state) {
|
651
|
+
@include _gridle_gutter($side);
|
652
|
+
}
|
653
|
+
} @else {
|
654
|
+
@include _gridle_gutter($side);
|
655
|
+
}
|
656
|
+
}
|
657
|
+
// shortcut :
|
658
|
+
@mixin gridle_margin(
|
659
|
+
$side : left right,
|
660
|
+
$state : null
|
661
|
+
) {
|
662
|
+
@include gridle_gutter($side, $state);
|
663
|
+
}
|
664
|
+
@mixin _gridle_gutter(
|
665
|
+
$side : left right
|
666
|
+
) {
|
667
|
+
@each $s in $side {
|
668
|
+
padding-#{$s} : $gridle-gutter-width / 2;
|
669
|
+
}
|
670
|
+
}
|