uikit 3.11.2-dev.c7ed3c19b → 3.11.2-dev.cfa6c7d5c

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 (135) hide show
  1. package/CHANGELOG.md +37 -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 +1 -1
  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 +26 -55
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +27 -57
  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 +114 -78
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +114 -78
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +60 -12
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +114 -78
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +52 -16
  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 +288 -270
  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 +501 -417
  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 +1 -1
  45. package/src/js/api/state.js +1 -1
  46. package/src/js/components/filter.js +2 -3
  47. package/src/js/components/internal/lightbox-animations.js +4 -3
  48. package/src/js/components/internal/slider-preload.js +37 -0
  49. package/src/js/components/internal/slideshow-animations.js +4 -3
  50. package/src/js/components/lightbox-panel.js +34 -58
  51. package/src/js/components/lightbox.js +1 -2
  52. package/src/js/components/slider.js +21 -1
  53. package/src/js/components/slideshow.js +8 -1
  54. package/src/js/components/sortable.js +1 -1
  55. package/src/js/core/alert.js +1 -2
  56. package/src/js/core/height-viewport.js +3 -0
  57. package/src/js/core/icon.js +13 -6
  58. package/src/js/core/img.js +131 -114
  59. package/src/js/core/modal.js +1 -2
  60. package/src/js/core/navbar.js +3 -3
  61. package/src/js/core/sticky.js +51 -57
  62. package/src/js/core/svg.js +10 -6
  63. package/src/js/core/toggle.js +2 -1
  64. package/src/js/mixin/internal/animate-slide.js +9 -12
  65. package/src/js/mixin/parallax.js +115 -79
  66. package/src/js/mixin/slider.js +8 -16
  67. package/src/js/mixin/slideshow.js +2 -2
  68. package/src/js/mixin/togglable.js +1 -2
  69. package/src/js/util/ajax.js +15 -14
  70. package/src/js/util/animation.js +7 -12
  71. package/src/js/util/dimensions.js +4 -4
  72. package/src/js/util/dom.js +37 -31
  73. package/src/js/util/lang.js +7 -6
  74. package/src/js/util/options.js +2 -11
  75. package/src/js/util/player.js +5 -4
  76. package/src/js/util/selector.js +11 -11
  77. package/src/js/util/style.js +4 -4
  78. package/src/less/components/base.less +10 -33
  79. package/src/less/components/form-range.less +48 -95
  80. package/src/less/components/form.less +0 -1
  81. package/src/less/components/height.less +3 -0
  82. package/src/less/components/leader.less +0 -1
  83. package/src/less/components/lightbox.less +0 -1
  84. package/src/less/components/modal.less +3 -7
  85. package/src/less/components/progress.less +14 -36
  86. package/src/less/components/slider.less +0 -3
  87. package/src/less/components/slideshow.less +0 -3
  88. package/src/less/components/text.less +16 -32
  89. package/src/scss/components/base.scss +10 -33
  90. package/src/scss/components/form-range.scss +48 -95
  91. package/src/scss/components/form.scss +0 -1
  92. package/src/scss/components/height.scss +3 -0
  93. package/src/scss/components/leader.scss +0 -1
  94. package/src/scss/components/lightbox.scss +0 -1
  95. package/src/scss/components/modal.scss +3 -7
  96. package/src/scss/components/progress.scss +14 -36
  97. package/src/scss/components/slider.scss +0 -3
  98. package/src/scss/components/slideshow.scss +0 -3
  99. package/src/scss/components/text.scss +16 -32
  100. package/src/scss/mixins-theme.scss +1 -1
  101. package/src/scss/mixins.scss +1 -1
  102. package/src/scss/variables-theme.scss +3 -3
  103. package/src/scss/variables.scss +3 -3
  104. package/tests/align.html +10 -10
  105. package/tests/animation.html +2 -2
  106. package/tests/article.html +2 -2
  107. package/tests/base.html +3 -3
  108. package/tests/card.html +10 -10
  109. package/tests/column.html +3 -3
  110. package/tests/comment.html +9 -9
  111. package/tests/dotnav.html +3 -3
  112. package/tests/image.html +296 -64
  113. package/tests/images/image-type.avif +0 -0
  114. package/tests/images/image-type.jpeg +0 -0
  115. package/tests/images/image-type.webp +0 -0
  116. package/tests/index.html +8 -8
  117. package/tests/lightbox.html +10 -10
  118. package/tests/marker.html +2 -2
  119. package/tests/modal.html +8 -9
  120. package/tests/navbar.html +2 -2
  121. package/tests/overlay.html +7 -7
  122. package/tests/parallax.html +14 -5
  123. package/tests/position.html +12 -12
  124. package/tests/slidenav.html +12 -12
  125. package/tests/slider.html +20 -20
  126. package/tests/sortable.html +1 -1
  127. package/tests/sticky-parallax.html +55 -70
  128. package/tests/svg.html +6 -6
  129. package/tests/table.html +11 -11
  130. package/tests/thumbnav.html +12 -12
  131. package/tests/transition.html +30 -30
  132. package/tests/utility.html +33 -33
  133. package/tests/video.html +1 -1
  134. package/tests/width.html +1 -1
  135. package/tests/images/animated.gif +0 -0
