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
|
/*
*/
.a() {
padding: 1px;
.b() {
padding: 2px;
}
.c() {
.b();
}
.d() {
.a();
}
}
span {
.a(); // 1px
.a .b(); // 2px
.a .c(); // 2px
.a .d(); // 1px
}
/*
Bootstrap style funkyness
*/
@gridColumnWidth: 20;
@gridGutterWidth: 20;
@gridColumns: 12;
#grid {
.input(@gridColumnWidthx, @gridGutterWidthx) {
.spanX (@index) when (@index > 0) {
input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.span(@columns) {
width: ((@gridColumnWidthx) * @columns) + (@gridGutterWidthx * (@columns - 1)) - 10;
}
input,
textarea,
.uneditable-input {
margin-left: 0; // override margin-left from core grid system
}
// generate .spanX
.spanX (@gridColumns);
}
}
#grid > .input (12, 20);
|
