gridle 1.3.0 → 1.3.1
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/_functions.scss +17 -0
- data/stylesheets/gridle/_generate-mixins.scss +10 -10
- data/stylesheets/gridle/_gridle.scss +3 -3
- data/stylesheets/gridle/_mixins.scss +61 -51
- data/stylesheets/gridle/_settings-mixins.scss +1 -1
- data/stylesheets/gridle/_settings.scss +8 -8
- data/stylesheets/gridle/_silent-classes.scss +3 -0
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0a15e857e053fa9f12b4746ffd22295290cfd783
|
|
4
|
+
data.tar.gz: 0b9032f8bdcad96690648f5c0b6e87999825be73
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ec75f8137a7bae3ecd35045a3ff8939c909dff716573ca63332e9d90f1f2c5fbffa1615875a7fc80a42b1702979c96b51711370977f99d0a89b56029245757d5
|
|
7
|
+
data.tar.gz: a052ae5e8d7bdf3702f269e48488a78d9dfa6d597290a19b2424225093f4e4d9989ef7f8775e222be13e04ad98cec0c565654aa9c37a123f087f6235cc817312
|
data/lib/gridle.rb
CHANGED
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
# a prerelease version
|
|
17
17
|
# Date is in the form of YYYY-MM-DD
|
|
18
18
|
module Extension
|
|
19
|
-
VERSION = "1.3.
|
|
20
|
-
DATE = "2014-05-
|
|
19
|
+
VERSION = "1.3.1"
|
|
20
|
+
DATE = "2014-05-15"
|
|
21
21
|
end
|
|
22
22
|
|
|
23
23
|
# This is where any custom SassScript should be placed. The functions will be
|
|
@@ -60,6 +60,23 @@
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
|
|
63
|
+
/**
|
|
64
|
+
* Check if a state exist :
|
|
65
|
+
*
|
|
66
|
+
* @param string $name The name of the state to check
|
|
67
|
+
* @return Boolean true is exist
|
|
68
|
+
*/
|
|
69
|
+
@function _gridle_has_state(
|
|
70
|
+
$stateName
|
|
71
|
+
) {
|
|
72
|
+
@if map-has-key($_gridle_states, unquote($stateName)) {
|
|
73
|
+
@return true;
|
|
74
|
+
} @else {
|
|
75
|
+
@return false;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
|
|
63
80
|
/**
|
|
64
81
|
* Get the media queries variables :
|
|
65
82
|
*
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
#{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
|
|
40
40
|
@include gridle_clear(right);
|
|
41
41
|
}
|
|
42
|
-
#{_gridle_classname($gridle-no-
|
|
43
|
-
#{_gridle_classname($gridle-no-
|
|
42
|
+
#{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
|
|
43
|
+
#{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
|
|
44
44
|
@include gridle_no_margin();
|
|
45
45
|
}
|
|
46
46
|
#{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
#{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
|
|
60
60
|
@include gridle_no_margin(bottom);
|
|
61
61
|
}
|
|
62
|
-
#{_gridle_classname($gridle-
|
|
63
|
-
#{_gridle_classname($gridle-
|
|
62
|
+
#{_gridle_classname($gridle-gutter-name-pattern, $state)},
|
|
63
|
+
#{_gridle_classname($gridle-margin-name-pattern, $state)} {
|
|
64
64
|
@include gridle_margin(left right);
|
|
65
65
|
}
|
|
66
66
|
#{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
|
|
@@ -88,14 +88,14 @@
|
|
|
88
88
|
#{_gridle_classname($gridle-parent-name-pattern, $state)} {
|
|
89
89
|
@include _gridle_parent();
|
|
90
90
|
}
|
|
91
|
-
#{_gridle_classname($gridle-
|
|
92
|
-
@include
|
|
91
|
+
#{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
|
|
92
|
+
@include _gridle_vertical_align();
|
|
93
93
|
}
|
|
94
|
-
#{_gridle_classname($gridle-
|
|
95
|
-
@include
|
|
94
|
+
#{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
|
|
95
|
+
@include _gridle_vertical_align(top);
|
|
96
96
|
}
|
|
97
|
-
#{_gridle_classname($gridle-
|
|
98
|
-
@include
|
|
97
|
+
#{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
|
|
98
|
+
@include _gridle_vertical_align(bottom);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
/**
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
// |------------------------------------------------------
|
|
30
30
|
// |------------------------------------------------------
|
|
31
31
|
// @created 25.03.13
|
|
32
|
-
// @updated
|
|
32
|
+
// @updated 15.05.14
|
|
33
33
|
// @author Olivier Bossel <olivier.bossel@gmail.com>
|
|
34
|
-
// @version 1.3.
|
|
34
|
+
// @version 1.3.1
|
|
35
35
|
// |------------------------------------------------------
|
|
36
36
|
// |------------------------------------------------------
|
|
37
37
|
|
|
38
|
-
$_gridle-version : "1.3.
|
|
38
|
+
$_gridle-version : "1.3.1";
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
|
|
@@ -6,56 +6,54 @@
|
|
|
6
6
|
|
|
7
7
|
// Responsive helpers mixins :
|
|
8
8
|
@mixin gridle_state(
|
|
9
|
-
$
|
|
9
|
+
$states,
|
|
10
10
|
$has-parent : true
|
|
11
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
12
|
|
|
28
|
-
//
|
|
29
|
-
$
|
|
13
|
+
// check first param if is a state :
|
|
14
|
+
$firstState : nth($states,1);
|
|
15
|
+
@if _gridle_has_state($firstState) {
|
|
30
16
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
17
|
+
// loop on each states :
|
|
18
|
+
@each $state in $states
|
|
19
|
+
{
|
|
20
|
+
// variables :
|
|
21
|
+
$html-states-classes : _gridle_get_var_value(html-states-classes, $state);
|
|
22
|
+
$debug : _gridle_get_var_value(debug, $state);
|
|
23
|
+
$stateName : _gridle_get_var_value(name, $state);
|
|
24
|
+
|
|
25
|
+
// check if is a state :
|
|
26
|
+
@if ($html-states-classes or $debug)
|
|
27
|
+
and $stateName {
|
|
28
|
+
// html class :
|
|
29
|
+
@if $has-parent {
|
|
30
|
+
html#{_gridle_classname("#{$stateName}")} & { @content; }
|
|
31
|
+
} @else {
|
|
32
|
+
html#{_gridle_classname("#{$stateName}")} { @content; }
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// get the media query :
|
|
37
|
+
$q : _gridle_get_media_query($state);
|
|
38
|
+
|
|
39
|
+
// make the media query if a query exist :
|
|
40
|
+
@if $q {
|
|
41
|
+
@media #{$q} {
|
|
42
|
+
@content;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
@else
|
|
46
|
+
{
|
|
47
|
+
@content;
|
|
48
|
+
}
|
|
35
49
|
}
|
|
36
|
-
}
|
|
37
|
-
@else
|
|
38
|
-
{
|
|
39
|
-
@content;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
50
|
|
|
51
|
+
} @else {
|
|
43
52
|
|
|
44
|
-
/**
|
|
45
|
-
* States :
|
|
46
|
-
*/
|
|
47
|
-
@mixin gridle_states(
|
|
48
|
-
$states,
|
|
49
|
-
$has-parent : true
|
|
50
|
-
) {
|
|
51
|
-
|
|
52
|
-
// loop on each states :
|
|
53
|
-
@each $state in $states
|
|
54
|
-
{
|
|
55
53
|
// variables :
|
|
56
|
-
$html-states-classes : _gridle_get_var_value(html-states-classes, $
|
|
57
|
-
$debug : _gridle_get_var_value(debug, $
|
|
58
|
-
$stateName : _gridle_get_var_value(name, $
|
|
54
|
+
$html-states-classes : _gridle_get_var_value(html-states-classes, $states);
|
|
55
|
+
$debug : _gridle_get_var_value(debug, $states);
|
|
56
|
+
$stateName : _gridle_get_var_value(name, $states);
|
|
59
57
|
|
|
60
58
|
// check if is a state :
|
|
61
59
|
@if ($html-states-classes or $debug)
|
|
@@ -69,7 +67,7 @@
|
|
|
69
67
|
}
|
|
70
68
|
|
|
71
69
|
// get the media query :
|
|
72
|
-
$q : _gridle_get_media_query($
|
|
70
|
+
$q : _gridle_get_media_query($states);
|
|
73
71
|
|
|
74
72
|
// make the media query if a query exist :
|
|
75
73
|
@if $q {
|
|
@@ -81,6 +79,7 @@
|
|
|
81
79
|
{
|
|
82
80
|
@content;
|
|
83
81
|
}
|
|
82
|
+
|
|
84
83
|
}
|
|
85
84
|
}
|
|
86
85
|
|
|
@@ -139,10 +138,18 @@
|
|
|
139
138
|
@if $debug == true and $debug-show-class-names == true {
|
|
140
139
|
#{$gridle-debug-selector} {
|
|
141
140
|
&:before {
|
|
142
|
-
|
|
141
|
+
@if $name == default {
|
|
142
|
+
content:"grid-#{$name}-#{$columns * $name-multiplicator}";
|
|
143
|
+
} @else {
|
|
144
|
+
content:"grid-#{$name}-#{$columns * $name-multiplicator}" !important;
|
|
145
|
+
}
|
|
143
146
|
}
|
|
144
147
|
&.parent:before {
|
|
145
|
-
|
|
148
|
+
@if $name == default {
|
|
149
|
+
content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}";
|
|
150
|
+
} @else {
|
|
151
|
+
content:"grid-parent-#{$name}-#{$columns * $name-multiplicator}" !important;
|
|
152
|
+
}
|
|
146
153
|
}
|
|
147
154
|
}
|
|
148
155
|
}
|
|
@@ -293,9 +300,9 @@
|
|
|
293
300
|
#{$gridle-debug-selector} {
|
|
294
301
|
&:after {
|
|
295
302
|
@if $name == default {
|
|
296
|
-
content:"
|
|
303
|
+
content:"prefix-#{$name}-#{$columns * $name-multiplicator}";
|
|
297
304
|
} @else {
|
|
298
|
-
content:"
|
|
305
|
+
content:"prefix-#{$name}-#{$columns * $name-multiplicator}" !important;
|
|
299
306
|
}
|
|
300
307
|
}
|
|
301
308
|
}
|
|
@@ -468,26 +475,29 @@
|
|
|
468
475
|
/**
|
|
469
476
|
* Vertical align :
|
|
470
477
|
*/
|
|
471
|
-
@mixin
|
|
478
|
+
@mixin gridle_vertical_align(
|
|
472
479
|
$align : middle,
|
|
473
480
|
$state : null
|
|
474
481
|
) {
|
|
475
482
|
// check if need media query :
|
|
476
483
|
@if $state {
|
|
477
484
|
@include gridle_state($state) {
|
|
478
|
-
@include
|
|
485
|
+
@include _gridle_vertical_align($align);
|
|
479
486
|
}
|
|
480
487
|
} @else {
|
|
481
|
-
@include
|
|
488
|
+
@include _gridle_vertical_align($align);
|
|
482
489
|
}
|
|
483
490
|
}
|
|
484
|
-
@mixin
|
|
491
|
+
@mixin _gridle_vertical_align(
|
|
485
492
|
$align : middle
|
|
486
493
|
) {
|
|
494
|
+
font-size:0;
|
|
495
|
+
|
|
487
496
|
> * {
|
|
488
497
|
display:inline-block;
|
|
489
498
|
float:none !important;
|
|
490
499
|
vertical-align:$align;
|
|
500
|
+
font-size:1rem;
|
|
491
501
|
}
|
|
492
502
|
}
|
|
493
503
|
|
|
@@ -20,9 +20,9 @@ $gridle-suffix-name-pattern : ('suffix','%-','%state','%-','%count') !defaul
|
|
|
20
20
|
$gridle-parent-name-pattern : ('parent','%-','%state') !default;
|
|
21
21
|
$gridle-centered-name-pattern : ('centered','%-','%state') !default;
|
|
22
22
|
|
|
23
|
-
$gridle-
|
|
24
|
-
$gridle-
|
|
25
|
-
$gridle-
|
|
23
|
+
$gridle-vertical-align-middle-name-pattern : ('vertical','%-','align','%-','%state','%-','middle') !default;
|
|
24
|
+
$gridle-vertical-align-top-name-pattern : ('vertical','%-','align','%-','%state','%-','top') !default;
|
|
25
|
+
$gridle-vertical-align-bottom-name-pattern : ('vertical','%-','align','%-','%state','%-','bottom') !default;
|
|
26
26
|
|
|
27
27
|
$gridle-hide-name-pattern : ('hide','%-','%state') !default;
|
|
28
28
|
$gridle-show-name-pattern : ('show','%-','%state') !default;
|
|
@@ -37,25 +37,25 @@ $gridle-clear-left-name-pattern : ('clear','%-','%state','%-','left') !defaul
|
|
|
37
37
|
$gridle-clear-right-name-pattern : ('clear','%-','%state','%-','right') !default;
|
|
38
38
|
$gridle-clear-each-pattern : ('clear','%-','each','%-','%state','%-','%count') !default;
|
|
39
39
|
|
|
40
|
-
$gridle-no-
|
|
40
|
+
$gridle-no-gutter-name-pattern : ('no','%-','gutter','%-','%state') !default;
|
|
41
41
|
$gridle-no-gutter-left-name-pattern : ('no','%-','gutter','%-','%state','%-','left') !default;
|
|
42
42
|
$gridle-no-gutter-right-name-pattern : ('no','%-','gutter','%-','%state','%-','right') !default;
|
|
43
43
|
$gridle-no-gutter-top-name-pattern : ('no','%-','gutter','%-','%state','%-','top') !default;
|
|
44
44
|
$gridle-no-gutter-bottom-name-pattern : ('no','%-','gutter','%-','%state','%-','bottom') !default;
|
|
45
45
|
|
|
46
|
-
$gridle-no-
|
|
46
|
+
$gridle-no-margin-name-pattern : ('no','%-','margin','%-','%state') !default;
|
|
47
47
|
$gridle-no-margin-left-name-pattern : ('no','%-','margin','%-','%state','%-','left') !default;
|
|
48
48
|
$gridle-no-margin-right-name-pattern : ('no','%-','margin','%-','%state','%-','right') !default;
|
|
49
49
|
$gridle-no-margin-top-name-pattern : ('no','%-','margin','%-','%state','%-','top') !default;
|
|
50
50
|
$gridle-no-margin-bottom-name-pattern : ('no','%-','margin','%-','%state','%-','bottom') !default;
|
|
51
51
|
|
|
52
|
-
$gridle-
|
|
53
|
-
$gridle-gutter-left-name-pattern : ('
|
|
52
|
+
$gridle-gutter-name-pattern : ('gutter','%-','%state') !default;
|
|
53
|
+
$gridle-gutter-left-name-pattern : ('gutter','%-','%state','%-','left') !default;
|
|
54
54
|
$gridle-gutter-right-name-pattern : ('gutter','%-','%state','%-','right') !default;
|
|
55
55
|
$gridle-gutter-top-name-pattern : ('gutter','%-','%state','%-','top') !default;
|
|
56
56
|
$gridle-gutter-bottom-name-pattern : ('gutter','%-','%state','%-','bottom') !default;
|
|
57
57
|
|
|
58
|
-
$gridle-
|
|
58
|
+
$gridle-margin-name-pattern : ('margins','%-','%state') !default;
|
|
59
59
|
$gridle-margin-left-name-pattern : ('margin','%-','%state','%-','left') !default;
|
|
60
60
|
$gridle-margin-right-name-pattern : ('margin','%-','%state','%-','right') !default;
|
|
61
61
|
$gridle-margin-top-name-pattern : ('margin','%-','%state','%-','top') !default;
|
|
@@ -65,6 +65,7 @@
|
|
|
65
65
|
-webkit-box-sizing: border-box;
|
|
66
66
|
-moz-box-sizing: border-box;
|
|
67
67
|
box-sizing: border-box;
|
|
68
|
+
clear:both;
|
|
68
69
|
}
|
|
69
70
|
%gridle-container-debug-common {
|
|
70
71
|
background-color:#f5f5f5;
|
|
@@ -90,9 +91,11 @@
|
|
|
90
91
|
%gridle-grid-common {
|
|
91
92
|
display:inline-block;
|
|
92
93
|
min-height:1px;
|
|
94
|
+
|
|
93
95
|
-webkit-box-sizing: border-box;
|
|
94
96
|
-moz-box-sizing: border-box;
|
|
95
97
|
box-sizing: border-box;
|
|
98
|
+
|
|
96
99
|
}
|
|
97
100
|
%gridle-prefix-debug-common {
|
|
98
101
|
background-color:#dae7e9 !important;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: gridle
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.3.
|
|
4
|
+
version: 1.3.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Olivier Bossel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-05-
|
|
11
|
+
date: 2014-05-15 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|