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/sticky-parallax.html CHANGED
@@ -8,12 +8,12 @@
8
8
  <script src="js/test.js"></script>
9
9
  </head>
10
10
 
11
- <body style="padding-bottom: 1100px;">
11
+ <body style="padding-bottom: 100vh;">
12
12
 
13
- <div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="bottom: +* +*" uk-height-viewport>
13
+ <div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="position: auto; bottom: +* +*" uk-height-viewport>
14
14
  <div class="uk-container">
15
15
 
16
- <h1 class="uk-heading-2xlarge">Sticky Section</h1>
16
+ <h1 class="uk-heading-2xlarge" uk-parallax="target: !.uk-section +* +*; end: 100%; y: -400; easing: 0;">Sticky Section</h1>
17
17
 
18
18
  </div>
19
19
  </div>
@@ -21,21 +21,20 @@
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: 200vh">
25
- <div uk-sticky="bottom: #js-sticky-parallax-container; offset: 20vh">
26
-
27
- <div class="uk-position-center">
28
- <div class="uk-flex">
29
- <div>
30
- <h1 class="uk-heading-2xlarge" uk-parallax="target: #js-sticky-parallax-container; x: 0,-250,-250,0; easing: -1; start: 60vh; end: 100vh;">Sticky</h1>
31
- </div>
32
- <div>
33
- <h1 class="uk-heading-2xlarge" uk-parallax="target: #js-sticky-parallax-container; x: 0,250,250,0; easing: -1; start: 60vh; end: 100vh;">Parallax</h1>
34
- </div>
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
+ <div>
27
+
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
+
30
+ <div style="margin-top: -200px">
31
+ <h1 class="uk-heading-2xlarge">
32
+ <span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,-15vw,-7vw,0; easing: -1; start: 60vh; end: 100vh;">Sticky</span>
33
+ <br><span class="uk-display-inline-block" uk-parallax="target: #js-sticky-parallax-container; x: 0,10vw,5vw,0; easing: -1; start: 60vh; end: 100vh;">Parallax</span>
34
+ </h1>
35
35
  </div>
36
- </div>
37
36
 
38
- <img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" alt="" width="400" height="800">
37
+ </div>
39
38
 
40
39
  </div>
41
40
  </div>
@@ -45,7 +44,7 @@
45
44
  <div class="uk-section uk-section-default uk-text-center">
46
45
 
47
46
  <div class="uk-transform-origin-bottom-center uk-margin-bottom" uk-parallax="scale: 1,.2; start: 100%; end: 40vh">
48
- <img src="images/photo2.jpg" width="1800" height="1200">
47
+ <img src="images/photo2.jpg" width="1800" height="1200" alt="">
49
48
  </div>
50
49
 
51
50
  <div class="uk-container">
@@ -58,7 +57,7 @@
58
57
  <div class="uk-section uk-section-default uk-text-center">
59
58
 
60
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>
61
- <img src="images/photo3.jpg" width="1800" height="1200" uk-cover>
60
+ <img src="images/photo3.jpg" width="1800" height="1200" alt="" uk-cover>
62
61
  </div>
63
62
 
64
63
  <div class="uk-container">
@@ -71,45 +70,33 @@
71
70
  <div class="uk-section uk-section-default uk-text-center uk-position-relative uk-position-z-index">
72
71
 
73
72
  <div class="uk-cover-container uk-position-z-index-negative" uk-sticky="bottom: true" uk-height-viewport>
74
- <img src="images/photo.jpg" width="1800" height="1200" uk-cover>
73
+ <img src="images/photo.jpg" width="1800" height="1200" alt="" uk-cover>
75
74
  </div>
76
75
 
77
76
  <div class="uk-light" style="margin-top: -100vh; padding: 30vh 0">
78
77
 
79
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
80
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
81
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
82
- </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>
83
80
  </div>
84
81
 
85
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
86
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
87
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
88
- </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>
89
84
  </div>
90
85
 
91
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
92
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
93
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
94
- </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>
95
88
  </div>
96
89
 
97
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
98
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
99
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
100
- </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>
101
92
  </div>
102
93
 
