uikit 3.11.2-dev.f2970ffaa → 3.12.0

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 (226) hide show
  1. package/.eslintrc.json +4 -49
  2. package/.prettierignore +14 -0
  3. package/.prettierrc.json +13 -0
  4. package/.webstorm.js +3 -3
  5. package/CHANGELOG.md +55 -19
  6. package/build/.eslintrc.json +1 -3
  7. package/build/build.js +26 -28
  8. package/build/icons.js +7 -11
  9. package/build/less.js +48 -36
  10. package/build/package.json +2 -2
  11. package/build/prefix.js +21 -18
  12. package/build/publishDev.js +6 -8
  13. package/build/release.js +20 -17
  14. package/build/scope.js +21 -11
  15. package/build/scss.js +72 -39
  16. package/build/util.js +71 -62
  17. package/build/wrapper/icons.js +0 -2
  18. package/dist/css/uikit-core-rtl.css +133 -201
  19. package/dist/css/uikit-core-rtl.min.css +1 -1
  20. package/dist/css/uikit-core.css +133 -201
  21. package/dist/css/uikit-core.min.css +1 -1
  22. package/dist/css/uikit-rtl.css +135 -207
  23. package/dist/css/uikit-rtl.min.css +1 -1
  24. package/dist/css/uikit.css +135 -207
  25. package/dist/css/uikit.min.css +1 -1
  26. package/dist/js/components/countdown.js +66 -138
  27. package/dist/js/components/countdown.min.js +1 -1
  28. package/dist/js/components/filter.js +408 -439
  29. package/dist/js/components/filter.min.js +1 -1
  30. package/dist/js/components/lightbox-panel.js +1091 -1319
  31. package/dist/js/components/lightbox-panel.min.js +1 -1
  32. package/dist/js/components/lightbox.js +1137 -1396
  33. package/dist/js/components/lightbox.min.js +1 -1
  34. package/dist/js/components/notification.js +94 -114
  35. package/dist/js/components/notification.min.js +1 -1
  36. package/dist/js/components/parallax.js +347 -372
  37. package/dist/js/components/parallax.min.js +1 -1
  38. package/dist/js/components/slider-parallax.js +345 -360
  39. package/dist/js/components/slider-parallax.min.js +1 -1
  40. package/dist/js/components/slider.js +749 -843
  41. package/dist/js/components/slider.min.js +1 -1
  42. package/dist/js/components/slideshow-parallax.js +345 -360
  43. package/dist/js/components/slideshow-parallax.min.js +1 -1
  44. package/dist/js/components/slideshow.js +628 -798
  45. package/dist/js/components/slideshow.min.js +1 -1
  46. package/dist/js/components/sortable.js +587 -620
  47. package/dist/js/components/sortable.min.js +1 -1
  48. package/dist/js/components/tooltip.js +324 -356
  49. package/dist/js/components/tooltip.min.js +1 -1
  50. package/dist/js/components/upload.js +156 -167
  51. package/dist/js/components/upload.min.js +1 -1
  52. package/dist/js/uikit-core.js +5324 -6527
  53. package/dist/js/uikit-core.min.js +1 -1
  54. package/dist/js/uikit-icons.js +7 -9
  55. package/dist/js/uikit-icons.min.js +1 -1
  56. package/dist/js/uikit.js +8006 -9663
  57. package/dist/js/uikit.min.js +1 -1
  58. package/jsconfig.json +1 -1
  59. package/package.json +64 -60
  60. package/src/js/api/boot.js +25 -32
  61. package/src/js/api/component.js +15 -28
  62. package/src/js/api/global.js +6 -12
  63. package/src/js/api/hooks.js +14 -33
  64. package/src/js/api/instance.js +7 -15
  65. package/src/js/api/state.js +199 -187
  66. package/src/js/components/countdown.js +32 -85
  67. package/src/js/components/filter.js +70 -66
  68. package/src/js/components/index.js +13 -13
  69. package/src/js/components/internal/lightbox-animations.js +14 -25
  70. package/src/js/components/internal/slider-preload.js +9 -0
  71. package/src/js/components/internal/slider-transitioner.js +66 -45
  72. package/src/js/components/internal/slideshow-animations.js +46 -64
  73. package/src/js/components/lightbox-panel.js +107 -105
  74. package/src/js/components/lightbox.js +17 -39
  75. package/src/js/components/notification.js +49 -43
  76. package/src/js/components/parallax.js +21 -46
  77. package/src/js/components/slider-parallax.js +13 -23
  78. package/src/js/components/slider.js +117 -89
  79. package/src/js/components/slideshow-parallax.js +1 -1
  80. package/src/js/components/slideshow.js +15 -13
  81. package/src/js/components/sortable.js +125 -106
  82. package/src/js/components/tooltip.js +41 -31
  83. package/src/js/components/upload.js +53 -63
  84. package/src/js/core/accordion.js +58 -48
  85. package/src/js/core/alert.js +9 -17
  86. package/src/js/core/core.js +17 -69
  87. package/src/js/core/cover.js +15 -15
  88. package/src/js/core/drop.js +110 -94
  89. package/src/js/core/form-custom.js +22 -27
  90. package/src/js/core/gif.js +3 -7
  91. package/src/js/core/grid.js +57 -58
  92. package/src/js/core/height-match.js +16 -29
  93. package/src/js/core/height-viewport.js +30 -34
  94. package/src/js/core/icon.js +47 -52
  95. package/src/js/core/img.js +153 -143
  96. package/src/js/core/index.js +39 -39
  97. package/src/js/core/leader.js +9 -18
  98. package/src/js/core/margin.js +21 -37
  99. package/src/js/core/modal.js +49 -36
  100. package/src/js/core/nav.js +2 -4
  101. package/src/js/core/navbar.js +113 -85
  102. package/src/js/core/offcanvas.js +51 -54
  103. package/src/js/core/overflow-auto.js +13 -17
  104. package/src/js/core/responsive.js +14 -12
  105. package/src/js/core/scroll.js +10 -20
  106. package/src/js/core/scrollspy-nav.js +34 -31
  107. package/src/js/core/scrollspy.js +37 -54
  108. package/src/js/core/sticky.js +175 -123
  109. package/src/js/core/svg.js +68 -83
  110. package/src/js/core/switcher.js +56 -47
  111. package/src/js/core/tab.js +7 -10
  112. package/src/js/core/toggle.js +69 -68
  113. package/src/js/core/video.js +22 -21
  114. package/src/js/mixin/animate.js +19 -20
  115. package/src/js/mixin/class.js +2 -4
  116. package/src/js/mixin/container.js +7 -11
  117. package/src/js/mixin/internal/animate-fade.js +73 -30
  118. package/src/js/mixin/internal/animate-slide.js +58 -41
  119. package/src/js/mixin/internal/slideshow-animations.js +7 -14
  120. package/src/js/mixin/internal/slideshow-transitioner.js +10 -17
  121. package/src/js/mixin/lazyload.js +20 -0
  122. package/src/js/mixin/media.js +5 -10
  123. package/src/js/mixin/modal.js +89 -66
  124. package/src/js/mixin/parallax.js +149 -107
  125. package/src/js/mixin/position.js +26 -20
  126. package/src/js/mixin/slider-autoplay.js +12 -21
  127. package/src/js/mixin/slider-drag.js +64 -65
  128. package/src/js/mixin/slider-nav.js +26 -35
  129. package/src/js/mixin/slider-reactive.js +2 -8
  130. package/src/js/mixin/slider.js +47 -60
  131. package/src/js/mixin/slideshow.js +12 -22
  132. package/src/js/mixin/swipe.js +72 -0
  133. package/src/js/mixin/togglable.js +89 -63
  134. package/src/js/uikit-core.js +2 -4
  135. package/src/js/uikit.js +2 -4
  136. package/src/js/util/ajax.js +25 -40
  137. package/src/js/util/animation.js +77 -75
  138. package/src/js/util/attr.js +17 -21
  139. package/src/js/util/class.js +14 -52
  140. package/src/js/util/dimensions.js +78 -49
  141. package/src/js/util/dom.js +37 -66
  142. package/src/js/util/env.js +7 -12
  143. package/src/js/util/event.js +60 -59
  144. package/src/js/util/fastdom.js +1 -6
  145. package/src/js/util/filter.js +18 -36
  146. package/src/js/util/index.js +1 -1
  147. package/src/js/util/lang.js +82 -121
  148. package/src/js/util/mouse.js +19 -17
  149. package/src/js/util/observer.js +36 -0
  150. package/src/js/util/options.js +35 -49
  151. package/src/js/util/player.js +41 -36
  152. package/src/js/util/position.js +54 -46
  153. package/src/js/util/selector.js +43 -58
  154. package/src/js/util/style.js +39 -49
  155. package/src/js/util/viewport.js +75 -64
  156. package/src/less/components/base.less +10 -33
  157. package/src/less/components/flex.less +0 -9
  158. package/src/less/components/form-range.less +48 -95
  159. package/src/less/components/form.less +0 -1
  160. package/src/less/components/height.less +3 -0
  161. package/src/less/components/leader.less +0 -1
  162. package/src/less/components/lightbox.less +0 -1
  163. package/src/less/components/modal.less +3 -7
  164. package/src/less/components/navbar.less +0 -7
  165. package/src/less/components/progress.less +14 -36
  166. package/src/less/components/slider.less +0 -3
  167. package/src/less/components/slideshow.less +0 -3
  168. package/src/less/components/text.less +16 -32
  169. package/src/less/components/utility.less +25 -0
  170. package/src/scss/components/base.scss +10 -33
  171. package/src/scss/components/flex.scss +0 -9
  172. package/src/scss/components/form-range.scss +48 -95
  173. package/src/scss/components/form.scss +3 -4
  174. package/src/scss/components/height.scss +3 -0
  175. package/src/scss/components/icon.scss +2 -2
  176. package/src/scss/components/leader.scss +0 -1
  177. package/src/scss/components/lightbox.scss +0 -1
  178. package/src/scss/components/modal.scss +3 -7
  179. package/src/scss/components/navbar.scss +0 -7
  180. package/src/scss/components/progress.scss +14 -36
  181. package/src/scss/components/search.scss +1 -1
  182. package/src/scss/components/slider.scss +0 -3
  183. package/src/scss/components/slideshow.scss +0 -3
  184. package/src/scss/components/text.scss +16 -32
  185. package/src/scss/components/utility.scss +25 -0
  186. package/src/scss/mixins-theme.scss +1 -1
  187. package/src/scss/mixins.scss +1 -1
  188. package/src/scss/variables-theme.scss +9 -9
  189. package/src/scss/variables.scss +9 -9
  190. package/tests/align.html +10 -10
  191. package/tests/animation.html +2 -2
  192. package/tests/article.html +2 -2
  193. package/tests/base.html +3 -3
  194. package/tests/card.html +10 -10
  195. package/tests/column.html +3 -3
  196. package/tests/comment.html +9 -9
  197. package/tests/countdown.html +10 -8
  198. package/tests/dotnav.html +3 -3
  199. package/tests/image.html +296 -64
  200. package/tests/images/image-type.avif +0 -0
  201. package/tests/images/image-type.jpeg +0 -0
  202. package/tests/images/image-type.webp +0 -0
  203. package/tests/index.html +8 -8
  204. package/tests/js/index.js +114 -85
  205. package/tests/lightbox.html +10 -10
  206. package/tests/marker.html +2 -2
  207. package/tests/modal.html +8 -9
  208. package/tests/navbar.html +2 -2
  209. package/tests/overlay.html +7 -7
  210. package/tests/parallax.html +16 -7
  211. package/tests/position.html +12 -12
  212. package/tests/slidenav.html +12 -12
  213. package/tests/slider.html +20 -20
  214. package/tests/sortable.html +1 -1
  215. package/tests/sticky-parallax.html +87 -99
  216. package/tests/sticky.html +56 -24
  217. package/tests/svg.html +6 -6
  218. package/tests/table.html +11 -11
  219. package/tests/thumbnav.html +12 -12
  220. package/tests/transition.html +30 -30
  221. package/tests/utility.html +50 -33
  222. package/tests/video.html +1 -1
  223. package/tests/width.html +1 -1
  224. package/src/js/mixin/flex-bug.js +0 -56
  225. package/src/js/util/promise.js +0 -191
  226. package/tests/images/animated.gif +0 -0
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
 