package/tests/slider.html CHANGED
@@ -201,43 +201,43 @@
201
201
 
202
202
  <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m">
203
203
  <li>
204
- <img src="images/slider1.jpg" alt="">
204
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
205
205
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
206
206
  </li>
207
207
  <li>
208
- <img src="images/slider2.jpg" alt="">
208
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
209
209
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
210
210
  </li>
211
211
  <li>
212
- <img src="images/slider3.jpg" alt="">
212
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
213
213
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
214
214
  </li>
215
215
  <li>
216
- <img src="images/slider4.jpg" alt="">
216
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
217
217
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
218
218
  </li>
219
219
  <li>
220
- <img src="images/slider5.jpg" alt="">
220
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
221
221
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
222
222
  </li>
223
223
  <li>
224
- <img src="images/slider1.jpg" alt="">
224
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
225
225
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
226
226
  </li>
227
227
  <li>
228
- <img src="images/slider2.jpg" alt="">
228
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
229
229
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
230
230
  </li>
231
231
  <li>
232
- <img src="images/slider3.jpg" alt="">
232
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
233
233
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
234
234
  </li>
235
235
  <li>
236
- <img src="images/slider4.jpg" alt="">
236
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
237
237
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
238
238
  </li>
239
239
  <li>
240
- <img src="images/slider5.jpg" alt="">
240
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
241
241
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
242
242
  </li>
243
243
  </ul>
@@ -260,61 +260,61 @@
260
260
  <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-4@m uk-grid">
261
261
  <li>
262
262
  <div class="uk-panel uk-transition-toggle">
263
- <img src="images/slider1.jpg" alt="">
263
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
264
264
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
265
265
  </div>
266
266
  </li>
267
267
  <li>
268
268
  <div class="uk-panel uk-transition-toggle">
269
- <img src="images/slider2.jpg" alt="">
269
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
270
270
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
271
271
  </div>
272
272
  </li>
273
273
  <li>
274
274
  <div class="uk-panel uk-transition-toggle">
275
- <img src="images/slider3.jpg" alt="">
275
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
276
276
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
277
277
  </div>
278
278
  </li>
279
279
  <li>
280
280
  <div class="uk-panel uk-transition-toggle">
281
- <img src="images/slider4.jpg" alt="">
281
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
282
282
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
283
283
  </div>
284
284
  </li>
285
285
  <li>
286
286
  <div class="uk-panel uk-transition-toggle">
287
- <img src="images/slider5.jpg" alt="">
287
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
288
288
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
289
289
  </div>
290
290
  </li>
291
291
  <li>
292
292
  <div class="uk-panel uk-transition-toggle">
293
- <img src="images/slider1.jpg" alt="">
293
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
294
294
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
295
295
  </div>
296
296
  </li>
297
297
  <li>
298
298
  <div class="uk-panel uk-transition-toggle">
299
- <img src="images/slider2.jpg" alt="">
299
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
300
300
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
301
301
  </div>
302
302
  </li>
303
303
  <li>
304
304
  <div class="uk-panel uk-transition-toggle">
305
- <img src="images/slider3.jpg" alt="">
305
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
306
306
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
307
307
  </div>
308
308
  </li>
309
309
  <li>
310
310
  <div class="uk-panel uk-transition-toggle">
311
- <img src="images/slider4.jpg" alt="">
311
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
312
312
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
313
313
  </div>
314
314
  </li>