103
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
104
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
105
- <h1 class="uk-heading-xlarge uk-margin-xlarge">Sticky Background</h1>
106
- </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>
107
96
  </div>
108
97
 
109
- <div uk-parallax="start: 100%; end: 70vh; opacity: 0,1; y: 2vh, 0">
110
- <div uk-parallax="start: 100% + 30vh; end: 100%; opacity: 1,0; y: 0, -10vh">
111
- <h1 class="uk-heading-xlarge uk-margin-xlarge-top uk-margin-remove-bottom">Sticky Background</h1>
112
- </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>
113
100
  </div>
114
101
 
115
102
  </div>
@@ -117,36 +104,40 @@
117
104
 
118
105
  <div class="uk-section uk-section-default">
119
106
 
120
- <div id="js-sticky-parallax-viewport" class="uk-child-width-1-3 uk-text-center" uk-grid>
107
+ <div id="js-sticky-parallax-viewport" class="uk-child-width-1-2 uk-child-width-1-3@s uk-text-center" uk-grid>
121
108
  <div>
122
109
 
123
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
124
- <img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
125
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
126
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
127
- <img class="uk-margin-large" src="images/photo3.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="">
128
117
 
129
118
  </div>
130
119
  <div>
131
120
 
132
- <div class="uk-tile uk-tile-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">
133
122
 
134
- <div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 0, 35vh; easing: 0">
123
+ <div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
135
124
 
136
125
  <h1 class="uk-margin-remove">Sticky Parallax Viewport</h1>
137
-
126
+
138
127
  </div>
139
128
 
140
129
  </div>
141
130
 
142
131
  </div>
143
- <div>
132
+ <div class="uk-visible@s">
144
133
 
145
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
146
- <img class="uk-margin-large" src="images/photo.jpg" alt="" width="1800" height="1200">
147
- <img class="uk-margin-large" src="images/photo3.jpg" alt="" width="1800" height="1200">
148
- <img class="uk-margin-large" src="images/photo2.jpg" alt="" width="1800" height="1200">
149
- <img class="uk-margin-large" src="images/photo.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="">
150
141
 
151
142
  </div>
152
143
  </div>
@@ -155,24 +146,24 @@
155
146
 
156
147
  <div class="uk-section uk-section-default">
157
148
 
158
- <div id="js-sticky-parallax-images" class="uk-child-width-1-3" style="height: 250vh" uk-grid>
159
- <div class="uk-background-muted uk-width-expand">
160
-
161
- <div style="height: 100vh;" uk-sticky="bottom: #js-sticky-parallax-images">
149
+ <div id="js-sticky-parallax-images" style="min-height: 250vh" uk-grid>
150
+ <div class="uk-width-expand">
151
+
152
+ <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images">
162
153
  <div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
163
- <img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
164
- <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">
165
- <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">
166
157
  </div>
167
158
  </div>
168
159
 
169
160
  </div>
170
- <div class="uk-width-small">
171
- <div class="uk-position-relative uk-background-muted" style="height: 75vh"><div class="uk-position-bottom-center">75vh</div></div>
172
- <div class="uk-position-relative uk-background-primary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">125vh</div></div>
173
- <div class="uk-position-relative uk-background-secondary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">175vh</div></div>
174
- <div class="uk-position-relative uk-background-muted" style="height: 50vh"><div class="uk-position-bottom-center">225vh</div></div>
175
- <div class="uk-position-relative uk-background-primary uk-light" style="height: 25vh"><div class="uk-position-bottom-center">250vh</div></div>
161
+ <div class="uk-width-auto uk-text-small">
162
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 75vh">75vh</div>
163
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 50vh">125vh</div>
164
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-secondary uk-light" style="height: 50vh">175vh</div>
165
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 50vh">225vh</div>
166
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 25vh">250vh</div>
176
167
  </div>
177
168
  <div class="uk-width-expand">
178
169
 
@@ -182,8 +173,8 @@
182
173
  <div>
183
174
 
184
175
  <h1>Sticky Parallax Images 1</h1>
185
-
186
- <p>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>
176
+
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>
187
178
 
188
179
  </div>
189
180
  </div>
