uikit 3.11.2-dev.3dfa2c50b → 3.11.2-dev.45194f70c

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 (147) hide show
  1. package/CHANGELOG.md +40 -19
  2. package/dist/css/uikit-core-rtl.css +86 -185
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +86 -185
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +88 -191
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +88 -191
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +3 -3
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +6 -8
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +29 -68
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +30 -70
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +115 -78
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +115 -78
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +79 -58
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +115 -78
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +35 -29
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +5 -7
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +2 -2
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +408 -326
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +646 -528
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/api/component.js +2 -11
  44. package/src/js/api/hooks.js +3 -3
  45. package/src/js/api/state.js +34 -1
  46. package/src/js/components/countdown.js +2 -2
  47. package/src/js/components/filter.js +2 -3
  48. package/src/js/components/internal/lightbox-animations.js +4 -3
  49. package/src/js/components/internal/slider-preload.js +18 -0
  50. package/src/js/components/internal/slideshow-animations.js +4 -3
  51. package/src/js/components/lightbox-panel.js +34 -58
  52. package/src/js/components/lightbox.js +1 -2
  53. package/src/js/components/slider.js +60 -43
  54. package/src/js/components/slideshow.js +8 -1
  55. package/src/js/components/sortable.js +1 -1
  56. package/src/js/core/accordion.js +6 -1
  57. package/src/js/core/alert.js +1 -2
  58. package/src/js/core/core.js +2 -21
  59. package/src/js/core/cover.js +5 -1
  60. package/src/js/core/drop.js +3 -1
  61. package/src/js/core/form-custom.js +2 -2
  62. package/src/js/core/height-viewport.js +3 -0
  63. package/src/js/core/icon.js +13 -6
  64. package/src/js/core/img.js +131 -122
  65. package/src/js/core/modal.js +1 -2
  66. package/src/js/core/navbar.js +3 -3
  67. package/src/js/core/sticky.js +51 -57
  68. package/src/js/core/svg.js +10 -6
  69. package/src/js/core/switcher.js +6 -1
  70. package/src/js/core/toggle.js +5 -2
  71. package/src/js/core/video.js +13 -1
  72. package/src/js/mixin/internal/animate-slide.js +9 -12
  73. package/src/js/mixin/lazyload.js +16 -0
  74. package/src/js/mixin/parallax.js +116 -79
  75. package/src/js/mixin/slider.js +8 -22
  76. package/src/js/mixin/slideshow.js +2 -6
  77. package/src/js/mixin/togglable.js +1 -2
  78. package/src/js/util/ajax.js +15 -14
  79. package/src/js/util/animation.js +7 -12
  80. package/src/js/util/dimensions.js +4 -4
  81. package/src/js/util/dom.js +37 -31
  82. package/src/js/util/index.js +1 -0
  83. package/src/js/util/lang.js +7 -6
  84. package/src/js/util/observer.js +36 -0
  85. package/src/js/util/options.js +2 -11
  86. package/src/js/util/player.js +5 -4
  87. package/src/js/util/selector.js +12 -18
  88. package/src/js/util/style.js +4 -4
  89. package/src/less/components/base.less +10 -33
  90. package/src/less/components/form-range.less +48 -95
  91. package/src/less/components/form.less +0 -1
  92. package/src/less/components/height.less +3 -0
  93. package/src/less/components/leader.less +0 -1
  94. package/src/less/components/lightbox.less +0 -1
  95. package/src/less/components/modal.less +3 -7
  96. package/src/less/components/progress.less +14 -36
  97. package/src/less/components/slider.less +0 -3
  98. package/src/less/components/slideshow.less +0 -3
  99. package/src/less/components/text.less +16 -32
  100. package/src/scss/components/base.scss +10 -33
  101. package/src/scss/components/form-range.scss +48 -95
  102. package/src/scss/components/form.scss +0 -1
  103. package/src/scss/components/height.scss +3 -0
  104. package/src/scss/components/leader.scss +0 -1
  105. package/src/scss/components/lightbox.scss +0 -1
  106. package/src/scss/components/modal.scss +3 -7
  107. package/src/scss/components/progress.scss +14 -36
  108. package/src/scss/components/slider.scss +0 -3
  109. package/src/scss/components/slideshow.scss +0 -3
  110. package/src/scss/components/text.scss +16 -32
  111. package/src/scss/mixins-theme.scss +1 -1
  112. package/src/scss/mixins.scss +1 -1
  113. package/src/scss/variables-theme.scss +3 -3
  114. package/src/scss/variables.scss +3 -3
  115. package/tests/align.html +10 -10
  116. package/tests/animation.html +2 -2
  117. package/tests/article.html +2 -2
  118. package/tests/base.html +3 -3
  119. package/tests/card.html +10 -10
  120. package/tests/column.html +3 -3
  121. package/tests/comment.html +9 -9
  122. package/tests/dotnav.html +3 -3
  123. package/tests/image.html +296 -64
  124. package/tests/images/image-type.avif +0 -0
  125. package/tests/images/image-type.jpeg +0 -0
  126. package/tests/images/image-type.webp +0 -0
  127. package/tests/index.html +8 -8
  128. package/tests/lightbox.html +10 -10
  129. package/tests/marker.html +2 -2
  130. package/tests/modal.html +8 -9
  131. package/tests/navbar.html +2 -2
  132. package/tests/overlay.html +7 -7
  133. package/tests/parallax.html +16 -7
  134. package/tests/position.html +12 -12
  135. package/tests/slidenav.html +12 -12
  136. package/tests/slider.html +20 -20
  137. package/tests/sortable.html +1 -1
  138. package/tests/sticky-parallax.html +56 -71
  139. package/tests/svg.html +6 -6
  140. package/tests/table.html +11 -11
  141. package/tests/thumbnav.html +12 -12
  142. package/tests/transition.html +30 -30
  143. package/tests/utility.html +50 -33
  144. package/tests/video.html +1 -1
  145. package/tests/width.html +1 -1
  146. package/src/js/util/promise.js +0 -0
  147. package/tests/images/animated.gif +0 -0
