kube-rails 0.0.10 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/lib/kube/rails/version.rb +1 -1
  3. data/vendor/kube/blocks.less +51 -14
  4. data/vendor/kube/buttons.less +138 -166
  5. data/vendor/kube/forms.less +100 -149
  6. data/vendor/kube/grid.less +122 -75
  7. data/vendor/kube/helpers.less +58 -56
  8. data/vendor/kube/kube.less +10 -24
  9. data/vendor/kube/mixins.less +130 -85
  10. data/vendor/kube/navigation.less +244 -0
  11. data/vendor/kube/{reset.less → normalize.less} +24 -14
  12. data/vendor/kube/prettyprint.less +69 -0
  13. data/vendor/kube/tables.less +24 -49
  14. data/vendor/kube/typography.less +324 -0
  15. data/vendor/kube/variables.less +42 -51
  16. metadata +8 -19
  17. data/vendor/kube/code.less +0 -8
  18. data/vendor/kube/colors.less +0 -52
  19. data/vendor/kube/images.less +0 -24
  20. data/vendor/kube/labels.less +0 -69
  21. data/vendor/kube/lists.less +0 -29
  22. data/vendor/kube/master.less +0 -234
  23. data/vendor/kube/messages.less +0 -34
  24. data/vendor/kube/navs.less +0 -338
  25. data/vendor/kube/responsive-blocks.less +0 -42
  26. data/vendor/kube/responsive-forms.less +0 -23
  27. data/vendor/kube/responsive-grid.less +0 -80
  28. data/vendor/kube/responsive-media.less +0 -31
  29. data/vendor/kube/responsive-navs.less +0 -50
  30. data/vendor/kube/responsive-utils.less +0 -22
  31. data/vendor/kube/typo.less +0 -257
data/vendor/kube/forms.less CHANGED
@@ -1,63 +1,55 @@
1
1
  /* =Forms
2
2
  -----------------------------------------------------------------------------*/