315
315
  <li>
316
316
  <div class="uk-panel uk-transition-toggle">
317
- <img src="images/slider5.jpg" alt="">
317
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
318
318
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
319
319
  </div>
320
320
  </li>
package/tests/sortable.html CHANGED
@@ -41,7 +41,7 @@
41
41
  <li>
42
42
  <div class="uk-card uk-card-default uk-card-body">
43
43
  <a href="https://getuikit.com">Link</a>
44
- <img src="images/avatar.jpg" width="40" alt="">
44
+ <img src="images/avatar.jpg" width="40" height="40" alt="">
45
45
  </div>
46
46
  </li>
47
47
  <li><a class="uk-card uk-card-default uk-card-body uk-display-block" href="https://getuikit.com">Link Handle</a></li>
package/tests/sticky-parallax.html CHANGED
@@ -21,11 +21,11 @@
21
21
  <div class="uk-section uk-section-default">
22
22
  <div class="uk-container">
23
23
 
24
- <div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center" style="height: 300vh">
25
- <div class="uk-flex uk-flex-center uk-flex-middle" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-container">
24
+ <div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center uk-height-viewport-3">
25
+ <div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-container">
26
26
  <div>
27
27
 
28
- <img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" alt="" width="400" height="800" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
28
+ <img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" width="400" height="800" alt="" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
29
29
 
30
30
  <div style="margin-top: -200px">
31
31
  <h1 class="uk-heading-2xlarge">
@@ -44,7 +44,7 @@
44
44
  <div class="uk-section uk-section-default uk-text-center">
45
45
 
46
46
  <div class="uk-transform-origin-bottom-center uk-margin-bottom" uk-parallax="scale: 1,.2; start: 100%; end: 40vh">
47
- <img src="images/photo2.jpg" width="1800" height="1200">
47
+ <img src="images/photo2.jpg" width="1800" height="1200" alt="">
48
48
  </div>
49
49
 
50
50
  <div class="uk-container">
@@ -57,7 +57,7 @@
57
57
  <div class="uk-section uk-section-default uk-text-center">
58
58
 
59
59
  <div class="uk-cover-container uk-transform-origin-bottom-center uk-margin-bottom" uk-parallax="scale: 1,.2; start: 100%; end: 40vh" uk-height-viewport>
60
- <img src="images/photo3.jpg" width="1800" height="1200" uk-cover>
60
+ <img src="images/photo3.jpg" width="1800" height="1200" alt="" uk-cover>
61
61
  </div>
62
62
 
63
63
  <div class="uk-container">
@@ -70,45 +70,33 @@
70
70
  <div class="uk-section uk-section-default uk-text-center uk-position-relative uk-position-z-index">
71
71
 
72
72
  <div class="uk-cover-container uk-position-z-index-negative" uk-sticky="bottom: true" uk-height-viewport>
73
- <img src="images/photo.jpg" width="1800" height="1200" uk-cover>
73
+ <img src="images/photo.jpg" width="1800" height="1200" alt="" uk-cover>
74
74
  </div>
75
75
 
76
76
  <div class="uk-light" style="margin-top: -100vh; padding: 30vh 0">
77
77
 
78
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
79
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
80
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
81
- </div>
78
+ <div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
79
+ <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
82
80
  </div>
83
81
 
84
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
85
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
86
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
87
- </div>
82
+ <div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
83
+ <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
88
84
  </div>
89
85
 
90
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
91
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
92
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
93
- </div>
86
+ <div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
87
+ <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
94
88
  </div>
95
89
 
96
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
97
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
98
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
99
- </div>
90
+ <div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
91
+ <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
100
92
  </div>
101
93
 
102
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
103
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
104
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
105
- </div>
94
+ <div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
95
+ <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
106
96
  </div>
107
97
 
108
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
109
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
110
- <h1 class="uk-heading-xlarge uk-margin-xlarge-top uk-margin-remove-bottom">Sticky Background</h1>
111
- </div>
98
+ <div uk-parallax="start: 100%; end: 100%; opacity: 0,1 10%,1 30%,0; y: 2vh, 0 10%, 0 30%, -10vh">
99
+ <h1 class="uk-heading-xlarge uk-margin-xlarge-top uk-margin-remove-bottom">Sticky Background</h1>
112
100
  </div>
113
101
 
114
102
  </div>