@@ -193,7 +184,7 @@
193
184
 
194
185
  <h1>Sticky Parallax Images 2</h1>
195
186
 
196
- <p>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>
187
+ <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>
197
188
 
198
189
  </div>
199
190
  </div>
@@ -203,7 +194,7 @@
203
194
 
204
195
  <h1>Sticky Parallax Images 3</h1>
205
196
 
206
- <p>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>
197
+ <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>
207
198
 
208
199
  </div>
209
200
  </div>
@@ -215,51 +206,48 @@
215
206
 
216
207
  <div class="uk-section uk-section-default">
217
208
 
218
- <div id="js-sticky-parallax-images-all" class="uk-child-width-1-3" style="height: 250vh" uk-grid>
219
- <div class="uk-background-muted uk-width-expand">
209
+ <div id="js-sticky-parallax-images-all" style="min-height: 250vh" uk-grid>
210
+ <div class="uk-width-expand">
220
211
 
221
- <div 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">
222
213
  <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
223
- <img class="uk-position-center-left" src="images/photo.jpg" alt="" width="1800" height="1200">
224
- <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">
225
- <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">
226
217
  </div>
227
218
  </div>
228
219
 
229
220
  </div>
230
- <div class="uk-width-small">
231
- <div class="uk-position-relative uk-background-muted" style="height: 100vh"><div class="uk-position-bottom-center">100vh</div></div>
232
- <div class="uk-position-relative uk-background-primary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">150vh</div></div>
233
- <div class="uk-position-relative uk-background-secondary uk-light" style="height: 50vh"><div class="uk-position-bottom-center">200vh</div></div>
234
- <div class="uk-position-relative uk-background-muted" style="height: 50vh"><div class="uk-position-bottom-center">250vh</div></div>
221
+ <div class="uk-width-auto uk-text-small">
222
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 100vh">100vh</div>
223
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-primary uk-light" style="height: 50vh">150vh</div>
224
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-secondary uk-light" style="height: 50vh">200vh</div>
225
+ <div class="uk-flex uk-flex-center uk-flex-bottom uk-background-muted" style="height: 50vh">250vh</div>
235
226
  </div>
236
227
  <div class="uk-width-expand">
237
228
 
238
- <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">
239
230
  <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
240
- <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 90vh; end: 100% + 100vh - 100vh; opacity: 0,1">
241
- <div uk-parallax="target: #js-sticky-parallax-images-all; start: 140vh; end: 100% + 100vh - 150vh; opacity: 1,0">
242
231
 
243
- <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">
233
+
234
+ <h1>Sticky Parallax Images All 1</h1>
244
235
 
245
- <p>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>
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>
246
237
 
247
- </div>
248
238
  </div>
249
- <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 160vh; opacity: 0,1">
250
- <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">
251
240
 
252
- <h1>Sticky Parallax Images All 2</h1>
241
+ <h1>Sticky Parallax Images All 2</h1>
253
242
 
254
- <p>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>
255
244
 
256
- </div>
257
245
  </div>
258
- <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">
259
247
 
260
248
  <h1>Sticky Parallax Images All 3</h1>
261
249
 
262
- <p>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>
250
+ <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>
263
251
 
264
252
  </div>
265
253
  </div>
package/tests/sticky.html CHANGED
@@ -8,54 +8,80 @@
8
8
  <script src="js/test.js"></script>
9
9
  <style>
10
10
 
11
- #viewport { border: 1px dashed rgba(0,0,0,0.2); }
11
+ .viewport { border: 1px dashed rgba(0,0,0,0.2); }
12
12
 
13
13
  </style>
14
14
  </head>
15
15
 
16
16
  <body>
17
17
 
18
- <div class="uk-container" style="height: 3500px;">
18
+ <div class="uk-container">
19
19
 
20
20
  <h1>Sticky</h1>
21
21
 
22
- <div id="viewport" class="uk-margin">
23
- <div class="uk-grid uk-child-width-1-6" uk-height-viewport="offset-top: true">
24
- <div>
22
+ <div class="uk-grid">
23
+ <div class="uk-width-5-6">
24
+ <div class="viewport uk-margin">
25
+ <div class="uk-grid uk-child-width-1-6" uk-height-viewport="offset-top: true">
26
+ <div>
25
27
 
