zen-grids 2.0.0.beta.2 → 2.0.0.beta.3
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/README.md +1 -1
- data/lib/zen-grids.rb +1 -1
- data/{_zen-grids.scss → stylesheets/_zen-grids.scss} +0 -0
- data/{zen-grids → stylesheets/zen-grids}/_background.scss +5 -3
- data/{zen-grids → stylesheets/zen-grids}/_flow.scss +1 -1
- data/{zen-grids → stylesheets/zen-grids}/_functions.scss +2 -2
- data/{zen-grids → stylesheets/zen-grids}/_grids.scss +13 -10
- data/stylesheets/zen-grids/_undo.scss +156 -0
- data/{zen-grids → stylesheets/zen-grids}/_variables.scss +0 -0
- data/{zen-grids → stylesheets/zen-grids}/internal/_functions-compass-polyfill.scss +2 -25
- data/{zen-grids → stylesheets/zen-grids}/internal/_variables-background.scss +0 -0
- data/zen-grids.gemspec +18 -13
- metadata +17 -48
- data/.travis.yml +0 -13
- data/bower.json +0 -27
- data/sache.json +0 -5
- data/tests/Gemfile +0 -11
- data/tests/README.md +0 -16
- data/tests/Rakefile +0 -25
- data/tests/config.rb +0 -22
- data/tests/controls/compass-compatibility.css +0 -112
- data/tests/controls/function-zen-direction-switch.css +0 -16
- data/tests/controls/function-zen-grid-item-width.css +0 -26
- data/tests/controls/function-zen-half-gutter.css +0 -24
- data/tests/controls/function-zen-unit-width.css +0 -22
- data/tests/controls/zen-float.css +0 -16
- data/tests/controls/zen-flow-item-width.css +0 -131
- data/tests/controls/zen-grid-background.css +0 -52
- data/tests/controls/zen-grid-container.css +0 -94
- data/tests/controls/zen-grid-item-base.css +0 -76
- data/tests/controls/zen-grid-item.css +0 -81
- data/tests/controls/zen-new-row.css +0 -16
- data/tests/tests/compass-compatibility.scss +0 -55
- data/tests/tests/function-zen-direction-switch.scss +0 -24
- data/tests/tests/function-zen-grid-item-width.scss +0 -44
- data/tests/tests/function-zen-half-gutter.scss +0 -37
- data/tests/tests/function-zen-unit-width.scss +0 -44
- data/tests/tests/zen-float.scss +0 -26
- data/tests/tests/zen-flow-item-width.scss +0 -85
- data/tests/tests/zen-grid-background.scss +0 -85
- data/tests/tests/zen-grid-container.scss +0 -49
- data/tests/tests/zen-grid-item-base.scss +0 -65
- data/tests/tests/zen-grid-item.scss +0 -101
- data/tests/tests/zen-new-row.scss +0 -26
- data/tests/unit_tests.rb +0 -57
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-half-gutter()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids";
|
|
7
|
-
|
|
8
|
-
#test-zen-half-gutter {
|
|
9
|
-
/* Test zen-half-gutter() with default $zen-gutters: 20px */
|
|
10
|
-
padding-left: zen-half-gutter();
|
|
11
|
-
|
|
12
|
-
/* Test zen-half-gutter() with $zen-gutters: 30px */
|
|
13
|
-
$zen-gutters: 30px !global;
|
|
14
|
-
padding-left: zen-half-gutter();
|
|
15
|
-
|
|
16
|
-
/* Test zen-half-gutter(10em) */
|
|
17
|
-
padding-left: zen-half-gutter(10em);
|
|
18
|
-
|
|
19
|
-
/* Test zen-half-gutter(11em) */
|
|
20
|
-
padding-left: zen-half-gutter(11em);
|
|
21
|
-
|
|
22
|
-
/* Test zen-half-gutter(10px) */
|
|
23
|
-
padding-left: zen-half-gutter(10px);
|
|
24
|
-
|
|
25
|
-
/* Test zen-half-gutter(11px) */
|
|
26
|
-
padding-left: zen-half-gutter(11px);
|
|
27
|
-
|
|
28
|
-
/* Test zen-half-gutter(11px, right) */
|
|
29
|
-
padding-left: zen-half-gutter(11px, right);
|
|
30
|
-
|
|
31
|
-
/* Test zen-half-gutter(11px) with $zen-direction: right */
|
|
32
|
-
$zen-direction: right !global;
|
|
33
|
-
padding-left: zen-half-gutter(11px);
|
|
34
|
-
|
|
35
|
-
/* Test zen-half-gutter(11px, left) with $zen-direction: right */
|
|
36
|
-
padding-left: zen-half-gutter(11px, left);
|
|
37
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-unit-width()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids";
|
|
7
|
-
|
|
8
|
-
#test-zen-unit-width {
|
|
9
|
-
/* Test zen-unit-width() with default $zen-columns: 1 */
|
|
10
|
-
width: zen-unit-width();
|
|
11
|
-
|
|
12
|
-
/* Test zen-unit-width() with $zen-columns: 5 */
|
|
13
|
-
$zen-columns: 5 !global;
|
|
14
|
-
width: zen-unit-width();
|
|
15
|
-
$zen-columns: 1 !global;
|
|
16
|
-
|
|
17
|
-
/* Test zen-unit-width(5) */
|
|
18
|
-
width: zen-unit-width(5);
|
|
19
|
-
|
|
20
|
-
/* Test zen-unit-width() with $zen-grid-width: 100px */
|
|
21
|
-
$zen-grid-width: 100px !global;
|
|
22
|
-
width: zen-unit-width();
|
|
23
|
-
$zen-grid-width: 100% !global;
|
|
24
|
-
|
|
25
|
-
/* Test zen-unit-width(5) with $zen-grid-width: 100px */
|
|
26
|
-
$zen-grid-width: 100px !global;
|
|
27
|
-
width: zen-unit-width(5);
|
|
28
|
-
$zen-grid-width: 100% !global;
|
|
29
|
-
|
|
30
|
-
/* Test zen-unit-width(5, 100px) */
|
|
31
|
-
width: zen-unit-width(5, $grid-width: 100px);
|
|
32
|
-
|
|
33
|
-
/* Test zen-unit-width() with $zen-columns: 3, $zen-gutter-method: margin, and $zen-gutters: 5% */
|
|
34
|
-
$zen-columns: 3 !global;
|
|
35
|
-
$zen-gutter-method: margin !global;
|
|
36
|
-
$zen-gutters: 5% !global;
|
|
37
|
-
width: zen-unit-width();
|
|
38
|
-
$zen-columns: 1 !global;
|
|
39
|
-
$zen-gutter-method: padding !global;
|
|
40
|
-
$zen-gutters: 20px !global;
|
|
41
|
-
|
|
42
|
-
/* Test zen-unit-width(3, 5px, margin, 100px) */
|
|
43
|
-
width: zen-unit-width(3, 5px, margin, 100px);
|
|
44
|
-
}
|
data/tests/tests/zen-float.scss
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-float()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids/flow";
|
|
7
|
-
|
|
8
|
-
#test-zen-float {
|
|
9
|
-
/* Test zen-float() */
|
|
10
|
-
@include zen-float();
|
|
11
|
-
|
|
12
|
-
/* Test zen-float() with $zen-direction: right */
|
|
13
|
-
$zen-direction: right !global;
|
|
14
|
-
@include zen-float();
|
|
15
|
-
$zen-direction: left !global;
|
|
16
|
-
|
|
17
|
-
/* Test zen-float(left) */
|
|
18
|
-
@include zen-float(left);
|
|
19
|
-
|
|
20
|
-
/* Test zen-float(left, $switch-direction: TRUE) */
|
|
21
|
-
@include zen-float(left, $switch-direction: TRUE);
|
|
22
|
-
|
|
23
|
-
/* Test zen-float(left) with: $zen-switch-direction: TRUE; */
|
|
24
|
-
$zen-switch-direction: TRUE !global;
|
|
25
|
-
@include zen-float(left);
|
|
26
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-flow-item-width()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids/flow";
|
|
7
|
-
|
|
8
|
-
#test-zen-flow-item-width {
|
|
9
|
-
// We will use a 5 column grid for all tests.
|
|
10
|
-
$zen-columns: 5 !global;
|
|
11
|
-
|
|
12
|
-
/* Test zen-flow-item-width(1) without setting $parent-column-span */
|
|
13
|
-
@warn "The following test will generate a warning.";
|
|
14
|
-
@include zen-flow-item-width(1);
|
|
15
|
-
|
|
16
|
-
/* Test zen-flow-item-width(1, 4) with 20px gutter */
|
|
17
|
-
@include zen-flow-item-width(1, 4);
|
|
18
|
-
|
|
19
|
-
/* Test zen-flow-item-width(1, 4) with 15px gutter */
|
|
20
|
-
$zen-gutters: 15px !global;
|
|
21
|
-
@include zen-flow-item-width(1, 4);
|
|
22
|
-
$zen-gutters: 20px !global;
|
|
23
|
-
|
|
24
|
-
/* Test zen-flow-item-width(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */
|
|
25
|
-
$zen-grid-width: 1000px !global;
|
|
26
|
-
@include zen-flow-item-width(1);
|
|
27
|
-
$zen-grid-width: 100% !global;
|
|
28
|
-
|
|
29
|
-
/* Test zen-flow-item-width(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */
|
|
30
|
-
$zen-grid-width: 1000px !global;
|
|
31
|
-
@include zen-flow-item-width(1, $alpha-gutter: true, $omega-gutter: false);
|
|
32
|
-
$zen-grid-width: 100% !global;
|
|
33
|
-
|
|
34
|
-
/* Test zen-flow-item-width(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */
|
|
35
|
-
$zen-grid-width: 1000px !global;
|
|
36
|
-
@include zen-flow-item-width(1, $omega-gutter: false);
|
|
37
|
-
$zen-grid-width: 100% !global;
|
|
38
|
-
|
|
39
|
-
/* Test zen-flow-item-width(1, 4) with 15px gutter and $zen-direction: right */
|
|
40
|
-
$zen-gutters: 15px !global;
|
|
41
|
-
$zen-direction: right !global;
|
|
42
|
-
@include zen-flow-item-width(1, 4);
|
|
43
|
-
$zen-gutters: 20px !global;
|
|
44
|
-
$zen-direction: left !global;
|
|
45
|
-
|
|
46
|
-
/* Test zen-flow-item-width(1, 4) with 15px gutter and $alpha-gutter: true */
|
|
47
|
-
$zen-gutters: 15px !global;
|
|
48
|
-
@include zen-flow-item-width(1, 4, $alpha-gutter: true);
|
|
49
|
-
$zen-gutters: 20px !global;
|
|
50
|
-
|
|
51
|
-
/* Test zen-flow-item-width(1, 4) with 15px gutter and $omega-gutter: false */
|
|
52
|
-
$zen-gutters: 15px !global;
|
|
53
|
-
@include zen-flow-item-width(1, 4, $omega-gutter: false);
|
|
54
|
-
$zen-gutters: 20px !global;
|
|
55
|
-
|
|
56
|
-
/* Test zen-flow-item-width(3, 4) with 20px gutter and $alpha-gutter: true */
|
|
57
|
-
@include zen-flow-item-width(3, 4, $alpha-gutter: true);
|
|
58
|
-
|
|
59
|
-
/* Test zen-flow-item-width(3, 4) with 20px gutter and $omega-gutter: false */
|
|
60
|
-
@include zen-flow-item-width(3, 4, $omega-gutter: false);
|
|
61
|
-
|
|
62
|
-
/* Test zen-flow-item-width(1, 4) with 15px gutter, $zen-direction: right and $alpha-gutter: true */
|
|
63
|
-
$zen-gutters: 15px !global;
|
|
64
|
-
$zen-direction: right !global;
|
|
65
|
-
@include zen-flow-item-width(1, 4, $alpha-gutter: true);
|
|
66
|
-
$zen-gutters: 20px !global;
|
|
67
|
-
$zen-direction: left !global;
|
|
68
|
-
|
|
69
|
-
/* Test zen-flow-item-width(1, 4) with $zen-box-sizing: content-box and 10% gutter */
|
|
70
|
-
$zen-gutters: 10% !global;
|
|
71
|
-
$zen-box-sizing: content-box !global;
|
|
72
|
-
@include zen-flow-item-width(1, 4);
|
|
73
|
-
$zen-gutters: 20px !global;
|
|
74
|
-
$zen-box-sizing: border-box !global;
|
|
75
|
-
|
|
76
|
-
/* Test zen-flow-item-width(1, 4) with $zen-box-sizing: universal-border-box */
|
|
77
|
-
$zen-box-sizing: universal-border-box !global;
|
|
78
|
-
@include zen-flow-item-width(1, 4);
|
|
79
|
-
$zen-box-sizing: border-box !global;
|
|
80
|
-
|
|
81
|
-
/* Test zen-flow-item-width(1, 4) with $zen-auto-include-flow-item-base: false */
|
|
82
|
-
$zen-auto-include-flow-item-base: false !global;
|
|
83
|
-
@include zen-flow-item-width(1, 4);
|
|
84
|
-
$zen-auto-include-flow-item-base: true !global;
|
|
85
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-grid-background()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids/background";
|
|
7
|
-
|
|
8
|
-
#test-zen-grid-background {
|
|
9
|
-
/* Test zen-grid-background() with 1 column grid and 20px gutter */
|
|
10
|
-
$zen-grid-numbers: top !global;
|
|
11
|
-
@include zen-grid-background();
|
|
12
|
-
$zen-grid-numbers: both !global;
|
|
13
|
-
|
|
14
|
-
/* Test zen-grid-background() with margin gutter method, 5 column grid and 5% gutter */
|
|
15
|
-
$zen-columns: 5 !global;
|
|
16
|
-
$zen-gutters: 5% !global;
|
|
17
|
-
$zen-gutter-method: margin !global;
|
|
18
|
-
$zen-grid-numbers: top !global;
|
|
19
|
-
@include zen-grid-background();
|
|
20
|
-
$zen-columns: 1 !global;
|
|
21
|
-
$zen-gutters: 20px !global;
|
|
22
|
-
$zen-gutter-method: padding !global;
|
|
23
|
-
$zen-grid-numbers: both !global;
|
|
24
|
-
|
|
25
|
-
// Turn off numbers for all other tests.
|
|
26
|
-
$zen-grid-numbers: none !global;
|
|
27
|
-
|
|
28
|
-
/* Test zen-grid-background() with 12 column grid and 20px gutter */
|
|
29
|
-
$zen-columns: 12 !global;
|
|
30
|
-
@include zen-grid-background();
|
|
31
|
-
$zen-columns: 1 !global;
|
|
32
|
-
|
|
33
|
-
/* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */
|
|
34
|
-
$zen-columns: 5 !global;
|
|
35
|
-
$zen-gutters: 10% !global;
|
|
36
|
-
$zen-grid-color: #000 !global;
|
|
37
|
-
@include zen-grid-background();
|
|
38
|
-
$zen-columns: 1 !global;
|
|
39
|
-
$zen-gutters: 20px !global;
|
|
40
|
-
$zen-grid-color: rgba(#ffdede, 0.8) !global;
|
|
41
|
-
|
|
42
|
-
/* Test zen-grid-background() with 5 column grid and 40px gutter */
|
|
43
|
-
$zen-columns: 5 !global;
|
|
44
|
-
$zen-gutters: 40px !global;
|
|
45
|
-
@include zen-grid-background();
|
|
46
|
-
$zen-columns: 1 !global;
|
|
47
|
-
$zen-gutters: 20px !global;
|
|
48
|
-
|
|
49
|
-
/* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-switch-direction */
|
|
50
|
-
$zen-columns: 5 !global;
|
|
51
|
-
$zen-gutters: 10% !global;
|
|
52
|
-
$zen-switch-direction: true !global;
|
|
53
|
-
@include zen-grid-background();
|
|
54
|
-
$zen-columns: 1 !global;
|
|
55
|
-
$zen-gutters: 20px !global;
|
|
56
|
-
$zen-switch-direction: false !global;
|
|
57
|
-
|
|
58
|
-
/* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-switch-direction */
|
|
59
|
-
$zen-columns: 5 !global;
|
|
60
|
-
$zen-gutters: 40px !global;
|
|
61
|
-
$zen-switch-direction: true !global;
|
|
62
|
-
@include zen-grid-background();
|
|
63
|
-
$zen-columns: 1 !global;
|
|
64
|
-
$zen-gutters: 20px !global;
|
|
65
|
-
$zen-switch-direction: false !global;
|
|
66
|
-
|
|
67
|
-
/* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
|
|
68
|
-
$zen-grid-width: 1000px !global;
|
|
69
|
-
$zen-columns: 5 !global;
|
|
70
|
-
$zen-gutters: 40px !global;
|
|
71
|
-
@include zen-grid-background();
|
|
72
|
-
$zen-grid-width: 100% !global;
|
|
73
|
-
$zen-columns: 1 !global;
|
|
74
|
-
$zen-gutters: 20px !global;
|
|
75
|
-
|
|
76
|
-
/* Test zen-grid-background() with all 24 grid numbers */
|
|
77
|
-
$zen-columns: 24 !global;
|
|
78
|
-
@include zen-grid-background();
|
|
79
|
-
$zen-columns: 1 !global;
|
|
80
|
-
|
|
81
|
-
/* Test zen-grid-background() with $display-zen-grid-background: false */
|
|
82
|
-
$display-zen-grid-background: false !global;
|
|
83
|
-
@include zen-grid-background();
|
|
84
|
-
$display-zen-grid-background: true !global;
|
|
85
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-grid-container()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids";
|
|
7
|
-
|
|
8
|
-
#test-zen-grid-container {
|
|
9
|
-
/* Test zen-grid-container() */
|
|
10
|
-
@include zen-grid-container();
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
#test-zen-grid-container-2 {
|
|
14
|
-
/* Test zen-grid-container() with IE 7 support */
|
|
15
|
-
$browser-minimum-versions: (ie: "7") !global;
|
|
16
|
-
@include zen-grid-container();
|
|
17
|
-
$browser-minimum-versions: (ie: null) !global;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
#test-zen-grid-container-3 {
|
|
21
|
-
/* Test zen-grid-container() with IE 6 support */
|
|
22
|
-
$browser-minimum-versions: (ie: "6") !global;
|
|
23
|
-
@include zen-grid-container();
|
|
24
|
-
$browser-minimum-versions: (ie: null) !global;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
#test-zen-grid-container-4 {
|
|
28
|
-
/* Test zen-grid-container() with $context: grid-item */
|
|
29
|
-
@include zen-grid-container(grid-item);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
#test-zen-grid-container-5 {
|
|
33
|
-
/* Test zen-grid-container() with $context: flow and $gutters: 21px */
|
|
34
|
-
@include zen-grid-container(flow, $gutters: 21px);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
#test-zen-grid-container-6 {
|
|
38
|
-
/* Test zen-grid-container() with $context: flow and $gutters: 21px and $zen-switch-direction: true */
|
|
39
|
-
$zen-switch-direction: true !global;
|
|
40
|
-
@include zen-grid-container(flow, $gutters: 21px);
|
|
41
|
-
$zen-switch-direction: false !global;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
#test-zen-grid-container-7 {
|
|
45
|
-
/* Test zen-grid-container() with $zen-gutter-method: margin */
|
|
46
|
-
$zen-gutter-method: margin !global;
|
|
47
|
-
@include zen-grid-container();
|
|
48
|
-
$zen-gutter-method: padding !global;
|
|
49
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-grid-item-base()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids";
|
|
7
|
-
|
|
8
|
-
#test-zen-grid-item-base {
|
|
9
|
-
/* Test zen-grid-item-base() */
|
|
10
|
-
@include zen-grid-item-base();
|
|
11
|
-
|
|
12
|
-
/* Test zen-grid-item-base() with $zen-box-sizing: content-box */
|
|
13
|
-
$zen-box-sizing: content-box !global;
|
|
14
|
-
@include zen-grid-item-base();
|
|
15
|
-
$zen-box-sizing: border-box !global;
|
|
16
|
-
|
|
17
|
-
/* Test zen-grid-item-base() with $zen-box-sizing: universal-border-box */
|
|
18
|
-
$zen-box-sizing: universal-border-box !global;
|
|
19
|
-
@include zen-grid-item-base();
|
|
20
|
-
$zen-box-sizing: border-box !global;
|
|
21
|
-
|
|
22
|
-
/* Test zen-grid-item-base() with IE 7 support */
|
|
23
|
-
$browser-minimum-versions: (ie: "7") !global;
|
|
24
|
-
@warn "The following test will generate a warning.";
|
|
25
|
-
@include zen-grid-item-base();
|
|
26
|
-
$browser-minimum-versions: (ie: null) !global;
|
|
27
|
-
|
|
28
|
-
/* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and IE 7 support */
|
|
29
|
-
$box-sizing-polyfill-path: "/boxsizing.htc" !global;
|
|
30
|
-
$browser-minimum-versions: (ie: "7") !global;
|
|
31
|
-
@include zen-grid-item-base();
|
|
32
|
-
$box-sizing-polyfill-path: "" !global;
|
|
33
|
-
$browser-minimum-versions: (ie: null) !global;
|
|
34
|
-
|
|
35
|
-
/* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and IE 6 support */
|
|
36
|
-
$box-sizing-polyfill-path: "/boxsizing.htc" !global;
|
|
37
|
-
$browser-minimum-versions: (ie: "6") !global;
|
|
38
|
-
@include zen-grid-item-base();
|
|
39
|
-
$box-sizing-polyfill-path: "" !global;
|
|
40
|
-
$browser-minimum-versions: (ie: null) !global;
|
|
41
|
-
|
|
42
|
-
/* Test zen-grid-item-base() with $zen-gutters: 15px */
|
|
43
|
-
$zen-gutters: 15px !global;
|
|
44
|
-
@include zen-grid-item-base();
|
|
45
|
-
$zen-gutters: 20px !global;
|
|
46
|
-
|
|
47
|
-
/* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-direction: right */
|
|
48
|
-
$zen-gutters: 15px !global;
|
|
49
|
-
$zen-direction: right !global;
|
|
50
|
-
@include zen-grid-item-base();
|
|
51
|
-
$zen-gutters: 20px !global;
|
|
52
|
-
$zen-direction: left !global;
|
|
53
|
-
|
|
54
|
-
/* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-switch-direction: true */
|
|
55
|
-
$zen-gutters: 15px !global;
|
|
56
|
-
$zen-switch-direction: true !global;
|
|
57
|
-
@include zen-grid-item-base();
|
|
58
|
-
$zen-gutters: 20px !global;
|
|
59
|
-
$zen-switch-direction: false !global;
|
|
60
|
-
|
|
61
|
-
/* Test zen-grid-item-base() with $zen-gutter-method: margin */
|
|
62
|
-
$zen-gutter-method: margin !global;
|
|
63
|
-
@include zen-grid-item-base();
|
|
64
|
-
$zen-gutter-method: padding !global;
|
|
65
|
-
}
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Test zen-grid-item()
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
@import "zen-grids";
|
|
7
|
-
|
|
8
|
-
#test-zen-grid-item {
|
|
9
|
-
/* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
|
|
10
|
-
$zen-columns: 12 !global;
|
|
11
|
-
@include zen-grid-item(6, 4);
|
|
12
|
-
$zen-columns: 1 !global;
|
|
13
|
-
|
|
14
|
-
/* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter and $zen-box-sizing: universal-border-box */
|
|
15
|
-
$zen-columns: 12 !global;
|
|
16
|
-
$zen-box-sizing: universal-border-box !global;
|
|
17
|
-
@include zen-grid-item(6, 4);
|
|
18
|
-
$zen-columns: 1 !global;
|
|
19
|
-
$zen-box-sizing: border-box !global;
|
|
20
|
-
|
|
21
|
-
/* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
|
|
22
|
-
$zen-columns: 5 !global;
|
|
23
|
-
$zen-gutters: 10% !global;
|
|
24
|
-
$zen-box-sizing: content-box !global;
|
|
25
|
-
@include zen-grid-item(3, 3);
|
|
26
|
-
$zen-columns: 1 !global;
|
|
27
|
-
$zen-gutters: 20px !global;
|
|
28
|
-
$zen-box-sizing: border-box !global;
|
|
29
|
-
|
|
30
|
-
/* Turn off $zen-auto-include-grid-item-base */
|
|
31
|
-
$zen-auto-include-grid-item-base: false !global;
|
|
32
|
-
|
|
33
|
-
/* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
|
|
34
|
-
$zen-columns: 5 !global;
|
|
35
|
-
$zen-gutters: 40px !global;
|
|
36
|
-
@include zen-grid-item(3, 3);
|
|
37
|
-
$zen-columns: 1 !global;
|
|
38
|
-
$zen-gutters: 20px !global;
|
|
39
|
-
|
|
40
|
-
/* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
|
|
41
|
-
$zen-columns: 5 !global;
|
|
42
|
-
$zen-gutters: 40px !global;
|
|
43
|
-
@include zen-grid-item(3, 3, right);
|
|
44
|
-
$zen-columns: 1 !global;
|
|
45
|
-
$zen-gutters: 20px !global;
|
|
46
|
-
|
|
47
|
-
/* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-switch-direction */
|
|
48
|
-
$zen-columns: 5 !global;
|
|
49
|
-
$zen-gutters: 40px !global;
|
|
50
|
-
$zen-switch-direction: true !global;
|
|
51
|
-
@include zen-grid-item(3, 3);
|
|
52
|
-
$zen-columns: 1 !global;
|
|
53
|
-
$zen-gutters: 20px !global;
|
|
54
|
-
$zen-switch-direction: false !global;
|
|
55
|
-
|
|
56
|
-
/* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-switch-direction */
|
|
57
|
-
$zen-columns: 5 !global;
|
|
58
|
-
$zen-gutters: 40px !global;
|
|
59
|
-
$zen-switch-direction: true !global;
|
|
60
|
-
@include zen-grid-item(3, 3, right);
|
|
61
|
-
$zen-columns: 1 !global;
|
|
62
|
-
$zen-gutters: 20px !global;
|
|
63
|
-
$zen-switch-direction: false !global;
|
|
64
|
-
|
|
65
|
-
/* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
|
|
66
|
-
$zen-columns: 5 !global;
|
|
67
|
-
$zen-gutters: 40px !global;
|
|
68
|
-
@include zen-grid-item(3, 2.5);
|
|
69
|
-
$zen-columns: 1 !global;
|
|
70
|
-
$zen-gutters: 20px !global;
|
|
71
|
-
|
|
72
|
-
/* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
|
|
73
|
-
$zen-grid-width: 1000px !global;
|
|
74
|
-
$zen-columns: 5 !global;
|
|
75
|
-
$zen-gutters: 40px !global;
|
|
76
|
-
@include zen-grid-item(3, 3);
|
|
77
|
-
$zen-grid-width: 100% !global;
|
|
78
|
-
$zen-columns: 1 !global;
|
|
79
|
-
$zen-gutters: 20px !global;
|
|
80
|
-
|
|
81
|
-
/* Test zen-grid-item(3, 3) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
|
|
82
|
-
$zen-gutter-method: margin !global;
|
|
83
|
-
$zen-columns: 5 !global;
|
|
84
|
-
$zen-gutters: 5% !global;
|
|
85
|
-
@include zen-grid-item(3, 3);
|
|
86
|
-
$zen-gutter-method: padding !global;
|
|
87
|
-
$zen-columns: 1 !global;
|
|
88
|
-
$zen-gutters: 20px !global;
|
|
89
|
-
|
|
90
|
-
/* Test zen-grid-item(3, 2.5) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
|
|
91
|
-
$zen-gutter-method: margin !global;
|
|
92
|
-
$zen-columns: 5 !global;
|
|
93
|
-
$zen-gutters: 5% !global;
|
|
94
|
-
@include zen-grid-item(3, 2.5);
|
|
95
|
-
$zen-gutter-method: padding !global;
|
|
96
|
-
$zen-columns: 1 !global;
|
|
97
|
-
$zen-gutters: 20px !global;
|
|
98
|
-
|
|
99
|
-
/* Test zen-grid-item(1, 1) with $gutters: 10px and $zen-auto-include-grid-item-base: false */
|
|
100
|
-
@include zen-grid-item(1, 1, $gutters: 10px);
|
|
101
|
-
}
|