package/tests/transition.html CHANGED
@@ -17,28 +17,28 @@
17
17
  <div class="uk-grid-small uk-child-width-1-3@s uk-child-width-1-6@m" uk-grid>
18
18
  <div class="uk-text-center">
19
19
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
20
- <img src="images/photo.jpg" alt="">
20
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
21
21
  <div class="uk-transition-fade uk-position-bottom uk-overlay uk-overlay-default"><a href="#">Overlay</a></div>
22
22
  </div>
23
23
  <p class="uk-margin-small-top">Fade</p>
24
24
  </div>
25
25
  <div class="uk-text-center">
26
26
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
27
- <img src="images/photo.jpg" alt="">
27
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
28
28
  <div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
29
29
  </div>
30
30
  <p class="uk-margin-small-top">Fade Cover</p>
31
31
  </div>
32
32
  <div class="uk-text-center">
33
33
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
34
- <img src="images/photo.jpg" alt="">
34
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
35
35
  <div class="uk-transition-fade uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
36
36
  </div>
37
37
  <p class="uk-margin-small-top">Fade Cover Small</p>
38
38
  </div>
39
39
  <div class="uk-text-center">
40
40
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
41
- <img src="images/photo.jpg" alt="">
41
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
42
42
  <div class="uk-transition-fade uk-overlay-default uk-position-cover"></div>
