uikit 3.25.17-dev.80dfe87 → 3.25.17-dev.8c70e44

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 (200) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/build/prefix.js +1 -1
  3. package/build/publishDev.js +1 -1
  4. package/build/release.js +2 -2
  5. package/build/scope.js +1 -1
  6. package/build/scss.js +1 -1
  7. package/dist/css/uikit-core-rtl.css +892 -802
  8. package/dist/css/uikit-core-rtl.min.css +1 -1
  9. package/dist/css/uikit-core.css +892 -802
  10. package/dist/css/uikit-core.min.css +1 -1
  11. package/dist/css/uikit-rtl.css +893 -803
  12. package/dist/css/uikit-rtl.min.css +1 -1
  13. package/dist/css/uikit.css +893 -803
  14. package/dist/css/uikit.min.css +1 -1
  15. package/dist/js/components/countdown.js +1 -1
  16. package/dist/js/components/countdown.min.js +1 -1
  17. package/dist/js/components/filter.js +1 -1
  18. package/dist/js/components/filter.min.js +1 -1
  19. package/dist/js/components/lightbox-panel.js +133 -132
  20. package/dist/js/components/lightbox-panel.min.js +1 -1
  21. package/dist/js/components/lightbox.js +134 -133
  22. package/dist/js/components/lightbox.min.js +1 -1
  23. package/dist/js/components/marquee.js +179 -0
  24. package/dist/js/components/marquee.min.js +1 -0
  25. package/dist/js/components/notification.js +1 -1
  26. package/dist/js/components/notification.min.js +1 -1
  27. package/dist/js/components/parallax.js +8 -12
  28. package/dist/js/components/parallax.min.js +1 -1
  29. package/dist/js/components/slider-parallax.js +8 -12
  30. package/dist/js/components/slider-parallax.min.js +1 -1
  31. package/dist/js/components/slider.js +41 -25
  32. package/dist/js/components/slider.min.js +1 -1
  33. package/dist/js/components/slideshow-parallax.js +8 -12
  34. package/dist/js/components/slideshow-parallax.min.js +1 -1
  35. package/dist/js/components/slideshow.js +71 -102
  36. package/dist/js/components/slideshow.min.js +1 -1
  37. package/dist/js/components/sortable.js +1 -1
  38. package/dist/js/components/sortable.min.js +1 -1
  39. package/dist/js/components/tooltip.js +19 -19
  40. package/dist/js/components/tooltip.min.js +1 -1
  41. package/dist/js/components/upload.js +1 -1
  42. package/dist/js/components/upload.min.js +1 -1
  43. package/dist/js/uikit-core.js +754 -262
  44. package/dist/js/uikit-core.min.js +1 -1
  45. package/dist/js/uikit-icons.js +1 -1
  46. package/dist/js/uikit-icons.min.js +1 -1
  47. package/dist/js/uikit.js +629 -374
  48. package/dist/js/uikit.min.js +1 -1
  49. package/package.json +2 -2
  50. package/src/js/api/component.js +2 -3
  51. package/src/js/api/observables.js +2 -4
  52. package/src/js/api/options.js +6 -3
  53. package/src/js/api/props.js +1 -4
  54. package/src/js/api/state.js +7 -8
  55. package/src/js/components/index.js +1 -0
  56. package/src/js/components/internal/lightbox-animations.js +7 -26
  57. package/src/js/components/internal/slideshow-animations.js +15 -62
  58. package/src/js/components/lightbox-panel.js +121 -96
  59. package/src/js/components/lightbox.js +5 -8
  60. package/src/js/components/marquee.js +123 -0
  61. package/src/js/components/tooltip.js +4 -2
  62. package/src/js/core/accordion.js +78 -29
  63. package/src/js/core/drop.js +5 -4
  64. package/src/js/core/dropnav.js +3 -3
  65. package/src/js/core/grid.js +5 -19
  66. package/src/js/core/height-match.js +1 -2
  67. package/src/js/core/margin.js +3 -0
  68. package/src/js/core/overflow-fade.js +5 -5
  69. package/src/js/core/sticky.js +1 -1
  70. package/src/js/core/switcher.js +24 -44
  71. package/src/js/core/video.js +172 -15
  72. package/src/js/mixin/connect.js +57 -0
  73. package/src/js/mixin/internal/slideshow-animations.js +5 -13
  74. package/src/js/mixin/internal/slideshow-transitioner.js +2 -2
  75. package/src/js/mixin/modal.js +4 -3
  76. package/src/js/mixin/parallax.js +1 -4
  77. package/src/js/mixin/position.js +1 -1
  78. package/src/js/mixin/scroll-driven.js +57 -0
  79. package/src/js/mixin/slider-nav.js +1 -1
  80. package/src/js/mixin/slider-parallax.js +9 -38
  81. package/src/js/mixin/togglable.js +13 -14
  82. package/src/js/util/attr.js +7 -7
  83. package/src/js/util/class.js +1 -1
  84. package/src/js/util/dom.js +3 -4
  85. package/src/js/util/lang.js +1 -1
  86. package/src/js/util/player.js +4 -4
  87. package/src/js/util/style.js +10 -15
  88. package/src/js/util/viewport.js +22 -25
  89. package/src/less/components/_import.less +6 -1
  90. package/src/less/components/base.less +1 -1
  91. package/src/less/components/button.less +1 -1
  92. package/src/less/components/dropcap.less +71 -0
  93. package/src/less/components/floating-shadow.less +65 -0
  94. package/src/less/components/form.less +5 -5
  95. package/src/less/components/grid.less +57 -64
  96. package/src/less/components/logo.less +94 -0
  97. package/src/less/components/margin.less +81 -81
  98. package/src/less/components/marquee.less +133 -0
  99. package/src/less/components/nav.less +1 -1
  100. package/src/less/components/padding.less +9 -9
  101. package/src/less/components/utility.less +0 -157
  102. package/src/less/theme/_import.less +5 -1
  103. package/src/less/theme/dropcap.less +29 -0
  104. package/src/less/theme/floating-shadow.less +20 -0
  105. package/src/less/theme/logo.less +29 -0
  106. package/src/less/theme/marquee.less +14 -0
  107. package/src/less/theme/utility.less +0 -32
  108. package/src/scss/components/_import.scss +6 -1
  109. package/src/scss/components/base.scss +1 -1
  110. package/src/scss/components/button.scss +1 -1
  111. package/src/scss/components/dropcap.scss +63 -0
  112. package/src/scss/components/floating-shadow.scss +62 -0
  113. package/src/scss/components/form.scss +5 -5
  114. package/src/scss/components/grid.scss +57 -64
  115. package/src/scss/components/logo.scss +75 -0
  116. package/src/scss/components/margin.scss +81 -81
  117. package/src/scss/components/marquee.scss +136 -0
  118. package/src/scss/components/nav.scss +1 -1
  119. package/src/scss/components/padding.scss +9 -9
  120. package/src/scss/components/utility.scss +0 -128
  121. package/src/scss/mixins-theme.scss +41 -32
  122. package/src/scss/mixins.scss +38 -29
  123. package/src/scss/variables-theme.scss +14 -9
  124. package/src/scss/variables.scss +14 -9
  125. package/tests/accordion.html +77 -10
  126. package/tests/alert.html +1 -1
  127. package/tests/align.html +5 -5
  128. package/tests/animation.html +4 -4
  129. package/tests/article.html +7 -7
  130. package/tests/background.html +2 -2
  131. package/tests/badge.html +1 -1
  132. package/tests/base.html +2 -2
  133. package/tests/button.html +1 -1
  134. package/tests/card.html +15 -15
  135. package/tests/close.html +2 -2
  136. package/tests/comment.html +9 -9
  137. package/tests/container.html +2 -2
  138. package/tests/countdown.html +21 -21
  139. package/tests/cover.html +3 -3
  140. package/tests/description-list.html +1 -1
  141. package/tests/divider.html +3 -3
  142. package/tests/dotnav.html +1 -1
  143. package/tests/drop.html +7 -7
  144. package/tests/dropbar.html +5 -5
  145. package/tests/dropcap.html +26 -0
  146. package/tests/dropdown.html +1 -1
  147. package/tests/dropnav.html +18 -18
  148. package/tests/filter.html +3 -3
  149. package/tests/floating-shadow.html +44 -0
  150. package/tests/form.html +14 -14
  151. package/tests/grid.html +41 -47
  152. package/tests/heading.html +2 -2
  153. package/tests/height-viewport.html +4 -4
  154. package/tests/height.html +5 -5
  155. package/tests/icon.html +8 -8
  156. package/tests/image.html +6 -6
  157. package/tests/index.html +13 -13
  158. package/tests/js/index.js +1 -1
  159. package/tests/leader.html +5 -5
  160. package/tests/lightbox.html +6 -6
  161. package/tests/link.html +1 -1
  162. package/tests/list.html +4 -4
  163. package/tests/logo.html +84 -0
  164. package/tests/margin.html +7 -7
  165. package/tests/marker.html +3 -3
  166. package/tests/marquee.html +617 -0
  167. package/tests/modal.html +3 -3
  168. package/tests/nav.html +5 -5
  169. package/tests/navbar.html +27 -27
  170. package/tests/notification.html +2 -2
  171. package/tests/offcanvas.html +12 -12
  172. package/tests/overlay.html +3 -3
  173. package/tests/padding.html +1 -1
  174. package/tests/pagination.html +3 -3
  175. package/tests/parallax.html +1 -1
  176. package/tests/position.html +6 -6
  177. package/tests/scrollspy.html +12 -12
  178. package/tests/search.html +5 -5
  179. package/tests/section.html +17 -17
  180. package/tests/slidenav.html +3 -3
  181. package/tests/slider.html +5 -5
  182. package/tests/slideshow.html +3 -3
  183. package/tests/sortable.html +15 -15
  184. package/tests/sticky-navbar.html +4 -4
  185. package/tests/sticky-parallax.html +3 -3
  186. package/tests/sticky.html +3 -3
  187. package/tests/svg.html +3 -2
  188. package/tests/switcher.html +6 -6
  189. package/tests/tab.html +4 -4
  190. package/tests/text.html +3 -3
  191. package/tests/tile.html +4 -4
  192. package/tests/toggle.html +1 -1
  193. package/tests/tooltip.html +3 -3
  194. package/tests/totop.html +2 -2
  195. package/tests/transition.html +1 -1
  196. package/tests/upload.html +5 -5
  197. package/tests/utility.html +16 -116
  198. package/tests/video.html +224 -24
  199. package/tests/visibility.html +4 -4
  200. package/tests/width.html +12 -12
