Project

General

Profile

1
// Name:            Width
2
// Description:     Utilities for widths
3
//
4
// Component:       `uk-child-width-*`
5
//                  `uk-width-*`
6
//
7
//
8
// ========================================================================
9

    
10

    
11
// Variables
12
// ========================================================================
13

    
14
@width-small-width:                             150px;
15
@width-medium-width:                            300px;
16
@width-large-width:                             450px;
17
@width-xlarge-width:                            600px;
18
@width-xxlarge-width:                           750px;
19

    
20

    
21
/* ========================================================================
22
   Component: Width
23
 ========================================================================== */
24

    
25

    
26
/* Equal child widths
27
 ========================================================================== */
28

    
29
[class*='uk-child-width'] > * {
30
    box-sizing: border-box;
31
    width: 100%;
32
}
33

    
34
.uk-child-width-1-2 > * { width: 50%; }
35
.uk-child-width-1-3 > * { width: ~'calc(100% * 1 / 3.001)'; }
36
.uk-child-width-1-4 > * { width: 25%; }
37
.uk-child-width-1-5 > * { width: 20%; }
38
.uk-child-width-1-6 > * { width: ~'calc(100% * 1 / 6.001)'; }
39

    
40
.uk-child-width-auto > * { width: auto; }
41

    
42
/*
43
 *    Instead of 0, 1px is needed to make cell wrap into next row if predecessor is 100% wide
44
 *    and the grid gutter is 0 pixels wide
45
 */
46

    
47
.uk-child-width-expand > * { width: 1px; }
48

    
49
/*
50
 * 1. Make `width: 1px` work, because according to the spec flex items won’t shrink
51
 *    below their minimum content size. To change this, set the min-width.
52
 *    Only needed for Firefox. All other browsers ignore this.
53
 *
54
 * 2. `width` is ignored when wrapping flex items in Safari
55
 *    https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
56
 */
