blob: 9a76f97546af997d30d894f89fdf587881aa8f13 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
$gridItemSpace: 15%;
.grid-section {
&:not(:last-of-type) {
padding-bottom: 30px;
}
.grid-items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
%grid-col-base {
flex-shrink: 0;
display: flex;
}
.grid-item {
flex: 1;
display: flex;
flex-direction: column;
}
.grid-item-stretch {
@extend .grid-item;
& *:last-child {
flex: 1;
display: flex;
flex-direction: column;
}
}
.grid-col-1 {
@extend %grid-col-base;
flex-basis: 25%;
&:after {
flex-basis: $gridItemSpace;
content: ' ';
}
}
.grid-col-2 {
@extend %grid-col-base;
flex-basis: 50%;
&:after {
flex-basis: $gridItemSpace / 2;
content: ' ';
}
}
.grid-col-3 {
@extend %grid-col-base;
flex-basis: 75%;
&:after {
flex-basis: $gridItemSpace / 3;
content: ' ';
}
}
.grid-col-4 {
@extend %grid-col-base;
flex-basis: 100%;
&:after {
flex-basis: $gridItemSpace / 4;
content: ' ';
}
}
}
|
