Project

General

Profile

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
}
(15-15/66)