@@ -119,23 +107,23 @@
119
107
  <div id="js-sticky-parallax-viewport" class="uk-child-width-1-2 uk-child-width-1-3@s uk-text-center" uk-grid>
120
108
  <div>
121
109
 
122
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
123
- <img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
124
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
125
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
126
- <img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
127
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
128
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
110
+ <img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
111
+ <img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
112
+ <img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
113
+ <img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
114
+ <img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
115
+ <img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
116
+ <img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
129
117
 
130
118
  </div>
131
119
  <div>
132
120
 
133
- <div class="uk-background-muted uk-text-center" style="height: 100vh" uk-sticky="bottom: #js-sticky-parallax-viewport">
121
+ <div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-viewport">
134
122
 
135
123
  <div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
136
124
 
137
125
  <h1 class="uk-margin-remove">Sticky Parallax Viewport</h1>
138
-
126
+
139
127
  </div>
140
128
 
141
129
  </div>
@@ -143,13 +131,13 @@
143
131
  </div>
144
132
  <div class="uk-visible@s">
145
133
 
146
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
147
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
148
- <img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
149
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
150
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
151
- <img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
152
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
134
+ <img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
135
+ <img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
136
+ <img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
137
+ <img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
138
+ <img class="uk-margin-large" src="images/photo.jpg" width="1800" height="1200" alt="">
139
+ <img class="uk-margin-large" src="images/photo3.jpg" width="1800" height="1200" alt="">
140
+ <img class="uk-margin-large" src="images/photo2.jpg" width="1800" height="1200" alt="">
153
141
 
154
142
  </div>
155
143
  </div>
@@ -158,14 +146,14 @@
158
146
 
159
147
  <div class="uk-section uk-section-default">
160
148
 
161
- <div id="js-sticky-parallax-images" style="height: 250vh" uk-grid>
149
+ <div id="js-sticky-parallax-images" style="min-height: 250vh" uk-grid>
162
150
  <div class="uk-width-expand">
163
-
164
- <div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images">
151
+
152
+ <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images">
165
153
  <div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
166
- <img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
167
- <img class="uk-position-center-left" src="images/photo2.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 135vh; opacity: 0,1">
168
- <img class="uk-position-center-left" src="images/photo3.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 185vh; opacity: 0,1">
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">
169
157
  </div>
170
158
  </div>
171
159
 
@@ -185,7 +173,7 @@
185
173
  <div>
186
174
 
187
175
  <h1>Sticky Parallax Images 1</h1>
188
-
176
+
189
177
  <p class="uk-visible@s">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
190
178
 
191
179
  </div>
@@ -218,14 +206,14 @@
218
206
 
219
207
  <div class="uk-section uk-section-default">
220
208
 
221
- <div id="js-sticky-parallax-images-all" style="height: 250vh" uk-grid>
209
+ <div id="js-sticky-parallax-images-all" style="min-height: 250vh" uk-grid>
222
210
  <div class="uk-width-expand">
223
211
 
224
- <div class="uk-background-muted" style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
212
+ <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
225
213
  <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
226
- <img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
227
- <img class="uk-position-center-left" src="images/photo2.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 160vh; opacity: 0,1">
228
- <img class="uk-position-center-left" src="images/photo3.jpg" alt="" width="1800" height="1200" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 210vh; opacity: 0,1">
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">
229
217
  </div>
230
218
  </div>
231
219
 
@@ -238,27 +226,24 @@
238
226
  </div>
239
227
  <div class="uk-width-expand">
240
228
 
241
- <div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images-all">
229
+ <div class="uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
242
230
  <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
243
- <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 90vh; end: 100% + 100vh - 100vh; opacity: 0,1">
244
- <div uk-parallax="target: #js-sticky-parallax-images-all; start: 140vh; end: 100% + 100vh - 150vh; opacity: 1,0">
245
231
 
246
- <h1>Sticky Parallax Images All 1</h1>
232
+ <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
247
233
 
248
- <p class="uk-visible@s">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
234
+ <h1>Sticky Parallax Images All 1</h1>
235
+
236
+ <p class="uk-visible@s">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
249
237
 
250
- </div>
251
238
  </div>
252
- <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 160vh; opacity: 0,1">
253
- <div uk-parallax="target: #js-sticky-parallax-images-all; start: 190vh; end: 100% + 100vh - 200vh; opacity: 1,0">
239
+ <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 200vh; opacity: 0,1 20%,1 80%,0">
254
240
 
