1
|
// Name: Column
|
2
|
// Description: Utilities for text columns
|
3
|
//
|
4
|
// Component: `uk-column-*`
|
5
|
//
|
6
|
// Sub-objects: `uk-column-span`
|
7
|
//
|
8
|
// Modifiers: `uk-column-divider`
|
9
|
//
|
10
|
// ========================================================================
|
11
|
|
12
|
|
13
|
// Variables
|
14
|
// ========================================================================
|
15
|
|
16
|
@column-gutter: @global-gutter;
|
17
|
@column-gutter-l: @global-medium-gutter;
|
18
|
|
19
|
@column-divider-rule-color: @global-border;
|
20
|
@column-divider-rule-width: 1px;
|
21
|
|
22
|
|
23
|
/* ========================================================================
|
24
|
Component: Column
|
25
|
========================================================================== */
|
26
|
|
27
|
[class*='uk-column-'] {
|
28
|
-webkit-column-gap: @column-gutter;
|
29
|
-moz-column-gap: @column-gutter;
|
30
|
column-gap: @column-gutter;
|
31
|
}
|
32
|
|
33
|
/* Desktop and bigger */
|
34
|
@media (min-width: @breakpoint-large) {
|
35
|
|
36
|
[class*='uk-column-'] {
|
37
|
-webkit-column-gap: @column-gutter-l;
|
38
|
-moz-column-gap: @column-gutter-l;
|
39
|
column-gap: @column-gutter-l;
|
40
|
}
|
41
|
|
42
|
}
|
43
|
|
44
|
/*
|
45
|
* Fix image 1px line wrapping into the next column in Chrome
|
46
|
*/
|
47
|
|
48
|
[class*='uk-column-'] img { transform: translate3d(0,0,0); }
|
49
|
|
50
|
|
51
|
/* Divider
|
52
|
========================================================================== */
|
53
|
|
54
|
/*
|
55
|
* 1. Double the column gap
|
56
|
*/
|
57
|
|
58
|
.uk-column-divider {
|
59
|
-webkit-column-rule: @column-divider-rule-width solid @column-divider-rule-color;
|
60
|
-moz-column-rule: @column-divider-rule-width solid @column-divider-rule-color;
|
61
|
column-rule: @column-divider-rule-width solid @column-divider-rule-color;
|
62
|
/* 1 */
|
63
|
-webkit-column-gap: (@column-gutter * 2);
|
64
|
-moz-column-gap: (@column-gutter * 2);
|
65
|
column-gap: (@column-gutter * 2);
|
66
|
}
|
67
|
|
68
|
/* Desktop and bigger */
|
69
|
@media (min-width: @breakpoint-large) {
|
70
|
|
71
|
.uk-column-divider {
|
72
|
-webkit-column-gap: (@column-gutter-l * 2);
|
73
|
-moz-column-gap: (@column-gutter-l * 2);
|
74
|
column-gap: (@column-gutter-l * 2);
|
75
|
}
|
76
|
|
77
|
}
|
78
|
|
79
|
|
80
|
/* Width modifiers
|
81
|
========================================================================== */
|
82
|
|
83
|
.uk-column-1-2 {
|
84
|
-webkit-column-count: 2;
|
85
|
-moz-column-count: 2;
|
86
|
column-count: 2;
|
87
|
}
|
88
|
|
89
|
.uk-column-1-3 {
|
90
|
-webkit-column-count: 3;
|
91
|
-moz-column-count: 3;
|
92
|
column-count: 3;
|
93
|
}
|
94
|
|
95
|
.uk-column-1-4 {
|
96
|
-webkit-column-count: 4;
|
97
|
-moz-column-count: 4;
|
98
|
column-count: 4;
|
99
|
}
|
100
|
|
101
|
.uk-column-1-5 {
|
102
|
-webkit-column-count: 5;
|
103
|
-moz-column-count: 5;
|
104
|
column-count: 5;
|
105
|
}
|
106
|
|
107
|
.uk-column-1-6 {
|
108
|
-webkit-column-count: 6;
|
109
|
-moz-column-count: 6;
|
110
|
column-count: 6;
|
111
|
}
|
112
|
|
113
|
/* Phone landscape and bigger */
|
114
|
@media (min-width: @breakpoint-small) {
|
115
|
|
116
|
.uk-column-1-2\@s {
|
117
|
-webkit-column-count: 2;
|
118
|
-moz-column-count: 2;
|
119
|
column-count: 2;
|
120
|
}
|
121
|
|
122
|
.uk-column-1-3\@s {
|
123
|
-webkit-column-count: 3;
|
124
|
-moz-column-count: 3;
|
125
|
column-count: 3;
|
126
|
}
|
127
|
|
128
|
.uk-column-1-4\@s {
|
129
|
-webkit-column-count: 4;
|
130
|
-moz-column-count: 4;
|
131
|
column-count: 4;
|
132
|
}
|
133
|
|
134
|
.uk-column-1-5\@s {
|
135
|
-webkit-column-count: 5;
|
136
|
-moz-column-count: 5;
|
137
|
column-count: 5;
|
138
|
}
|
139
|
|
140
|
.uk-column-1-6\@s {
|
141
|
-webkit-column-count: 6;
|
142
|
-moz-column-count: 6;
|
143
|
column-count: 6;
|
144
|
}
|
145
|
|
146
|
}
|
147
|
|
148
|
/* Tablet landscape and bigger */
|
149
|
@media (min-width: @breakpoint-medium) {
|
150
|
|
151
|
.uk-column-1-2\@m {
|
152
|
-webkit-column-count: 2;
|
153
|
-moz-column-count: 2;
|
154
|
column-count: 2;
|
155
|
}
|
156
|
|
157
|
.uk-column-1-3\@m {
|
158
|
-webkit-column-count: 3;
|
159
|
-moz-column-count: 3;
|
160
|
column-count: 3;
|
161
|
}
|
162
|
|
163
|
.uk-column-1-4\@m {
|
164
|
-webkit-column-count: 4;
|
165
|
-moz-column-count: 4;
|
166
|
column-count: 4;
|
167
|
}
|
168
|
|
169
|
.uk-column-1-5\@m {
|
170
|
-webkit-column-count: 5;
|
171
|
-moz-column-count: 5;
|
172
|
column-count: 5;
|
173
|
}
|
174
|
|
175
|
.uk-column-1-6\@m {
|
176
|
-webkit-column-count: 6;
|
177
|
-moz-column-count: 6;
|
178
|
column-count: 6;
|
179
|
}
|
180
|
|
181
|
}
|
182
|
|
183
|
/* Desktop and bigger */
|
184
|
@media (min-width: @breakpoint-large) {
|
185
|
|
186
|
.uk-column-1-2\@l {
|
187
|
-webkit-column-count: 2;
|
188
|
-moz-column-count: 2;
|
189
|
column-count: 2;
|
190
|
}
|
191
|
|
192
|
.uk-column-1-3\@l {
|
193
|
-webkit-column-count: 3;
|
194
|
-moz-column-count: 3;
|
195
|
column-count: 3;
|
196
|
}
|
197
|
|
198
|
.uk-column-1-4\@l {
|
199
|
-webkit-column-count: 4;
|
200
|
-moz-column-count: 4;
|
201
|
column-count: 4;
|
202
|
}
|
203
|
|
204
|
.uk-column-1-5\@l {
|
205
|
-webkit-column-count: 5;
|
206
|
-moz-column-count: 5;
|
207
|
column-count: 5;
|
208
|
}
|
209
|
|
210
|
.uk-column-1-6\@l {
|
211
|
-webkit-column-count: 6;
|
212
|
-moz-column-count: 6;
|
213
|
column-count: 6;
|
214
|
}
|
215
|
|
216
|
}
|
217
|
|
218
|
/* Large screen and bigger */
|
219
|
@media (min-width: @breakpoint-xlarge) {
|
220
|
|
221
|
.uk-column-1-2\@xl {
|
222
|
-webkit-column-count: 2;
|
223
|
-moz-column-count: 2;
|
224
|
column-count: 2;
|
225
|
}
|
226
|
|
227
|
.uk-column-1-3\@xl {
|
228
|
-webkit-column-count: 3;
|
229
|
-moz-column-count: 3;
|
230
|
column-count: 3;
|
231
|
}
|
232
|
|
233
|
.uk-column-1-4\@xl {
|
234
|
-webkit-column-count: 4;
|
235
|
-moz-column-count: 4;
|
236
|
column-count: 4;
|
237
|
}
|
238
|
|
239
|
.uk-column-1-5\@xl {
|
240
|
-webkit-column-count: 5;
|
241
|
-moz-column-count: 5;
|
242
|
column-count: 5;
|
243
|
}
|
244
|
|
245
|
.uk-column-1-6\@xl {
|
246
|
-webkit-column-count: 6;
|
247
|
-moz-column-count: 6;
|
248
|
column-count: 6;
|
249
|
}
|
250
|
}
|
251
|
|
252
|
|
253
|
/* Make element span across all columns
|
254
|
* Does not work in Firefox yet
|
255
|
========================================================================== */
|
256
|
|
257
|
.uk-column-span {
|
258
|
-webkit-column-span: all;
|
259
|
-moz-column-span: all;
|
260
|
column-span: all;
|
261
|
}
|
262
|
|
263
|
|
264
|
// Hooks
|
265
|
// ========================================================================
|
266
|
|
267
|
.hook-column-misc;
|
268
|
|
269
|
.hook-column-misc() {}
|
270
|
|
271
|
|
272
|
// Inverse
|
273
|
// ========================================================================
|
274
|
|
275
|
@inverse-column-divider-rule-color: @inverse-global-border;
|
276
|
|
277
|
.hook-inverse() {
|
278
|
|
279
|
.uk-column-divider {
|
280
|
-webkit-column-rule-color: @inverse-column-divider-rule-color;
|
281
|
-moz-column-rule-color: @inverse-column-divider-rule-color;
|
282
|
column-rule-color: @inverse-column-divider-rule-color;
|
283
|
}
|
284
|
|
285
|
}
|