forked from olton/metroui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgrid.less
More file actions
111 lines (99 loc) · 3.07 KB
/
Copy pathgrid.less
File metadata and controls
111 lines (99 loc) · 3.07 KB
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
.spanX(@index){
width: @gridColumnSize * @index + @gridGutterSize * (@index - 1) !important;
}
.offsetX(@index){
margin-left: @gridColumnSize * @index + (@gridGutterSize * (@index));
&:not(:first-child){
margin-left: @gridColumnSize * @index + (@gridGutterSize * (@index + 1));
}
}
.fluid-spanX(@index){
width: @gridColumnSizeFluid * @index + (@gridGutterSizeFluid * (@index - 1)) !important;
}
.fluid-offsetX(@index){
margin-left: @gridColumnSizeFluid * @index + (@gridGutterSizeFluid * (@index));
&:not(:first-child){
margin-left: @gridColumnSizeFluid * @index + (@gridGutterSizeFluid * (@index + 1));
}
}
.span1, .size1 {.spanX(1)}
.span2, .size2 {.spanX(2)}
.span3, .size3 {.spanX(3)}
.span4, .size4 {.spanX(4)}
.span5, .size5 {.spanX(5)}
.span6, .size6 {.spanX(6)}
.span7, .size7 {.spanX(7)}
.span8, .size8 {.spanX(8)}
.span9, .size9 {.spanX(9)}
.span10, .size10 {.spanX(10)}
.span11, .size11 {.spanX(11)}
.span12, .size12 {.spanX(12)}
.offset1 {.offsetX(1) !important;}
.offset2 {.offsetX(2) !important;}
.offset3 {.offsetX(3) !important;}
.offset4 {.offsetX(4) !important;}
.offset5 {.offsetX(5) !important;}
.offset6 {.offsetX(6) !important;}
.offset7 {.offsetX(7) !important;}
.offset8 {.offsetX(8) !important;}
.offset9 {.offsetX(9) !important;}
.offset10 {.offsetX(10) !important;}
.offset11 {.offsetX(11) !important;}
.offset12 {.offsetX(12) !important;}
.grid {
margin-bottom: @gridGutterSize;
.row {
.clearfix;
display: block;
margin-top: @gridGutterSize;
[class*="span"] {
float: left;
min-height: 1px;
margin-left: @gridGutterSize;
&:first-child {
margin-left: 0;
}
}
}
}
.grid {
&.fluid {
width: 100%;
.row {
.span1 {.fluid-spanX(1)}
.span2 {.fluid-spanX(2)}
.span3 {.fluid-spanX(3)}
.span4 {.fluid-spanX(4)}
.span5 {.fluid-spanX(5)}
.span6 {.fluid-spanX(6)}
.span7 {.fluid-spanX(7)}
.span8 {.fluid-spanX(8)}
.span9 {.fluid-spanX(9)}
.span10 {.fluid-spanX(10)}
.span11 {.fluid-spanX(11)}
.span12 {.fluid-spanX(12)}
[class*="span"] {
margin-left: 2.127659%;
&:first-child {
margin-left: 0;
}
}
.offset1 {.fluid-offsetX(1) !important;}
.offset2 {.fluid-offsetX(2) !important;}
.offset3 {.fluid-offsetX(3) !important;}
.offset4 {.fluid-offsetX(4) !important;}
.offset5 {.fluid-offsetX(5) !important;}
.offset6 {.fluid-offsetX(6) !important;}
.offset7 {.fluid-offsetX(7) !important;}
.offset8 {.fluid-offsetX(8) !important;}
.offset9 {.fluid-offsetX(9) !important;}
.offset10 {.fluid-offsetX(10) !important;}
.offset11 {.fluid-offsetX(11) !important;}
.offset12 {.fluid-offsetX(12) !important;}
}
}
}
.grid {
&.compact {
}
}