43
43
  <div class="uk-position-center">Headline</div>
44
44
  </div>
@@ -46,54 +46,54 @@
46
46
  </div>
47
47
  <div class="uk-text-center">
48
48
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
49
- <img src="images/photo.jpg" alt="">
49
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
50
50
  <span class="uk-position-center uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
51
51
  </div>
52
52
  <p class="uk-margin-small-top">Icon</p>
53
53
  </div>
54
54
  <div class="uk-text-center">
55
55
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
56
- <img src="images/photo.jpg" alt="">
56
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
57
57
  <img class="uk-transition-fade uk-position-cover" src="images/dark.jpg" alt="">
58
58
  </div>
59
59
  <p class="uk-margin-small-top">Fade 2 Images</p>
60
60
  </div>
61
61
  <div class="uk-text-center">
62
62
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
63
- <img src="images/photo.jpg" alt="">
63
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
64
64
  <div class="uk-position-center uk-transition-scale-up">Headline</div>
65
65
  </div>
66
66
  <p class="uk-margin-small-top">Scale Up</p>
67
67
  </div>
68
68
  <div class="uk-text-center">
69
69
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
70
- <img src="images/photo.jpg" alt="">
70
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
71
71
  <div class="uk-transition-scale-down uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
72
72
  </div>
73
73
  <p class="uk-margin-small-top">Scale Down Cover</p>
