uikit 3.13.11-dev.eb080f280 → 3.14.1-dev.dadc910c0
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.
- package/CHANGELOG.md +20 -1
- package/dist/css/uikit-core-rtl.css +4 -1
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +4 -1
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +4 -1
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +4 -1
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +19 -5
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +19 -5
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +1 -1
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +62 -60
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +62 -60
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +2 -2
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +62 -60
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +19 -5
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +126 -68
- package/dist/js/uikit-core.min.js +1 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +188 -128
- package/dist/js/uikit.min.js +1 -1
- package/package.json +1 -1
- package/src/js/components/slider.js +1 -1
- package/src/js/core/accordion.js +21 -5
- package/src/js/core/cover.js +27 -14
- package/src/js/core/drop.js +22 -2
- package/src/js/core/height-match.js +1 -1
- package/src/js/core/margin.js +9 -2
- package/src/js/core/scrollspy-nav.js +2 -2
- package/src/js/mixin/parallax.js +61 -60
- package/src/js/mixin/togglable.js +16 -2
- package/src/js/util/lang.js +34 -38
- package/src/js/util/position.js +9 -9
- package/src/less/components/nav.less +1 -0
- package/src/less/components/utility.less +1 -0
- package/src/scss/components/nav.scss +1 -0
- package/src/scss/components/utility.scss +1 -0
- package/tests/alert.html +1 -1
- package/tests/drop.html +154 -80
- package/tests/navbar.html +1 -1
- package/tests/parallax.html +8 -8
- package/tests/sticky-parallax.html +8 -8
- package/tests/sticky.html +4 -4
package/src/js/util/position.js
CHANGED
|
@@ -38,8 +38,7 @@ function attachTo(element, target, options) {
|
|
|
38
38
|
|
|
39
39
|
const position = offset(element);
|
|
40
40
|
const targetOffset = offset(target);
|
|
41
|
-
for (const i
|
|
42
|
-
const [prop, dir, start, end] = dirs[i];
|
|
41
|
+
for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
|
|
43
42
|
position[start] = position[dir] =
|
|
44
43
|
targetOffset[start] +
|
|
45
44
|
moveBy(attach.target[i], end, targetOffset[prop]) -
|
|
@@ -53,8 +52,6 @@ function attachTo(element, target, options) {
|
|
|
53
52
|
function attachToWithFlip(element, target, options) {
|
|
54
53
|
const position = attachTo(element, target, options);
|
|
55
54
|
const targetDim = offset(target);
|
|
56
|
-
const viewports = scrollParents(element, /auto|scroll/);
|
|
57
|
-
const [scrollElement] = viewports;
|
|
58
55
|
|
|
59
56
|
let {
|
|
60
57
|
flip,
|
|
@@ -65,12 +62,15 @@ function attachToWithFlip(element, target, options) {
|
|
|
65
62
|
viewportPadding,
|
|
66
63
|
} = options;
|
|
67
64
|
|
|
65
|
+
let viewports = scrollParents(element);
|
|
66
|
+
if (boundary === target) {
|
|
67
|
+
viewports = viewports.filter((viewport) => viewport !== boundary);
|
|
68
|
+
}
|
|
69
|
+
const [scrollElement] = viewports;
|
|
68
70
|
viewports.push(viewport);
|
|
69
71
|
|
|
70
72
|
const offsetPosition = { ...position };
|
|
71
|
-
for (const i
|
|
72
|
-
const [prop, dir, start, end] = dirs[i];
|
|
73
|
-
|
|
73
|
+
for (const [i, [prop, dir, start, end]] of Object.entries(dirs)) {
|
|
74
74
|
if (flip !== true && !includes(flip, dir)) {
|
|
75
75
|
continue;
|
|
76
76
|
}
|
|
@@ -85,7 +85,7 @@ function attachToWithFlip(element, target, options) {
|
|
|
85
85
|
viewport[end] -= viewportPadding;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
if (boundary && !
|
|
88
|
+
if (boundary && !willFlip && position[prop] <= offset(boundary)[prop]) {
|
|
89
89
|
viewport = getIntersectionArea(viewport, offset(boundary));
|
|
90
90
|
}
|
|
91
91
|
|
|
@@ -202,7 +202,7 @@ function intersectLine(dimA, dimB, dir) {
|
|
|
202
202
|
}
|
|
203
203
|
|
|
204
204
|
function flipDir(prop) {
|
|
205
|
-
for (
|
|
205
|
+
for (let i = 0; i < dirs.length; i++) {
|
|
206
206
|
const index = dirs[i].indexOf(prop);
|
|
207
207
|
if (~index) {
|
|
208
208
|
return dirs[1 - i][(index % 2) + 2];
|
|
@@ -152,6 +152,7 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3)
|
|
|
152
152
|
========================================================================== */
|
|
153
153
|
|
|
154
154
|
.uk-resize { resize: both; }
|
|
155
|
+
.uk-resize-horizontal { resize: horizontal; }
|
|
155
156
|
.uk-resize-vertical { resize: vertical; }
|
|
156
157
|
|
|
157
158
|
|
package/tests/alert.html
CHANGED
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
|
|
74
74
|
<h2>Animations</h2>
|
|
75
75
|
|
|
76
|
-
<div uk-alert="animation: uk-animation-scale-up; duration:1000">
|
|
76
|
+
<div uk-alert="animation: uk-animation-scale-up; duration: 1000">
|
|
77
77
|
<a href="#" class="uk-alert-close" uk-close></a>
|
|
78
78
|
<p><strong>Alert!</strong> Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
79
79
|
</div>
|
package/tests/drop.html
CHANGED
|
@@ -8,10 +8,14 @@
|
|
|
8
8
|
<script src="js/test.js"></script>
|
|
9
9
|
<style>
|
|
10
10
|
|
|
11
|
-
.boundary {
|
|
11
|
+
.boundary {
|
|
12
|
+
padding: 15px;
|
|
13
|
+
border: 1px dashed rgba(0,0,0,0.2);
|
|
14
|
+
overflow: auto;
|
|
15
|
+
-webkit-overflow-scrolling: touch;
|
|
16
|
+
}
|
|
12
17
|
|
|
13
|
-
.
|
|
14
|
-
.small-width { width: 165px; }
|
|
18
|
+
.boundary-overflow { width: 200%; }
|
|
15
19
|
|
|
16
20
|
</style>
|
|
17
21
|
</head>
|
|
@@ -211,112 +215,162 @@
|
|
|
211
215
|
|
|
212
216
|
</div>
|
|
213
217
|
|
|
214
|
-
<h2>
|
|
218
|
+
<h2>Shift and Flip</h2>
|
|
215
219
|
|
|
216
|
-
<div class="
|
|
220
|
+
<div class="uk-margin">
|
|
221
|
+
<select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small">
|
|
222
|
+
<option value="">Resize</option>
|
|
223
|
+
<option value="boundary-overflow">Scroll</option>
|
|
224
|
+
</select>
|
|
225
|
+
</div>
|
|
217
226
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
<div uk-drop="pos: bottom-right; boundary: ! .boundary">
|
|
221
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
222
|
-
</div>
|
|
223
|
-
</div>
|
|
227
|
+
<div uk-grid>
|
|
228
|
+
<div class="uk-width-1-2@m">
|
|
224
229
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
230
|
+
<div class="boundary uk-height-large uk-resize-horizontal uk-margin">
|
|
231
|
+
<div class="js-boundary-overflow uk-flex uk-flex-center">
|
|
232
|
+
<div>
|
|
231
233
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
<div uk-drop="pos: bottom-center; boundary: ! .boundary">
|
|
235
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
236
|
-
</div>
|
|
237
|
-
</div>
|
|
234
|
+
<button class="uk-button uk-button-default" type="button">Click</button>
|
|
235
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
238
236
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<div uk-drop="pos: bottom-left; boundary: ! .boundary; boundary-align: true">
|
|
242
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
243
239
|
</div>
|
|
244
|
-
</div>
|
|
245
240
|
|
|
246
|
-
<div class="uk-inline">
|
|
247
|
-
<button class="uk-button uk-button-default" type="button">Right</button>
|
|
248
|
-
<div uk-drop="pos: bottom-right; boundary: ! .boundary; boundary-align: true">
|
|
249
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
250
|
-
</div>
|
|
251
241
|
</div>
|
|
242
|
+
<div class="uk-width-1-2@m">
|
|
252
243
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
257
|
-
</div>
|
|
258
|
-
</div>
|
|
244
|
+
<div class="boundary uk-height-large uk-resize-horizontal uk-margin">
|
|
245
|
+
<div class="js-boundary-overflow uk-flex uk-flex-center">
|
|
246
|
+
<div>
|
|
259
247
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
248
|
+
<button class="uk-button uk-button-default" style="margin-left: 40px" type="button">Click</button>
|
|
249
|
+
<div class="uk-width-small" uk-dropdown="pos: right-top; boundary: !.boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
250
|
+
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
264
253
|
</div>
|
|
265
|
-
</div>
|
|
266
254
|
|
|
255
|
+
</div>
|
|
267
256
|
</div>
|
|
268
257
|
|
|
269
|
-
<
|
|
258
|
+
<h2>Boundary</h2>
|
|
270
259
|
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<div uk-drop="pos: right-bottom; boundary: ! .boundary">
|
|
274
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
260
|
+
<div class="uk-child-width-1-2@m" uk-grid>
|
|
261
|
+
<div>
|
|
277
262
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
<div uk-drop="pos: right-justify; boundary: ! .boundary; boundary-align: true">
|
|
281
|
-
<div class="uk-card uk-card-body uk-card-default uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
282
|
-
</div>
|
|
283
|
-
</div>
|
|
263
|
+
<div class="boundary uk-height-medium uk-margin uk-flex uk-flex-between uk-flex-wrap">
|
|
264
|
+
<div>
|
|
284
265
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
<div uk-drop="pos: right-center; boundary: ! .boundary">
|
|
288
|
-
<div class="uk-card uk-card-body uk-card-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
289
|
-
</div>
|
|
290
|
-
</div>
|
|
266
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
267
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-right; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
291
268
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
269
|
+
</div>
|
|
270
|
+
<div>
|
|
271
|
+
|
|
272
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
273
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-center; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
274
|
+
|
|
275
|
+
</div>
|
|
276
|
+
<div>
|
|
277
|
+
|
|
278
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
279
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
280
|
+
|
|
281
|
+
</div>
|
|
296
282
|
</div>
|
|
283
|
+
|
|
297
284
|
</div>
|
|
285
|
+
<div>
|
|
298
286
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
287
|
+
<div class="boundary uk-height-medium uk-flex uk-flex-column uk-flex-between uk-flex-wrap">
|
|
288
|
+
<div>
|
|
289
|
+
|
|
290
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
291
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-bottom; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
292
|
+
|
|
293
|
+
</div>
|
|
294
|
+
<div>
|
|
295
|
+
|
|
296
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
297
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-center; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
298
|
+
|
|
299
|
+
</div>
|
|
300
|
+
<div>
|
|
301
|
+
|
|
302
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
303
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
304
|
+
|
|
305
|
+
</div>
|
|
303
306
|
</div>
|
|
307
|
+
|
|
304
308
|
</div>
|
|
309
|
+
</div>
|
|
305
310
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
311
|
+
<h2>Boundary Align</h2>
|
|
312
|
+
|
|
313
|
+
<div class="uk-child-width-1-2@m" uk-grid>
|
|
314
|
+
<div>
|
|
315
|
+
|
|
316
|
+
<div class="boundary uk-margin uk-flex uk-flex-around uk-flex-wrap" uk-margin>
|
|
317
|
+
<div>
|
|
318
|
+
|
|
319
|
+
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
|
|
320
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-right; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
321
|
+
|
|
322
|
+
</div>
|
|
323
|
+
<div>
|
|
324
|
+
|
|
325
|
+
<button class="uk-button uk-button-default" type="button">Bottom Center</button>
|
|
326
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-center; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
327
|
+
|
|
328
|
+
</div>
|
|
329
|
+
<div>
|
|
330
|
+
|
|
331
|
+
<button class="uk-button uk-button-default" type="button">Bottom Left</button>
|
|
332
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-left; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
333
|
+
|
|
334
|
+
</div>
|
|
335
|
+
<div>
|
|
336
|
+
|
|
337
|
+
<button class="uk-button uk-button-default" type="button">Bottom Justify</button>
|
|
338
|
+
<div class="uk-width-medium" uk-dropdown="pos: bottom-justify; boundary: ! .boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
339
|
+
|
|
340
|
+
</div>
|
|
310
341
|
</div>
|
|
342
|
+
|
|
311
343
|
</div>
|
|
344
|
+
<div class="uk-width-auto">
|
|
312
345
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
346
|
+
<div class="boundary uk-height-medium uk-flex uk-flex-column uk-flex-around">
|
|
347
|
+
<div>
|
|
348
|
+
|
|
349
|
+
<button class="uk-button uk-button-default" type="button">Right Bottom</button>
|
|
350
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-bottom; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
351
|
+
|
|
352
|
+
</div>
|
|
353
|
+
<div>
|
|
354
|
+
|
|
355
|
+
<button class="uk-button uk-button-default" type="button">Right Center</button>
|
|
356
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-center; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
357
|
+
|
|
358
|
+
</div>
|
|
359
|
+
<div>
|
|
360
|
+
|
|
361
|
+
<button class="uk-button uk-button-default" type="button">Right Top</button>
|
|
362
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-top; boundary: !.boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
363
|
+
|
|
364
|
+
</div>
|
|
365
|
+
<div>
|
|
366
|
+
|
|
367
|
+
<button class="uk-button uk-button-default" type="button">Right Justify</button>
|
|
368
|
+
<div class="uk-width-medium" uk-dropdown="pos: right-justify; boundary: ! .boundary; boundary-align: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
|
369
|
+
|
|
370
|
+
</div>
|
|
317
371
|
</div>
|
|
318
|
-
</div>
|
|
319
372
|
|
|
373
|
+
</div>
|
|
320
374
|
</div>
|
|
321
375
|
|
|
322
376
|
<h2>Multiple Toggles</h2>
|
|
@@ -377,6 +431,12 @@
|
|
|
377
431
|
<td>800</td>
|
|
378
432
|
<td>Delay time in hover mode before a Drop is hidden in ms.</td>
|
|
379
433
|
</tr>
|
|
434
|
+
<tr>
|
|
435
|
+
<td><code>display</code></td>
|
|
436
|
+
<td>`dynamic`|`static`</td>
|
|
437
|
+
<td>`dynamic`</td>
|
|
438
|
+
<td>Disable dynamic positioning while scrolling by setting this option to `static`.</td>
|
|
439
|
+
</tr>
|
|
380
440
|
<tr>
|
|
381
441
|
<td><code>boundary</code></td>
|
|
382
442
|
<td>CSS selector</td>
|
|
@@ -419,5 +479,19 @@
|
|
|
419
479
|
|
|
420
480
|
</div>
|
|
421
481
|
|
|
482
|
+
<script>
|
|
483
|
+
|
|
484
|
+
var options = UIkit.util.$$('#js-boundary-overflow-switcher option').map(function (option) { return option.value; });
|
|
485
|
+
|
|
486
|
+
UIkit.util.on('#js-boundary-overflow-switcher', 'change', function () {
|
|
487
|
+
var value = this.value;
|
|
488
|
+
UIkit.util.$$('.js-boundary-overflow').forEach(function (table) {
|
|
489
|
+
UIkit.util.removeClass(table, options);
|
|
490
|
+
UIkit.util.addClass(table, value);
|
|
491
|
+
});
|
|
492
|
+
});
|
|
493
|
+
|
|
494
|
+
</script>
|
|
495
|
+
|
|
422
496
|
</body>
|
|
423
497
|
</html>
|
package/tests/navbar.html
CHANGED
package/tests/parallax.html
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<body>
|
|
17
17
|
|
|
18
18
|
<div class="uk-section-default">
|
|
19
|
-
<div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia:100" uk-height-viewport="offset-top: true">
|
|
19
|
+
<div class="uk-section uk-background-cover uk-background-primary uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -400; sepia: 100" uk-height-viewport="offset-top: true">
|
|
20
20
|
|
|
21
21
|
<h1 class="uk-heading-xlarge uk-margin-auto uk-margin-auto-vertical">Parallax</h1>
|
|
22
22
|
|
|
@@ -35,27 +35,27 @@
|
|
|
35
35
|
</div>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<h2>Start and End
|
|
38
|
+
<h2>Start and End Steps</h2>
|
|
39
39
|
|
|
40
|
-
<div id="test-start-end-
|
|
40
|
+
<div id="test-start-end-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgy: -200">
|
|
41
41
|
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
|
42
42
|
<h1 uk-parallax="opacity: 0,1; y: -200,0; scale: 2,1;">Headline</h1>
|
|
43
43
|
<p uk-parallax="opacity: 0,1; y: 200,0; scale: 0,1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
44
44
|
</div>
|
|
45
45
|
</div>
|
|
46
46
|
|
|
47
|
-
<h2>Multiple
|
|
47
|
+
<h2>Multiple Steps</h2>
|
|
48
48
|
|
|
49
|
-
<div id="test-multiple-
|
|
49
|
+
<div id="test-multiple-steps" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
|
|
50
50
|
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
|
51
51
|
<h1 uk-parallax="x: -200,200,-200,200; scale: 2,1,2,1;">Headline</h1>
|
|
52
52
|
<p uk-parallax="x: 200,-200,200,-200; scale: 1,0,1,0,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
55
|
|
|
56
|
-
<h2>
|
|
56
|
+
<h2>Step Positions</h2>
|
|
57
57
|
|
|
58
|
-
<div id="test-
|
|
58
|
+
<div id="test-step-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
|
|
59
59
|
<div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
|
|
60
60
|
<h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
|
|
61
61
|
<p uk-parallax="x: 200,-200 20%,200 80%,-200; scale: 1,1 50%,2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
|
|
191
191
|
<h2>Animated properties</h2>
|
|
192
192
|
|
|
193
|
-
<p>You can define multiple animation
|
|
193
|
+
<p>You can define multiple animation steps by using a comma separated list of values. (e.g. x: 0,50,150). A step can be defined by a value and a position. If you don't specify the position of a step, it is placed halfway between the one that precedes it and the one that follows it.</p>
|
|
194
194
|
|
|
195
195
|
<div class="uk-overflow-auto">
|
|
196
196
|
<table class="uk-table uk-table-striped">
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
<body style="padding-bottom: 100vh;">
|
|
12
12
|
|
|
13
|
-
<div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="
|
|
13
|
+
<div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="overflow-flip: true; end: 100%" uk-height-viewport>
|
|
14
14
|
<div class="uk-container">
|
|
15
15
|
|
|
16
16
|
<h1 class="uk-heading-2xlarge" uk-parallax="target: !.uk-section +* +*; end: 100%; y: -400; easing: 0;">Sticky Section</h1>
|
|
@@ -151,9 +151,9 @@
|
|
|
151
151
|
|
|
152
152
|
<div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images">
|
|
153
153
|
<div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
|
|
154
|
-
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing:0">
|
|
155
|
-
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
|
|
156
|
-
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 225vh; end: 100% + 100vh - 275vh; opacity: 0,1 20%,1; easing:0">
|
|
154
|
+
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing: 0">
|
|
155
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing: 0">
|
|
156
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 225vh; end: 100% + 100vh - 275vh; opacity: 0,1 20%,1; easing: 0">
|
|
157
157
|
</div>
|
|
158
158
|
</div>
|
|
159
159
|
|
|
@@ -211,9 +211,9 @@
|
|
|
211
211
|
|
|
212
212
|
<div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images-all">
|
|
213
213
|
<div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
|
|
214
|
-
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">
|
|
215
|
-
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
|
|
216
|
-
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing:0">
|
|
214
|
+
<img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing: 0">
|
|
215
|
+
<img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing: 0">
|
|
216
|
+
<img class="uk-position-center-left" src="images/photo3.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1; easing: 0">
|
|
217
217
|
</div>
|
|
218
218
|
</div>
|
|
219
219
|
|
|
@@ -266,7 +266,7 @@
|
|
|
266
266
|
</div>
|
|
267
267
|
</div>
|
|
268
268
|
|
|
269
|
-
<div class="uk-section uk-section-primary uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center uk-position-z-index-negative" uk-sticky="position: bottom; start: -100%; end: 0">
|
|
269
|
+
<div class="uk-section uk-section-primary uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center uk-position-z-index-negative" uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0">
|
|
270
270
|
<div class="uk-container">
|
|
271
271
|
|
|
272
272
|
<h1 class="uk-heading-2xlarge">Sticky Section</h1>
|
package/tests/sticky.html
CHANGED
|
@@ -310,7 +310,7 @@
|
|
|
310
310
|
position: bottom<br>
|
|
311
311
|
overflow-flip: true<br>
|
|
312
312
|
start: -100%<br>
|
|
313
|
-
end:
|
|
313
|
+
end: 0
|
|
314
314
|
</div>
|
|
315
315
|
|
|
316
316
|
<h2>JavaScript Options</h2>
|
|
@@ -336,13 +336,13 @@
|
|
|
336
336
|
<td><code>start</code></td>
|
|
337
337
|
<td>Length|CSS Selector</td>
|
|
338
338
|
<td>0</td>
|
|
339
|
-
<td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the
|
|
339
|
+
<td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the elements top border.</td>
|
|
340
340
|
</tr>
|
|
341
341
|
<tr>
|
|
342
342
|
<td><code>end</code></td>
|
|
343
343
|
<td>Length|CSS Selector|Boolean</td>
|
|
344
344
|
<td>false</td>
|
|
345
|
-
<td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the
|
|
345
|
+
<td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the selected element's bottom and the element's bottom border. `false` will make the element stick until the end of the page. `true` selects the parent element.</td>
|
|
346
346
|
</tr>
|
|
347
347
|
<tr>
|
|
348
348
|
<td><code>offset</code></td>
|
|
@@ -354,7 +354,7 @@
|
|
|
354
354
|
<td><code>overflow-flip</code></td>
|
|
355
355
|
<td>Boolean</td>
|
|
356
356
|
<td>false</td>
|
|
357
|
-
<td>Flip the Sticky's position option if the element
|
|
357
|
+
<td>Flip the Sticky's position option if the element overflows the viewport and disables overflow scrolling.</td>
|
|
358
358
|
</tr>
|
|
359
359
|
<tr>
|
|
360
360
|
<td><code>animation</code></td>
|