3
- @fieldsBottom: 1.65em;
3
+ .forms {
4
+ & label {
5
+ display: block;
6
+ margin-bottom: @fieldsBottom;
7
+ }
4
8
 
5
- .forms label {
6
- display: block;
7
- margin-bottom: @fieldsBottom;
8
- }
9
- .forms input[type="text"],
10
- .forms input[type="password"],
11
- .forms input[type="email"],
12
- .forms input[type="url"],
13
- .forms input[type="phone"],
14
- .forms input[type="tel"],
15
- .forms input[type="number"],
16
- .forms input[type="datetime"],
17
- .forms input[type="date"],
18
- .forms input[type="search"],
19
- .forms input[type="range"],
20
- .forms input[type="file"],
21
- .forms input[type="datetime-local"],
22
- .forms textarea,
23
- .forms select,
24
- .forms button {
25
- display: block;
26
- }
27
- .forms-inline input[type="text"],
28
- .forms-inline input[type="password"],
29
- .forms-inline input[type="email"],
30
- .forms-inline input[type="url"],
31
- .forms-inline input[type="phone"],
32
- .forms-inline input[type="tel"],
33
- .forms-inline input[type="number"],
34
- .forms-inline input[type="datetime"],
35
- .forms-inline input[type="date"],
36
- .forms-inline input[type="search"],
37
- .forms-inline input[type="range"],
38
- .forms-inline input[type="file"],
39
- .forms-inline input[type="datetime-local"],
40
- .forms-inline textarea,
41
- .forms-inline select,
42
- .forms-inline button,
43
- .forms-inline-list input[type="text"],
44
- .forms-inline-list input[type="password"],
45
- .forms-inline-list input[type="email"],
46
- .forms-inline-list input[type="url"],
47
- .forms-inline-list input[type="phone"],
48
- .forms-inline-list input[type="tel"],
49
- .forms-inline-list input[type="number"],
50
- .forms-inline-list input[type="datetime"],
51
- .forms-inline-list input[type="date"],
52
- .forms-inline-list input[type="search"],
53
- .forms-inline-list input[type="range"],
54
- .forms-inline-list input[type="file"],
55
- .forms-inline-list input[type="datetime-local"],
56
- .forms-inline-list textarea,
57
- .forms-inline-list select,
58
- .forms-inline-list button {
59
- display: inline-block;
9
+ & fieldset {
10
+ padding-bottom: .5em;
11
+ border-radius: 4px;
12
+ }
13
+
14
+ & input[type="text"],
15
+ & input[type="password"],
16
+ & input[type="email"],
17
+ & input[type="url"],
18
+ & input[type="phone"],
19
+ & input[type="tel"],
20
+ & input[type="number"],
21
+ & input[type="datetime"],
22
+ & input[type="date"],
23
+ & input[type="search"],
24
+ & input[type="range"],
25
+ & input[type="file"],
26
+ & input[type="datetime-local"],
27
+ & textarea,
28
+ & select {
29
+ display: block;
30
+ }
31
+ }
32
+ .forms-inline,
33
+ .forms-inline-list {
34
+ & input[type="text"],
35
+ & input[type="password"],
36
+ & input[type="email"],
37
+ & input[type="url"],
38
+ & input[type="phone"],
39
+ & input[type="tel"],
40
+ & input[type="number"],
41
+ & input[type="datetime"],
42
+ & input[type="date"],
43
+ & input[type="search"],
44
+ & input[type="range"],
45
+ & input[type="file"],
46
+ & input[type="datetime-local"],
47
+ & textarea,
48
+ & select {
49
+ display: inline-block;
50
+ }
60
51
  }
52
+
61
53
  .forms-list,
62
54
  .forms-inline-list {
63
55
  margin: 0;
@@ -79,68 +71,10 @@
79
71
  }
80
72
  .forms-desc {
81
73
  margin-top: 4px;
82
- color: @colorGrayLight;
74
+ color: rgba(0, 0, 0, .4);
83
75
  font-size: @smallFontSize;
84
76
  line-height: 1.4em;
85
77
  }
86
- .forms fieldset {
87
- padding-bottom: .5em;
88
- border-radius: .5em;
89
- }
90
- fieldset.forms-row {
91
- padding: 0;
92
- border: none;
93
- margin-bottom: 0;
94
- }
95
- .forms-columnar {
96
- .clearfixing();
97
- }
98
- .forms-columnar input[type="range"],
99
- .forms-columnar input[type="file"],
100
- .forms-columnar select[multiple="multiple"] {
101
- display: inline-block;
102
- }
103
- .forms-columnar p {
104
- position: relative;
105
- padding-left: @columnarWidth + @columnarMargin;
106
- }
107
- .forms-columnar label {
108
- float: left;
109
- width: @columnarWidth;
110
- text-align: right;
111
- top: 0;
112
- left: 0;
113
- position: absolute;
114
- }
115
- .forms-columnar .forms-list,
116
- .forms-columnar .forms-inline-list {
117
- margin-left: @columnarWidth + @columnarMargin;
118
- }
119
- .forms-columnar .forms-list label,
120
- .forms-columnar .forms-inline-list label {
121
- position: static;
122
- float: none;
123
- width: auto;
124
- text-align: left;
125
- margin-right: 0;
126
- }
127
- .forms-columnar .forms-inline-list label {
128
- margin-right: @fieldsBottom;
129
- }
130
- .forms-push {
131
- position: relative;
132
- padding-left: @columnarWidth + @columnarMargin;
133
- }
134
- .forms-section {
135
- font-weight: bold;
136
- border-bottom: 1px solid #eee;
137
- padding: 0 0 10px 0;
138
- margin-bottom: 1em;
139
- line-height: 1;
140
- }
141
- .forms-columnar .forms-section {
142
- padding-left: @columnarWidth + @columnarMargin;
143
- }
144
78
 
145
79
 
146
80
  input[type="radio"],
@@ -148,7 +82,6 @@ input[type="checkbox"] {
148
82
  position: relative;
149
83
  top: -1px;
150
84
  }
151
-
152
85
  input[type="text"],
153
86
  input[type="password"],
154
87
  input[type="email"],
@@ -160,20 +93,7 @@ input[type="datetime"],
160
93
  input[type="date"],
161
94
  input[type="search"],
162
95
  input[type="datetime-local"],
163
- textarea,
164
- select[multiple="multiple"] {
165
- position: relative;
166
- z-index: 2;
167
- font-family: @inputFontFamily;
168
- border: 1px solid #ccc;
169
- margin: 0;
170
- padding: 3px 2px;
171
- background-color: white;
172
- color: @colorBody;
173
- font-size: 1em;
174
- line-height: 1;
175
- border-radius: 1px;
176
- box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
96
+ textarea {
177
97
  .transition(border ease .5s);
178
98
  }
179
99
  input[type="range"] {
@@ -187,10 +107,9 @@ select {
187
107
  margin-bottom: 0 !important;
188
108
  }
189
109
 
190
- /* Errors and Success */
110
+ /* States */
191
111
  .error,
192
112
  .success {
193
- margin-left: 5px;
194
113
  font-weight: normal;
195
114
  font-size: @smallFontSize;
196
115
  }
@@ -198,15 +117,16 @@ input.input-error,
198
117
  textarea.input-error,
199
118
  select.input-error,
200
119
  .input-error {
201
- border-color: #da3e5a;
202
- box-shadow: 0 0 0 2px rgba(218, 62, 90, .3),0 1px 2px rgba(0, 0, 0, .2) inset;
120
+ border-color: @colorRed;
121
+ box-shadow: 0 0 0 2px rgba(red(@colorRed), green(@colorRed), blue(@colorRed), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
203
122
  }
204
123
  input.input-success,
205
124
  textarea.input-success,
206
125
  select.input-success,
207
126
  .input-success {
208
- border-color: #18a011 ;
209
- box-shadow: 0 0 0 2px rgba(24, 160, 17, .3),0 1px 2px rgba(0, 0, 0, .2) inset;
127
+ border-color: @colorGreen;
128
+ box-shadow: 0 0 0 2px rgba(red(@colorGreen), green(@colorGreen), blue(@colorGreen), .3),0 1px 2px rgba(0, 0, 0, .2) inset;
129
+
210
130
  }
211
131
  input.input-gray,
212
132
  textarea.input-gray,
@@ -230,26 +150,57 @@ input[type="search"] {
230
150
  margin-bottom: 0;
231
151
  border-radius: 15px;
232
152
  }
233
- .input-append,
234
- .input-prepend {
235
- display: inline-block;
153
+
154
+ /* Append & Prepend */
155
+ .input-groups {
156
+ display: table !important;
157
+ }
158
+ .input-groups input {
159
+ width: 100%;
160
+ }
161
+ .input-groups input,
162
+ .input-groups .input-append,
163
+ .input-groups .input-prepend,
164
+ .input-groups .btn-append {
165
+ display: table-cell !important;
166
+ }
167
+ .input-groups .btn-append,
168
+ .input-groups .input-append,
169
+ .input-groups .input-prepend {
170
+ width: 1%;
171
+ vertical-align: middle;
172
+ }
173
+ .input-groups .input-append,
174
+ .input-groups .input-prepend {
236
175
  background-color: #eee;
237
- height: 23px;
238
176
  border: 1px solid #ccc;
239
177
  margin: 0;
240
- padding: 1px 8px;
241
- color: #333;
178
+ padding: 0;
179
+ color: @colorBody;
180
+ line-height: 1;
242
181
  font-size: 1em;
243
- line-height: 23px;
182
+ white-space: nowrap;
244
183
  }
245
- .input-prepend {
246
- margin-right: -1px;
184
+ .input-groups .input-prepend {
185
+ border-right: none;
247
186
  }
248
- .input-append {
187
+ .input-groups .input-append {
249
188
  position: relative;
250
189
  z-index: 1;
251
- margin-left: -1px;
190
+ border-left: none;
252
191
  }
192
+ .input-groups .btn-append .btn {
193
+ display: block;
194
+ height: auto;
195
+ border-radius: 0 4px 4px 0;
196
+ }
197
+
198
+ /* =Mobile (Portrait)
199
+ -----------------------------------------------------------------------------*/
200
+ @media only screen and (max-width: 767px) {
201
+
202
+ .forms-list label {
203
+ display: inline-block;
204
+ }
253
205
 
254
- /* Placeholder */
255
- .placeholder(@colorGrayLight);
206
+ }
data/vendor/kube/grid.less CHANGED
@@ -3,19 +3,14 @@
3
3
  .units-container,
4
4
  .units-row-end,
5
5
  .units-row {
6
- .clearfixing;
6
+ .clearfix;
7
7
  }
8
8
  .units-container { /* it's the trick to not collapse padding-top in the child element */
9
9
  padding-top: 1px;
10
10
  margin-top: -1px;
11
11
  }
12
- .units-container,
13
- .units-row-end,
14
- .units-row {
15
- .box-sizing(border-box);
16
- }
17
12
  .units-row {
18
- margin-bottom: 1.5em;
13
+ margin-bottom: @baseLine / @em;
19
14
  }
20
15
  .units-row-end {
21
16
  margin-bottom: 0;
@@ -26,9 +21,11 @@
26
21
  .width-75, .unit-75 { width: 75%; }
27
22
  .width-70, .unit-70 { width: 70%; }
28
23
  .width-66, .unit-66 { width: 66.6%; }
24
+ .width-65, .unit-65 { width: 65%; }
29
25
  .width-60, .unit-60 { width: 60%; }
30
26
  .width-50, .unit-50 { width: 50%; }
31
27
  .width-40, .unit-40 { width: 40%; }
28
+ .width-35, .unit-35 { width: 35%; }
32
29
  .width-33, .unit-33 { width: 33.3%; }
33
30
  .width-30, .unit-30 { width: 30%; }
34
31
  .width-25, .unit-25 { width: 25%; }
@@ -41,51 +38,15 @@ textarea.unit-100 { width: 98.8%; }
41
38
  select.width-100,
42
39
  select.unit-100 { width: 99.4%; }
43
40
 
44
- .width-100,
45
- .width-80,
46
- .width-75,
47
- .width-70,
48
- .width-66,
49
- .width-60,
50
- .width-50,
51
- .width-40,
52
- .width-33,
53
- .width-30,
54
- .width-25,
55
- .width-20,
56
- .units-row .unit-100,
57
- .units-row .unit-80,
58
- .units-row .unit-75,
59
- .units-row .unit-70,
60
- .units-row .unit-66,
61
- .units-row .unit-60,
62
- .units-row .unit-50,
63
- .units-row .unit-40,
64
- .units-row .unit-33,
65
- .units-row .unit-30,
66
- .units-row .unit-25,
67
- .units-row .unit-20,
68
- .units-row-end .unit-100,
69
- .units-row-end .unit-80,
70
- .units-row-end .unit-75,
71
- .units-row-end .unit-70,
72
- .units-row-end .unit-66,
73
- .units-row-end .unit-60,
74
- .units-row-end .unit-50,
75
- .units-row-end .unit-40,
76
- .units-row-end .unit-33,
77
- .units-row-end .unit-30,
78
- .units-row-end .unit-25,
79
- .units-row-end .unit-20 {
80
- .box-sizing(border-box);
81
- }
82
41
  .units-row .unit-80,
83
42
  .units-row .unit-75,
84
43
  .units-row .unit-70,
85
44
  .units-row .unit-66,
45
+ .units-row .unit-65,
86
46
  .units-row .unit-60,
87
47
  .units-row .unit-50,
88
48
  .units-row .unit-40,
49
+ .units-row .unit-35,
89
50
  .units-row .unit-33,
90
51
  .units-row .unit-30,
91
52
  .units-row .unit-25,
@@ -95,40 +56,20 @@ select.unit-100 { width: 99.4%; }
95
56
  .units-row-end .unit-75,
96
57
  .units-row-end .unit-70,
97
58
  .units-row-end .unit-66,
59
+ .units-row-end .unit-65,
98
60
  .units-row-end .unit-60,
99
61
  .units-row-end .unit-50,
100
62
  .units-row-end .unit-40,
63
+ .units-row-end .unit-35,
101
64
  .units-row-end .unit-33,
102
65
  .units-row-end .unit-30,
103
66
  .units-row-end .unit-25,
104
67
  .units-row-end .unit-20 {
105
68
  float: left;
106
69
  margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
107
- }
108
- .units-row .unit-80:first-child,
109
- .units-row .unit-75:first-child,
110
- .units-row .unit-70:first-child,
111
- .units-row .unit-66:first-child,
112
- .units-row .unit-60:first-child,
113
- .units-row .unit-50:first-child,
114
- .units-row .unit-40:first-child,
115
- .units-row .unit-33:first-child,
116
- .units-row .unit-30:first-child,
117
- .units-row .unit-25:first-child,
118
- .units-row .unit-20:first-child,
119
- .units-row-end .unit-100:first-child,
120
- .units-row-end .unit-80:first-child,
121
- .units-row-end .unit-75:first-child,
122
- .units-row-end .unit-70:first-child,
123
- .units-row-end .unit-66:first-child,
124
- .units-row-end .unit-60:first-child,
125
- .units-row-end .unit-50:first-child,
126
- .units-row-end .unit-40:first-child,
127
- .units-row-end .unit-33:first-child,
128
- .units-row-end .unit-30:first-child,
129
- .units-row-end .unit-25:first-child,
130
- .units-row-end .unit-20:first-child {
131
- margin-left: 0;
70
+ &:first-child {
71
+ margin-left: 0;
72
+ }
132
73
  }
133
74
  .units-row .unit-80,
134
75
  .units-row-end .unit-80 { .columns(4, 5); }
@@ -138,16 +79,20 @@ select.unit-100 { width: 99.4%; }
138
79
  .units-row-end .unit-70 { .columns(7, 10); }
139
80
  .units-row .unit-66,
140
81
  .units-row-end .unit-66 { .columns(2, 3); }
82
+ .units-row .unit-65,
83
+ .units-row-end .unit-65 { .columns(2, 3); }
141
84
  .units-row .unit-60,
142
85
  .units-row-end .unit-60 { .columns(3, 5); }
143
86
  .units-row .unit-50,
144
87
  .units-row-end .unit-50 { .column(2); }
145
88
  .units-row .unit-40,
146
89
  .units-row-end .unit-40 { .columns(2, 5); }
147
- .units-row .unit-30,
148
- .units-row-end .unit-30 { .columns(3, 10); }
90
+ .units-row .unit-35,
91
+ .units-row-end .unit-35 { .column(3); }
149
92
  .units-row .unit-33,
150
93
  .units-row-end .unit-33 { .column(3); }
94
+ .units-row .unit-30,
95
+ .units-row-end .unit-30 { .columns(3, 10); }
151
96
  .units-row .unit-25,
152
97
  .units-row-end .unit-25 { .column(4); }
153
98
  .units-row .unit-20,
@@ -157,9 +102,11 @@ select.unit-100 { width: 99.4%; }
157
102
  .unit-push-75,
158
103
  .unit-push-70,
159
104
  .unit-push-66,
105
+ .unit-push-65,
160
106
  .unit-push-60,
161
107
  .unit-push-50,
162
108
  .unit-push-40,
109
+ .unit-push-35,
163
110
  .unit-push-33,
164
111
  .unit-push-30,
165
112
  .unit-push-25,
@@ -171,14 +118,17 @@ select.unit-100 { width: 99.4%; }
171
118
  .unit-push-75 { .columns-push(3, 4); }
172
119
  .unit-push-70 { .columns-push(7, 10); }
173
120
  .unit-push-66 { .columns-push(2, 3); }
121
+ .unit-push-65 { .columns-push(2, 3); }
174
122
  .unit-push-60 { .columns-push(3, 5); }
175
123
  .unit-push-50 { .column-push(2); }
176
124
  .unit-push-40 { .columns-push(2, 5); }
125
+ .unit-push-35 { .column-push(3); }
177
126
  .unit-push-33 { .column-push(3); }
178
127
  .unit-push-25 { .column-push(4); }
179
128
  .unit-push-20 { .column-push(5); }
180
129
 
181
- .unit-push-right {
130
+ .units-row .unit-push-right,
131
+ .units-row-end .unit-push-right {
182
132
  float: right;
183
133
  }
184
134
 
@@ -189,30 +139,34 @@ select.unit-100 { width: 99.4%; }
189
139
  }
190
140
 
191
141
  .unit-padding {
192
- padding: @baseLine/@em;
142
+ padding: @baseLine / @em;
193
143
  }
194
144
  .units-padding .unit-100,
195
145
  .units-padding .unit-80,
196
146
  .units-padding .unit-75,
197
147
  .units-padding .unit-70,
198
148
  .units-padding .unit-66,
149
+ .units-padding .unit-65,
199
150
  .units-padding .unit-60,
200
151
  .units-padding .unit-50,
201
152
  .units-padding .unit-40,
153
+ .units-padding .unit-35,
202
154
  .units-padding .unit-33,
203
155
  .units-padding .unit-30,
204
156
  .units-padding .unit-25,
205
157
  .units-padding .unit-20 {
206
- padding: @baseLine/@em;
158
+ padding: @baseLine / @em;
207
159
  }
208
160
 
209
161
  .units-split .unit-80,
210
162
  .units-split .unit-75,
211
163
  .units-split .unit-70,
212
164
  .units-split .unit-66,
165
+ .units-split .unit-65,
213
166
  .units-split .unit-60,
214
167
  .units-split .unit-50,
215
168
  .units-split .unit-40,
169
+ .units-split .unit-35,
216
170
  .units-split .unit-33,
217
171
  .units-split .unit-30,
218
172
  .units-split .unit-25,
@@ -223,11 +177,104 @@ select.unit-100 { width: 99.4%; }
223
177
  .units-split .unit-75 { width: 75%; }
224
178
  .units-split .unit-70 { width: 70%; }
225
179
  .units-split .unit-66 { width: 66.6%; }
180
+ .units-split .unit-65 { width: 65%; }
226
181
  .units-split .unit-60 { width: 60%; }
227
182
  .units-split .unit-50 { width: 50%; }
228
183
  .units-split .unit-40 { width: 40%; }
184
+ .units-split .unit-35 { width: 35%; }
229
185
  .units-split .unit-33 { width: 33.3%; }
230
186
  .units-split .unit-30 { width: 30%; }
231
187
  .units-split .unit-25 { width: 25%; }
232
188
  .units-split .unit-20 { width: 20%; }
233
189
 
190
+
191
+ /* =Responsive
192
+ -----------------------------------------------------------------------------*/
193
+ @media only screen and (max-width: 767px) {
194
+
195
+ .units-row .unit-80,
196
+ .units-row .unit-75,
197
+ .units-row .unit-70,
198
+ .units-row .unit-66,
199
+ .units-row .unit-65,
200
+ .units-row .unit-60,
201
+ .units-row .unit-50,
202
+ .units-row .unit-40,
203
+ .units-row .unit-35,
204
+ .units-row .unit-33,
205
+ .units-row .unit-30,
206
+ .units-row .unit-25,
207
+ .units-row .unit-20,
208
+ .units-row-end .unit-80,
209
+ .units-row-end .unit-75,
210
+ .units-row-end .unit-70,
211
+ .units-row-end .unit-66,
212
+ .units-row-end .unit-65,
213
+ .units-row-end .unit-60,
214
+ .units-row-end .unit-50,
215
+ .units-row-end .unit-40,
216
+ .units-row-end .unit-35,
217
+ .units-row-end .unit-33,
218
+ .units-row-end .unit-30,
219
+ .units-row-end .unit-25,
220
+ .units-row-end .unit-20 {
221
+ width: 100%;
222
+ float: none;
223
+ margin-left: 0;
224
+ margin-bottom: @baseLine/@em;
225
+ }
226
+
227
+ .unit-push-80,
228
+ .unit-push-75,
229
+ .unit-push-70,
230
+ .unit-push-66,
231
+ .unit-push-65,
232
+ .unit-push-60,
233
+ .unit-push-50,
234
+ .unit-push-40,
235
+ .unit-push-35,
236
+ .unit-push-33,
237
+ .unit-push-30,
238
+ .unit-push-25,
239
+ .unit-push-20 {
240
+ left: 0;
241
+ }
242
+
243
+ .units-row-end .unit-push-right,
244
+ .units-row .unit-push-right {
245
+ float: none;
246
+ }
247
+
248
+ .units-mobile-50 .unit-80,
249
+ .units-mobile-50 .unit-75,
250
+ .units-mobile-50 .unit-70,
251
+ .units-mobile-50 .unit-66,
252
+ .units-mobile-50 .unit-65,
253
+ .units-mobile-50 .unit-60,
254
+ .units-mobile-50 .unit-40,
255
+ .units-mobile-50 .unit-30,
256
+ .units-mobile-50 .unit-35,
257
+ .units-mobile-50 .unit-33,
258
+ .units-mobile-50 .unit-25,
259
+ .units-mobile-50 .unit-20 {
260
+ float: left;
261
+ margin-left: @gridGutterWidth/(@gridWidth/100)*1%;
262
+ .column(2);
263
+ }
264
+ .units-mobile-50 .unit-80:first-child,
265
+ .units-mobile-50 .unit-75:first-child,
266
+ .units-mobile-50 .unit-70:first-child,
267
+ .units-mobile-50 .unit-66:first-child,
268
+ .units-mobile-50 .unit-65:first-child,
269
+ .units-mobile-50 .unit-60:first-child,
270
+ .units-mobile-50 .unit-40:first-child,
271
+ .units-mobile-50 .unit-35:first-child,
272
+ .units-mobile-50 .unit-30:first-child,
273
+ .units-mobile-50 .unit-33:first-child,
274
+ .units-mobile-50 .unit-25:first-child,
275
+ .units-mobile-50 .unit-20:first-child {
276
+ margin-left: 0;
277
+ }
278
+
279
+
280
+ }