package/tests/lightbox.html CHANGED
@@ -29,7 +29,7 @@
29
29
 
30
30
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute">
31
31
  <figure>
32
- <img src="images/photo.jpg" width="400" alt="">
32
+ <img src="images/photo.jpg" width="400" height="267" alt="">
33
33
  <figcaption class="uk-margin-small-top">900x600</figcaption>
34
34
  </figure>
35
35
  </a>
@@ -39,7 +39,7 @@
39
39
 
40
40
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500">
41
41
  <figure>
42
- <img src="images/photo.jpg" width="400" alt="">
42
+ <img src="images/photo.jpg" width="400" height="267" alt="">
43
43
  <figcaption class="uk-margin-small-top">700x500</figcaption>
44
44
  </figure>
45
45
  </a>
@@ -49,7 +49,7 @@
49
49
 
50
50
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200">
51
51
  <figure>
52
- <img src="images/photo.jpg" width="400" alt="">
52
+ <img src="images/photo.jpg" width="400" height="267" alt="">
53
53
  <figcaption class="uk-margin-small-top">1800x1200</figcaption>
54
54
  </figure>
55
55
  </a>
@@ -59,7 +59,7 @@
59
59
 
60
60
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000">
61
61
  <figure>
62
- <img src="images/photo.jpg" width="400" alt="">
62
+ <img src="images/photo.jpg" width="400" height="267" alt="">
63
63
  <figcaption class="uk-margin-small-top">1000x2000</figcaption>
64
64
  </figure>
65
65
  </a>
@@ -69,7 +69,7 @@
69
69
 
70
70
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500">
71
71
  <figure>
72
- <img src="images/photo.jpg" width="400" alt="">
72
+ <img src="images/photo.jpg" width="400" height="267" alt="">
73
73
  <figcaption class="uk-margin-small-top">2000x500</figcaption>
74
74
  </figure>
75
75
  </a>
@@ -84,7 +84,7 @@
84
84
 
85
85
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="Image">
86
86
  <figure>
87
- <img src="images/photo.jpg" width="400" alt="">
87
+ <img src="images/photo.jpg" width="400" height="267" alt="">
88
88
  <figcaption class="uk-margin-small-top">Image</figcaption>
89
89
  </figure>
90
90
  </a>
@@ -94,7 +94,7 @@
94
94
 
95
95
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg">
96
96
  <figure>
97
- <img src="images/photo.jpg" width="400" alt="">
97
+ <img src="images/photo.jpg" width="400" height="267" alt="">
98
98
  <figcaption class="uk-margin-small-top">Video</figcaption>