package/tests/marquee.html ADDED
@@ -0,0 +1,617 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-gb" dir="ltr">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Marquee - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .test > :nth-child(10n-9) > canvas { background: rgba(0,0,0,0.1); }
12
+ .test > :nth-child(10n-8) > canvas { background: rgba(0,0,0,0.15); }
13
+ .test > :nth-child(10n-7) > canvas { background: rgba(0,0,0,0.2); }
14
+ .test > :nth-child(10n-6) > canvas { background: rgba(0,0,0,0.25); }
15
+ .test > :nth-child(10n-5) > canvas { background: rgba(0,0,0,0.3); }
16
+ .test > :nth-child(10n-4) > canvas { background: rgba(0,0,0,0.35); }
17
+ .test > :nth-child(10n-3) > canvas { background: rgba(0,0,0,0.40); }
18
+ .test > :nth-child(10n-2) > canvas { background: rgba(0,0,0,0.45); }
19
+ .test > :nth-child(10n-1) > canvas { background: rgba(0,0,0,0.50); }
20
+ .test > :nth-child(10n) > canvas { background: rgba(0,0,0,0.55); }
21
+
22
+ </style>
23
+ </head>
24
+
25
+ <body>
26
+
27
+ <div class="uk-container">
28
+
29
+ <h1>Marquee</h1>
30
+
31
+ <div class="uk-margin">
32
+ <select id="js-reverse-switcher" class="uk-select uk-form-width-medium" aria-label="Direction switcher">
33
+ <option value="0">Normal Direction</option>
34
+ <option value="1">Reverse Direction</option>
35
+ </select>
36
+ <input id="js-velocity-switcher" type="number" class="uk-input uk-form-width-small" aria-label="Velocity" value="50">
37
+ <select id="js-pause-switcher" class="uk-select uk-form-width-medium" aria-label="Pause On Hover switcher">
38
+ <option value="0">Do not pause on hover</option>
39
+ <option value="1">Pause On Hover</option>
40
+ </select>
41
+ <input id="js-pause-velocity-switcher" type="number" class="uk-input uk-form-width-small" aria-label="Velocity On Hover" value="10">
42
+ <select id="js-fade-size-switcher" class="uk-select uk-form-width-medium" aria-label="Fade Size">
43
+ <option value="0">Without Fade</option>
44
+ <option value="100">With Fade</option>
45
+ </select>
46
+ </div>
47
+
48
+ <h2>Content Widths</h2>
49
+
50
+ <div class="uk-marquee" uk-marquee>
51
+
52
+ <div class="test uk-marquee-items">
53
+ <div>
54
+ <canvas width="320" height="200"></canvas>
55
+ <div class="uk-position-center uk-panel"><h1>1</h1></div>
56
+ </div>
57
+ <div>
58
+ <canvas width="320" height="200"></canvas>
59
+ <div class="uk-position-center uk-panel"><h1>2</h1></div>
60
+ </div>
61
+ <div>
62
+ <canvas width="320" height="200"></canvas>
63
+ <div class="uk-position-center uk-panel"><h1>3</h1></div>
64
+ </div>
65
+ <div>
66
+ <canvas width="320" height="200"></canvas>
67
+ <div class="uk-position-center uk-panel"><h1>4</h1></div>
68
+ </div>
69
+ <div>
70
+ <canvas width="320" height="200"></canvas>
71
+ <div class="uk-position-center uk-panel"><h1>5</h1></div>
72
+ </div>
73
+ <div>
74
+ <canvas width="320" height="200"></canvas>
75
+ <div class="uk-position-center uk-panel"><h1>6</h1></div>
76
+ </div>
77
+ <div>
78
+ <canvas width="320" height="200"></canvas>
79
+ <div class="uk-position-center uk-panel"><h1>7</h1></div>
80
+ </div>
81
+ <div>
82
+ <canvas width="320" height="200"></canvas>
83
+ <div class="uk-position-center uk-panel"><h1>8</h1></div>
84
+ </div>
85
+ <div>
86
+ <canvas width="320" height="200"></canvas>
87
+ <div class="uk-position-center uk-panel"><h1>9</h1></div>
88
+ </div>
89
+ <div>
90
+ <canvas width="320" height="200"></canvas>
91
+ <div class="uk-position-center uk-panel"><h1>10</h1></div>
92
+ </div>
93
+ <div>
94
+ <canvas width="320" height="200"></canvas>
95
+ <div class="uk-position-center uk-panel"><h1>11</h1></div>
96
+ </div>
97
+ <div>
98
+ <canvas width="320" height="200"></canvas>
99
+ <div class="uk-position-center uk-panel"><h1>12</h1></div>
100
+ </div>
101
+ </div>
102
+
103
+ </div>
104
+
105
+ <h3>Different Widths</h3>
106
+
107
+ <div class="uk-marquee" uk-marquee>
108
+
109
+ <div class="test uk-marquee-items">
110
+ <div>
111
+ <canvas width="400" height="200"></canvas>
112
+ <div class="uk-position-center uk-panel"><h1>1</h1></div>
113
+ </div>
114
+ <div>
115
+ <canvas width="240" height="200"></canvas>
116
+ <div class="uk-position-center uk-panel"><h1>2</h1></div>
117
+ </div>
118
+ <div>
119
+ <canvas width="480" height="200"></canvas>
120
+ <div class="uk-position-center uk-panel"><h1>3</h1></div>
121
+ </div>
122
+ <div>
123
+ <canvas width="300" height="200"></canvas>
124
+ <div class="uk-position-center uk-panel"><h1>4</h1></div>
125
+ </div>
126
+ <div>
127
+ <canvas width="400" height="200"></canvas>
128
+ <div class="uk-position-center uk-panel"><h1>5</h1></div>
129
+ </div>
130
+ <div>
131
+ <canvas width="240" height="200"></canvas>
132
+ <div class="uk-position-center uk-panel"><h1>6</h1></div>
133
+ </div>
134
+ <div>
135
+ <canvas width="480" height="200"></canvas>
136
+ <div class="uk-position-center uk-panel"><h1>7</h1></div>
137
+ </div>
138
+ <div>
139
+ <canvas width="300" height="200"></canvas>
140
+ <div class="uk-position-center uk-panel"><h1>8</h1></div>
141
+ </div>
142
+ <div>
143
+ <canvas width="400" height="200"></canvas>
144
+ <div class="uk-position-center uk-panel"><h1>9</h1></div>
145
+ </div>
146
+ <div>
147
+ <canvas width="240" height="200"></canvas>
148
+ <div class="uk-position-center uk-panel"><h1>10</h1></div>
149
+ </div>
150
+ <div>
151
+ <canvas width="480" height="200"></canvas>
152
+ <div class="uk-position-center uk-panel"><h1>11</h1></div>
153
+ </div>
154
+ <div>
155
+ <canvas width="300" height="200"></canvas>
156
+ <div class="uk-position-center uk-panel"><h1>12</h1></div>
157
+ </div>
158
+ </div>
159
+
160
+ </div>
161
+
162
+ <h2>Grid + Toggle on hover</h2>
163
+
164
+ <div class="uk-marquee uk-light" uk-marquee>
165
+
166
+ <div class="uk-grid uk-marquee-items uk-child-width-1-2@s uk-child-width-1-4@m">
167
+ <div>
168
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
169
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
170
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
171
+ </div>
172
+ </div>
173
+ <div>
174
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
175
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
176
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
177
+ </div>
178
+ </div>
179
+ <div>
180
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
181
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
182
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
183
+ </div>
184
+ </div>
185
+ <div>
186
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
187
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
188
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
189
+ </div>
190
+ </div>
191
+ <div>
192
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
193
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
194
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
195
+ </div>
196
+ </div>
197
+ <div>
198
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
199
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
200
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
201
+ </div>
202
+ </div>
203
+ <div>
204
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
205
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
206
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
207
+ </div>
208
+ </div>
209
+ <div>
210
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
211
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
212
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
213
+ </div>
214
+ </div>
215
+ <div>
216
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
217
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
218
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
219
+ </div>
220
+ </div>
221
+ <div>
222
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
223
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
224
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ </div>
230
+
231
+ <h2>Cards</h2>
232
+
233
+ <div class="uk-marquee" uk-marquee>
234
+
235
+ <div class="uk-grid uk-marquee-items uk-child-width-1-2@s uk-child-width-1-4@m">
236
+ <div>
237
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
238
+ <h3 class="uk-card-title">Default</h3>
239
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
240
+ </div>
241
+ </div>
242
+ <div>
243
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
244
+ <h3 class="uk-card-title">Primary</h3>
245
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
246
+ </div>
247
+ </div>
248
+ <div>
249
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
250
+ <h3 class="uk-card-title">Secondary</h3>
251
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
252
+ </div>
253
+ </div>
254
+ <div>
255
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
256
+ <h3 class="uk-card-title">Default</h3>
257
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
258
+ </div>
259
+ </div>
260
+ <div>
261
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
262
+ <h3 class="uk-card-title">Primary</h3>
263
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
264
+ </div>
265
+ </div>
266
+ <div>
267
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
268
+ <h3 class="uk-card-title">Secondary</h3>
269
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
270
+ </div>
271
+ </div>
272
+ <div>
273
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
274
+ <h3 class="uk-card-title">Default</h3>
275
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
276
+ </div>
277
+ </div>
278
+ <div>
279
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
280
+ <h3 class="uk-card-title">Primary</h3>
281
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
282
+ </div>
283
+ </div>
284
+ <div>
285
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
286
+ <h3 class="uk-card-title">Secondary</h3>
287
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ </div>
293
+
294
+ <h2>Vertical</h2>
295
+
296
+ <div class="uk-grid uk-child-width-1-4@m">
297
+ <div>
298
+
299
+ <div class="uk-marquee uk-marquee-vertical uk-height-large" uk-marquee>
300
+
301
+ <div class="test uk-marquee-items">
302
+ <div>
303
+ <canvas width="320" height="200"></canvas>
304
+ <div class="uk-position-center uk-panel"><h1>1</h1></div>
305
+ </div>
306
+ <div>
307
+ <canvas width="320" height="200"></canvas>
308
+ <div class="uk-position-center uk-panel"><h1>2</h1></div>
309
+ </div>
310
+ <div>
311
+ <canvas width="320" height="200"></canvas>
312
+ <div class="uk-position-center uk-panel"><h1>3</h1></div>
313
+ </div>
314
+ <div>
315
+ <canvas width="320" height="200"></canvas>
316
+ <div class="uk-position-center uk-panel"><h1>4</h1></div>
317
+ </div>
318
+ <div>
319
+ <canvas width="320" height="200"></canvas>
320
+ <div class="uk-position-center uk-panel"><h1>5</h1></div>
321
+ </div>
322
+ <div>
323
+ <canvas width="320" height="200"></canvas>
324
+ <div class="uk-position-center uk-panel"><h1>6</h1></div>
325
+ </div>
326
+ <div>
327
+ <canvas width="320" height="200"></canvas>
328
+ <div class="uk-position-center uk-panel"><h1>7</h1></div>
329
+ </div>
330
+ <div>
331
+ <canvas width="320" height="200"></canvas>
332
+ <div class="uk-position-center uk-panel"><h1>8</h1></div>
333
+ </div>
334
+ <div>
335
+ <canvas width="320" height="200"></canvas>
336
+ <div class="uk-position-center uk-panel"><h1>9</h1></div>
337
+ </div>
338
+ <div>
339
+ <canvas width="320" height="200"></canvas>
340
+ <div class="uk-position-center uk-panel"><h1>10</h1></div>
341
+ </div>
342
+ <div>
343
+ <canvas width="320" height="200"></canvas>
344
+ <div class="uk-position-center uk-panel"><h1>11</h1></div>
345
+ </div>
346
+ <div>
347
+ <canvas width="320" height="200"></canvas>
348
+ <div class="uk-position-center uk-panel"><h1>12</h1></div>
349
+ </div>
350
+ </div>
351
+
352
+ </div>
353
+
354
+ </div>
355
+ <div>
356
+
357
+ <div class="uk-marquee uk-marquee-vertical uk-height-large" uk-marquee>
358
+
359
+ <div class="test uk-marquee-items">
360
+ <div>
361
+ <canvas width="320" height="400"></canvas>
362
+ <div class="uk-position-center uk-panel"><h1>1</h1></div>
363
+ </div>
364
+ <div>
365
+ <canvas width="320" height="240"></canvas>
366
+ <div class="uk-position-center uk-panel"><h1>2</h1></div>
367
+ </div>
368
+ <div>
369
+ <canvas width="320" height="480"></canvas>
370
+ <div class="uk-position-center uk-panel"><h1>3</h1></div>
371
+ </div>
372
+ <div>
373
+ <canvas width="320" height="300"></canvas>
374
+ <div class="uk-position-center uk-panel"><h1>4</h1></div>
375
+ </div>
376
+ <div>
377
+ <canvas width="320" height="400"></canvas>
378
+ <div class="uk-position-center uk-panel"><h1>5</h1></div>
379
+ </div>
380
+ <div>
381
+ <canvas width="320" height="240"></canvas>
382
+ <div class="uk-position-center uk-panel"><h1>6</h1></div>
383
+ </div>
384
+ <div>
385
+ <canvas width="320" height="480"></canvas>
386
+ <div class="uk-position-center uk-panel"><h1>7</h1></div>
387
+ </div>
388
+ <div>
389
+ <canvas width="320" height="300"></canvas>
390
+ <div class="uk-position-center uk-panel"><h1>8</h1></div>
391
+ </div>
392
+ <div>
393
+ <canvas width="320" height="400"></canvas>
394
+ <div class="uk-position-center uk-panel"><h1>9</h1></div>
395
+ </div>
396
+ <div>
397
+ <canvas width="320" height="240"></canvas>
398
+ <div class="uk-position-center uk-panel"><h1>10</h1></div>
399
+ </div>
400
+ <div>
401
+ <canvas width="320" height="480"></canvas>
402
+ <div class="uk-position-center uk-panel"><h1>11</h1></div>
403
+ </div>
404
+ <div>
405
+ <canvas width="320" height="300"></canvas>
406
+ <div class="uk-position-center uk-panel"><h1>12</h1></div>
407
+ </div>
408
+ </div>
409
+
410
+ </div>
411
+
412
+ </div>
413
+ <div>
414
+
415
+ <div class="uk-marquee uk-marquee-vertical uk-height-large uk-light" uk-marquee>
416
+
417
+ <div class="uk-grid uk-marquee-items uk-child-width-1-1">
418
+ <div>
419
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
420
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
421
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
422
+ </div>
423
+ </div>
424
+ <div>
425
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
426
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
427
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
428
+ </div>
429
+ </div>
430
+ <div>
431
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
432
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
433
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
434
+ </div>
435
+ </div>
436
+ <div>
437
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
438
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
439
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
440
+ </div>
441
+ </div>
442
+ <div>
443
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
444
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
445
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
446
+ </div>
447
+ </div>
448
+ <div>
449
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
450
+ <img src="images/slider1.jpg" width="400" height="600" alt="">
451
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
452
+ </div>
453
+ </div>
454
+ <div>
455
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
456
+ <img src="images/slider2.jpg" width="400" height="600" alt="">
457
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
458
+ </div>
459
+ </div>
460
+ <div>
461
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
462
+ <img src="images/slider3.jpg" width="400" height="600" alt="">
463
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
464
+ </div>
465
+ </div>
466
+ <div>
467
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
468
+ <img src="images/slider4.jpg" width="400" height="600" alt="">
469
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
470
+ </div>
471
+ </div>
472
+ <div>
473
+ <div class="uk-panel uk-transition-toggle" tabindex="0">
474
+ <img src="images/slider5.jpg" width="400" height="600" alt="">
475
+ <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ </div>
481
+
482
+ </div>
483
+ <div>
484
+
485
+ <div class="uk-marquee uk-marquee-vertical uk-height-large" uk-marquee>
486
+
487
+ <div class="uk-grid uk-marquee-items uk-child-width-1-1">
488
+ <div>
489
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
490
+ <h3 class="uk-card-title">Default</h3>
491
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
492
+ </div>
493
+ </div>
494
+ <div>
495
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
496
+ <h3 class="uk-card-title">Primary</h3>
497
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
498
+ </div>
499
+ </div>
500
+ <div>
501
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
502
+ <h3 class="uk-card-title">Secondary</h3>
503
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
504
+ </div>
505
+ </div>
506
+ <div>
507
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
508
+ <h3 class="uk-card-title">Default</h3>
509
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
510
+ </div>
511
+ </div>
512
+ <div>
513
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
514
+ <h3 class="uk-card-title">Primary</h3>
515
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
516
+ </div>
517
+ </div>
518
+ <div>
519
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
520
+ <h3 class="uk-card-title">Secondary</h3>
521
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
522
+ </div>
523
+ </div>
524
+ <div>
525
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
526
+ <h3 class="uk-card-title">Default</h3>
527
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
528
+ </div>
529
+ </div>
530
+ <div>
531
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
532
+ <h3 class="uk-card-title">Primary</h3>
533
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
534
+ </div>
535
+ </div>
536
+ <div>
537
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
538
+ <h3 class="uk-card-title">Secondary</h3>
539
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ </div>
545
+
546
+ </div>
547
+ </div>
548
+
549
+ <h2>JavaScript Options</h2>
550
+
551
+ <div class="uk-overflow-auto">
552
+ <table class="uk-table uk-table-striped">
553
+ <thead>
554
+ <tr>
555
+ <th>Option</th>
556
+ <th>Value</th>
557
+ <th>Default</th>
558
+ <th>Description</th>
559
+ </tr>
560
+ </thead>
561
+ <tbody>
562
+ <tr>
563
+ <td><code>reverse</code></td>
564
+ <td>Boolean</td>
565
+ <td>false</td>
566
+ <td>Reverse direction.</td>
567
+ </tr>
568
+ <tr>
569
+ <td><code>velocity</code></td>
570
+ <td>Number</td>
571
+ <td>25</td>
572
+ <td>The animation velocity (pixel/s).</td>
573
+ </tr>
574
+ <tr>
575
+ <td><code>start</code></td>
576
+ <td>Number</td>
577
+ <td>0</td>
578
+ <td>The animation start position, from 0% to 100%.</td>
579
+ </tr>
580
+ <tr>
581
+ <td><code>pause</code></td>
582
+ <td>Boolean</td>
583
+ <td>false</td>
584
+ <td>Pause scrolling on hover.</td>
585
+ </tr>
586
+ <tr>
587
+ <td><code>fade-size</code></td>
588
+ <td>Number</td>
589
+ <td>0</td>
590
+ <td>The fade size. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>
591
+ </tr>
592
+ <tr>
593
+ <td><code>pause-velocity</code></td>
594
+ <td>Number</td>
595
+ <td>10</td>
596
+ <td>The animation velocity while being paused (pixel/s).</td>
597
+ </tr>
598
+ </tbody>
599
+ </table>
600
+ </div>
601
+
602
+ </div>
603
+
604
+ <script>
605
+
606
+ const {$$, attr, on} = UIkit.util;
607
+
608
+ for (const attribute of ['reverse', 'velocity', 'pause', 'pause-velocity', 'fade-size']) {
609
+ on(`#js-${attribute}-switcher`, 'change', e =>
610
+ attr($$('[uk-marquee]'), attribute, e.target.value)
611
+ );
612
+ }
613
+
614
+ </script>
615
+
616
+ </body>
617
+ </html>
package/tests/modal.html CHANGED
@@ -18,7 +18,7 @@
18
18
  <button class="uk-button uk-button-default" type="button" uk-toggle="target: #scrollbar">Toggle scrollbar</button>
19
19
  </div>
20
20
 
21
- <div class="uk-child-width-1-4@m" uk-grid>
21
+ <div class="uk-grid uk-child-width-1-4@m">
22
22
  <div>
23
23
 
24
24
  <h2>Objects</h2>
@@ -173,7 +173,7 @@
173
173
  <td><code>stack</code></td>
174
174
  <td>Boolean</td>
175
175
  <td>false</td>
176
- <td>Stack modals, when more than one is open? By default, the previous modal will be hidden.</td>
176
+ <td>Allow multiple modals to stack. By default, opening a new modal hides the previous one.</td>
177
177
  </tr>
178
178
  </tbody>
179
179
  </table>
@@ -317,7 +317,7 @@
317
317
  <div id="modal-full-split" class="uk-modal-full" uk-modal>
318
318
  <div class="uk-modal-dialog">
319
319
  <button class="uk-modal-close-full" type="button" uk-close></button>
320
- <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
320
+ <div class="uk-grid uk-grid-collapse uk-child-width-1-2@s uk-flex-middle">
321
321
  <div class="uk-background-cover" style="background-image: url('images/photo.jpg');" uk-height-viewport></div>
322
322
  <div class="uk-padding-large">
323
323
  <h1>Headline</h1>