Thème Zen 5 par défaut
[drupal/global/profiles/fonamental.git] / themes / fonamental_theme / sass-extensions / zen-grids / templates / unit-tests / sass / zen-grid-item.scss
1 /**
2 * @file
3 * Test zen-grid-item()
4 */
5
6 @import "zen";
7
8 #test-zen-grid-item {
9 /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
10 $zen-column-count: 12;
11 @include zen-grid-item(6, 4);
12 $zen-column-count: 1;
13
14 /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
15 $zen-column-count: 5;
16 $zen-gutter-width: 10%;
17 $zen-box-sizing: content-box;
18 @include zen-grid-item(3, 3);
19 $zen-column-count: 1;
20 $zen-gutter-width: 20px;
21 $zen-box-sizing: border-box;
22
23 /* Turn off $zen-auto-include-item-base */
24 $zen-auto-include-item-base: false;
25
26 /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
27 $zen-column-count: 5;
28 $zen-gutter-width: 40px;
29 @include zen-grid-item(3, 3);
30 $zen-column-count: 1;
31 $zen-gutter-width: 20px;
32
33 /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
34 $zen-column-count: 5;
35 $zen-gutter-width: 40px;
36 @include zen-grid-item(3, 3, right);
37 $zen-column-count: 1;
38 $zen-gutter-width: 20px;
39
40 /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
41 $zen-column-count: 5;
42 $zen-gutter-width: 40px;
43 $zen-reverse-all-floats: true;
44 @include zen-grid-item(3, 3);
45 $zen-column-count: 1;
46 $zen-gutter-width: 20px;
47 $zen-reverse-all-floats: false;
48
49 /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
50 $zen-column-count: 5;
51 $zen-gutter-width: 40px;
52 $zen-reverse-all-floats: true;
53 @include zen-grid-item(3, 3, right);
54 $zen-column-count: 1;
55 $zen-gutter-width: 20px;
56 $zen-reverse-all-floats: false;
57
58 /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
59 $zen-column-count: 5;
60 $zen-gutter-width: 40px;
61 @include zen-grid-item(3, 2.5);
62 $zen-column-count: 1;
63 $zen-gutter-width: 20px;
64
65 /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
66 $zen-grid-width: 1000px;
67 $zen-column-count: 5;
68 $zen-gutter-width: 40px;
69 @include zen-grid-item(3, 3);
70 $zen-grid-width: 100%;
71 $zen-column-count: 1;
72 $zen-gutter-width: 20px;
73 }