26
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="offset: 50; bottom: #viewport">Stick to container; 50px offset</div>
28
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="offset: 50; bottom: !.viewport">Stick to container; 50px offset</div>
27
29
 
28
- </div>
29
- <div>
30
+ </div>
31
+ <div>
30
32
 
31
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 50vh; target-offset: 10">Sticky after 50vh; Scroll up if initially above paragraph below</div>
33
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 50vh; target-offset: 10">Sticky after 50vh; Scroll up if initially above paragraph below</div>
32
34
 
33
- </div>
34
- <div>
35
+ </div>
36
+ <div>
35
37
 
36
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: #viewport; animation: uk-animation-slide-top">Stick below container; animation</div>
38
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: !.viewport; animation: uk-animation-slide-top">Stick below container; animation</div>
37
39
 
38
- </div>
39
- <div>
40
+ </div>
41
+ <div>
40
42
 
41
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: #hash">Stick until next paragraph</div>
43
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: #hash">Stick until next paragraph</div>
42
44
 
43
- </div>
44
- <div>
45
+ </div>
46
+ <div>
45
47
 
46
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="show-on-up: true; animation: uk-animation-slide-top">Sticky on scroll up; animation</div>
48
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="show-on-up: true; animation: uk-animation-slide-top">Sticky on scroll up; animation</div>
47
49
 
50
+ </div>
51
+ <div>
52
+
53
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 300; animation: uk-animation-slide-top; media: 640">Sticky after 300px scrolling; @media 640px</div>
54
+
55
+ </div>
56
+ </div>
48
57
  </div>
49
- <div>
50
58
 
51
- <div class="uk-card uk-card-primary uk-card-body" uk-sticky="top: 300; animation: uk-animation-slide-top; media: 640">Sticky after 300px scrolling; @media 640px</div>
59
+ <p id="hash" class="uk-margin-large">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
60
+
61
+ <div class="viewport uk-margin">
62
+ <div class="uk-grid uk-child-width-1-6" uk-height-viewport>
63
+ <div>
52
64
 
65
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="position: bottom; bottom: !.viewport">Sticky bottom</div>
66
+
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ </div>
72
+ <div class="uk-width-1-6">
73
+ <div class="viewport" style="min-height: 200vh;">
74
+ <div>
75
+ <div class="uk-card uk-card-primary uk-card-body" uk-sticky="bottom: !.viewport">
76
+ <p>Oversized Content</p>
77
+
78
+ <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
79
+ </div>
80
+ </div>
53
81
  </div>
54
82
  </div>
55
83
  </div>
56
84
 
57
- <p id="hash" class="uk-margin-large">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
58
-
59
85
  <h2>JavaScript Options</h2>
60
86
 
61
87
  <div class="uk-overflow-auto">
@@ -69,11 +95,17 @@
69
95
  </tr>
70
96
  </thead>
71
97
  <tbody>
98
+ <tr>
99
+ <td><code>position</code></td>
100
+ <td>`top`|`bottom`|`auto`</td>
101
+ <td>`top`</td>
102
+ <td>The position the element should be stuck to. With position `auto` the element sticks to the top of the viewport if it's smaller than the viewport, otherwise it sticks to the top.</td>
103
+ </tr>
72
104
  <tr>
73
105
  <td><code>top</code></td>
74
106
  <td>Number|Viewport Height|CSS Selector</td>
75
107
  <td>0</td>
76
- <td>The top offset from where the element should be stick.</td>
108
+ <td>The top offset from where the element should stick.</td>
77
109
  </tr>
78
110
  <tr>
79
111
  <td><code>bottom</code></td>
@@ -85,7 +117,7 @@
85
117
  <td><code>offset</code></td>
86
118
  <td>String</td>
87
119
  <td>0</td>
88
- <td>The offset the Sticky should be fixed to.</td>
120
+ <td>The offset the Sticky should be fixed to. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
89
121
  </tr>
90
122
  <tr>
91
123
  <td><code>animation</code></td>
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>