blob: 788a377a73b9097c0bb7616fbea7a70ea7b35590 (
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
67
68
69
70
71
72
73
74
75
|
// ==========================================================================
// Grid styles
// 12 column grid
// ==========================================================================
.j-row {
width: 100%;
margin: 0 auto;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.j-col {
padding: 0.85em;
width: 100%;
float: left;
position: relative;
}
// Small grid (Mobile first)
@media only screen {
// .j-sm-1 {width: 8.33333%;}
// .j-sm-2 {width: 16.66667%;}
// .j-sm-3 {width: 25%;}
// .j-sm-4 {width: 33.33333%;}
.j-sm-5 {width: 41.66667%;}
// .j-sm-6 {width: 50%;}
.j-sm-7 {width: 58.33333%;}
// .j-sm-8 {width: 66.66667%;}
// .j-sm-9 {width: 75%;}
// .j-sm-10 {width: 83.33333%;}
// .j-sm-11 {width: 91.66667%;}
.j-sm-12 {width: 100%;}
}
// Medium grid
// 530px and up
@include minbreakpoint(large-phone) {
// .j-md-1 {width: 8.33333%;}
// .j-md-2 {width: 16.66667%;}
// .j-md-3 {width: 25%;}
.j-md-4 {width: 33.33333%;}
// .j-md-5 {width: 41.66667%;}
.j-md-6 {width: 50%;}
// .j-md-7 {width: 58.33333%;}
.j-md-8 {width: 66.66667%;}
// .j-md-9 {width: 75%;}
// .j-md-10 {width: 83.33333%;}
// .j-md-11 {width: 91.66667%;}
.j-md-12 {width: 100%;}
}
// Large grid
// 782px and up
@include minbreakpoint(tablet) {
// .j-lrg-1 {width: 8.33333%;}
// .j-lrg-2 {width: 16.66667%;}
// .j-lrg-3 {width: 25%;}
.j-lrg-4 {width: 33.33333%;}
.j-lrg-5 {width: 41.66667%;}
.j-lrg-6 {width: 50%;}
.j-lrg-7 {width: 58.33333%;}
.j-lrg-8 {width: 66.66667%;}
// .j-lrg-9 {width: 75%;}
// .j-lrg-10 {width: 83.33333%;}
// .j-lrg-11 {width: 91.66667%;}
.j-lrg-12 {width: 100%;}
}
|