@frankenstyle/uikit 0.0.1

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 (701) hide show
  1. package/.prettierignore +15 -0
  2. package/.prettierrc.json +12 -0
  3. package/BACKERS.md +5 -0
  4. package/CHANGELOG.md +3759 -0
  5. package/CONTRIBUTING.md +96 -0
  6. package/LICENSE.md +7 -0
  7. package/README.md +65 -0
  8. package/build/build.js +95 -0
  9. package/build/icons.js +35 -0
  10. package/build/less.js +95 -0
  11. package/build/package.json +4 -0
  12. package/build/prefix.js +76 -0
  13. package/build/publishDev.js +33 -0
  14. package/build/release.js +123 -0
  15. package/build/scope.js +106 -0
  16. package/build/scss/mixin.scss +32 -0
  17. package/build/scss.js +252 -0
  18. package/build/util.js +288 -0
  19. package/build/wrapper/component.js +7 -0
  20. package/build/wrapper/icons.js +13 -0
  21. package/composer.json +17 -0
  22. package/dist/css/uikit-rtl.css +13333 -0
  23. package/dist/css/uikit-rtl.min.css +1 -0
  24. package/dist/css/uikit.css +13333 -0
  25. package/dist/css/uikit.min.css +1 -0
  26. package/dist/js/components/.gitkeep +0 -0
  27. package/dist/js/components/countdown.js +112 -0
  28. package/dist/js/components/countdown.min.js +1 -0
  29. package/dist/js/components/filter.js +527 -0
  30. package/dist/js/components/filter.min.js +1 -0
  31. package/dist/js/components/lightbox-panel.js +1695 -0
  32. package/dist/js/components/lightbox-panel.min.js +1 -0
  33. package/dist/js/components/lightbox.js +1783 -0
  34. package/dist/js/components/lightbox.min.js +1 -0
  35. package/dist/js/components/notification.js +127 -0
  36. package/dist/js/components/notification.min.js +1 -0
  37. package/dist/js/components/parallax.js +726 -0
  38. package/dist/js/components/parallax.min.js +1 -0
  39. package/dist/js/components/slider-parallax.js +637 -0
  40. package/dist/js/components/slider-parallax.min.js +1 -0
  41. package/dist/js/components/slider.js +1731 -0
  42. package/dist/js/components/slider.min.js +1 -0
  43. package/dist/js/components/slideshow-parallax.js +637 -0
  44. package/dist/js/components/slideshow-parallax.min.js +1 -0
  45. package/dist/js/components/slideshow.js +1555 -0
  46. package/dist/js/components/slideshow.min.js +1 -0
  47. package/dist/js/components/sortable.js +680 -0
  48. package/dist/js/components/sortable.min.js +1 -0
  49. package/dist/js/components/tooltip.js +446 -0
  50. package/dist/js/components/tooltip.min.js +1 -0
  51. package/dist/js/components/upload.js +235 -0
  52. package/dist/js/components/upload.min.js +1 -0
  53. package/dist/js/uikit-core.js +6726 -0
  54. package/dist/js/uikit-core.min.js +1 -0
  55. package/dist/js/uikit-icons.js +184 -0
  56. package/dist/js/uikit-icons.min.js +1 -0
  57. package/dist/js/uikit.js +10077 -0
  58. package/dist/js/uikit.min.js +1 -0
  59. package/eslint.config.mjs +35 -0
  60. package/jsconfig.json +9 -0
  61. package/package.json +66 -0
  62. package/src/images/backgrounds/accordion-close.svg +4 -0
  63. package/src/images/backgrounds/accordion-open.svg +3 -0
  64. package/src/images/backgrounds/divider-icon.svg +3 -0
  65. package/src/images/backgrounds/form-checkbox-indeterminate.svg +3 -0
  66. package/src/images/backgrounds/form-checkbox.svg +3 -0
  67. package/src/images/backgrounds/form-datalist.svg +3 -0
  68. package/src/images/backgrounds/form-radio.svg +3 -0
  69. package/src/images/backgrounds/form-select.svg +4 -0
  70. package/src/images/backgrounds/list-bullet.svg +3 -0
  71. package/src/images/components/close-icon.svg +1 -0
  72. package/src/images/components/close-large.svg +1 -0
  73. package/src/images/components/drop-parent-icon.svg +1 -0
  74. package/src/images/components/marker.svg +1 -0
  75. package/src/images/components/nav-parent-icon-large.svg +1 -0
  76. package/src/images/components/nav-parent-icon.svg +1 -0
  77. package/src/images/components/navbar-parent-icon.svg +1 -0
  78. package/src/images/components/navbar-toggle-icon.svg +34 -0
  79. package/src/images/components/overlay-icon.svg +1 -0
  80. package/src/images/components/pagination-next.svg +1 -0
  81. package/src/images/components/pagination-previous.svg +1 -0
  82. package/src/images/components/search-icon.svg +1 -0
  83. package/src/images/components/search-large.svg +1 -0
  84. package/src/images/components/search-medium.svg +1 -0
  85. package/src/images/components/slidenav-next-large.svg +1 -0
  86. package/src/images/components/slidenav-next.svg +1 -0
  87. package/src/images/components/slidenav-previous-large.svg +1 -0
  88. package/src/images/components/slidenav-previous.svg +1 -0
  89. package/src/images/components/spinner.svg +3 -0
  90. package/src/images/components/totop.svg +1 -0
  91. package/src/images/icons/500px.svg +30 -0
  92. package/src/images/icons/album.svg +5 -0
  93. package/src/images/icons/android-robot.svg +6 -0
  94. package/src/images/icons/android.svg +3 -0
  95. package/src/images/icons/apple.svg +3 -0
  96. package/src/images/icons/arrow-down-arrow-up.svg +6 -0
  97. package/src/images/icons/arrow-down.svg +4 -0
  98. package/src/images/icons/arrow-left.svg +4 -0
  99. package/src/images/icons/arrow-right.svg +4 -0
  100. package/src/images/icons/arrow-up-right.svg +4 -0
  101. package/src/images/icons/arrow-up.svg +4 -0
  102. package/src/images/icons/bag.svg +4 -0
  103. package/src/images/icons/ban.svg +4 -0
  104. package/src/images/icons/behance.svg +5 -0
  105. package/src/images/icons/bell.svg +4 -0
  106. package/src/images/icons/bluesky.svg +3 -0
  107. package/src/images/icons/bold.svg +3 -0
  108. package/src/images/icons/bolt.svg +3 -0
  109. package/src/images/icons/bookmark.svg +3 -0
  110. package/src/images/icons/calendar.svg +5 -0
  111. package/src/images/icons/camera.svg +4 -0
  112. package/src/images/icons/cart.svg +5 -0
  113. package/src/images/icons/check.svg +3 -0
  114. package/src/images/icons/chevron-double-left.svg +4 -0
  115. package/src/images/icons/chevron-double-right.svg +4 -0
  116. package/src/images/icons/chevron-down.svg +3 -0
  117. package/src/images/icons/chevron-left.svg +3 -0
  118. package/src/images/icons/chevron-right.svg +3 -0
  119. package/src/images/icons/chevron-up.svg +3 -0
  120. package/src/images/icons/clock.svg +5 -0
  121. package/src/images/icons/close-circle.svg +5 -0
  122. package/src/images/icons/close.svg +4 -0
  123. package/src/images/icons/cloud-download.svg +5 -0
  124. package/src/images/icons/cloud-upload.svg +5 -0
  125. package/src/images/icons/code.svg +4 -0
  126. package/src/images/icons/cog.svg +4 -0
  127. package/src/images/icons/comment.svg +3 -0
  128. package/src/images/icons/commenting.svg +6 -0
  129. package/src/images/icons/comments.svg +4 -0
  130. package/src/images/icons/copy.svg +4 -0
  131. package/src/images/icons/credit-card.svg +4 -0
  132. package/src/images/icons/crosshairs.svg +7 -0
  133. package/src/images/icons/database.svg +6 -0
  134. package/src/images/icons/desktop.svg +6 -0
  135. package/src/images/icons/discord.svg +3 -0
  136. package/src/images/icons/download.svg +5 -0
  137. package/src/images/icons/dribbble.svg +6 -0
  138. package/src/images/icons/etsy.svg +3 -0
  139. package/src/images/icons/expand.svg +6 -0
  140. package/src/images/icons/eye-slash.svg +5 -0
  141. package/src/images/icons/eye.svg +4 -0
  142. package/src/images/icons/facebook.svg +3 -0
  143. package/src/images/icons/file-edit.svg +4 -0
  144. package/src/images/icons/file-pdf.svg +4 -0
  145. package/src/images/icons/file-text.svg +7 -0
  146. package/src/images/icons/file.svg +3 -0
  147. package/src/images/icons/flickr.svg +4 -0
  148. package/src/images/icons/folder.svg +3 -0
  149. package/src/images/icons/forward.svg +3 -0
  150. package/src/images/icons/foursquare.svg +3 -0
  151. package/src/images/icons/future.svg +6 -0
  152. package/src/images/icons/git-branch.svg +6 -0
  153. package/src/images/icons/git-fork.svg +6 -0
  154. package/src/images/icons/github-alt.svg +3 -0
  155. package/src/images/icons/github.svg +3 -0
  156. package/src/images/icons/gitter.svg +6 -0
  157. package/src/images/icons/google.svg +3 -0
  158. package/src/images/icons/grid.svg +11 -0
  159. package/src/images/icons/happy.svg +6 -0
  160. package/src/images/icons/hashtag.svg +3 -0
  161. package/src/images/icons/heart.svg +3 -0
  162. package/src/images/icons/history.svg +6 -0
  163. package/src/images/icons/home.svg +5 -0
  164. package/src/images/icons/image.svg +6 -0
  165. package/src/images/icons/info.svg +4 -0
  166. package/src/images/icons/instagram.svg +5 -0
  167. package/src/images/icons/italic.svg +3 -0
  168. package/src/images/icons/joomla.svg +6 -0
  169. package/src/images/icons/laptop.svg +4 -0
  170. package/src/images/icons/lifesaver.svg +12 -0
  171. package/src/images/icons/link-external.svg +5 -0
  172. package/src/images/icons/link.svg +5 -0
  173. package/src/images/icons/linkedin.svg +4 -0
  174. package/src/images/icons/list.svg +8 -0
  175. package/src/images/icons/location.svg +4 -0
  176. package/src/images/icons/lock.svg +4 -0
  177. package/src/images/icons/mail.svg +4 -0
  178. package/src/images/icons/mastodon.svg +3 -0
  179. package/src/images/icons/menu.svg +5 -0
  180. package/src/images/icons/microphone.svg +6 -0
  181. package/src/images/icons/microsoft.svg +3 -0
  182. package/src/images/icons/minus-circle.svg +4 -0
  183. package/src/images/icons/minus.svg +3 -0
  184. package/src/images/icons/more-vertical.svg +5 -0
  185. package/src/images/icons/more.svg +5 -0
  186. package/src/images/icons/move.svg +8 -0
  187. package/src/images/icons/nut.svg +4 -0
  188. package/src/images/icons/paint-bucket.svg +6 -0
  189. package/src/images/icons/pencil.svg +4 -0
  190. package/src/images/icons/phone-landscape.svg +4 -0
  191. package/src/images/icons/phone.svg +4 -0
  192. package/src/images/icons/pinterest.svg +3 -0
  193. package/src/images/icons/play-circle.svg +4 -0
  194. package/src/images/icons/play.svg +3 -0
  195. package/src/images/icons/plus-circle.svg +5 -0
  196. package/src/images/icons/plus.svg +4 -0
  197. package/src/images/icons/print.svg +7 -0
  198. package/src/images/icons/pull.svg +5 -0
  199. package/src/images/icons/push.svg +5 -0
  200. package/src/images/icons/question.svg +5 -0
  201. package/src/images/icons/quote-right.svg +4 -0
  202. package/src/images/icons/receiver.svg +3 -0
  203. package/src/images/icons/reddit.svg +6 -0
  204. package/src/images/icons/refresh.svg +4 -0
  205. package/src/images/icons/reply.svg +3 -0
  206. package/src/images/icons/rss.svg +5 -0
  207. package/src/images/icons/search.svg +4 -0
  208. package/src/images/icons/server.svg +15 -0
  209. package/src/images/icons/settings.svg +11 -0
  210. package/src/images/icons/shrink.svg +6 -0
  211. package/src/images/icons/sign-in.svg +5 -0
  212. package/src/images/icons/sign-out.svg +5 -0
  213. package/src/images/icons/signal.svg +3 -0
  214. package/src/images/icons/social.svg +7 -0
  215. package/src/images/icons/sorting.svg +6 -0
  216. package/src/images/icons/soundcloud.svg +6 -0
  217. package/src/images/icons/star.svg +3 -0
  218. package/src/images/icons/strikethrough.svg +4 -0
  219. package/src/images/icons/table.svg +6 -0
  220. package/src/images/icons/tablet-landscape.svg +4 -0
  221. package/src/images/icons/tablet.svg +4 -0
  222. package/src/images/icons/tag.svg +4 -0
  223. package/src/images/icons/telegram.svg +3 -0
  224. package/src/images/icons/threads.svg +3 -0
  225. package/src/images/icons/thumbnails.svg +6 -0
  226. package/src/images/icons/tiktok.svg +3 -0
  227. package/src/images/icons/trash.svg +7 -0
  228. package/src/images/icons/triangle-down.svg +3 -0
  229. package/src/images/icons/triangle-left.svg +3 -0
  230. package/src/images/icons/triangle-right.svg +3 -0
  231. package/src/images/icons/triangle-up.svg +3 -0
  232. package/src/images/icons/tripadvisor.svg +19 -0
  233. package/src/images/icons/tumblr.svg +3 -0
  234. package/src/images/icons/tv.svg +4 -0
  235. package/src/images/icons/twitch.svg +5 -0
  236. package/src/images/icons/twitter.svg +3 -0
  237. package/src/images/icons/uikit.svg +4 -0
  238. package/src/images/icons/unlock.svg +4 -0
  239. package/src/images/icons/upload.svg +5 -0
  240. package/src/images/icons/user.svg +4 -0
  241. package/src/images/icons/users.svg +5 -0
  242. package/src/images/icons/video-camera.svg +3 -0
  243. package/src/images/icons/vimeo.svg +3 -0
  244. package/src/images/icons/warning.svg +5 -0
  245. package/src/images/icons/whatsapp.svg +3 -0
  246. package/src/images/icons/wordpress.svg +3 -0
  247. package/src/images/icons/world.svg +7 -0
  248. package/src/images/icons/x.svg +3 -0
  249. package/src/images/icons/xing.svg +4 -0
  250. package/src/images/icons/yelp.svg +15 -0
  251. package/src/images/icons/yootheme.svg +3 -0
  252. package/src/images/icons/youtube.svg +3 -0
  253. package/src/js/api/app.js +12 -0
  254. package/src/js/api/boot.js +84 -0
  255. package/src/js/api/component.js +84 -0
  256. package/src/js/api/computed.js +80 -0
  257. package/src/js/api/events.js +33 -0
  258. package/src/js/api/global.js +74 -0
  259. package/src/js/api/hooks.js +51 -0
  260. package/src/js/api/index.js +8 -0
  261. package/src/js/api/instance.js +66 -0
  262. package/src/js/api/log.js +10 -0
  263. package/src/js/api/observables.js +132 -0
  264. package/src/js/api/observer.js +64 -0
  265. package/src/js/api/options.js +180 -0
  266. package/src/js/api/props.js +107 -0
  267. package/src/js/api/state.js +65 -0
  268. package/src/js/api/update.js +66 -0
  269. package/src/js/api/watch.js +30 -0
  270. package/src/js/components/countdown.js +113 -0
  271. package/src/js/components/filter.js +211 -0
  272. package/src/js/components/index.js +13 -0
  273. package/src/js/components/internal/lightbox-animations.js +40 -0
  274. package/src/js/components/internal/slider-preload.js +14 -0
  275. package/src/js/components/internal/slider-transitioner.js +186 -0
  276. package/src/js/components/internal/slideshow-animations.js +100 -0
  277. package/src/js/components/lightbox-panel.js +482 -0
  278. package/src/js/components/lightbox.js +136 -0
  279. package/src/js/components/notification.js +134 -0
  280. package/src/js/components/parallax.js +86 -0
  281. package/src/js/components/slider-parallax.js +81 -0
  282. package/src/js/components/slider.js +388 -0
  283. package/src/js/components/slideshow-parallax.js +1 -0
  284. package/src/js/components/slideshow.js +44 -0
  285. package/src/js/components/sortable.js +448 -0
  286. package/src/js/components/tooltip.js +183 -0
  287. package/src/js/components/upload.js +248 -0
  288. package/src/js/core/accordion.js +244 -0
  289. package/src/js/core/alert.js +59 -0
  290. package/src/js/core/cover.js +57 -0
  291. package/src/js/core/drop.js +514 -0
  292. package/src/js/core/dropnav.js +449 -0
  293. package/src/js/core/form-custom.js +74 -0
  294. package/src/js/core/grid.js +210 -0
  295. package/src/js/core/height-match.js +79 -0
  296. package/src/js/core/height-placeholder.js +35 -0
  297. package/src/js/core/height-viewport.js +98 -0
  298. package/src/js/core/icon.js +285 -0
  299. package/src/js/core/img.js +157 -0
  300. package/src/js/core/index.js +49 -0
  301. package/src/js/core/inverse.js +173 -0
  302. package/src/js/core/leader.js +52 -0
  303. package/src/js/core/margin.js +125 -0
  304. package/src/js/core/modal.js +179 -0
  305. package/src/js/core/nav.js +11 -0
  306. package/src/js/core/navbar.js +96 -0
  307. package/src/js/core/offcanvas.js +178 -0
  308. package/src/js/core/overflow-auto.js +50 -0
  309. package/src/js/core/overflow-fade.js +67 -0
  310. package/src/js/core/responsive.js +10 -0
  311. package/src/js/core/scroll.js +71 -0
  312. package/src/js/core/scrollspy-nav.js +112 -0
  313. package/src/js/core/scrollspy.js +141 -0
  314. package/src/js/core/sticky.js +509 -0
  315. package/src/js/core/svg.js +101 -0
  316. package/src/js/core/switcher.js +246 -0
  317. package/src/js/core/tab.js +31 -0
  318. package/src/js/core/toggle.js +225 -0
  319. package/src/js/core/video.js +128 -0
  320. package/src/js/mixin/animate.js +34 -0
  321. package/src/js/mixin/class.js +7 -0
  322. package/src/js/mixin/container.js +17 -0
  323. package/src/js/mixin/event.js +5 -0
  324. package/src/js/mixin/i18n.js +21 -0
  325. package/src/js/mixin/internal/animate-fade.js +141 -0
  326. package/src/js/mixin/internal/animate-slide.js +163 -0
  327. package/src/js/mixin/internal/slideshow-animations.js +28 -0
  328. package/src/js/mixin/internal/slideshow-transitioner.js +73 -0
  329. package/src/js/mixin/media.js +53 -0
  330. package/src/js/mixin/modal.js +313 -0
  331. package/src/js/mixin/parallax.js +408 -0
  332. package/src/js/mixin/position.js +113 -0
  333. package/src/js/mixin/slider-autoplay.js +71 -0
  334. package/src/js/mixin/slider-drag.js +236 -0
  335. package/src/js/mixin/slider-nav.js +248 -0
  336. package/src/js/mixin/slider-parallax.js +147 -0
  337. package/src/js/mixin/slider-reactive.js +19 -0
  338. package/src/js/mixin/slider.js +228 -0
  339. package/src/js/mixin/slideshow.js +46 -0
  340. package/src/js/mixin/svg.js +121 -0
  341. package/src/js/mixin/togglable.js +258 -0
  342. package/src/js/uikit-core.js +11 -0
  343. package/src/js/uikit.js +7 -0
  344. package/src/js/util/animation.js +122 -0
  345. package/src/js/util/attr.js +42 -0
  346. package/src/js/util/await.js +7 -0
  347. package/src/js/util/class.js +53 -0
  348. package/src/js/util/dimensions.js +220 -0
  349. package/src/js/util/dom.js +118 -0
  350. package/src/js/util/env.js +12 -0
  351. package/src/js/util/event.js +142 -0
  352. package/src/js/util/fastdom.js +62 -0
  353. package/src/js/util/filter.js +91 -0
  354. package/src/js/util/index.js +17 -0
  355. package/src/js/util/keys.js +11 -0
  356. package/src/js/util/lang.js +280 -0
  357. package/src/js/util/mouse.js +80 -0
  358. package/src/js/util/observer.js +49 -0
  359. package/src/js/util/player.js +98 -0
  360. package/src/js/util/position.js +235 -0
  361. package/src/js/util/scroll.js +64 -0
  362. package/src/js/util/selector.js +143 -0
  363. package/src/js/util/style.js +96 -0
  364. package/src/js/util/svg.js +10 -0
  365. package/src/js/util/viewport.js +251 -0
  366. package/src/less/components/_import.less +96 -0
  367. package/src/less/components/accordion.less +122 -0
  368. package/src/less/components/alert.less +146 -0
  369. package/src/less/components/align.less +142 -0
  370. package/src/less/components/animation.less +283 -0
  371. package/src/less/components/article.less +110 -0
  372. package/src/less/components/background.less +140 -0
  373. package/src/less/components/badge.less +90 -0
  374. package/src/less/components/base.less +740 -0
  375. package/src/less/components/breadcrumb.less +157 -0
  376. package/src/less/components/button.less +540 -0
  377. package/src/less/components/card.less +441 -0
  378. package/src/less/components/close.less +67 -0
  379. package/src/less/components/column.less +143 -0
  380. package/src/less/components/comment.less +160 -0
  381. package/src/less/components/container.less +185 -0
  382. package/src/less/components/countdown.less +112 -0
  383. package/src/less/components/cover.less +76 -0
  384. package/src/less/components/description-list.less +71 -0
  385. package/src/less/components/divider.less +176 -0
  386. package/src/less/components/dotnav.less +177 -0
  387. package/src/less/components/drop.less +78 -0
  388. package/src/less/components/dropbar.less +131 -0
  389. package/src/less/components/dropdown.less +213 -0
  390. package/src/less/components/dropnav.less +43 -0
  391. package/src/less/components/flex.less +308 -0
  392. package/src/less/components/form-range.less +191 -0
  393. package/src/less/components/form.less +930 -0
  394. package/src/less/components/grid.less +419 -0
  395. package/src/less/components/heading.less +289 -0
  396. package/src/less/components/height.less +57 -0
  397. package/src/less/components/icon.less +313 -0
  398. package/src/less/components/iconnav.less +163 -0
  399. package/src/less/components/inverse.less +64 -0
  400. package/src/less/components/label.less +110 -0
  401. package/src/less/components/leader.less +75 -0
  402. package/src/less/components/lightbox.less +215 -0
  403. package/src/less/components/link.less +167 -0
  404. package/src/less/components/list.less +245 -0
  405. package/src/less/components/margin.less +263 -0
  406. package/src/less/components/marker.less +74 -0
  407. package/src/less/components/mixin.less +20 -0
  408. package/src/less/components/modal.less +366 -0
  409. package/src/less/components/nav.less +755 -0
  410. package/src/less/components/navbar.less +681 -0
  411. package/src/less/components/notification.less +191 -0
  412. package/src/less/components/offcanvas.less +329 -0
  413. package/src/less/components/overlay.less +92 -0
  414. package/src/less/components/padding.less +81 -0
  415. package/src/less/components/pagination.less +159 -0
  416. package/src/less/components/placeholder.less +45 -0
  417. package/src/less/components/position.less +241 -0
  418. package/src/less/components/print.less +61 -0
  419. package/src/less/components/progress.less +83 -0
  420. package/src/less/components/search.less +488 -0
  421. package/src/less/components/section.less +257 -0
  422. package/src/less/components/slidenav.less +137 -0
  423. package/src/less/components/slider.less +123 -0
  424. package/src/less/components/slideshow.less +93 -0
  425. package/src/less/components/sortable.less +90 -0
  426. package/src/less/components/spinner.less +74 -0
  427. package/src/less/components/sticky.less +65 -0
  428. package/src/less/components/subnav.less +317 -0
  429. package/src/less/components/svg.less +36 -0
  430. package/src/less/components/switcher.less +47 -0
  431. package/src/less/components/tab.less +222 -0
  432. package/src/less/components/table.less +352 -0
  433. package/src/less/components/text.less +296 -0
  434. package/src/less/components/thumbnav.less +133 -0
  435. package/src/less/components/tile.less +247 -0
  436. package/src/less/components/tooltip.less +79 -0
  437. package/src/less/components/totop.less +86 -0
  438. package/src/less/components/transition.less +172 -0
  439. package/src/less/components/utility.less +584 -0
  440. package/src/less/components/variables.less +123 -0
  441. package/src/less/components/visibility.less +164 -0
  442. package/src/less/components/width.less +489 -0
  443. package/src/less/theme/_import.less +82 -0
  444. package/src/less/theme/accordion.less +82 -0
  445. package/src/less/theme/alert.less +76 -0
  446. package/src/less/theme/align.less +14 -0
  447. package/src/less/theme/animation.less +14 -0
  448. package/src/less/theme/article.less +60 -0
  449. package/src/less/theme/background.less +14 -0
  450. package/src/less/theme/badge.less +29 -0
  451. package/src/less/theme/base.less +134 -0
  452. package/src/less/theme/breadcrumb.less +45 -0
  453. package/src/less/theme/button.less +212 -0
  454. package/src/less/theme/card.less +236 -0
  455. package/src/less/theme/close.less +32 -0
  456. package/src/less/theme/column.less +14 -0
  457. package/src/less/theme/comment.less +72 -0
  458. package/src/less/theme/container.less +14 -0
  459. package/src/less/theme/countdown.less +53 -0
  460. package/src/less/theme/description-list.less +36 -0
  461. package/src/less/theme/divider.less +49 -0
  462. package/src/less/theme/dotnav.less +57 -0
  463. package/src/less/theme/drop.less +14 -0
  464. package/src/less/theme/dropbar.less +44 -0
  465. package/src/less/theme/dropdown.less +59 -0
  466. package/src/less/theme/form-range.less +57 -0
  467. package/src/less/theme/form.less +154 -0
  468. package/src/less/theme/grid.less +28 -0
  469. package/src/less/theme/heading.less +71 -0
  470. package/src/less/theme/height.less +14 -0
  471. package/src/less/theme/icon.less +67 -0
  472. package/src/less/theme/iconnav.less +44 -0
  473. package/src/less/theme/inverse.less +14 -0
  474. package/src/less/theme/label.less +46 -0
  475. package/src/less/theme/leader.less +26 -0
  476. package/src/less/theme/lightbox.less +32 -0
  477. package/src/less/theme/link.less +55 -0
  478. package/src/less/theme/list.less +50 -0
  479. package/src/less/theme/margin.less +14 -0
  480. package/src/less/theme/marker.less +31 -0
  481. package/src/less/theme/modal.less +102 -0
  482. package/src/less/theme/nav.less +142 -0
  483. package/src/less/theme/navbar.less +179 -0
  484. package/src/less/theme/notification.less +44 -0
  485. package/src/less/theme/offcanvas.less +32 -0
  486. package/src/less/theme/overlay.less +33 -0
  487. package/src/less/theme/padding.less +14 -0
  488. package/src/less/theme/pagination.less +41 -0
  489. package/src/less/theme/placeholder.less +29 -0
  490. package/src/less/theme/position.less +14 -0
  491. package/src/less/theme/progress.less +27 -0
  492. package/src/less/theme/search.less +121 -0
  493. package/src/less/theme/section.less +32 -0
  494. package/src/less/theme/slidenav.less +52 -0
  495. package/src/less/theme/slider.less +14 -0
  496. package/src/less/theme/sortable.less +38 -0
  497. package/src/less/theme/spinner.less +14 -0
  498. package/src/less/theme/sticky.less +14 -0
  499. package/src/less/theme/subnav.less +79 -0
  500. package/src/less/theme/tab.less +138 -0
  501. package/src/less/theme/table.less +86 -0
  502. package/src/less/theme/text.less +61 -0
  503. package/src/less/theme/thumbnav.less +65 -0
  504. package/src/less/theme/tile.less +52 -0
  505. package/src/less/theme/tooltip.less +20 -0
  506. package/src/less/theme/totop.less +32 -0
  507. package/src/less/theme/transition.less +14 -0
  508. package/src/less/theme/utility.less +52 -0
  509. package/src/less/theme/variables.less +36 -0
  510. package/src/less/theme/width.less +14 -0
  511. package/src/less/uikit.less +5 -0
  512. package/src/less/uikit.theme.less +11 -0
  513. package/src/scss/components/_import.scss +96 -0
  514. package/src/scss/components/accordion.scss +100 -0
  515. package/src/scss/components/alert.scss +133 -0
  516. package/src/scss/components/align.scss +141 -0
  517. package/src/scss/components/animation.scss +278 -0
  518. package/src/scss/components/article.scss +93 -0
  519. package/src/scss/components/background.scss +138 -0
  520. package/src/scss/components/badge.scss +71 -0
  521. package/src/scss/components/base.scss +561 -0
  522. package/src/scss/components/breadcrumb.scss +115 -0
  523. package/src/scss/components/button.scss +374 -0
  524. package/src/scss/components/card.scss +379 -0
  525. package/src/scss/components/close.scss +53 -0
  526. package/src/scss/components/column.scss +136 -0
  527. package/src/scss/components/comment.scss +153 -0
  528. package/src/scss/components/container.scss +180 -0
  529. package/src/scss/components/countdown.scss +93 -0
  530. package/src/scss/components/cover.scss +78 -0
  531. package/src/scss/components/description-list.scss +68 -0
  532. package/src/scss/components/divider.scss +137 -0
  533. package/src/scss/components/dotnav.scss +144 -0
  534. package/src/scss/components/drop.scss +75 -0
  535. package/src/scss/components/dropbar.scss +123 -0
  536. package/src/scss/components/dropdown.scss +192 -0
  537. package/src/scss/components/dropnav.scss +44 -0
  538. package/src/scss/components/flex.scss +310 -0
  539. package/src/scss/components/form-range.scss +147 -0
  540. package/src/scss/components/form.scss +771 -0
  541. package/src/scss/components/grid.scss +394 -0
  542. package/src/scss/components/heading.scss +227 -0
  543. package/src/scss/components/height.scss +56 -0
  544. package/src/scss/components/icon.scss +228 -0
  545. package/src/scss/components/iconnav.scss +140 -0
  546. package/src/scss/components/inverse.scss +51 -0
  547. package/src/scss/components/label.scss +90 -0
  548. package/src/scss/components/leader.scss +69 -0
  549. package/src/scss/components/lightbox.scss +205 -0
  550. package/src/scss/components/link.scss +131 -0
  551. package/src/scss/components/list.scss +199 -0
  552. package/src/scss/components/margin.scss +257 -0
  553. package/src/scss/components/marker.scss +56 -0
  554. package/src/scss/components/mixin.scss +34 -0
  555. package/src/scss/components/modal.scss +336 -0
  556. package/src/scss/components/nav.scss +533 -0
  557. package/src/scss/components/navbar.scss +579 -0
  558. package/src/scss/components/notification.scss +178 -0
  559. package/src/scss/components/offcanvas.scss +318 -0
  560. package/src/scss/components/overlay.scss +88 -0
  561. package/src/scss/components/padding.scss +78 -0
  562. package/src/scss/components/pagination.scss +127 -0
  563. package/src/scss/components/placeholder.scss +43 -0
  564. package/src/scss/components/position.scss +240 -0
  565. package/src/scss/components/print.scss +63 -0
  566. package/src/scss/components/progress.scss +81 -0
  567. package/src/scss/components/search.scss +367 -0
  568. package/src/scss/components/section.scss +243 -0
  569. package/src/scss/components/slidenav.scss +112 -0
  570. package/src/scss/components/slider.scss +121 -0
  571. package/src/scss/components/slideshow.scss +95 -0
  572. package/src/scss/components/sortable.scss +89 -0
  573. package/src/scss/components/spinner.scss +73 -0
  574. package/src/scss/components/sticky.scss +64 -0
  575. package/src/scss/components/subnav.scss +222 -0
  576. package/src/scss/components/svg.scss +38 -0
  577. package/src/scss/components/switcher.scss +49 -0
  578. package/src/scss/components/tab.scss +186 -0
  579. package/src/scss/components/table.scss +293 -0
  580. package/src/scss/components/text.scss +256 -0
  581. package/src/scss/components/thumbnav.scss +119 -0
  582. package/src/scss/components/tile.scss +230 -0
  583. package/src/scss/components/tooltip.scss +72 -0
  584. package/src/scss/components/totop.scss +64 -0
  585. package/src/scss/components/transition.scss +169 -0
  586. package/src/scss/components/utility.scss +545 -0
  587. package/src/scss/components/variables.scss +84 -0
  588. package/src/scss/components/visibility.scss +166 -0
  589. package/src/scss/components/width.scss +487 -0
  590. package/src/scss/mixins-theme.scss +2298 -0
  591. package/src/scss/mixins.scss +1896 -0
  592. package/src/scss/uikit-theme.scss +8 -0
  593. package/src/scss/uikit.scss +5 -0
  594. package/src/scss/variables-theme.scss +1325 -0
  595. package/src/scss/variables.scss +1190 -0
  596. package/tests/accordion.html +214 -0
  597. package/tests/alert.html +124 -0
  598. package/tests/align.html +133 -0
  599. package/tests/animation.html +252 -0
  600. package/tests/article.html +167 -0
  601. package/tests/background.html +67 -0
  602. package/tests/badge.html +93 -0
  603. package/tests/base.html +244 -0
  604. package/tests/breadcrumb.html +64 -0
  605. package/tests/button.html +257 -0
  606. package/tests/card.html +630 -0
  607. package/tests/close.html +74 -0
  608. package/tests/column.html +71 -0
  609. package/tests/comment.html +209 -0
  610. package/tests/container.html +266 -0
  611. package/tests/countdown.html +716 -0
  612. package/tests/cover.html +167 -0
  613. package/tests/description-list.html +51 -0
  614. package/tests/divider.html +89 -0
  615. package/tests/dotnav.html +139 -0
  616. package/tests/drop.html +782 -0
  617. package/tests/dropbar.html +551 -0
  618. package/tests/dropdown.html +286 -0
  619. package/tests/dropnav.html +856 -0
  620. package/tests/filter.html +287 -0
  621. package/tests/flex.html +182 -0
  622. package/tests/form.html +675 -0
  623. package/tests/grid-masonry.html +80 -0
  624. package/tests/grid-parallax.html +171 -0
  625. package/tests/grid.html +679 -0
  626. package/tests/heading.html +337 -0
  627. package/tests/height-expand.html +32 -0
  628. package/tests/height-viewport.html +253 -0
  629. package/tests/height.html +160 -0
  630. package/tests/icon.html +907 -0
  631. package/tests/iconnav.html +40 -0
  632. package/tests/image.html +642 -0
  633. package/tests/images/avatar.jpg +0 -0
  634. package/tests/images/dark.jpg +0 -0
  635. package/tests/images/icons.svg +24 -0
  636. package/tests/images/image-type.avif +0 -0
  637. package/tests/images/image-type.jpeg +0 -0
  638. package/tests/images/image-type.webp +0 -0
  639. package/tests/images/light.jpg +0 -0
  640. package/tests/images/photo.jpg +0 -0
  641. package/tests/images/photo2.jpg +0 -0
  642. package/tests/images/photo3.jpg +0 -0
  643. package/tests/images/size-h.jpg +0 -0
  644. package/tests/images/size-v.jpg +0 -0
  645. package/tests/images/size1.jpg +0 -0
  646. package/tests/images/size2.jpg +0 -0
  647. package/tests/images/slider1.jpg +0 -0
  648. package/tests/images/slider2.jpg +0 -0
  649. package/tests/images/slider3.jpg +0 -0
  650. package/tests/images/slider4.jpg +0 -0
  651. package/tests/images/slider5.jpg +0 -0
  652. package/tests/index.html +905 -0
  653. package/tests/js/index.js +171 -0
  654. package/tests/label.html +28 -0
  655. package/tests/leader.html +67 -0
  656. package/tests/lightbox.html +689 -0
  657. package/tests/link.html +121 -0
  658. package/tests/list.html +490 -0
  659. package/tests/margin.html +208 -0
  660. package/tests/marker.html +87 -0
  661. package/tests/modal.html +497 -0
  662. package/tests/nav.html +487 -0
  663. package/tests/navbar.html +2746 -0
  664. package/tests/notification.html +137 -0
  665. package/tests/offcanvas.html +780 -0
  666. package/tests/overlay.html +102 -0
  667. package/tests/padding.html +52 -0
  668. package/tests/pagination.html +140 -0
  669. package/tests/parallax.html +298 -0
  670. package/tests/placeholder.html +33 -0
  671. package/tests/position.html +436 -0
  672. package/tests/progress.html +59 -0
  673. package/tests/scroll.html +118 -0
  674. package/tests/scrollspy.html +593 -0
  675. package/tests/search.html +535 -0
  676. package/tests/section.html +384 -0
  677. package/tests/slidenav.html +333 -0
  678. package/tests/slider.html +661 -0
  679. package/tests/slideshow.html +565 -0
  680. package/tests/sortable.html +300 -0
  681. package/tests/spinner.html +25 -0
  682. package/tests/sticky-navbar.html +1421 -0
  683. package/tests/sticky-parallax.html +279 -0
  684. package/tests/sticky.html +429 -0
  685. package/tests/subnav.html +282 -0
  686. package/tests/svg.html +78 -0
  687. package/tests/switcher.html +394 -0
  688. package/tests/tab.html +266 -0
  689. package/tests/table.html +329 -0
  690. package/tests/text.html +155 -0
  691. package/tests/thumbnav.html +64 -0
  692. package/tests/tile.html +226 -0
  693. package/tests/toggle.html +186 -0
  694. package/tests/tooltip.html +126 -0
  695. package/tests/totop.html +68 -0
  696. package/tests/transition.html +246 -0
  697. package/tests/upload.html +290 -0
  698. package/tests/utility.html +644 -0
  699. package/tests/video.html +206 -0
  700. package/tests/visibility.html +112 -0
  701. package/tests/width.html +130 -0
