@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/filter.html ADDED
@@ -0,0 +1,287 @@
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>Filter - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ [color='red'] > * { background: #f0506e; }
12
+ [color='green'] > * { background: #32d296; }
13
+ [color='blue'] > * { background: #1e87f0; }
14
+
15
+ [size='small'] > * { height: 140px; }
16
+ [size='medium'] > * { height: 170px; }
17
+ [size='large'] > * { height: 190px; }
18
+
19
+ </style>
20
+
21
+ <script>
22
+
23
+ const {$$, attr, on, ready} = UIkit.util;
24
+
25
+ ready(() => {
26
+ on(document.body, 'beforeFilter afterFilter', (e, filter, state) =>
27
+ console.log(e.type, filter, state)
28
+ );
29
+ on('#js-animation-switcher', 'change', (e) =>
30
+ attr($$('.js-filter-animation'), 'animation', e.target.value)
31
+ );
32
+ });
33
+
34
+ </script>
35
+
36
+ </head>
37
+
38
+ <body>
39
+
40
+ <div class="uk-container">
41
+
42
+ <h1>Filter</h1>
43
+
44
+ <div class="uk-margin">
45
+ <select id="js-animation-switcher" class="uk-select uk-form-width-small" aria-label="Animation switcher">
46
+ <option value="slide">Slide</option>
47
+ <option value="fade">Fade</option>
48
+ <option value="delayed-fade">Delayed Fade</option>
49
+ <option value="false">None</option>
50
+ </select>
51
+ </div>
52
+
53
+ <div class="js-filter-animation" uk-filter="target: .js-filter; duration: 2000">
54
+
55
+ <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
56
+ <h3>Default</h3>
57
+ <div>
58
+
59
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
60
+ <li uk-filter-control><a href>All</a></li>
61
+ </ul>
62
+
63
+ </div>
64
+ <div>
65
+
66
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
67
+ <li uk-filter-control="[color='red']"><a href>Red</a></li>
68
+ <li uk-filter-control="[color='green']"><a href>Green</a></li>
69
+ <li uk-filter-control="[color='blue']"><a href>Blue</a></li>
70
+ </ul>
71
+
72
+ </div>
73
+ <div>
74
+
75
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
76
+ <li uk-filter-control="[size='small']"><a href>Small</a></li>
77
+ <li uk-filter-control="[size='medium']"><a href>Medium</a></li>
78
+ <li uk-filter-control="[size='large']"><a href>Large</a></li>
79
+ </ul>
80
+
81
+ </div>
82
+ </div>
83
+
84
+ <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
85
+ <h3>Group</h3>
86
+ <div>
87
+
88
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
89
+ <li uk-filter-control><a href>All</a></li>
90
+ <li uk-filter-control="group: color"><a href>All (Color)</a></li>
91
+ <li uk-filter-control="group: size"><a href>All (Size)</a></li>
92
+ </ul>
93
+
94
+ </div>
95
+ <div>
96
+
97
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
98
+ <li uk-filter-control="filter: [color='red']; group: color"><a href>Red</a></li>
99
+ <li uk-filter-control="filter: [color='green']; group: color"><a href>Green</a></li>
100
+ <li uk-filter-control="filter: [color='blue']; group: color"><a href>Blue</a></li>
101
+ </ul>
102
+
103
+ </div>
104
+ <div>
105
+
106
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
107
+ <li uk-filter-control="filter: [size='small']; group: size"><a href>Small</a></li>
108
+ <li uk-filter-control="filter: [size='medium']; group: size"><a href>Medium</a></li>
109
+ <li uk-filter-control="filter: [size='large']; group: size"><a href>Large</a></li>
110
+ </ul>
111
+
112
+ </div>
113
+ </div>
114
+
115
+ <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
116
+ <h3>Alphabetic Order</h3>
117
+ <div>
118
+
119
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
120
+ <li class="uk-active" uk-filter-control="sort: date"><a href>Date Asc</a></li>
121
+ <li uk-filter-control="sort: date; order: desc"><a href>Date Desc</a></li>
122
+ <li uk-filter-control="sort: color"><a href>Color Asc</a></li>
123
+ <li uk-filter-control="sort: color; order: desc"><a href>Color Desc</a></li>
124
+ <li uk-filter-control="sort: size"><a href>Size Asc</a></li>
125
+ <li uk-filter-control="sort: size; order: desc"><a href>Size Desc</a></li>
126
+ </ul>
127
+
128
+ </div>
129
+ </div>
130
+
131
+ <ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: next">
132
+ <li color="blue" size="large" date="2016-06-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">1</div></li>
133
+ <li color="red" size="small" date="2016-12-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">2</div></li>
134
+ <li color="blue" size="medium" date="2017-05-20"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">3</div></li>
135
+ <li color="blue" size="small" date="2017-09-17"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">4</div></li>
136
+ <li color="green" size="medium" date="2017-11-03"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">5</div></li>
137
+ <li color="green" size="small" date="2017-12-25"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">6</div></li>
138
+ <li color="red" size="medium" date="2018-01-30"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">7</div></li>
139
+ <li color="green" size="large" date="2018-02-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">8</div></li>
140
+ <li color="red" size="large" date="2018-03-11"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">9</div></li>
141
+ <li color="blue" size="large" date="2018-06-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">10</div></li>
142
+ <li color="red" size="medium" date="2018-10-27"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">11</div></li>
143
+ <li color="green" size="small" date="2018-12-02"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">12</div></li>
144
+ </ul>
145
+
146
+ </div>
147
+
148
+ <h2>With Parallax</h2>
149
+
150
+ <div class="js-filter-animation" uk-filter="target: .js-filter">
151
+
152
+ <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
153
+ <h3>Default</h3>
154
+ <div>
155
+
156
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
157
+ <li uk-filter-control><a href>All</a></li>
158
+ </ul>
159
+
160
+ </div>
161
+ <div>
162
+
163
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
164
+ <li uk-filter-control="[color='red']"><a href>Red</a></li>
165
+ <li uk-filter-control="[color='green']"><a href>Green</a></li>
166
+ <li uk-filter-control="[color='blue']"><a href>Blue</a></li>
167
+ </ul>
168
+
169
+ </div>
170
+ <div>
171
+
172
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
173
+ <li uk-filter-control="[size='small']"><a href>Small</a></li>
174
+ <li uk-filter-control="[size='medium']"><a href>Medium</a></li>
175
+ <li uk-filter-control="[size='large']"><a href>Large</a></li>
176
+ </ul>
177
+
178
+ </div>
179
+ </div>
180
+
181
+ <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
182
+ <h3>Group</h3>
183
+ <div>
184
+
185
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
186
+ <li uk-filter-control><a href>All</a></li>
187
+ </ul>
188
+
189
+ </div>
190
+ <div>
191
+
192
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
193
+ <li uk-filter-control="filter: [color='red']; group: color"><a href>Red</a></li>
194
+ <li uk-filter-control="filter: [color='green']; group: color"><a href>Green</a></li>
195
+ <li uk-filter-control="filter: [color='blue']; group: color"><a href>Blue</a></li>
196
+ </ul>
197
+
198
+ </div>
199
+ <div>
200
+
201
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
202
+ <li uk-filter-control="filter: [size='small']; group: size"><a href>Small</a></li>
203
+ <li uk-filter-control="filter: [size='medium']; group: size"><a href>Medium</a></li>
204
+ <li uk-filter-control="filter: [size='large']; group: size"><a href>Large</a></li>
205
+ </ul>
206
+
207
+ </div>
208
+ </div>
209
+
210
+ <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
211
+ <h3>Alphabetic Order</h3>
212
+ <div>
213
+
214
+ <ul class="uk-subnav uk-subnav-pill" uk-margin>
215
+ <li class="uk-active" uk-filter-control="sort: date"><a href>Date Asc</a></li>
216
+ <li uk-filter-control="sort: date; order: desc"><a href>Date Desc</a></li>
217
+ <li uk-filter-control="sort: color"><a href>Color Asc</a></li>
218
+ <li uk-filter-control="sort: color; order: desc"><a href>Color Desc</a></li>
219
+ <li uk-filter-control="sort: size"><a href>Size Asc</a></li>
220
+ <li uk-filter-control="sort: size; order: desc"><a href>Size Desc</a></li>
221
+ </ul>
222
+
223
+ </div>
224
+ </div>
225
+
226
+ <ul class="js-filter uk-child-width-1-2 uk-child-width-1-4@m uk-light" uk-grid="masonry: next; parallax: 200">
227
+ <li color="blue" size="large" date="2016-06-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">1</div></li>
228
+ <li color="red" size="small" date="2016-12-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">2</div></li>
229
+ <li color="blue" size="medium" date="2017-05-20"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">3</div></li>
230
+ <li color="blue" size="small" date="2017-09-17"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">4</div></li>
231
+ <li color="green" size="medium" date="2017-11-03"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">5</div></li>
232
+ <li color="green" size="small" date="2017-12-25"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">6</div></li>
233
+ <li color="red" size="medium" date="2018-01-30"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">7</div></li>
234
+ <li color="green" size="large" date="2018-02-01"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">8</div></li>
235
+ <li color="red" size="large" date="2018-03-11"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">9</div></li>
236
+ <li color="blue" size="large" date="2018-06-13"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">10</div></li>
237
+ <li color="red" size="medium" date="2018-10-27"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">11</div></li>
238
+ <li color="green" size="small" date="2018-12-02"><div class="uk-panel uk-flex uk-flex-center uk-flex-middle uk-h2">12</div></li>
239
+ </ul>
240
+
241
+ </div>
242
+
243
+ <h2>Javascript Options</h2>
244
+
245
+ <div class="uk-overflow-auto">
246
+ <table class="uk-table uk-table-striped">
247
+ <thead>
248
+ <tr>
249
+ <th>Option</th>
250
+ <th>Value</th>
251
+ <th>Default</th>
252
+ <th>Description</th>
253
+ </tr>
254
+ </thead>
255
+ <tbody>
256
+ <tr>
257
+ <td><code>target</code></td>
258
+ <td>String</td>
259
+ <td></td>
260
+ <td>The targeted list on which to apply the filter to.</td>
261
+ </tr>
262
+ <tr>
263
+ <td><code>selActive</code></td>
264
+ <td>String, Boolean</td>
265
+ <td>false</td>
266
+ <td>A selector for the initially active filter controls.</td>
267
+ </tr>
268
+ <tr>
269
+ <td><code>animation</code></td>
270
+ <td>String, Boolean</td>
271
+ <td>slide</td>
272
+ <td>Animation mode (slide, fade, delayed-fade, false).</td>
273
+ </tr>
274
+ <tr>
275
+ <td><code>duration</code></td>
276
+ <td>String, Boolean</td>
277
+ <td>250</td>
278
+ <td>Animation duration in milliseconds.</td>
279
+ </tr>
280
+ </tbody>
281
+ </table>
282
+ </div>
283
+
284
+ </div>
285
+
286
+ </body>
287
+ </html>
package/tests/flex.html ADDED
@@ -0,0 +1,182 @@
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>Flex - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .uk-flex > * {
12
+ padding: 10px;
13
+ text-align: center;
14
+ }
15
+
16
+ .uk-flex > :nth-child(8n-7) { background: rgba(0,0,0,0.1); }
17
+ .uk-flex > :nth-child(8n-6) { background: rgba(0,0,0,0.15); }
18
+ .uk-flex > :nth-child(8n-5) { background: rgba(0,0,0,0.2); }
19
+ .uk-flex > :nth-child(8n-4) { background: rgba(0,0,0,0.25); }
20
+ .uk-flex > :nth-child(8n-3) { background: rgba(0,0,0,0.3); }
21
+ .uk-flex > :nth-child(8n-2) { background: rgba(0,0,0,0.35); }
22
+ .uk-flex > :nth-child(8n-1) { background: rgba(0,0,0,0.40); }
23
+ .uk-flex > :nth-child(8n) { background: rgba(0,0,0,0.45); }
24
+
25
+ .test {
26
+ height: 300px;
27
+ background: #f0f0f0;
28
+ }
29
+
30
+ </style>
31
+ </head>
32
+
33
+ <body>
34
+
35
+ <div class="uk-container">
36
+
37
+ <h1>Flex</h1>
38
+
39
+ <h2>Alignment and Justify</h2>
40
+
41
+ <h3>Stretch / Left (Default)</h3>
42
+
43
+ <div class="uk-flex uk-child-width-1-4">
44
+ <div>1-4</div>
45
+ <div>1-4<br>…</div>
46
+ <div>1-4<br>…<br>…</div>
47
+ </div>
48
+
49
+ <h3>Middle / Center</h3>
50
+
51
+ <div class="uk-flex uk-flex-middle uk-flex-center uk-child-width-1-4">
52
+ <div>1-4</div>
53
+ <div>1-4<br>…</div>
54
+ <div>1-4<br>…<br>…</div>
55
+ </div>
56
+
57
+ <h3>Bottom / Right</h3>
58
+
59
+ <div class="uk-flex uk-flex-bottom uk-flex-right uk-child-width-1-4">
60
+ <div>1-4</div>
61
+ <div>1-4<br>…</div>
62
+ <div>1-4<br>…<br>…</div>
63
+ </div>
64
+
65
+ <h3>Top / Space-between</h3>
66
+
67
+ <div class="uk-flex uk-flex-top uk-flex-between uk-child-width-1-4">
68
+ <div>1-4</div>
69
+ <div>1-4<br>…</div>
70
+ <div>1-4<br>…<br>…</div>
71
+ </div>
72
+
73
+ <h3>Stretch / Space-around</h3>
74
+
75
+ <div class="uk-flex uk-flex-around uk-child-width-1-4">
76
+ <div>1-4</div>
77
+ <div>1-4<br>…</div>
78
+ <div>1-4<br>…<br>…</div>
79
+ </div>
80
+
81
+ <h2>Wrap and Alignment</h2>
82
+
83
+ <h3>Stretch</h3>
84
+
85
+ <div class="uk-flex uk-flex-wrap test">
86
+ <div class="uk-width-1-3">1-3</div>
87
+ <div class="uk-width-1-2">1-2<br>…</div>
88
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
89
+ <div class="uk-width-1-3">1-3</div>
90
+ <div class="uk-width-1-2">1-2<br>…</div>
91
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
92
+ </div>
93
+
94
+ <h3>Top</h3>
95
+
96
+ <div class="uk-flex uk-flex-wrap uk-flex-wrap-top test">
97
+ <div class="uk-width-1-3">1-3</div>
98
+ <div class="uk-width-1-2">1-2<br>…</div>
99
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
100
+ <div class="uk-width-1-3">1-3</div>
101
+ <div class="uk-width-1-2">1-2<br>…</div>
102
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
103
+ </div>
104
+
105
+ <h3>Middle</h3>
106
+
107
+ <div class="uk-flex uk-flex-wrap uk-flex-wrap-middle test">
108
+ <div class="uk-width-1-3">1-3</div>
109
+ <div class="uk-width-1-2">1-2<br>…</div>
110
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
111
+ <div class="uk-width-1-3">1-3</div>
112
+ <div class="uk-width-1-2">1-2<br>…</div>
113
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
114
+ </div>
115
+
116
+ <h3>Bottom</h3>
117
+
118
+ <div class="uk-flex uk-flex-wrap uk-flex-wrap-bottom test">
119
+ <div class="uk-width-1-3">1-3</div>
120
+ <div class="uk-width-1-2">1-2<br>…</div>
121
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
122
+ <div class="uk-width-1-3">1-3</div>
123
+ <div class="uk-width-1-2">1-2<br>…</div>
124
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
125
+ </div>
126
+
127
+ <h3>Space-between</h3>
128
+
129
+ <div class="uk-flex uk-flex-wrap uk-flex-wrap-between test">
130
+ <div class="uk-width-1-3">1-3</div>
131
+ <div class="uk-width-1-2">1-2<br>…</div>
132
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
133
+ <div class="uk-width-1-3">1-3</div>
134
+ <div class="uk-width-1-2">1-2<br>…</div>
135
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
136
+ </div>
137
+
138
+ <h3>Space-around</h3>
139
+
140
+ <div class="uk-flex uk-flex-wrap uk-flex-wrap-around test">
141
+ <div class="uk-width-1-3">1-3</div>
142
+ <div class="uk-width-1-2">1-2<br>…</div>
143
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
144
+ <div class="uk-width-1-3">1-3</div>
145
+ <div class="uk-width-1-2">1-2<br>…</div>
146
+ <div class="uk-width-1-3">1-3<br>…<br>…</div>
147
+ </div>
148
+
149
+ <h2>Inline Flex</h2>
150
+
151
+ <div class="uk-text-center">
152
+ <div class="uk-flex uk-flex-inline">
153
+ <div>1-4</div>
154
+ <div>1-4<br>…</div>
155
+ <div>1-4<br>…<br>…</div>
156
+ </div>
157
+ </div>
158
+
159
+ <h2>Order</h2>
160
+
161
+ <div class="uk-flex uk-child-width-1-3">
162
+ <div>1</div>
163
+ <div>2</div>
164
+ <div class="uk-flex-first">3</div>
165
+ </div>
166
+
167
+ <div class="uk-flex uk-child-width-1-3">
168
+ <div class="uk-flex-last">1</div>
169
+ <div>2</div>
170
+ <div>3</div>
171
+ </div>
172
+
173
+ <div class="uk-flex uk-child-width-1-3">
174
+ <div class="uk-flex-last">1</div>
175
+ <div>2</div>
176
+ <div class="uk-flex-first">3</div>
177
+ </div>
178
+
179
+ </div>
180
+
181
+ </body>
182
+ </html>