57

    
58
.uk-child-width-expand > :not([class*='uk-width']) {
59
    -ms-flex: 1;
60
    -webkit-flex: 1;
61
    flex: 1;
62
    /* 1 */
63
    min-width: 0;
64
    /* 2 */
65
    flex-basis: 1px;
66
}
67

    
68
/* Phone landscape and bigger */
69
@media (min-width: @breakpoint-small) {
70

    
71
    .uk-child-width-1-1\@s > * { width: 100%; }
72
    .uk-child-width-1-2\@s > * { width: 50%; }
73
    .uk-child-width-1-3\@s > * { width: ~'calc(100% * 1 / 3.001)'; }
74
    .uk-child-width-1-4\@s > * { width: 25%; }
75
    .uk-child-width-1-5\@s > * { width: 20%; }
76
    .uk-child-width-1-6\@s > * { width: ~'calc(100% * 1 / 6.001)'; }
77

    
78
    .uk-child-width-auto\@s > * { width: auto; }
79
    .uk-child-width-expand\@s > * { width: 1px; }
80

    
81
    .uk-child-width-expand\@s > :not([class*='uk-width']) {
82
        -ms-flex: 1;
83
        -webkit-flex: 1;
84
        flex: 1;
85
        min-width: 0;
86
        flex-basis: 1px;
87
    }
88

    
89
}
90

    
91
/* Tablet landscape and bigger */
92
@media (min-width: @breakpoint-medium) {
93

    
94
    .uk-child-width-1-1\@m > * { width: 100%; }
95
    .uk-child-width-1-2\@m > * { width: 50%; }
96
    .uk-child-width-1-3\@m > * { width: ~'calc(100% * 1 / 3.001)'; }
97
    .uk-child-width-1-4\@m > * { width: 25%; }
98
    .uk-child-width-1-5\@m > * { width: 20%; }
99
    .uk-child-width-1-6\@m > * { width: ~'calc(100% * 1 / 6.001)'; }
100

    
101
    .uk-child-width-auto\@m > * { width: auto; }
102
    .uk-child-width-expand\@m > * { width: 1px; }
103

    
104
    .uk-child-width-expand\@m > :not([class*='uk-width']) {
105
        -ms-flex: 1;
106
        -webkit-flex: 1;
107
        flex: 1;
108
        min-width: 0;
109
        flex-basis: 1px;
110
    }
111

    
112
}
113

    
114
/* Desktop and bigger */
115
@media (min-width: @breakpoint-large) {
116

    
117
    .uk-child-width-1-1\@l > * { width: 100%; }
118
    .uk-child-width-1-2\@l > * { width: 50%; }
119
    .uk-child-width-1-3\@l > * { width: ~'calc(100% * 1 / 3.001)'; }
120
    .uk-child-width-1-4\@l > * { width: 25%; }
121
    .uk-child-width-1-5\@l > * { width: 20%; }
122
    .uk-child-width-1-6\@l > * { width: ~'calc(100% * 1 / 6.001)'; }
123

    
124
    .uk-child-width-auto\@l > * { width: auto; }
125
    .uk-child-width-expand\@l > * { width: 1px; }
126

    
127
    .uk-child-width-expand\@l > :not([class*='uk-width']) {
128
        -ms-flex: 1;
129
        -webkit-flex: 1;
130
        flex: 1;
131
        min-width: 0;
132
        flex-basis: 1px;
133
    }
134

    
135
}
136

    
137
/* Large screen and bigger */
138
@media (min-width: @breakpoint-xlarge) {
139

    
140
    .uk-child-width-1-1\@xl > * { width: 100%; }
141
    .uk-child-width-1-2\@xl > * { width: 50%; }
142
    .uk-child-width-1-3\@xl > * { width: ~'calc(100% * 1 / 3.001)'; }
143
    .uk-child-width-1-4\@xl > * { width: 25%; }
144
    .uk-child-width-1-5\@xl > * { width: 20%; }
145
    .uk-child-width-1-6\@xl > * { width: ~'calc(100% * 1 / 6.001)'; }
146

    
147
    .uk-child-width-auto\@xl > * { width: auto; }
148
    .uk-child-width-expand\@xl > * { width: 1px; }
149

    
150
    .uk-child-width-expand\@xl > :not([class*='uk-width']) {
151
        -ms-flex: 1;
152
        -webkit-flex: 1;
153
        flex: 1;
154
        min-width: 0;
155
        flex-basis: 1px;
156
    }
157

    
158
}
159

    
160

    
161
/* Single Widths
162
 ========================================================================== */
163

    
164
/*
165
 * 1. `max-width` is needed for the pixel-based classes
166
 */