package/tests/lightbox.html ADDED
@@ -0,0 +1,689 @@
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>Lightbox - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ </head>
10
+
11
+ <body>
12
+
13
+ <div class="uk-container">
14
+
15
+ <h1>Lightbox</h1>
16
+
17
+ <div class="uk-margin">
18
+ <select id="js-animation-switcher" class="uk-select uk-form-width-small" aria-label="Animation switcher">
19
+ <option value="slide">Slide</option>
20
+ <option value="fade">Fade</option>
21
+ <option value="scale">Scale</option>
22
+ </select>
23
+ <select id="js-bg-close-switcher" class="uk-select uk-form-width-small" aria-label="Bg close switcher">
24
+ <option value="1">Close bg</option>
25
+ <option value="0">Don't close bg</option>
26
+ </select>
27
+ <select id="js-delay-controls-switcher" class="uk-select uk-form-width-small" aria-label="Delay controls switcher">
28
+ <option value="3000">Delay controls</option>
29
+ <option value="0">Always controls</option>
30
+ </select>
31
+ <select id="js-counter-switcher" class="uk-select uk-form-width-small" aria-label="Counter switcher">
32
+ <option value="0">Hide counter</option>
33
+ <option value="1">Show Counter</option>
34
+ </select>
35
+ <select id="js-video-autoplay-switcher" class="uk-select uk-form-width-small" aria-label="Video autoplay switcher">
36
+ <option value="0">No video autoplay</option>
37
+ <option value="1">Video autoplay</option>
38
+ <option value="inline">Video inline (Autoplay, Mute, Loop, No Controls)</option>
39
+ </select>
40
+ </div>
41
+
42
+ <h2>Sizes</h2>
43
+
44
+ <div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox>
45
+ <div>
46
+
47
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
48
+ <figure>
49
+ <img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
50
+ <figcaption class="uk-margin-small-top">900x600</figcaption>
51
+ </figure>
52
+ </a>
53
+
54
+ </div>
55
+ <div>
56
+
57
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
58
+ <figure>
59
+ <img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
60
+ <figcaption class="uk-margin-small-top">700x500</figcaption>
61
+ </figure>
62
+ </a>
63
+
64
+ </div>
65
+ <div>
66
+
67
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
68
+ <figure>
69
+ <img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
70
+ <figcaption class="uk-margin-small-top">1800x1200</figcaption>
71
+ </figure>
72
+ </a>
73
+
74
+ </div>
75
+ <div>
76
+
77
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
78
+ <figure>
79
+ <img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
80
+ <figcaption class="uk-margin-small-top">1000x2000</figcaption>
81
+ </figure>
82
+ </a>
83
+
84
+ </div>
85
+ <div>
86
+
87
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
88
+ <figure>
89
+ <img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
90
+ <figcaption class="uk-margin-small-top">2000x500</figcaption>
91
+ </figure>
92
+ </a>
93
+
94
+ </div>
95
+ <div>
96
+
97
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
98
+ <figure>
99
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
100
+ <figcaption class="uk-margin-small-top">Video</figcaption>
101
+ </figure>
102
+ </a>
103
+
104
+ </div>
105
+ <div>
106
+
107
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
108
+ <figure>
109
+ <img src="images/photo.jpg" width="400" height="267" alt="">
110
+ <figcaption class="uk-margin-small-top">YouTube</figcaption>
111
+ </figure>
112
+ </a>
113
+
114
+ </div>
115
+ <div>
116
+
117
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
118
+ <figure>
119
+ <img src="images/photo.jpg" width="400" height="267" alt="">
120
+ <figcaption class="uk-margin-small-top">Vimeo</figcaption>
121
+ </figure>
122
+ </a>
123
+
124
+ </div>
125
+ <div>
126
+
127
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
128
+ <figure>
129
+ <img src="images/photo.jpg" width="400" height="267" alt="">
130
+ <figcaption class="uk-margin-small-top">Iframe</figcaption>
131
+ </figure>
132
+ </a>
133
+
134
+ </div>
135
+ </div>
136
+
137
+ <h2>Thumbnav</h2>
138
+
139
+ <div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox="nav: thumbnav; slidenav: false">
140
+ <div>
141
+
142
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
143
+ <figure>
144
+ <img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
145
+ <figcaption class="uk-margin-small-top">900x600</figcaption>
146
+ </figure>
147
+ </a>
148
+
149
+ </div>
150
+ <div>
151
+
152
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
153
+ <figure>
154
+ <img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
155
+ <figcaption class="uk-margin-small-top">700x500</figcaption>
156
+ </figure>
157
+ </a>
158
+
159
+ </div>
160
+ <div>
161
+
162
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
163
+ <figure>
164
+ <img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
165
+ <figcaption class="uk-margin-small-top">1800x1200</figcaption>
166
+ </figure>
167
+ </a>
168
+
169
+ </div>
170
+ <div>
171
+
172
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
173
+ <figure>
174
+ <img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
175
+ <figcaption class="uk-margin-small-top">1000x2000</figcaption>
176
+ </figure>
177
+ </a>
178
+
179
+ </div>
180
+ <div>
181
+
182
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
183
+ <figure>
184
+ <img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
185
+ <figcaption class="uk-margin-small-top">2000x500</figcaption>
186
+ </figure>
187
+ </a>
188
+
189
+ </div>
190
+ <div>
191
+
192
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
193
+ <figure>
194
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
195
+ <figcaption class="uk-margin-small-top">Video</figcaption>
196
+ </figure>
197
+ </a>
198
+
199
+ </div>
200
+ <div>
201
+
202
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
203
+ <figure>
204
+ <img src="images/photo.jpg" width="400" height="267" alt="">
205
+ <figcaption class="uk-margin-small-top">YouTube</figcaption>
206
+ </figure>
207
+ </a>
208
+
209
+ </div>
210
+ <div>
211
+
212
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
213
+ <figure>
214
+ <img src="images/photo.jpg" width="400" height="267" alt="">
215
+ <figcaption class="uk-margin-small-top">Vimeo</figcaption>
216
+ </figure>
217
+ </a>
218
+
219
+ </div>
220
+ <div>
221
+
222
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
223
+ <figure>
224
+ <img src="images/photo.jpg" width="400" height="267" alt="">
225
+ <figcaption class="uk-margin-small-top">Iframe</figcaption>
226
+ </figure>
227
+ </a>
228
+
229
+ </div>
230
+ </div>
231
+
232
+ <h2>Dotnav</h2>
233
+
234
+ <div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox="nav: dotnav; slidenav: false">
235
+ <div>
236
+
237
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
238
+ <figure>
239
+ <img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
240
+ <figcaption class="uk-margin-small-top">900x600</figcaption>
241
+ </figure>
242
+ </a>
243
+
244
+ </div>
245
+ <div>
246
+
247
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
248
+ <figure>
249
+ <img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
250
+ <figcaption class="uk-margin-small-top">700x500</figcaption>
251
+ </figure>
252
+ </a>
253
+
254
+ </div>
255
+ <div>
256
+
257
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
258
+ <figure>
259
+ <img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
260
+ <figcaption class="uk-margin-small-top">1800x1200</figcaption>
261
+ </figure>
262
+ </a>
263
+
264
+ </div>
265
+ <div>
266
+
267
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
268
+ <figure>
269
+ <img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
270
+ <figcaption class="uk-margin-small-top">1000x2000</figcaption>
271
+ </figure>
272
+ </a>
273
+
274
+ </div>
275
+ <div>
276
+
277
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
278
+ <figure>
279
+ <img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
280
+ <figcaption class="uk-margin-small-top">2000x500</figcaption>
281
+ </figure>
282
+ </a>
283
+
284
+ </div>
285
+ <div>
286
+
287
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
288
+ <figure>
289
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
290
+ <figcaption class="uk-margin-small-top">Video</figcaption>
291
+ </figure>
292
+ </a>
293
+
294
+ </div>
295
+ <div>
296
+
297
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
298
+ <figure>
299
+ <img src="images/photo.jpg" width="400" height="267" alt="">
300
+ <figcaption class="uk-margin-small-top">YouTube</figcaption>
301
+ </figure>
302
+ </a>
303
+
304
+ </div>
305
+ <div>
306
+
307
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
308
+ <figure>
309
+ <img src="images/photo.jpg" width="400" height="267" alt="">
310
+ <figcaption class="uk-margin-small-top">Vimeo</figcaption>
311
+ </figure>
312
+ </a>
313
+
314
+ </div>
315
+ <div>
316
+
317
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
318
+ <figure>
319
+ <img src="images/photo.jpg" width="400" height="267" alt="">
320
+ <figcaption class="uk-margin-small-top">Iframe</figcaption>
321
+ </figure>
322
+ </a>
323
+
324
+ </div>
325
+ </div>
326
+
327
+ <h2>Template</h2>
328
+
329
+ <template id="js-lightbox-template">
330
+ <div class="uk-lightbox uk-overflow-hidden">
331
+ <div class="uk-lightbox-items"></div>
332
+ <div class="uk-position-top-right uk-position-small uk-transition-fade" uk-inverse>
333
+ <button class="uk-lightbox-close uk-close-large" type="button" uk-close></button>
334
+ </div>
335
+ <div class="uk-position-bottom uk-position-medium uk-text-center uk-transition-fade" uk-inverse>
336
+ <div class="uk-grid-small uk-width-auto uk-flex-inline uk-flex-middle" uk-grid>
337
+ <div><a class="uk-lightbox-slidenav" href uk-slidenav-previous uk-lightbox-item="previous"></a></div>
338
+ <div><div class="uk-lightbox-counter"></div></div>
339
+ <div><a class="uk-lightbox-slidenav" href uk-slidenav-next uk-lightbox-item="next"></a></div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </template>
344
+
345
+ <div class="uk-grid-small uk-child-width-1-6@m" uk-grid uk-lightbox="counter: true; template: #js-lightbox-template">
346
+ <div>
347
+
348
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size1.jpg" caption="900x600" data-alt="The value for the image alt attribute" attrs="class: uk-inverse-light">
349
+ <figure>
350
+ <img src="images/size1.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
351
+ <figcaption class="uk-margin-small-top">900x600</figcaption>
352
+ </figure>
353
+ </a>
354
+
355
+ </div>
356
+ <div>
357
+
358
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size2.jpg" caption="700x500" attrs="class: uk-inverse-dark">
359
+ <figure>
360
+ <img src="images/size2.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
361
+ <figcaption class="uk-margin-small-top">700x500</figcaption>
362
+ </figure>
363
+ </a>
364
+
365
+ </div>
366
+ <div>
367
+
368
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/photo.jpg" caption="1800x1200" attrs="class: uk-inverse-light">
369
+ <figure>
370
+ <img src="images/photo.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
371
+ <figcaption class="uk-margin-small-top">1800x1200</figcaption>
372
+ </figure>
373
+ </a>
374
+
375
+ </div>
376
+ <div>
377
+
378
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-v.jpg" caption="1000x2000" attrs="class: uk-inverse-light">
379
+ <figure>
380
+ <img src="images/size-v.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
381
+ <figcaption class="uk-margin-small-top">1000x2000</figcaption>
382
+ </figure>
383
+ </a>
384
+
385
+ </div>
386
+ <div>
387
+
388
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="images/size-h.jpg" caption="2000x500" attrs="class: uk-inverse-dark">
389
+ <figure>
390
+ <img src="images/size-h.jpg" width="400" height="267" alt="" class="uk-object-cover" style="aspect-ratio: 400 / 267;">
391
+ <figcaption class="uk-margin-small-top">2000x500</figcaption>
392
+ </figure>
393
+ </a>
394
+
395
+ </div>
396
+ <div>
397
+
398
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://yootheme.com/site/images/media/yootheme-pro.mp4" caption="Video" poster="images/photo.jpg" attrs="class: uk-inverse-light">
399
+ <figure>
400
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="400" height="267" class="uk-object-cover" style="aspect-ratio: 400 / 267;" playsinline loop muted uk-video></video>
401
+ <figcaption class="uk-margin-small-top">Video</figcaption>
402
+ </figure>
403
+ </a>
404
+
405
+ </div>
406
+ <div>
407
+
408
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://www.youtube-nocookie.com/watch?v=c2pz2mlSfXA" caption="YouTube" attrs="class: uk-inverse-light">
409
+ <figure>
410
+ <img src="images/photo.jpg" width="400" height="267" alt="">
411
+ <figcaption class="uk-margin-small-top">YouTube</figcaption>
412
+ </figure>
413
+ </a>
414
+
415
+ </div>
416
+ <div>
417
+
418
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://vimeo.com/1084537" caption="Vimeo" attrs="class: uk-inverse-light">
419
+ <figure>
420
+ <img src="images/photo.jpg" width="400" height="267" alt="">
421
+ <figcaption class="uk-margin-small-top">Vimeo</figcaption>
422
+ </figure>
423
+ </a>
424
+
425
+ </div>
426
+ <div>
427
+
428
+ <a class="uk-inline uk-panel uk-link-muted uk-text-center" href="https://google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" caption="Iframe" type="iframe" attrs="class: uk-inverse-light">
429
+ <figure>
430
+ <img src="images/photo.jpg" width="400" height="267" alt="">
431
+ <figcaption class="uk-margin-small-top">Iframe</figcaption>
432
+ </figure>
433
+ </a>
434
+
435
+ </div>
436
+ </div>
437
+
438
+ <h2>Dynamic lightbox</h2>
439
+
440
+ <button id="js-lightbox" class="uk-button uk-button-default" type="button">Dynamic lightbox</button>
441
+
442
+ <h2>JavaScript Options</h2>
443
+
444
+ <h3>Lightbox</h3>
445
+
446
+ <div class="uk-overflow-auto">
447
+ <table class="uk-table uk-table-striped">
448
+ <thead>
449
+ <tr>
450
+ <th>Option</th>
451
+ <th>Value</th>
452
+ <th>Default</th>
453
+ <th>Description</th>
454
+ </tr>
455
+ </thead>
456
+ <tbody>
457
+ <tr>
458
+ <td><code>animation</code></td>
459
+ <td>String</td>
460
+ <td>slide</td>
461
+ <td>The animation to use. (fade, slide, scale)</td>
462
+ </tr>
463
+ <tr>
464
+ <td><code>autoplay</code></td>
465
+ <td>Boolean</td>
466
+ <td>0</td>
467
+ <td>Starts autoplaying the lightbox.</td>
468
+ </tr>
469
+ <tr>
470
+ <td><code>autoplay-interval</code></td>
471
+ <td>Number</td>
472
+ <td>0</td>
473
+ <td>The delay between switching slides in autoplay mode.</td>
474
+ </tr>
475
+ <tr>
476
+ <td><code>pause-on-hover</code></td>
477
+ <td>Boolean</td>
478
+ <td>0</td>
479
+ <td>Pause autoplay mode on hover.</td>
480
+ </tr>
481
+ <tr>
482
+ <td><code>video-autoplay</code></td>
483
+ <td>Boolean, String</td>
484
+ <td>false</td>
485
+ <td>Lightbox videos autoplay. A value of `inline` will autoplay the video, muted and without controls.</td>
486
+ </tr>
487
+ <tr>
488
+ <td><code>counter</code></td>
489
+ <td>Boolean</td>
490
+ <td>false</td>
491
+ <td>Show counter.</td>
492
+ </tr>
493
+ <tr>
494
+ <td><code>nav</code></td>
495
+ <td>Boolean, String</td>
496
+ <td>false</td>
497
+ <td>The nav to use. (dotnav, thumbnav)</td>
498
+ </tr>
499
+ <tr>
500
+ <td><code>slidenav</code></td>
501
+ <td>Boolean</td>
502
+ <td>true</td>
503
+ <td>Show slidenav.</td>
504
+ </tr>
505
+ <tr>
506
+ <td><code>delay-controls</code></td>
507
+ <td>Number</td>
508
+ <td>3000</td>
509
+ <td>Delay time before controls fade out in ms. Setting `0` will prevent hiding controls.</td>
510
+ </tr>
511
+ <tr>
512
+ <td><code>toggle</code></td>
513
+ <td>CSS selector</td>
514
+ <td>a</td>
515
+ <td>Toggle selector - triggers the lightbox.</td>
516
+ </tr>
517
+ </tbody>
518
+ </table>
519
+ </div>
520
+
521
+ <h3>Lightbox Panel</h3>
522
+
523
+ <div class="uk-overflow-auto">
524
+ <table class="uk-table uk-table-striped">
525
+ <thead>
526
+ <tr>
527
+ <th>Option</th>
528
+ <th>Value</th>
529
+ <th>Default</th>
530
+ <th>Description</th>
531
+ </tr>
532
+ </thead>
533
+ <tbody>
534
+ <tr>
535
+ <td><code>animation</code></td>
536
+ <td>String</td>
537
+ <td>slide</td>
538
+ <td>The animation to use. (slide, fade, scale)</td>
539
+ </tr>
540
+ <tr>
541
+ <td><code>autoplay</code></td>
542
+ <td>Boolean</td>
543
+ <td>false</td>
544
+ <td>Starts autoplaying the lightbox.</td>
545
+ </tr>
546
+ <tr>
547
+ <td><code>autoplay-interval</code></td>
548
+ <td>Number</td>
549
+ <td>7000</td>
550
+ <td>The delay between switching slides in autoplay mode.</td>
551
+ </tr>
552
+ <tr>
553
+ <td><code>video-autoplay</code></td>
554
+ <td>Boolean, String</td>
555
+ <td>false</td>
556
+ <td>Lightbox videos autoplay. A value of `inline` will autoplay the video, muted and without controls.</td>
557
+ </tr>
558
+ <tr>
559
+ <td><code>counter</code></td>
560
+ <td>Boolean</td>
561
+ <td>false</td>
562
+ <td>Show counter.</td>
563
+ </tr>
564
+ <tr>
565
+ <td><code>nav</code></td>
566
+ <td>Boolean, String</td>
567
+ <td>false</td>
568
+ <td>The nav to use. (dotnav, thumbnav)</td>
569
+ </tr>
570
+ <tr>
571
+ <td><code>slidenav</code></td>
572
+ <td>Boolean</td>
573
+ <td>true</td>
574
+ <td>Show slidenav.</td>
575
+ </tr>
576
+ <tr>
577
+ <td><code>velocity</code></td>
578
+ <td>Number</td>
579
+ <td>2</td>
580
+ <td>The animation velocity (pixel/ms).</td>
581
+ </tr>
582
+ <tr>
583
+ <td><code>index</code></td>
584
+ <td>Number</td>
585
+ <td>0</td>
586
+ <td>The initial item to show. (zero based)</td>
587
+ </tr>
588
+ <tr>
589
+ <td><code>preload</code></td>
590
+ <td>Number</td>
591
+ <td>1</td>
592
+ <td>The number of items to preload. (left and right of the currently active item)</td>
593
+ </tr>
594
+ <tr>
595
+ <td><code>items</code></td>
596
+ <td>Array</td>
597
+ <td>[]</td>
598
+ <td>An array of items to display. ([{source: 'images/size1.jpg', caption: '900x600'}])</td>
599
+ </tr>
600
+ <tr>
601
+ <td><code>template</code></td>
602
+ <td>String</td>
603
+ <td></td>
604
+ <td>The template string.</td>
605
+ </tr>
606
+ <tr>
607
+ <td><code>delay-controls</code></td>
608
+ <td>Number</td>
609
+ <td>3000</td>
610
+ <td>Delay time before controls fade out in ms. Setting `0` will prevent hiding controls.</td>
611
+ </tr>
612
+ <tr>
613
+ <td><code>i18n</code></td>
614
+ <td>Object</td>
615
+ <td>null</td>
616
+ <td>Override default translation texts.</td>
617
+ </tr>
618
+ </tbody>
619
+ </table>
620
+ </div>
621
+
622
+ <h2>i18n</h2>
623
+
624
+ <div class="uk-overflow-auto">
625
+ <table class="uk-table uk-table-striped">
626
+ <thead>
627
+ <tr>
628
+ <th>Key</th>
629
+ <th>Default</th>
630
+ <th>Description</th>
631
+ </tr>
632
+ </thead>
633
+ <tbody>
634
+ <tr>
635
+ <td><code>counter</code></td>
636
+ <td>%s / %s</td>
637
+ <td>Counter indicator for current slide.</td>
638
+ </tr>
639
+ <tr>
640
+ <td><code>next</code></td>
641
+ <td>Next Slide</td>
642
+ <td><code>aria-label</code> for next slide button.</td>
643
+ </tr>
644
+ <tr>
645
+ <td><code>previous</code></td>
646
+ <td>Previous Slide</td>
647
+ <td><code>aria-label</code> for previous slide button.</td>
648
+ </tr>
649
+ <tr>
650
+ <td><code>slideLabel</code></td>
651
+ <td>%s of %s</td>
652
+ <td><code>aria-label</code> for slide.</td>
653
+ </tr>
654
+ <tr>
655
+ <td><code>close</code></td>
656
+ <td>Close</td>
657
+ <td><code>aria-label</code> for close button.</td>
658
+ </tr>
659
+ </tbody>
660
+ </table>
661
+ </div>
662
+
663
+ </div>
664
+
665
+ <script>
666
+
667
+ const {attr, $$, on} = UIkit.util;
668
+
669
+ for (const attribute of ['animation', 'bg-close', 'delay-controls', 'counter', 'video-autoplay']) {
670
+ on(`#js-${attribute}-switcher`, 'change', e =>
671
+ attr($$('[uk-lightbox]'), attribute, e.target.value)
672
+ );
673
+ }
674
+
675
+ on('#js-lightbox', 'click', (e) => {
676
+ e.preventDefault();
677
+
678
+ UIkit.lightboxPanel({
679
+ items: [
680
+ {source: 'images/size1.jpg', caption: '900x600'},
681
+ {source: 'images/size2.jpg', caption: '700x500'},
682
+ ]
683
+ }).show();
684
+ });
685
+
686
+ </script>
687
+
688
+ </body>
689
+ </html>