74
74
  </div>
75
75
  <div class="uk-text-center">
76
76
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
77
- <img class="uk-transition-scale-up uk-transition-opaque" src="images/photo.jpg" alt="">
77
+ <img class="uk-transition-scale-up uk-transition-opaque" src="images/photo.jpg" width="1800" height="1200" alt="">
78
78
  </div>
79
79
  <p class="uk-margin-small-top">Scale Up Image</p>
80
80
  </div>
81
81
  <div class="uk-text-center">
82
82
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
83
- <img class="uk-transition-scale-down uk-transition-opaque" src="images/photo.jpg" alt="">
83
+ <img class="uk-transition-scale-down uk-transition-opaque" src="images/photo.jpg" width="1800" height="1200" alt="">
84
84
  </div>
85
85
  <p class="uk-margin-small-top">Scale Down Image</p>
86
86
  </div>
87
87
  <div class="uk-text-center">
88
88
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
89
- <img src="images/photo.jpg" alt="">
89
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
90
90
  <img class="uk-transition-scale-up uk-position-cover" src="images/dark.jpg" alt="">
91
91
  </div>
92
92
  <p class="uk-margin-small-top">2 Images</p>
93
93
  </div>
94
94
  <div class="uk-text-center">
95
95
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
96
- <img src="images/photo.jpg" alt="">
96
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
97
97
  <img class="uk-transition-scale-up uk-position-cover" src="images/dark.jpg" alt="">
98
98
  <span class="uk-position-center uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
99
99
  </div>
@@ -101,49 +101,49 @@
101
101
  </div>
102
102
  <div class="uk-text-center">
103
103
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
104
- <img src="images/photo.jpg" alt="">
104
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
105
105
  <div class="uk-transition-slide-top uk-position-top uk-overlay uk-overlay-default">Overlay</div>
106
106
  </div>
107
107
  <p class="uk-margin-small-top">Top</p>
108
108
  </div>
109
109
  <div class="uk-text-center">
110
110
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
111
- <img src="images/photo.jpg" alt="">
111
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
112
112
  <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">Overlay</div>
113
113
  </div>
114
114
  <p class="uk-margin-small-top">Bottom</p>