99
99
  </figure>
100
100
  </a>
@@ -104,7 +104,7 @@
104
104
 
105
105
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube">
106
106
  <figure>
107
- <img src="images/photo.jpg" width="400" alt="">
107
+ <img src="images/photo.jpg" width="400" height="267" alt="">
108
108
  <figcaption class="uk-margin-small-top">YouTube</figcaption>
109
109
  </figure>
110
110
  </a>
@@ -114,7 +114,7 @@
114
114
 
115
115
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo">
116
116
  <figure>
117
- <img src="images/photo.jpg" width="400" alt="">
117
+ <img src="images/photo.jpg" width="400" height="267" alt="">
118
118
  <figcaption class="uk-margin-small-top">Vimeo</figcaption>
119
119
  </figure>
120
120
  </a>
@@ -124,7 +124,7 @@
124
124
 
125
125
  <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe">
126
126
  <figure>
127
- <img src="images/photo.jpg" width="400" alt="">
127
+ <img src="images/photo.jpg" width="400" height="267" alt="">
128
128
  <figcaption class="uk-margin-small-top">Iframe</figcaption>
129
129
  </figure>
130
130
  </a>
package/tests/marker.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <div>
19
19
 
20
20
  <div class="uk-inline uk-dark">
21
- <img src="images/light.jpg" alt="">
21
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
22
22
  <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
23
23
  <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
24
24
  <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
@@ -28,7 +28,7 @@
28
28
  <div>
29
29
 
30
30
  <div class="uk-inline uk-light">
31
- <img src="images/dark.jpg" alt="">
31
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
32
32
  <a class="uk-position-absolute uk-transform-center" style="left: 20%; top: 30%" href="#" uk-marker></a>
33
33
  <a class="uk-position-absolute uk-transform-center" style="left: 60%; top: 40%" href="#" uk-marker></a>
34
34
  <a class="uk-position-absolute uk-transform-center" style="left: 80%; top: 70%" href="#" uk-marker></a>
package/tests/modal.html CHANGED
@@ -328,8 +328,7 @@
328
328
  </div>
329
329
  </div>
330
330
 
331
- <!-- uk-flex-top is needed to make vertical margin work for IE11 -->
332
- <div id="modal-center" class="uk-flex-top" uk-modal>
331
+ <div id="modal-center" uk-modal>
333
332
  <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
334
333
 
335
334
  <button class="uk-modal-close-default" type="button" uk-close></button>
@@ -339,7 +338,7 @@
339
338
  </div>
340
339
  </div>
341
340
 
342
- <div id="modal-center-scrollbar" class="uk-flex-top" uk-modal>
341
+ <div id="modal-center-scrollbar" uk-modal>
343
342
  <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
344
343
 
345
344
  <button class="uk-modal-close-default" type="button" uk-close></button>
@@ -367,28 +366,28 @@
367
366
  </div>
368
367
  </div>
369
368
 
370
- <div id="modal-media-image" class="uk-flex-top" uk-modal>
369
+ <div id="modal-media-image" uk-modal>
371
370
  <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
372
371
  <button class="uk-modal-close-outside" type="button" uk-close></button>
373
- <img src="images/photo.jpg" alt="">
372
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
374
373
  </div>
375
374
  </div>
376
375
 
377
- <div id="modal-media-video" class="uk-flex-top" uk-modal>
376
+ <div id="modal-media-video" uk-modal>
378
377
  <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
379
378
  <button class="uk-modal-close-outside" type="button" uk-close></button>
380
- <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline uk-video></video>
379
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" controls playsinline uk-video></video>
381
380
  </div>
382
381
  </div>
383
382
 
384
- <div id="modal-media-youtube" class="uk-flex-top" uk-modal>
383
+ <div id="modal-media-youtube" uk-modal>
385
384
  <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
386
385
  <button class="uk-modal-close-outside" type="button" uk-close></button>
387
386
  <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA" width="1920" height="1080" uk-video></iframe>
388
387
  </div>
389
388
  </div>
390
389
 
391
- <div id="modal-media-vimeo" class="uk-flex-top" uk-modal>
390
+ <div id="modal-media-vimeo" uk-modal>
392
391
  <div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
393
392
  <button class="uk-modal-close-outside" type="button" uk-close></button>