167

    
168
[class*='uk-width'] {
169
    box-sizing: border-box;
170
    width: 100%;
171
    /* 1 */
172
   max-width: 100%;
173
}
174

    
175
/* Halves */
176
.uk-width-1-2 { width: 50%; }
177

    
178
/* Thirds */
179
.uk-width-1-3 { width: ~'calc(100% * 1 / 3.001)'; }
180
.uk-width-2-3 { width: ~'calc(100% * 2 / 3.001)'; }
181

    
182
/* Quarters */
183
.uk-width-1-4 { width: 25%; }
184
.uk-width-3-4 { width: 75%; }
185

    
186
/* Fifths */
187
.uk-width-1-5 { width: 20%; }
188
.uk-width-2-5 { width: 40%; }
189
.uk-width-3-5 { width: 60%; }
190
.uk-width-4-5 { width: 80%; }
191

    
192
/* Sixths */
193
.uk-width-1-6 { width: ~'calc(100% * 1 / 6.001)'; }
194
.uk-width-5-6 { width: ~'calc(100% * 5 / 6.001)'; }
195

    
196
/* Pixel */
197
.uk-width-small { width: @width-small-width; }
198
.uk-width-medium { width: @width-medium-width; }
199
.uk-width-large { width: @width-large-width; }
200
.uk-width-xlarge { width: @width-xlarge-width; }
201
.uk-width-xxlarge { width: @width-xxlarge-width; }
202

    
203
/* Auto */
204
.uk-width-auto { width: auto; }
205

    
206
/* Expand */
207
.uk-width-expand {
208
    width: 1px;
209
    -ms-flex: 1;
210
    -webkit-flex: 1;
211
    flex: 1;
212
    min-width: 0;
213
    flex-basis: 1px;
214
}
215

    
216
/* Phone landscape and bigger */
217
@media (min-width: @breakpoint-small) {
218

    
219
    /* Whole */
220
    .uk-width-1-1\@s { width: 100%; }
221

    
222
    /* Halves */
223
    .uk-width-1-2\@s { width: 50%; }
224

    
225
    /* Thirds */
226
    .uk-width-1-3\@s { width: ~'calc(100% * 1 / 3.001)'; }
227
    .uk-width-2-3\@s { width: ~'calc(100% * 2 / 3.001)'; }
228

    
229
    /* Quarters */
230
    .uk-width-1-4\@s { width: 25%; }
231
    .uk-width-3-4\@s { width: 75%; }
232

    
233
    /* Fifths */
234
    .uk-width-1-5\@s { width: 20%; }
235
    .uk-width-2-5\@s { width: 40%; }
236
    .uk-width-3-5\@s { width: 60%; }
237
    .uk-width-4-5\@s { width: 80%; }
238

    
239
    /* Sixths */
240
    .uk-width-1-6\@s { width: ~'calc(100% * 1 / 6.001)'; }
241
    .uk-width-5-6\@s { width: ~'calc(100% * 5 / 6.001)'; }
242

    
243
    /* Pixel */
244
    .uk-width-small\@s { width: @width-small-width; }
245
    .uk-width-medium\@s { width: @width-medium-width; }
246
    .uk-width-large\@s { width: @width-large-width; }
247
    .uk-width-xlarge\@s { width: @width-xlarge-width; }
248
    .uk-width-xxlarge\@s { width: @width-xxlarge-width; }
249

    
250
    /* Auto */
251
    .uk-width-auto\@s { width: auto; }
252

    
253
    /* Expand */
254
    .uk-width-expand\@s {
255
        width: 1px;
256
        -ms-flex: 1;
257
        -webkit-flex: 1;
258
        flex: 1;
259
        min-width: 0;
260
        flex-basis: 1px;
261
    }
262

    
263
}
264

    
265
/* Tablet landscape and bigger */
266
@media (min-width: @breakpoint-medium) {
267

    
268
    /* Whole */
269
    .uk-width-1-1\@m { width: 100%; }
270

    
271
    /* Halves */
272
    .uk-width-1-2\@m { width: 50%; }
273

    
274
    /* Thirds */
275
    .uk-width-1-3\@m { width: ~'calc(100% * 1 / 3.001)'; }
276
    .uk-width-2-3\@m { width: ~'calc(100% * 2 / 3.001)'; }
277

    
278
    /* Quarters */
279
    .uk-width-1-4\@m { width: 25%; }
280
    .uk-width-3-4\@m { width: 75%; }
281

    
282
    /* Fifths */
283
    .uk-width-1-5\@m { width: 20%; }
284
    .uk-width-2-5\@m { width: 40%; }
285
    .uk-width-3-5\@m { width: 60%; }
286
    .uk-width-4-5\@m { width: 80%; }
287

    
288
    /* Sixths */
289
    .uk-width-1-6\@m { width: ~'calc(100% * 1 / 6.001)'; }
290
    .uk-width-5-6\@m { width: ~'calc(100% * 5 / 6.001)'; }
291

    
292
    /* Pixel */
293
    .uk-width-small\@m { width: @width-small-width; }
294
    .uk-width-medium\@m { width: @width-medium-width; }
295
    .uk-width-large\@m { width: @width-large-width; }
296
    .uk-width-xlarge\@m { width: @width-xlarge-width; }
297
    .uk-width-xxlarge\@m { width: @width-xxlarge-width; }
298

    
299
     /* Auto */
300
    .uk-width-auto\@m { width: auto; }
301

    
302
    /* Expand */
303
    .uk-width-expand\@m {
304
        width: 1px;
305
        -ms-flex: 1;
306
        -webkit-flex: 1;
307
        flex: 1;
308
        min-width: 0;
309
        flex-basis: 1px;
310
    }
311

    
312
}
313

    
314
/* Desktop and bigger */
315
@media (min-width: @breakpoint-large) {
316

    
317
    /* Whole */
318
    .uk-width-1-1\@l { width: 100%; }
319

    
320
    /* Halves */
321
    .uk-width-1-2\@l { width: 50%; }
322

    
323
    /* Thirds */
324
    .uk-width-1-3\@l { width: ~'calc(100% * 1 / 3.001)'; }
325
    .uk-width-2-3\@l { width: ~'calc(100% * 2 / 3.001)'; }
326

    
327
    /* Quarters */
328
    .uk-width-1-4\@l { width: 25%; }
329
    .uk-width-3-4\@l { width: 75%; }
330

    
331
    /* Fifths */
332
    .uk-width-1-5\@l { width: 20%; }
333
    .uk-width-2-5\@l { width: 40%; }
334
    .uk-width-3-5\@l { width: 60%; }
335
    .uk-width-4-5\@l { width: 80%; }
336

    
337
    /* Sixths */
338
    .uk-width-1-6\@l { width: ~'calc(100% * 1 / 6.001)'; }
339
    .uk-width-5-6\@l { width: ~'calc(100% * 5 / 6.001)'; }
340

    
341
    /* Pixel */
342
    .uk-width-small\@l { width: @width-small-width; }
343
    .uk-width-medium\@l { width: @width-medium-width; }
344
    .uk-width-large\@l { width: @width-large-width; }
345
    .uk-width-xlarge\@l { width: @width-xlarge-width; }
346
    .uk-width-xxlarge\@l { width: @width-xxlarge-width; }
347

    
348
    /* Auto */
349
    .uk-width-auto\@l { width: auto; }
350

    
351
    /* Expand */
352
    .uk-width-expand\@l {
353
        width: 1px;
354
        -ms-flex: 1;
355
        -webkit-flex: 1;
356
        flex: 1;
357
        min-width: 0;
358
        flex-basis: 1px;
359
    }
360

    
361
}
362

    
363
/* Large screen and bigger */
364
@media (min-width: @breakpoint-xlarge) {
365

    
366
    /* Whole */
367
    .uk-width-1-1\@xl { width: 100%; }
368

    
369
    /* Halves */
370
    .uk-width-1-2\@xl { width: 50%; }
371

    
372
    /* Thirds */
373
    .uk-width-1-3\@xl { width: ~'calc(100% * 1 / 3.001)'; }
374
    .uk-width-2-3\@xl { width: ~'calc(100% * 2 / 3.001)'; }
375

    
376
    /* Quarters */
377
    .uk-width-1-4\@xl { width: 25%; }
378
    .uk-width-3-4\@xl { width: 75%; }
379

    
380
    /* Fifths */
381
    .uk-width-1-5\@xl { width: 20%; }
382
    .uk-width-2-5\@xl { width: 40%; }
383
    .uk-width-3-5\@xl { width: 60%; }
384
    .uk-width-4-5\@xl { width: 80%; }
385

    
386
    /* Sixths */
387
    .uk-width-1-6\@xl { width: ~'calc(100% * 1 / 6.001)'; }
388
    .uk-width-5-6\@xl { width: ~'calc(100% * 5 / 6.001)'; }
389

    
390
    /* Pixel */
391
    .uk-width-small\@xl { width: @width-small-width; }
392
    .uk-width-medium\@xl { width: @width-medium-width; }
393
    .uk-width-large\@xl { width: @width-large-width; }
394
    .uk-width-xlarge\@xl { width: @width-xlarge-width; }
395
    .uk-width-xxlarge\@xl { width: @width-xxlarge-width; }
396

    
397
    /* Auto */
398
    .uk-width-auto\@xl { width: auto; }
399

    
400
    /* Expand */
401
    .uk-width-expand\@xl {
402
        width: 1px;
403
        -ms-flex: 1;
404
        -webkit-flex: 1;
405
        flex: 1;
406
        min-width: 0;
407
        flex-basis: 1px;
408
    }
409

    
410
}
411

    
412

    
413
// Hooks
414
// ========================================================================
415

    
416
.hook-width-misc;
417

    
418
.hook-width-misc() {}
(66-66/66)