255
- <h1>Sticky Parallax Images All 2</h1>
241
+ <h1>Sticky Parallax Images All 2</h1>
256
242
 
257
- <p class="uk-visible@s">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
243
+ <p class="uk-visible@s">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
258
244
 
259
- </div>
260
245
  </div>
261
- <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 210vh; opacity: 0,1">
246
+ <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 200vh; end: 100% + 100vh - 250vh; opacity: 0,1 20%,1">
262
247
 
263
248
  <h1>Sticky Parallax Images All 3</h1>
264
249
 
package/tests/svg.html CHANGED
@@ -17,21 +17,21 @@
17
17
  <div class="uk-child-width-auto" uk-grid>
18
18
  <div>
19
19
  <p>Image</p>
20
- <img id="svg1" class="svg-1" src="../src/images/components/navbar-toggle-icon.svg" uk-svg alt="">
20
+ <img id="svg1" class="svg-1" src="../src/images/components/navbar-toggle-icon.svg" alt="" uk-svg>
21
21
  </div>
22
22
  <div>
23
23
  <p>Width</p>
24
- <img id="svg2" class="svg-2" src="../src/images/components/navbar-toggle-icon.svg" width="40" height="40" uk-svg alt="">
24
+ <img id="svg2" class="svg-2" src="../src/images/components/navbar-toggle-icon.svg" width="40" height="40" alt="" uk-svg>
25
25
  </div>
26
26
  <div>
27
27
  <p>Symbol + ID</p>
28
- <img width="20" height="20" src="images/icons.svg#table" uk-svg alt="">
29
- <img width="20" height="20" src="images/icons.svg#trash" uk-svg alt="">
28
+ <img src="images/icons.svg#table" width="20" height="20" alt="" uk-svg>
29
+ <img src="images/icons.svg#trash" width="20" height="20" alt="" uk-svg>
30
30
  </div>
31
31
  <div>
32
32
  <p>Symbol + ID + Fallback</p>
33
- <img width="20" height="20" src="../src/images/backgrounds/nav-parent-close.svg#notfound" uk-svg alt="">
34
- <img width="20" height="20" src="../src/images/backgrounds/nav-parent-open.svg#notfound" uk-svg alt="">
33
+ <img src="../src/images/backgrounds/nav-parent-close.svg#notfound" width="20" height="20" alt="" uk-svg>
34
+ <img src="../src/images/backgrounds/nav-parent-open.svg#notfound" width="20" height="20" alt="" uk-svg>
35
35
  </div>
36
36
  <div>
37
37
  <p>Stroke Animation</p>
package/tests/table.html CHANGED
@@ -46,7 +46,7 @@
46
46
  <tr>
47
47
  <td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
48
48
  <td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
49
- <td>Table Data <img src="images/photo.jpg" width="40" alt=""></td>
49
+ <td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
50
50
  <td>Table Data</td>
51
51
  </tr>
52
52
  <tr>
@@ -104,7 +104,7 @@
104
104
  <tr>
105
105
  <td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
106
106
  <td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
107
- <td>Table Data <img src="images/photo.jpg" width="40" alt=""></td>
107
+ <td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
108
108
  </tr>
109
109
  <tr>
110
110
  <td>Table Data</td>
@@ -155,7 +155,7 @@
155
155
  <tr>
156
156
  <td>Table Data <a href="#">a element</a> <code>.uk-table</code></td>
157
157
  <td>Table Data <a class="uk-button uk-button-primary" href="#">Button</a></td>
158
- <td>Table Data <img src="images/photo.jpg" width="40" alt=""></td>
158
+ <td>Table Data <img src="images/photo.jpg" width="40" height="27" alt=""></td>
159
159
  </tr>
160
160
  <tr>
161
161
  <td>Table Data</td>
@@ -208,7 +208,7 @@
208
208
  <tbody>
209
209
  <tr>
210
210
  <td><input class="uk-checkbox" type="checkbox"></td>
211
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
211
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
212
212
  <td class="uk-table-link">
213
213
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
214
214
  </td>
@@ -218,7 +218,7 @@
218
218
  </tr>
219
219
  <tr>
220
220
  <td><input class="uk-checkbox" type="checkbox"></td>