394
393
  <iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" uk-video></iframe>
package/tests/navbar.html CHANGED
@@ -1345,7 +1345,7 @@
1345
1345
  <div class="uk-navbar-item">
1346
1346
  <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1347
1347
  </div>
1348
- <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" alt=""></div>
1348
+ <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" height="67" alt=""></div>
1349
1349
  <div class="uk-navbar-item">Search</div>
1350
1350
  <div class="uk-navbar-item">
1351
1351
  <form>
@@ -2001,7 +2001,7 @@
2001
2001
  <h2>Mouse Tracker</h2>
2002
2002
 
2003
2003
  <div id="js-mousetracker" class="uk-position-relative">
2004
- <img src="images/photo.jpg" alt="">
2004
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
2005
2005
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center" style="height: 150px; width: 150px;">
2006
2006
  <div id="js-mousetarget" class="uk-position-center"></div>
2007
2007
  </div>
package/tests/overlay.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <div>
19
19
 
20
20
  <div class="uk-inline">
21
- <img src="images/photo.jpg" alt="">
21
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
22
22
  <div class="uk-overlay uk-overlay-default uk-position-bottom">
23
23
  <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
24
24
  </div>
@@ -28,7 +28,7 @@
28
28
  <div>
29
29
 
30
30
  <div class="uk-inline">
31
- <img src="images/photo.jpg" alt="">
31
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
32
32
  <div class="uk-overlay uk-overlay-primary uk-position-bottom">
33
33
  <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
34
34
  </div>
@@ -38,7 +38,7 @@
38
38
  <div>
39
39
 
40
40
  <div class="uk-inline">
41
- <img src="images/photo.jpg" alt="">
41
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
42
42
  <div class="uk-overlay-default uk-position-cover"></div>
43
43
  <div class="uk-overlay uk-position-bottom uk-dark">
44
44
  <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
@@ -49,7 +49,7 @@
49
49
  <div>
50
50
 
51
51
  <div class="uk-inline">
52
- <img src="images/photo.jpg" alt="">
52
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
53
53
  <div class="uk-overlay-primary uk-position-cover"></div>
54
54
  <div class="uk-overlay uk-position-bottom uk-light">
55
55
  <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
@@ -63,7 +63,7 @@
63
63
  <div>
64
64
 
65
65
  <div class="uk-inline uk-light">
66
- <img src="images/photo.jpg" alt="">
66
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
67
67
  <div class="uk-position-center">
68
68
  <span uk-overlay-icon></span>
69
69
  </div>
@@ -73,7 +73,7 @@
73
73
  <div>
74
74
 
75
75
  <div class="uk-inline uk-light">
76
- <img src="images/photo.jpg" alt="">
76
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
77
77
  <div class="uk-overlay-default uk-position-cover">
78
78
  <div class="uk-position-center">
79
79
  <span uk-overlay-icon></span>
@@ -85,7 +85,7 @@
85
85
  <div>
86
86
 
87
87
  <div class="uk-inline uk-light">
88
- <img src="images/photo.jpg" alt="">
88
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
89
89
  <div class="uk-overlay-primary uk-position-cover">
90
90
  <div class="uk-position-center">
91
91
  <span uk-overlay-icon></span>
package/tests/parallax.html CHANGED
@@ -35,24 +35,33 @@
35
35
  </div>
36
36
  </div>
37
37
 
38
- <h2>Start and End Steps</h2>
38
+ <h2>Start and End Stops</h2>
39
39
 
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">
40
+ <div id="test-start-end-stops" 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 Steps</h2>
47
+ <h2>Multiple Stops</h2>
48
48
 
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">
49
+ <div id="test-multiple-stops" 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>Stop Positions</h2>
57
+
58
+ <div id="test-stop-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
+ <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
60
+ <h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
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>
62
+ </div>
63
+ </div>
64
+
56
65
  <h2>Target</h2>
57
66
 
58
67
  <div id="test-target" 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: -400">
@@ -68,8 +77,8 @@
68
77
  <div class="uk-grid uk-margin-auto uk-flex-inline">
69
78
  <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 396; easing: 0;">0 / 0</div></div>
70
79
  <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 396; easing: 0;">100% / 100%</div></div>