115
115
  </div>
116
116
  <div class="uk-text-center">
117
117
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
118
- <img src="images/photo.jpg" alt="">
118
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
119
119
  <div class="uk-transition-slide-left uk-position-left uk-overlay uk-overlay-default">Overlay</div>
120
120
  </div>
121
121
  <p class="uk-margin-small-top">Left</p>
122
122
  </div>
123
123
  <div class="uk-text-center">
124
124
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
125
- <img src="images/photo.jpg" alt="">
125
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
126
126
  <div class="uk-transition-slide-right uk-position-right uk-overlay uk-overlay-default">Overlay</div>
127
127
  </div>
128
128
  <p class="uk-margin-small-top">Right</p>
129
129
  </div>
130
130
  <div class="uk-text-center">
131
131
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
132
- <img src="images/photo.jpg" alt="">
132
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
133
133
  <div class="uk-transition-slide-top uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
134
134
  </div>
135
135
  <p class="uk-margin-small-top">Top Cover</p>
136
136
  </div>
137
137
  <div class="uk-text-center">
138
138
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
139
- <img src="images/photo.jpg" alt="">
139
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
140
140
  <div class="uk-transition-slide-bottom uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
141
141
  </div>
142
142
  <p class="uk-margin-small-top">Bottom Cover</p>
143
143
  </div>
144
144
  <div class="uk-text-center">
145
145
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
146
- <img src="images/photo.jpg" alt="">
146
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
147
147
  <div class="uk-position-center">
148
148
  <div class="uk-transition-slide-top-small">Headline</div>
149
149
  <div class="uk-transition-slide-bottom-small">Subheadline</div>
@@ -153,7 +153,7 @@
153
153
  </div>
154
154
  <div class="uk-text-center">
155
155
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
156
- <img src="images/photo.jpg" alt="">
156
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
157
157
  <div class="uk-position-center">
158
158
  <div class="uk-transition-slide-left-small">Headline</div>
159
159
  <div class="uk-transition-slide-right-small">Subheadline</div>
@@ -163,35 +163,35 @@
163
163
  </div>
164
164
  <div class="uk-text-center">
165
165
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
166
- <img src="images/photo.jpg" alt="">
166
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
167
167
  <div class="uk-transition-slide-top-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
168
168
  </div>
169
169
  <p class="uk-margin-small-top">Top Small</p>
170
170
  </div>
171
171
  <div class="uk-text-center">
172
172
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
173
- <img src="images/photo.jpg" alt="">
173
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
174
174
  <div class="uk-transition-slide-bottom-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
175
175
  </div>
176
176
  <p class="uk-margin-small-top">Bottom Small</p>
177
177
  </div>
178
178
  <div class="uk-text-center">
179
179
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
180
- <img src="images/photo.jpg" alt="">
180
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
181
181
  <div class="uk-transition-slide-left-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
182
182
  </div>
183
183
  <p class="uk-margin-small-top">Left Small</p>
184
184
  </div>
185
185
  <div class="uk-text-center">
186
186
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
187
- <img src="images/photo.jpg" alt="">
187
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
188
188
  <div class="uk-transition-slide-right-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
189
189
  </div>
190
190
  <p class="uk-margin-small-top">Right Small</p>
191
191
  </div>
192
192
  <div class="uk-text-center">
193
193
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
194
- <img src="images/photo.jpg" alt="">
194
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
195
195
  <div class="uk-position-center">
196
196
  <div class="uk-transition-slide-top-medium">Headline</div>
197
197
  <div class="uk-transition-slide-bottom-medium">Subheadline</div>
@@ -201,7 +201,7 @@
201
201
  </div>
202
202
  <div class="uk-text-center">
203
203
  <div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
204
- <img src="images/photo.jpg" alt="">
204
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
205
205
  <div class="uk-position-center">
206
206
  <div class="uk-transition-slide-left-medium">Headline</div>
207
207
  <div class="uk-transition-slide-right-medium">Subheadline</div>
@@ -211,28 +211,28 @@
211
211
  </div>
212
212
  <div class="uk-text-center">
213
213
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
214
- <img src="images/photo.jpg" alt="">
214
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
215
215
  <div class="uk-transition-slide-top-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
216
216
  </div>
217
217
  <p class="uk-margin-small-top">Top Medium</p>
218
218
  </div>
219
219
  <div class="uk-text-center">