221
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
221
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
222
222
  <td class="uk-table-link">
223
223
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
224
224
  </td>
@@ -228,7 +228,7 @@
228
228
  </tr>
229
229
  <tr>
230
230
  <td><input class="uk-checkbox" type="checkbox"></td>
231
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
231
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
232
232
  <td class="uk-table-link">
233
233
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
234
234
  </td>
@@ -238,7 +238,7 @@
238
238
  </tr>
239
239
  <tr>
240
240
  <td><input class="uk-checkbox" type="checkbox"></td>
241
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
241
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
242
242
  <td class="uk-table-link">
243
243
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
244
244
  </td>
@@ -267,7 +267,7 @@
267
267
  <tbody>
268
268
  <tr>
269
269
  <td><input class="uk-checkbox" type="checkbox"></td>
270
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
270
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
271
271
  <td class="uk-table-link">
272
272
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
273
273
  </td>
@@ -277,7 +277,7 @@
277
277
  </tr>
278
278
  <tr>
279
279
  <td><input class="uk-checkbox" type="checkbox"></td>
280
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
280
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
281
281
  <td class="uk-table-link">
282
282
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
283
283
  </td>
@@ -287,7 +287,7 @@
287
287
  </tr>
288
288
  <tr>
289
289
  <td><input class="uk-checkbox" type="checkbox"></td>
290
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
290
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
291
291
  <td class="uk-table-link">
292
292
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
293
293
  </td>
@@ -297,7 +297,7 @@
297
297
  </tr>
298
298
  <tr>
299
299
  <td><input class="uk-checkbox" type="checkbox"></td>
300
- <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" alt=""></td>
300
+ <td><img class="uk-preserve-width uk-border-circle" src="images/avatar.jpg" width="40" height="40" alt=""></td>
301
301
  <td class="uk-table-link">
302
302
  <a class="uk-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
303
303
  </td>
package/tests/thumbnav.html CHANGED
@@ -17,17 +17,17 @@
17
17
  <h2>Horizontal</h2>
18
18
 
19
19
  <ul class="uk-thumbnav">
20
- <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" alt=""></a></li>
21
- <li><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
22
- <li><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
20
+ <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
21
+ <li><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
22
+ <li><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
23
23
  </ul>
24
24
 
25
25
  <h2>Vertical</h2>
26
26
 
27
27
  <ul class="uk-thumbnav uk-thumbnav-vertical">
28
- <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" alt=""></a></li>
29
- <li><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
30
- <li><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
28
+ <li class="uk-active"><a href="#"><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
29
+ <li><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
30
+ <li><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
31
31
  </ul>
32
32
 
33
33
  <h2>Image</h2>
@@ -42,17 +42,17 @@
42
42
 
43
43
  <div class="uk-position-bottom-center uk-position-small">
44
44
  <ul class="uk-thumbnav">
45
- <li uk-slideshow-item="0"><a href="#"><img src="images/photo.jpg" width="100" alt=""></a></li>
46
- <li uk-slideshow-item="1"><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
47
- <li uk-slideshow-item="2"><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
45
+ <li uk-slideshow-item="0"><a href="#"><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
46
+ <li uk-slideshow-item="1"><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
47
+ <li uk-slideshow-item="2"><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
48
48
  </ul>
49
49
  </div>
50
50
 
51
51
  <div class="uk-position-center-right uk-position-small">
52
52
  <ul class="uk-thumbnav uk-thumbnav-vertical">
53
- <li uk-slideshow-item="0"><a href="#"><img src="images/photo.jpg" width="100" alt=""></a></li>
54
- <li uk-slideshow-item="1"><a href="#"><img src="images/dark.jpg" width="100" alt=""></a></li>
55
- <li uk-slideshow-item="2"><a href="#"><img src="images/light.jpg" width="100" alt=""></a></li>
53
+ <li uk-slideshow-item="0"><a href="#"><img src="images/photo.jpg" width="100" height="67" alt=""></a></li>
54
+ <li uk-slideshow-item="1"><a href="#"><img src="images/dark.jpg" width="100" height="67" alt=""></a></li>
55
+ <li uk-slideshow-item="2"><a href="#"><img src="images/light.jpg" width="100" height="67" alt=""></a></li>
56
56
  </ul>
57
57
  </div>
58
58