71
- <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 40vh; end: 40vh; y: 396; easing: 0;">40vh / 40vh</div></div>
72
- <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 50; end: 100% + 50; y: 396; easing: 0;">100% + 50 / 100% + 50</div></div>
80
+ <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 30vh; end: 30vh; y: 396; easing: 0;">30vh / 30vh</div></div>
81
+ <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 100; end: 100% + 100; y: 396; easing: 0;">100% + 100 / 100% + 100</div></div>
73
82
  </div>
74
83
  </div>
75
84
 
@@ -181,7 +190,7 @@
181
190
 
182
191
  <h2>Animated properties</h2>
183
192
 
184
- <p>You can define multiple steps by using a comma separated list of values. (e.g. x: 0,50,150)</p>
193
+ <p>You can define multiple animation stops by using a comma separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
185
194
 
186
195
  <div class="uk-overflow-auto">
187
196
  <table class="uk-table uk-table-striped">
package/tests/position.html CHANGED
@@ -47,7 +47,7 @@
47
47
  <div>
48
48
 
49
49
  <div class="uk-inline">
50
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
50
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
51
51
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-left">Top Left</div>
52
52
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-center">Top Center</div>
53
53
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-right">Top Right</div>
@@ -63,7 +63,7 @@
63
63
  <div>
64
64
 
65
65
  <div class="uk-inline">
66
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
66
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
67
67
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top uk-text-center">Top</div>
68
68
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom uk-text-center">Bottom</div>
69
69
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-left uk-flex uk-flex-middle">Left</div>
@@ -87,7 +87,7 @@
87
87
  <div>
88
88
 
89
89
  <div class="uk-inline">
90
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
90
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
91
91
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-left">Top Left</div>
92
92
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-center">Top Center</div>
93
93
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-right">Top Right</div>
@@ -103,7 +103,7 @@
103
103
  <div>
104
104
 
105
105
  <div class="uk-inline">
106
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
106
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
107
107
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top uk-text-center">Top</div>
108
108
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom uk-text-center">Bottom</div>
109
109
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-left uk-flex uk-flex-middle">Left</div>
@@ -129,7 +129,7 @@
129
129
  <div>
130
130
 
131
131
  <div class="uk-inline">
132
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
132
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
133
133
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-left">Top Left</div>
134
134
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-center">Top Center</div>
135
135
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-right">Top Right</div>
@@ -145,7 +145,7 @@
145
145
  <div>
146
146
 
147
147
  <div class="uk-inline">
148
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
148
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
149
149
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top uk-text-center">Top</div>
150
150
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom uk-text-center">Bottom</div>
151
151
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-left uk-flex uk-flex-middle">Left</div>
@@ -168,7 +168,7 @@
168
168
  <div>
169
169
 
170
170
  <div class="uk-inline">
171
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
171
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
172
172
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-left">Top Left</div>
173
173
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-center">Top Center</div>
174
174
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-right">Top Right</div>
@@ -184,7 +184,7 @@
184
184
  <div>
185
185
 
186
186
  <div class="uk-inline">
187
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
187
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
188
188
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top uk-text-center">Top</div>
189
189
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom uk-text-center">Bottom</div>
190
190
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-left uk-flex uk-flex-middle">Left</div>
@@ -205,7 +205,7 @@
205
205
  <div>
206
206
 
207
207
  <div class="uk-inline">
208
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
208
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
209
209
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
210
210
  </div>
211
211
 
@@ -213,7 +213,7 @@
213
213
  <div>
214
214
 
215
215
  <div class="uk-inline">
216
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
216
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
217
217
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
218
218
  </div>
219
219
 
@@ -221,7 +221,7 @@
221
221
  <div>
222
222
 
223
223
  <div class="uk-inline">
224
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
224
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
225
225
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
226
226
  </div>
227
227
 
@@ -229,7 +229,7 @@
229
229
  <div>
230
230
 
231
231
  <div class="uk-inline">
232
- <a class="uk-display-block" href="#"><img src="images/photo.jpg" alt=""></a>
232
+ <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
233
233
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
234
234
  </div>
235
235
 
package/tests/slidenav.html CHANGED
@@ -30,7 +30,7 @@
30
30
  <div>
31
31
 
32
32
  <div class="uk-inline uk-visible-toggle uk-light" tabindex="-1">
33
- <img src="images/photo.jpg" alt="">
33
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
34
34
  <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous></a>
