@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/drop.html ADDED
@@ -0,0 +1,782 @@
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>Drop - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .test-boundary {
12
+ padding: 15px;
13
+ border: 1px dashed rgba(0,0,0,0.2);
14
+ }
15
+
16
+ .test-boundary-overflow { width: 250%; }
17
+
18
+ .gap { gap: 10px; }
19
+
20
+ </style>
21
+ </head>
22
+
23
+ <body>
24
+
25
+ <div class="uk-container">
26
+
27
+ <h1>Drop</h1>
28
+
29
+ <div class="uk-margin uk-form-stacked">
30
+ <select id="js-style-switcher" class="uk-select uk-form-width-small" aria-label="Style switcher">
31
+ <option value="uk-dropdown">Dropdown</option>
32
+ <option value="uk-dropbar">Dropbar</option>
33
+ <option value="uk-card uk-card-body uk-card-default">Card Default</option>
34
+ <option value="uk-card uk-card-body uk-card-primary">Card Primary</option>
35
+ </select>
36
+ </div>
37
+
38
+ <div class="uk-margin" uk-margin>
39
+
40
+ <div class="uk-inline">
41
+ <button class="uk-button uk-button-default" type="button">Hover, Click <span uk-drop-parent-icon></span></button>
42
+ <div class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
43
+ </div>
44
+
45
+ <div class="uk-inline">
46
+ <button class="uk-button uk-button-default" type="button">Click only</button>
47
+ <div class="uk-dropdown" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
48
+ </div>
49
+
50
+ <div class="uk-inline">
51
+ <button class="uk-button uk-button-default" type="button">Hover only</button>
52
+ <div class="uk-dropdown" uk-drop="mode: hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
53
+ </div>
54
+
55
+ <div class="uk-inline">
56
+ <button class="uk-button uk-button-default" type="button">Nested Hover</button>
57
+ <div class="uk-dropdown" uk-drop>
58
+
59
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
60
+ <button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
61
+ <div class="uk-dropdown" uk-drop="pos: right-top; offset: 50">
62
+
63
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
64
+ <button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
65
+ <div class="uk-dropdown" uk-drop="pos: right-top; offset: 50">
66
+
67
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
68
+ <button class="uk-button uk-button-primary uk-width-1-1" type="button">Hover</button>
69
+ <div id="child-child-child-drop" class="uk-dropdown" uk-drop="pos: right-top; offset: 50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
70
+
71
+ </div>
72
+
73
+ </div>
74
+
75
+ </div>
76
+ </div>
77
+
78
+ <div class="uk-inline">
79
+ <button class="uk-button uk-button-default" type="button">Nested Click</button>
80
+ <div class="uk-dropdown" uk-drop="mode: click">
81
+
82
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
83
+ <button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
84
+ <div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">
85
+
86
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
87
+ <button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
88
+ <div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">
89
+
90
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
91
+ <button class="uk-button uk-button-primary uk-width-1-1" type="button">Click</button>
92
+ <div class="uk-dropdown" uk-drop="pos: right-top; offset: 50; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
93
+
94
+ </div>
95
+
96
+ </div>
97
+
98
+ </div>
99
+ </div>
100
+
101
+ <div class="uk-inline">
102
+ <button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
103
+ <div class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
104
+ </div>
105
+
106
+ <div class="uk-inline">
107
+ <button class="uk-button uk-button-default" type="button" uk-toggle="target: #js-multiple-toggles; mode: click,hover">Same</button>
108
+ </div>
109
+
110
+ <div class="uk-inline">
111
+ <button class="uk-button uk-button-default" type="button">Same</button>
112
+ <div id="js-multiple-toggles" class="uk-dropdown" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
113
+ </div>
114
+
115
+ </div>
116
+
117
+ <h2>Position</h2>
118
+
119
+ <div class="uk-margin uk-form-stacked">
120
+ <div class="uk-inline">
121
+ <label class="uk-form-label" for="js-boundary-x-switcher">Boundary X</label>
122
+ <select id="js-boundary-x-switcher" class="uk-select uk-form-width-small">
123
+ <option value="false">Viewport</option>
124
+ <option value="!.test-boundary">Box</option>
125
+ </select>
126
+ </div>
127
+ <div class="uk-inline">
128
+ <label class="uk-form-label" for="js-boundary-y-switcher">Boundary Y</label>
129
+ <select id="js-boundary-y-switcher" class="uk-select uk-form-width-small">
130
+ <option value="false">Viewport</option>
131
+ <option value="!.test-boundary">Box</option>
132
+ </select>
133
+ </div>
134
+ <div class="uk-inline">
135
+ <label class="uk-form-label" for="js-target-x-switcher">Target X</label>
136
+ <select id="js-target-x-switcher" class="uk-select uk-form-width-small">
137
+ <option value="false">Toggle</option>
138
+ <option value="!.test-boundary">Box</option>
139
+ <option value="true">Viewport</option>
140
+ </select>
141
+ </div>
142
+ <div class="uk-inline">
143
+ <label class="uk-form-label" for="js-target-y-switcher">Target Y</label>
144
+ <select id="js-target-y-switcher" class="uk-select uk-form-width-small">
145
+ <option value="false">Toggle</option>
146
+ <option value="!.test-boundary">Box</option>
147
+ <option value="true">Viewport</option>
148
+ </select>
149
+ </div>
150
+ <div class="uk-inline">
151
+ <label class="uk-form-label" for="js-inset-switcher">Inset</label>
152
+ <select id="js-inset-switcher" class="uk-select uk-form-width-xsmall">
153
+ <option value="false">False</option>
154
+ <option value="true">True</option>
155
+ </select>
156
+ </div>
157
+ <div class="uk-inline">
158
+ <label class="uk-form-label" for="js-stretch-switcher">Stretch</label>
159
+ <select id="js-stretch-switcher" class="uk-select uk-form-width-xsmall">
160
+ <option value="false">False</option>
161
+ <option value="true">True</option>
162
+ <option value="x">X</option>
163
+ <option value="y">Y</option>
164
+ </select>
165
+ </div>
166
+ <div class="uk-inline">
167
+ <label class="uk-form-label" for="js-flip-switcher">Flip</label>
168
+ <select id="js-flip-switcher" class="uk-select uk-form-width-xsmall">
169
+ <option value="false">False</option>
170
+ <option value="true" selected>True</option>
171
+ </select>
172
+ </div>
173
+ <div class="uk-inline">
174
+ <label class="uk-form-label" for="js-shift-switcher">Shift</label>
175
+ <select id="js-shift-switcher" class="uk-select uk-form-width-xsmall">
176
+ <option value="false">False</option>
177
+ <option value="true" selected>True</option>
178
+ </select>
179
+ </div>
180
+ <div class="uk-inline">
181
+ <label class="uk-form-label" for="js-animation-switcher">Animation</label>
182
+ <select id="js-animation-switcher" class="uk-select uk-form-width-small">
183
+ <option value="uk-animation-fade">Fade</option>
184
+ <option value="slide-top">Slide Top</option>
185
+ <option value="slide-bottom">Slide Bottom</option>
186
+ <option value="slide-left">Slide Left</option>
187
+ <option value="slide-right">Slide Right</option>
188
+ <option value="reveal-top">Reveal Top</option>
189
+ <option value="reveal-bottom">Reveal Bottom</option>
190
+ <option value="reveal-left">Reveal Left</option>
191
+ <option value="reveal-right">Reveal Right</option>
192
+ </select>
193
+ </div>
194
+ <div class="uk-inline">
195
+ <label class="uk-form-label" for="js-animate-out-switcher">Out</label>
196
+ <select id="js-animate-out-switcher" class="uk-select uk-form-width-xsmall">
197
+ <option value="false">False</option>
198
+ <option value="true">True</option>
199
+ </select>
200
+ </div>
201
+ <div class="uk-inline">
202
+ <label class="uk-form-label" for="js-duration-switcher">Duration</label>
203
+ <select id="js-duration-switcher" class="uk-select uk-form-width-xsmall">
204
+ <option value="200">Default</option>
205
+ <option value="2000">Slow</option>
206
+ </select>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="uk-child-width-1-2@m" uk-grid>
211
+ <div>
212
+
213
+ <p>Default</p>
214
+
215
+ <div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
216
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
217
+
218
+ <div>
219
+ <button class="uk-button uk-button-default" type="button">Top Left</button>
220
+ <div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
221
+ </div>
222
+
223
+ <div>
224
+ <button class="uk-button uk-button-default" type="button">Top Center</button>
225
+ <div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
226
+ </div>
227
+
228
+ <div>
229
+ <button class="uk-button uk-button-default" type="button">Top Right</button>
230
+ <div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
231
+ </div>
232
+
233
+ </div>
234
+ <div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
235
+
236
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
237
+
238
+ <div>
239
+ <button class="uk-button uk-button-default" type="button">Left Top</button>
240
+ <div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
241
+ </div>
242
+
243
+ <div>
244
+ <button class="uk-button uk-button-default" type="button">Left Center</button>
245
+ <div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
246
+ </div>
247
+
248
+ <div>
249
+ <button class="uk-button uk-button-default" type="button">Left Bottom</button>
250
+ <div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
251
+ </div>
252
+
253
+ </div>
254
+
255
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
256
+
257
+ <div>
258
+ <button class="uk-button uk-button-default" type="button">Right Top</button>
259
+ <div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
260
+ </div>
261
+
262
+ <div>
263
+ <button class="uk-button uk-button-default" type="button">Right Center</button>
264
+ <div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
265
+ </div>
266
+
267
+ <div>
268
+ <button class="uk-button uk-button-default" type="button">Right Bottom</button>
269
+ <div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
270
+ </div>
271
+
272
+ </div>
273
+
274
+ </div>
275
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
276
+
277
+ <div>
278
+ <button class="uk-button uk-button-default" type="button">Bottom Left</button>
279
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
280
+ </div>
281
+
282
+ <div>
283
+ <button class="uk-button uk-button-default" type="button">Bottom Center</button>
284
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
285
+ </div>
286
+
287
+ <div>
288
+ <button class="uk-button uk-button-default" type="button">Bottom Right</button>
289
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
290
+ </div>
291
+
292
+ </div>
293
+
294
+ </div>
295
+
296
+ </div>
297
+ <div>
298
+
299
+ <p>Switched Alignment</p>
300
+
301
+ <div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
302
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
303
+
304
+ <div>
305
+ <button class="uk-button uk-button-default" type="button">Top Right</button>
306
+ <div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
307
+ </div>
308
+
309
+ <div>
310
+ <button class="uk-button uk-button-default" type="button">Top Center</button>
311
+ <div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
312
+ </div>
313
+
314
+ <div>
315
+ <button class="uk-button uk-button-default" type="button">Top Left</button>
316
+ <div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
317
+ </div>
318
+
319
+ </div>
320
+ <div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
321
+
322
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
323
+
324
+ <div>
325
+ <button class="uk-button uk-button-default" type="button">Left Bottom</button>
326
+ <div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
327
+ </div>
328
+
329
+ <div>
330
+ <button class="uk-button uk-button-default" type="button">Left Center</button>
331
+ <div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
332
+ </div>
333
+
334
+ <div>
335
+ <button class="uk-button uk-button-default" type="button">Left Top</button>
336
+ <div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
337
+ </div>
338
+
339
+ </div>
340
+
341
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
342
+
343
+ <div>
344
+ <button class="uk-button uk-button-default" type="button">Right Bottom</button>
345
+ <div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
346
+ </div>
347
+
348
+ <div>
349
+ <button class="uk-button uk-button-default" type="button">Right Center</button>
350
+ <div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
351
+ </div>
352
+
353
+ <div>
354
+ <button class="uk-button uk-button-default" type="button">Right Top</button>
355
+ <div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
356
+ </div>
357
+
358
+ </div>
359
+
360
+ </div>
361
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
362
+
363
+ <div>
364
+ <button class="uk-button uk-button-default" type="button">Bottom Right</button>
365
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
366
+ </div>
367
+
368
+ <div>
369
+ <button class="uk-button uk-button-default" type="button">Bottom Center</button>
370
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
371
+ </div>
372
+
373
+ <div>
374
+ <button class="uk-button uk-button-default" type="button">Bottom Left</button>
375
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
376
+ </div>
377
+
378
+ </div>
379
+
380
+ </div>
381
+
382
+ </div>
383
+ <div>
384
+
385
+ <p>Switched Position</p>
386
+
387
+ <div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
388
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
389
+
390
+ <div>
391
+ <button class="uk-button uk-button-default" type="button">Bottom Left</button>
392
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
393
+ </div>
394
+
395
+ <div>
396
+ <button class="uk-button uk-button-default" type="button">Bottom Center</button>
397
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
398
+ </div>
399
+
400
+ <div>
401
+ <button class="uk-button uk-button-default" type="button">Bottom Right</button>
402
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
403
+ </div>
404
+
405
+ </div>
406
+ <div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
407
+
408
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
409
+
410
+ <div>
411
+ <button class="uk-button uk-button-default" type="button">Right Top</button>
412
+ <div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
413
+ </div>
414
+
415
+ <div>
416
+ <button class="uk-button uk-button-default" type="button">Right Center</button>
417
+ <div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
418
+ </div>
419
+
420
+ <div>
421
+ <button class="uk-button uk-button-default" type="button">Right Bottom</button>
422
+ <div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
423
+ </div>
424
+
425
+ </div>
426
+
427
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
428
+
429
+ <div>
430
+ <button class="uk-button uk-button-default" type="button">Left Top</button>
431
+ <div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
432
+ </div>
433
+
434
+ <div>
435
+ <button class="uk-button uk-button-default" type="button">Left Center</button>
436
+ <div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
437
+ </div>
438
+
439
+ <div>
440
+ <button class="uk-button uk-button-default" type="button">Left Bottom</button>
441
+ <div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
442
+ </div>
443
+
444
+ </div>
445
+
446
+ </div>
447
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
448
+
449
+ <div>
450
+ <button class="uk-button uk-button-default" type="button">Top Left</button>
451
+ <div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
452
+ </div>
453
+
454
+ <div>
455
+ <button class="uk-button uk-button-default" type="button">Top Center</button>
456
+ <div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
457
+ </div>
458
+
459
+ <div>
460
+ <button class="uk-button uk-button-default" type="button">Top Right</button>
461
+ <div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
462
+ </div>
463
+
464
+ </div>
465
+
466
+ </div>
467
+
468
+ </div>
469
+ <div>
470
+
471
+ <p>Switched Position and Alignment</p>
472
+
473
+ <div class="test-boundary uk-height-large uk-flex uk-flex-column uk-flex-between uk-flex-wrap gap">
474
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
475
+
476
+ <div>
477
+ <button class="uk-button uk-button-default" type="button">Bottom Right</button>
478
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
479
+ </div>
480
+
481
+ <div>
482
+ <button class="uk-button uk-button-default" type="button">Bottom Center</button>
483
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
484
+ </div>
485
+
486
+ <div>
487
+ <button class="uk-button uk-button-default" type="button">Bottom Left</button>
488
+ <div class="js-options uk-dropdown" uk-drop="pos: bottom-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
489
+ </div>
490
+
491
+ </div>
492
+ <div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-1 gap">
493
+
494
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap gap">
495
+
496
+ <div>
497
+ <button class="uk-button uk-button-default" type="button">Right Bottom</button>
498
+ <div class="js-options uk-dropdown" uk-drop="pos: right-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
499
+ </div>
500
+
501
+ <div>
502
+ <button class="uk-button uk-button-default" type="button">Right Center</button>
503
+ <div class="js-options uk-dropdown" uk-drop="pos: right-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
504
+ </div>
505
+
506
+ <div>
507
+ <button class="uk-button uk-button-default" type="button">Right Top</button>
508
+ <div class="js-options uk-dropdown" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
509
+ </div>
510
+
511
+ </div>
512
+
513
+ <div class="uk-flex uk-flex-column uk-flex-around uk-flex-wrap uk-flex-bottom gap">
514
+
515
+ <div>
516
+ <button class="uk-button uk-button-default" type="button">Left Bottom</button>
517
+ <div class="js-options uk-dropdown" uk-drop="pos: left-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
518
+ </div>
519
+
520
+ <div>
521
+ <button class="uk-button uk-button-default" type="button">Left Center</button>
522
+ <div class="js-options uk-dropdown" uk-drop="pos: left-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
523
+ </div>
524
+
525
+ <div>
526
+ <button class="uk-button uk-button-default" type="button">Left Top</button>
527
+ <div class="js-options uk-dropdown" uk-drop="pos: left-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
528
+ </div>
529
+
530
+ </div>
531
+
532
+ </div>
533
+ <div class="uk-flex uk-flex-between uk-flex-wrap gap">
534
+
535
+ <div>
536
+ <button class="uk-button uk-button-default" type="button">Top Right</button>
537
+ <div class="js-options uk-dropdown" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
538
+ </div>
539
+
540
+ <div>
541
+ <button class="uk-button uk-button-default" type="button">Top Center</button>
542
+ <div class="js-options uk-dropdown" uk-drop="pos: top-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
543
+ </div>
544
+
545
+ <div>
546
+ <button class="uk-button uk-button-default" type="button">Top Left</button>
547
+ <div class="js-options uk-dropdown" uk-drop="pos: top-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
548
+ </div>
549
+
550
+ </div>
551
+ </div>
552
+
553
+ </div>
554
+ </div>
555
+
556
+ <h2>Shift and Flip</h2>
557
+
558
+ <div class="uk-margin">
559
+ <select id="js-boundary-overflow-switcher" class="uk-select uk-form-width-small" aria-label="Boundary overflow switcher">
560
+ <option value="">Resize</option>
561
+ <option value="test-boundary-overflow">Scroll</option>
562
+ </select>
563
+ </div>
564
+
565
+ <div uk-grid>
566
+ <div class="uk-width-1-2@m">
567
+
568
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-horizontal uk-margin">
569
+ <div class="js-boundary-overflow uk-flex uk-flex-center">
570
+ <div>
571
+
572
+ <button class="uk-button uk-button-default" type="button">Shift</button>
573
+ <div class="uk-dropdown uk-width-medium" uk-drop="pos: bottom-left; boundary: !.test-boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
574
+
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ </div>
580
+ <div class="uk-width-1-2@m">
581
+
582
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-horizontal uk-margin">
583
+ <div class="js-boundary-overflow uk-flex uk-flex-center">
584
+ <div>
585
+
586
+ <button class="uk-button uk-button-default" style="margin-left: 40px" type="button">Flip</button>
587
+ <div class="uk-dropdown uk-width-small" uk-drop="pos: right-top; boundary: !.test-boundary; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
588
+
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ </div>
594
+ </div>
595
+
596
+ <h2>JavaScript Options</h2>
597
+
598
+ <div class="uk-overflow-auto">
599
+ <table class="uk-table uk-table-striped">
600
+ <thead>
601
+ <tr>
602
+ <th>Option</th>
603
+ <th>Value</th>
604
+ <th>Default</th>
605
+ <th>Description</th>
606
+ </tr>
607
+ </thead>
608
+ <tbody>
609
+ <tr>
610
+ <td><code>toggle</code></td>
611
+ <td>CSS Selector</td>
612
+ <td>- *</td>
613
+ <td>CSS selector for the element to be used as toggle. By default, the preceding element.</td>
614
+ </tr>
615
+ <tr>
616
+ <td><code>pos</code></td>
617
+ <td>String</td>
618
+ <td>bottom-left</td>
619
+ <td>Drop position.</td>
620
+ </tr>
621
+ <tr>
622
+ <td><code>stretch</code></td>
623
+ <td>Boolean, String</td>
624
+ <td>false</td>
625
+ <td>Stretch drop on both (true) or given axis (x,y).</td>
626
+ </tr>
627
+ <tr>
628
+ <td><code>mode</code></td>
629
+ <td>String</td>
630
+ <td>click,hover</td>
631
+ <td>Comma-separated list of drop trigger behavior modes (hover, click).</td>
632
+ </tr>
633
+ <tr>
634
+ <td><code>delay-show</code></td>
635
+ <td>Number</td>
636
+ <td>0</td>
637
+ <td>Delay time in hover mode before a drop is shown in ms.</td>
638
+ </tr>
639
+ <tr>
640
+ <td><code>delay-hide</code></td>
641
+ <td>Number</td>
642
+ <td>800</td>
643
+ <td>Delay time in hover mode before a drop is hidden in ms.</td>
644
+ </tr>
645
+ <tr>
646
+ <td><code>auto-update</code></td>
647
+ <td>Boolean</td>
648
+ <td>true</td>
649
+ <td>Disable dynamic positioning while scrolling by setting this option to `false`.</td>
650
+ </tr>
651
+ <tr>
652
+ <td><code>boundary</code></td>
653
+ <td>CSS selector</td>
654
+ <td>false</td>
655
+ <td>The area the drop can't exceed causing it to flip and shift. By default, the nearest scrolling ancestor.</td>
656
+ </tr>
657
+ <tr>
658
+ <td><code>boundary-x</code></td>
659
+ <td>Boolean, CSS selector</td>
660
+ <td>false</td>
661
+ <td>The area on the x-axis the drop can't exceed causing it to flip and shift.</td>
662
+ </tr>
663
+ <tr>
664
+ <td><code>boundary-y</code></td>
665
+ <td>Boolean, CSS selector</td>
666
+ <td>false</td>
667
+ <td>The area on the y-axis the drop can't exceed causing it to flip and shift.</td>
668
+ </tr>
669
+ <tr>
670
+ <td><code>target</code></td>
671
+ <td>Boolean, CSS selector</td>
672
+ <td>false</td>
673
+ <td>The element the drop is positioned to (`true` for window).</td>
674
+ </tr>
675
+ <tr>
676
+ <td><code>target-x</code></td>
677
+ <td>Boolean, CSS selector</td>
678
+ <td>false</td>
679
+ <td>The element's X axis the drop is positioned to (`true` for window).</td>
680
+ </tr>
681
+ <tr>
682
+ <td><code>target-y</code></td>
683
+ <td>Boolean, CSS selector</td>
684
+ <td>false</td>
685
+ <td>The element's Y axis the drop is positioned to (`true` for window).</td>
686
+ </tr>
687
+ <tr>
688
+ <td><code>inset</code></td>
689
+ <td>Boolean</td>
690
+ <td>false</td>
691
+ <td>Position inside its target.</td>
692
+ </tr>
693
+ <tr>
694
+ <td><code>flip</code></td>
695
+ <td>Boolean</td>
696
+ <td>true</td>
697
+ <td>Flips the Drop along the main axis if it overflows the boundary.</td>
698
+ </tr>
699
+ <tr>
700
+ <td><code>shift</code></td>
701
+ <td>Boolean</td>
702
+ <td>true</td>
703
+ <td>Shifts the Drop along the cross axis if it overflows the boundary.</td>
704
+ </tr>
705
+ <tr>
706
+ <td><code>offset</code></td>
707
+ <td>Number</td>
708
+ <td>0</td>
709
+ <td>The drop offset.</td>
710
+ </tr>
711
+ <tr>
712
+ <td><code>animation</code></td>
713
+ <td>String</td>
714
+ <td>uk-animation-fade</td>
715
+ <td>Space-separated names of animations. Comma-separated for animation out.</td>
716
+ </tr>
717
+ <tr>
718
+ <td><code>animate-out</code></td>
719
+ <td>Boolean</td>
720
+ <td>false</td>
721
+ <td>Use animation when closing the drop.</td>
722
+ </tr>
723
+ <tr>
724
+ <td><code>bg-scroll</code></td>
725
+ <td>Boolean</td>
726
+ <td>true</td>
727
+ <td>Allow background scrolling while drop is opened.</td>
728
+ </tr>
729
+ <tr>
730
+ <td><code>close-on-scroll</code></td>
731
+ <td>Boolean</td>
732
+ <td>false</td>
733
+ <td>Close the drop on scrolling a parent scroll container.</td>
734
+ </tr>
735
+ <tr>
736
+ <td><code>duration</code></td>
737
+ <td>Number</td>
738
+ <td>200</td>
739
+ <td>The animation duration.</td>
740
+ </tr>
741
+ <tr>
742
+ <td><code>container</code></td>
743
+ <td>Boolean</td>
744
+ <td>false</td>
745
+ <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
746
+ </tr>
747
+ </tbody>
748
+ </table>
749
+ </div>
750
+
751
+ </div>
752
+
753
+ <script>
754
+
755
+ const {$$, addClass, attr, css, on, removeClass } = UIkit.util;
756
+
757
+ on('#js-style-switcher', 'change', (e) => {
758
+ const options = $$('option', e.target).map(({value}) => value);
759
+ for (const el of $$('.uk-drop')) {
760
+ removeClass(el, options);
761
+ addClass(el, e.target.value);
762
+ }
763
+ });
764
+
765
+ on('#js-boundary-overflow-switcher', 'change', (e) => {
766
+ const options = $$('option', e.target).map(({value}) => value);
767
+ for (const el of $$('.js-boundary-overflow')) {
768
+ removeClass(el, options);
769
+ addClass(el, e.target.value);
770
+ }
771
+ });
772
+
773
+ for (const option of ['boundary-x', 'boundary-y', 'target-x', 'target-y', 'inset', 'stretch', 'flip', 'shift', 'animation', 'animate-out', 'duration']) {
774
+ on(`#js-${option}-switcher`, 'change', (e) =>
775
+ attr($$('.js-options'), option, e.target.value)
776
+ );
777
+ }
778
+
779
+ </script>
780
+
781
+ </body>
782
+ </html>