220
220
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
221
- <img src="images/photo.jpg" alt="">
221
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
222
222
  <div class="uk-transition-slide-bottom-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
223
223
  </div>
224
224
  <p class="uk-margin-small-top">Bottom Medium</p>
225
225
  </div>
226
226
  <div class="uk-text-center">
227
227
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
228
- <img src="images/photo.jpg" alt="">
228
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
229
229
  <div class="uk-transition-slide-left-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
230
230
  </div>
231
231
  <p class="uk-margin-small-top">Left Medium</p>
232
232
  </div>
233
233
  <div class="uk-text-center">
234
234
  <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
235
- <img src="images/photo.jpg" alt="">
235
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
236
236
  <div class="uk-transition-slide-right-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
237
237
  </div>
238
238
  <p class="uk-margin-small-top">Right Medium</p>
package/tests/utility.html CHANGED
@@ -168,8 +168,8 @@
168
168
 
169
169
  <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
170
170
  <div class="uk-grid-small" uk-grid>
171
- <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
172
- <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
171
+ <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
172
+ <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
173
173
  </div>
174
174
  </div>
175
175
 
@@ -188,10 +188,10 @@
188
188
 
189
189
  <div uk-overflow-auto="selContainer: .uk-height-medium; selContent: .js-wrapper">
190
190
  <div class="uk-grid-small" uk-grid>
191
- <div class="uk-width-1-2"><img src="images/light.jpg" alt=""></div>
192
- <div class="uk-width-1-2"><img src="images/dark.jpg" alt=""></div>
193
- <div class="uk-width-1-2"><img src="images/photo.jpg" alt=""></div>
194
- <div class="uk-width-1-2"><img src="images/photo2.jpg" alt=""></div>
191
+ <div class="uk-width-1-2"><img src="images/light.jpg" width="1800" height="1200" alt=""></div>
192
+ <div class="uk-width-1-2"><img src="images/dark.jpg" width="1800" height="1200" alt=""></div>
193
+ <div class="uk-width-1-2"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div>
194
+ <div class="uk-width-1-2"><img src="images/photo2.jpg" width="1800" height="1200" alt=""></div>
195
195
  </div>
196
196
  </div>
197
197
 
@@ -239,7 +239,24 @@
239
239
  </div>
240
240
  <div>
241
241
  <p>Responsive Height (Image)</p>
242
- <p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" alt=""></p>
242
+ <p style="height: 100px; "><img class="uk-responsive-height" src="images/photo.jpg" width="1800" height="1200" alt=""></p>
243
+ </div>
244
+ </div>
245
+
246
+ <h2>Object Fit and Position</h2>
247
+
248
+ <div class="uk-child-width-1-3@s" uk-grid>
249
+ <div>
250
+ <p>Object Fit Cover</p>
251
+ <img class="uk-object-cover" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
252
+ </div>
253
+ <div>
254
+ <p>Object Fit Contain</p>
255
+ <img class="uk-object-contain" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
256
+ </div>
257
+ <div>
258
+ <p>Object Fit Cover Left</p>
259
+ <img class="uk-object-cover uk-object-top-left" src="images/photo.jpg" width="1000" height="1000" alt="" style="aspect-ratio: 1 / 1;">
243
260
  </div>
244
261
  </div>
245
262
 
@@ -249,7 +266,7 @@
249
266
  <div>
250
267
 
251
268
  <div class="uk-inline uk-box-shadow-hover-small">
252
- <img class="uk-invisible" src="images/photo.jpg" alt="">
269
+ <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
253
270
  <div class="uk-position-center">Hover</div>
254
271
  </div>
255
272
 
@@ -257,7 +274,7 @@
257
274
  <div>
258
275
 
259
276
  <div class="uk-inline uk-box-shadow-small">
260
- <img class="uk-invisible" src="images/photo.jpg" alt="">
277
+ <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
261
278
  <div class="uk-position-center">Small</div>
262
279
  </div>
263
280
 
@@ -265,7 +282,7 @@
265
282
  <div>
266
283
 
267
284
  <div class="uk-inline uk-box-shadow-medium">
268
- <img class="uk-invisible" src="images/photo.jpg" alt="">
285
+ <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
269
286
  <div class="uk-position-center">Medium</div>
270
287
  </div>
271
288
 
@@ -273,7 +290,7 @@
273
290
  <div>
274
291
 