35
35
  <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next></a>
36
36
  </div>
@@ -39,7 +39,7 @@
39
39
  <div>
40
40
 
41
41
  <div class="uk-inline uk-visible-toggle uk-light" tabindex="-1">
42
- <img src="images/dark.jpg" alt="">
42
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
43
43
  <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous></a>
44
44
  <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next></a>
45
45
  </div>
@@ -48,7 +48,7 @@
48
48
  <div>
49
49
 
50
50
  <div class="uk-inline uk-visible-toggle uk-dark" tabindex="-1">
51
- <img src="images/light.jpg" alt="">
51
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
52
52
  <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous></a>
53
53
  <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next></a>
54
54
  </div>
@@ -62,7 +62,7 @@
62
62
  <div>
63
63
 
64
64
  <div class="uk-inline uk-light">
65
- <img src="images/photo.jpg" alt="">
65
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
66
66
  <div class="uk-slidenav-container uk-position-small uk-position-top-left">
67
67
  <a href="#" uk-slidenav-previous></a>
68
68
  <a href="#" uk-slidenav-next></a>
@@ -101,7 +101,7 @@
101
101
  <div>
102
102
 
103
103
  <div class="uk-inline uk-light">
104
- <img src="images/dark.jpg" alt="">
104
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
105
105
  <div class="uk-slidenav-container uk-position-small uk-position-top-left">
106
106
  <a href="#" uk-slidenav-previous></a>
107
107
  <a href="#" uk-slidenav-next></a>
@@ -140,7 +140,7 @@
140
140
  <div>
141
141
 
142
142
  <div class="uk-inline uk-dark">
143
- <img src="images/light.jpg" alt="">
143
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
144
144
  <div class="uk-slidenav-container uk-position-small uk-position-top-left">
145
145
  <a href="#" uk-slidenav-previous></a>
146
146
  <a href="#" uk-slidenav-next></a>
@@ -184,7 +184,7 @@
184
184
  <div>
185
185
 
186
186
  <div class="uk-inline uk-visible-toggle uk-light" tabindex="-1">
187
- <img src="images/photo.jpg" alt="">
187
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
188
188
  <a class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-previous></a>
189
189
  <a class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-next></a>
190
190
  </div>
@@ -193,7 +193,7 @@
193
193
  <div>
194
194
 
195
195
  <div class="uk-inline uk-light">
196
- <img src="images/photo.jpg" alt="">
196
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
197
197
  <div class="uk-slidenav-container uk-position-small uk-position-top-left">
198
198
  <a class="uk-slidenav-large" href="#" uk-slidenav-previous></a>
199
199
  <a class="uk-slidenav-large" href="#" uk-slidenav-next></a>
@@ -232,7 +232,7 @@
232
232
  <div>
233
233
 
234
234
  <div class="uk-inline uk-visible-toggle uk-light" tabindex="-1">
235
- <img src="images/dark.jpg" alt="">
235
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
236
236
  <a class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-previous></a>
237
237
  <a class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-next></a>
238
238
  </div>
@@ -241,7 +241,7 @@
241
241
  <div>
242
242
 
243
243
  <div class="uk-inline uk-light">
244
- <img src="images/dark.jpg" alt="">
244
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
245
245
  <div class="uk-slidenav-container uk-position-small uk-position-top-left">
246
246
  <a class="uk-slidenav-large" href="#" uk-slidenav-previous></a>
247
247
  <a class="uk-slidenav-large" href="#" uk-slidenav-next></a>
@@ -280,7 +280,7 @@
280
280
  <div>
281
281
 
282
282
  <div class="uk-inline uk-visible-toggle uk-dark" tabindex="-1">
283
- <img src="images/light.jpg" alt="">
283
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
284
284
  <a class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-previous></a>
285
285
  <a class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-next></a>
286
286
  </div>
@@ -289,7 +289,7 @@
289
289
  <div>
290
290
 
291
291
  <div class="uk-inline uk-dark">
292
- <img src="images/light.jpg" alt="">
292
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
293
293
  <div class="uk-slidenav-container uk-position-small uk-position-top-left">
294
294
  <a class="uk-slidenav-large" href="#" uk-slidenav-previous></a>
295
295
  <a class="uk-slidenav-large" href="#" uk-slidenav-next></a>