275
292
  <div class="uk-inline uk-box-shadow-large">
276
- <img class="uk-invisible" src="images/photo.jpg" alt="">
293
+ <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
277
294
  <div class="uk-position-center">Large</div>
278
295
  </div>
279
296
 
@@ -281,84 +298,84 @@
281
298
  <div>
282
299
 
283
300
  <div class="uk-inline uk-box-shadow-xlarge">
284
- <img class="uk-invisible" src="images/photo.jpg" alt="">
301
+ <img class="uk-invisible" src="images/photo.jpg" width="1800" height="1200" alt="">
285
302
  <div class="uk-position-center">X-Large</div>
286
303
  </div>
287
304
 
288
305
  </div>
289
306
  <div>
290
307
 
291
- <img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" alt="">
308
+ <img class="uk-box-shadow-hover-xlarge" src="images/photo.jpg" width="1800" height="1200" alt="">
292
309
 
293
310
  </div>
294
311
  <div>
295
312
 
296
- <img class="uk-box-shadow-small" src="images/photo.jpg" alt="">
313
+ <img class="uk-box-shadow-small" src="images/photo.jpg" width="1800" height="1200" alt="">
297
314
 
298
315
  </div>
299
316
  <div>
300
317
 
301
- <img class="uk-box-shadow-medium" src="images/photo.jpg" alt="">
318
+ <img class="uk-box-shadow-medium" src="images/photo.jpg" width="1800" height="1200" alt="">
302
319
 
303
320
  </div>
304
321
  <div>
305
322
 
306
- <img class="uk-box-shadow-large" src="images/photo.jpg" alt="">
323
+ <img class="uk-box-shadow-large" src="images/photo.jpg" width="1800" height="1200" alt="">
307
324
 
308
325
  </div>
309
326
  <div>
310
327
 
311
- <img class="uk-box-shadow-xlarge" src="images/photo.jpg" alt="">
328
+ <img class="uk-box-shadow-xlarge" src="images/photo.jpg" width="1800" height="1200" alt="">
312
329
 
313
330
  </div>
314
331
  <div>
315
332
 
316
- <img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" alt="">
333
+ <img class="uk-box-shadow-hover-xlarge" src="images/light.jpg" width="1800" height="1200" alt="">
317
334
 
318
335
  </div>
319
336
  <div>
320
337
 
321
- <img class="uk-box-shadow-small" src="images/light.jpg" alt="">
338
+ <img class="uk-box-shadow-small" src="images/light.jpg" width="1800" height="1200" alt="">
322
339
 
323
340
  </div>
324
341
  <div>
325
342
 
326
- <img class="uk-box-shadow-medium" src="images/light.jpg" alt="">
343
+ <img class="uk-box-shadow-medium" src="images/light.jpg" width="1800" height="1200" alt="">
327
344
 
328
345
  </div>
329
346
  <div>
330
347
 
331
- <img class="uk-box-shadow-large" src="images/light.jpg" alt="">
348
+ <img class="uk-box-shadow-large" src="images/light.jpg" width="1800" height="1200" alt="">
332
349
 
333
350
  </div>
334
351
  <div>
335
352
 
336
- <img class="uk-box-shadow-xlarge" src="images/light.jpg" alt="">
353
+ <img class="uk-box-shadow-xlarge" src="images/light.jpg" width="1800" height="1200" alt="">
337
354
 
338
355
  </div>
339
356
  <div>
340
357
 
341
- <img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" alt="">
358
+ <img class="uk-box-shadow-hover-xlarge" src="images/dark.jpg" width="1800" height="1200" alt="">
342
359
 
343
360
  </div>
344
361
  <div>
345
362
 
346
- <img class="uk-box-shadow-small" src="images/dark.jpg" alt="">
363
+ <img class="uk-box-shadow-small" src="images/dark.jpg" width="1800" height="1200" alt="">
347
364
 
348
365
  </div>
349
366
  <div>
350
367
 
351
- <img class="uk-box-shadow-medium" src="images/dark.jpg" alt="">
368
+ <img class="uk-box-shadow-medium" src="images/dark.jpg" width="1800" height="1200" alt="">
352
369
 
353
370
  </div>
354
371
  <div>
355
372
 
356
- <img class="uk-box-shadow-large" src="images/dark.jpg" alt="">
373
+ <img class="uk-box-shadow-large" src="images/dark.jpg" width="1800" height="1200" alt="">
357
374
 
358
375
  </div>
359
376
  <div>
360
377
 
361
- <img class="uk-box-shadow-xlarge" src="images/dark.jpg" alt="">
378
+ <img class="uk-box-shadow-xlarge" src="images/dark.jpg" width="1800" height="1200" alt="">
362
379
 
363
380
  </div>
364
381
  </div>
@@ -369,21 +386,21 @@
369
386
  <div class="uk-width-1-6@m">
370
387
 
371
388
  <div class="uk-box-shadow-bottom">
372
- <img src="images/photo.jpg" alt="">
389
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
373
390
  </div>
374
391
 
375
392
  </div>
376
393
  <div class="uk-width-1-3@m">
377
394
 
378
395
  <div class="uk-box-shadow-bottom">
379
- <img src="images/photo.jpg" alt="">
396
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
380
397
  </div>
381
398
 
382
399
  </div>
383
400
  <div class="uk-width-1-2@m">
384
401
 
385
402
  <div class="uk-box-shadow-bottom">
386
- <img src="images/photo.jpg" alt="">
403
+ <img src="images/photo.jpg" width="1800" height="1200" alt="">
387
404
  </div>
388
405
 
389
406
  </div>
@@ -407,14 +424,14 @@
407
424
  <div>
408
425
  <p>Image</p>
409
426
  <a class="uk-logo" href="#">
410
- <img src="images/photo.jpg" width="200" alt="">
427
+ <img src="images/photo.jpg" width="200" height="133" alt="">
411
428
  </a>
412
429
  </div>
413
430
  <div>
414
431
  <p>+ Inverse Image</p>
415
432
  <a class="uk-logo" href="#">
416
- <img src="images/photo.jpg" width="200" alt="">
417
- <img class="uk-logo-inverse" src="images/dark.jpg" width="200" alt="">
433
+ <img src="images/photo.jpg" width="200" height="133" alt="">
434
+ <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
418
435
  </a>
419
436
  </div>
420
437
  </div>
package/tests/video.html CHANGED
@@ -20,7 +20,7 @@
20
20
  <h3>Autoplay</h3>
21
21
 
22
22
  <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
23
- <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" controls playsinline uk-video="automute: true"></video>
23
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" controls playsinline uk-video="automute: true"></video>
24
24
 
25
25
  </div>
26
26
  <div>
package/tests/width.html CHANGED
@@ -73,7 +73,7 @@
73
73
  <div><div class="uk-panel">Expand</div></div>
74
74
  <div><div class="uk-panel">Expand</div></div>
75
75
  <div><div class="uk-panel">Expandwithnonebreakingspace</div></div>
76
- <div><div class="uk-panel"><img src="images/photo.jpg" alt=""></div></div>
76
+ <div><div class="uk-panel"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div></div>
77
77
  </div>
78
78
 
79
79
  <div class="uk-grid-collapse uk-grid-match uk-child-width-expand uk-margin" uk-grid>
package/src/js/mixin/flex-bug.js DELETED
@@ -1,56 +0,0 @@
1
- import {$$, boxModelAdjust, css, isIE, toFloat} from 'uikit-util';
2
-
3
- // IE 11 fix (min-height on a flex container won't apply to its flex items)
4
- export default isIE ? {
5
-
6
- props: {
7
- selMinHeight: String
8
- },
9
-
10
- data: {
11
- selMinHeight: false,
12
- forceHeight: false
13
- },
14
-
15
- computed: {
16
-
17
- elements({selMinHeight}, $el) {
18
- return selMinHeight ? $$(selMinHeight, $el) : [$el];
19
- }
20
-
21
- },
22
-
23
- update: [
24
-
25
- {
26
-
27
- read() {
28
- css(this.elements, 'height', '');
29
- },
30
-
31
- order: -5,
32
-
33
- events: ['resize']
34
-
35
- },
36
-
37
- {
38
-
39
- write() {
40
- this.elements.forEach(el => {
41
- const height = toFloat(css(el, 'minHeight'));
42
- if (height && (this.forceHeight || Math.round(height + boxModelAdjust(el, 'height', 'content-box')) >= el.offsetHeight)) {
43
- css(el, 'height', height);
44
- }
45
- });
46
- },
47
-
48
- order: 5,
49
-
50
- events: ['resize']
51
-
52
- }
53
-
54
- ]
55
-
56
- } : {};