@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/form.html ADDED
@@ -0,0 +1,675 @@
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>Form - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ </head>
10
+
11
+ <body>
12
+
13
+ <div class="uk-container">
14
+
15
+ <h1>Form</h1>
16
+
17
+ <div uk-grid>
18
+ <div class="uk-width-2-3@s">
19
+
20
+ <h2>Horizontal</h2>
21
+
22
+ <form class="uk-form-horizontal">
23
+
24
+ <div class="uk-margin">
25
+ <label class="uk-form-label" for="form-h-text">Text</label>
26
+ <div class="uk-form-controls">
27
+ <input class="uk-input uk-form-width-large" id="form-h-text" type="text" placeholder="Some text...">
28
+ </div>
29
+ </div>
30
+
31
+ <div class="uk-margin">
32
+ <label class="uk-form-label" for="form-h-select">Select</label>
33
+ <div class="uk-form-controls">
34
+ <select class="uk-select uk-form-width-large" id="form-h-select">
35
+ <option>Option 01</option>
36
+ <option>Option 02</option>
37
+ <optgroup label="Optgroup">
38
+ <option>Option A</option>
39
+ <option>Option B</option>
40
+ </optgroup>
41
+ </select>
42
+ </div>
43
+ </div>
44
+
45
+ <div class="uk-margin">
46
+ <label class="uk-form-label" for="form-h-datalist">Datalist</label>
47
+ <div class="uk-form-controls">
48
+ <input class="uk-input uk-form-width-large" id="form-h-datalist" list="datalist" type="text" placeholder="Some text...">
49
+ <datalist id="datalist">
50
+ <option value="Chrome"></option>
51
+ <option value="Edge"></option>
52
+ <option value="Firefox"></option>
53
+ <option value="Safari"></option>
54
+ </datalist>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="uk-margin">
59
+ <label class="uk-form-label" for="form-h-textarea">Textarea</label>
60
+ <div class="uk-form-controls">
61
+ <textarea class="uk-textarea uk-form-width-large" id="form-h-textarea" rows="5" placeholder="Some text..."></textarea>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="uk-margin">
66
+ <span class="uk-form-label">Radio</span>
67
+ <div class="uk-form-controls uk-form-controls-text">
68
+ <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
69
+ <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
70
+ <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
71
+ <label><input class="uk-radio" type="radio" name="radio2"> A</label>
72
+ <label><input class="uk-radio" type="radio" name="radio2"> B</label>
73
+ <label><input class="uk-radio" type="radio" name="radio2"> C</label>
74
+ <label><input class="uk-radio" type="radio" name="radio2"> D</label>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <div class="uk-margin">
80
+ <span class="uk-form-label">Checkbox</span>
81
+ <div class="uk-form-controls uk-form-controls-text">
82
+ <label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
83
+ <label><input class="uk-checkbox" type="checkbox"> Option 02</label>
84
+ <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
85
+ <label><input class="uk-checkbox" type="checkbox"> A</label>
86
+ <label><input class="uk-checkbox" type="checkbox"> B</label>
87
+ <label><input class="uk-checkbox" type="checkbox"> C</label>
88
+ <label><input class="uk-checkbox" type="checkbox"> D</label>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="uk-margin">
94
+ <label class="uk-form-label" for="form-h-multiple">Multiple</label>
95
+ <div class="uk-form-controls">
96
+ <select class="uk-select uk-form-width-large" id="form-h-multiple" multiple>
97
+ <option>Option 01</option>
98
+ <option>Option 02</option>
99
+ <option>Option 03</option>
100
+ <option>Option 04</option>
101
+ <optgroup label="Optgroup">
102
+ <option>Option A</option>
103
+ <option>Option B</option>
104
+ </optgroup>
105
+ </select>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="uk-margin">
110
+ <label class="uk-form-label" for="form-h-range">Range</label>
111
+ <div class="uk-form-controls uk-form-controls-text">
112
+ <input class="uk-range uk-form-width-large" id="form-h-range" type="range" value="2" min="0" max="10" step="0.1">
113
+ </div>
114
+ </div>
115
+
116
+ </form>
117
+
118
+ <h2>Sizes</h2>
119
+
120
+ <form>
121
+
122
+ <div class="uk-margin" uk-margin>
123
+ <textarea class="uk-textarea uk-form-width-small uk-form-large" rows="2" placeholder="Some text..." aria-label="Large"></textarea>
124
+ <input class="uk-input uk-form-width-small uk-form-large" type="text" placeholder="Some text..." aria-label="Large">
125
+ <select class="uk-select uk-form-width-small uk-form-large" aria-label="Large">
126
+ <option>Option 01</option>
127
+ <option>Option 02</option>
128
+ <optgroup label="Optgroup">
129
+ <option>Option A</option>
130
+ <option>Option B</option>
131
+ </optgroup>
132
+ </select>
133
+ <button class="uk-button uk-button-default uk-button-large">Button</button>
134
+ <input class="uk-checkbox uk-form-large" type="checkbox">
135
+ <input class="uk-radio uk-form-large" type="radio">
136
+ </div>
137
+
138
+ <div class="uk-margin" uk-margin>
139
+ <textarea class="uk-textarea uk-form-width-small" rows="2" placeholder="Some text..." aria-label="Default"></textarea>
140
+ <input class="uk-input uk-form-width-small" type="text" placeholder="Some text..." aria-label="Default">
141
+ <select class="uk-select uk-form-width-small" aria-label="Default">
142
+ <option>Option 01</option>
143
+ <option>Option 02</option>
144
+ <optgroup label="Optgroup">
145
+ <option>Option A</option>
146
+ <option>Option B</option>
147
+ </optgroup>
148
+ </select>
149
+ <button class="uk-button uk-button-default">Button</button>
150
+ <input class="uk-checkbox" type="checkbox">
151
+ <input class="uk-radio" type="radio">
152
+ </div>
153
+
154
+ <div class="uk-margin" uk-margin>
155
+ <textarea class="uk-textarea uk-form-width-small uk-form-small" rows="2" placeholder="Some text..." aria-label="Small"></textarea>
156
+ <input class="uk-input uk-form-width-small uk-form-small" type="text" placeholder="Some text..." aria-label="Small">
157
+ <select class="uk-select uk-form-width-small uk-form-small" aria-label="Small">
158
+ <option>Option 01</option>
159
+ <option>Option 02</option>
160
+ <optgroup label="Optgroup">
161
+ <option>Option A</option>
162
+ <option>Option B</option>
163
+ </optgroup>
164
+ </select>
165
+ <button class="uk-button uk-button-default uk-button-small">Button</button>
166
+ <input class="uk-checkbox uk-form-small" type="checkbox">
167
+ <input class="uk-radio uk-form-small" type="radio">
168
+ </div>
169
+
170
+ </form>
171
+
172
+ <h2>Widths</h2>
173
+
174
+ <form>
175
+
176
+ <div class="uk-margin" uk-margin>
177
+ <input class="uk-input uk-form-width-large" type="text" placeholder="form-width-large" aria-label="Width large">
178
+ </div>
179
+
180
+ <div class="uk-margin" uk-margin>
181
+ <select class="uk-select uk-form-width-large" aria-label="Width large">
182
+ <option>form-width-large</option>
183
+ </select>
184
+ </div>
185
+
186
+ <div class="uk-margin" uk-margin>
187
+ <textarea class="uk-textarea uk-form-width-large" rows="1" placeholder="form-width-large" aria-label="Width large"></textarea>
188
+ </div>
189
+
190
+ <div class="uk-margin" uk-margin>
191
+ <input class="uk-input uk-form-width-medium" type="text" placeholder="form-width-medium" aria-label="Width medium">
192
+ <input class="uk-input uk-form-width-small" type="text" placeholder="form-width-small" aria-label="Width small">
193
+ <input class="uk-input uk-form-width-xsmall" type="text" placeholder="form-width-xsmall" aria-label="Width xsmall">
194
+ </div>
195
+
196
+ <div class="uk-margin" uk-margin>
197
+ <select class="uk-select uk-form-width-medium" aria-label="Width medium">
198
+ <option>form-width-medium</option>
199
+ </select>
200
+ <select class="uk-select uk-form-width-small" aria-label="Width small">
201
+ <option>form-width-small</option>
202
+ </select>
203
+ <select class="uk-select uk-form-width-xsmall" aria-label="Width xsmall">
204
+ <option>form-width-xsmall</option>
205
+ </select>
206
+ </div>
207
+
208
+ <div class="uk-margin" uk-margin>
209
+ <textarea class="uk-textarea uk-form-width-medium" rows="1" placeholder="form-width-medium" aria-label="Width medium"></textarea>
210
+ <textarea class="uk-textarea uk-form-width-small" rows="1" placeholder="form-width-small" aria-label="Width small"></textarea>
211
+ </div>
212
+
213
+ </form>
214
+
215
+ <h2>Icon</h2>
216
+
217
+ <form class="uk-form-stacked uk-child-width-auto@m" uk-grid>
218
+ <div>
219
+
220
+ <div class="uk-margin">
221
+
222
+ <span class="uk-form-label">Not clickable</span>
223
+
224
+ <div class="uk-inline">
225
+ <span class="uk-form-icon" uk-icon="icon: user"></span>
226
+ <input class="uk-input uk-form-width-medium" type="text" aria-label="Not clickable icon">
227
+ </div>
228
+
229
+ </div>
230
+
231
+ <div class="uk-margin">
232
+
233
+ <div class="uk-inline">
234
+ <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
235
+ <input class="uk-input uk-form-width-medium" type="text" aria-label="Not clickable icon">
236
+ </div>
237
+
238
+ </div>
239
+
240
+ </div>
241
+ <div>
242
+
243
+ <div class="uk-margin">
244
+
245
+ <span class="uk-form-label">Clickable</span>
246
+
247
+ <div class="uk-inline">
248
+ <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
249
+ <input class="uk-input" type="text" aria-label="Clickable icon">
250
+ </div>
251
+
252
+ </div>
253
+
254
+ <div class="uk-margin">
255
+
256
+ <div class="uk-inline">
257
+ <a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: link"></a>
258
+ <input class="uk-input" type="text" aria-label="Clickable icon">
259
+ </div>
260
+
261
+ </div>
262
+
263
+ </div>
264
+ </form>
265
+
266
+ <h2>Select</h2>
267
+
268
+ <select class="uk-select uk-form-width-large" aria-label="Select">
269
+ <option>Option 01</option>
270
+ <option>Option 02</option>
271
+ <optgroup label="Optgroup">
272
+ <option>Option A</option>
273
+ <option>Option B</option>
274
+ </optgroup>
275
+ </select>
276
+
277
+ <p class="uk-margin-small">
278
+ <select class="uk-select uk-form-width-large" aria-label="Select disabled" disabled>
279
+ <option>Option 01</option>
280
+ <option>Option 02</option>
281
+ <optgroup label="Optgroup">
282
+ <option>Option A</option>
283
+ <option>Option B</option>
284
+ </optgroup>
285
+ </select>
286
+ </p>
287
+
288
+ <p class="uk-margin-small">
289
+ <select class="uk-select uk-form-width-large" aria-label="Select multiple" multiple>
290
+ <option>Option 01</option>
291
+ <option>Option 02</option>
292
+ <option>Option 03</option>
293
+ <option>Option 04</option>
294
+ <optgroup label="Optgroup">
295
+ <option>Option A</option>
296
+ <option>Option B</option>
297
+ </optgroup>
298
+ </select>
299
+ </p>
300
+
301
+ <h2>Radio, Checkbox and Select</h2>
302
+
303
+ <form class="uk-form-stacked uk-child-width-1-3@m" uk-grid>
304
+ <div>
305
+
306
+ <span class="uk-form-label">Radio</span>
307
+ <label><input class="uk-radio" type="radio" name="radio1" checked> Checked</label><br>
308
+ <label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
309
+ <label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
310
+ <label><input class="uk-radio" type="radio" name="radio2" disabled> Disabled</label><br>
311
+ <label><input class="uk-radio" type="radio" name="radio2" disabled checked> Disabled Checked</label>
312
+ <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
313
+ <label><input class="uk-radio" type="radio" name="radio3" checked> A</label>
314
+ <label><input class="uk-radio" type="radio" name="radio3"> B</label>
315
+ <label><input class="uk-radio" type="radio" name="radio4" disabled> C</label>
316
+ <label><input class="uk-radio" type="radio" name="radio4" disabled checked> D</label>
317
+ </div>
318
+
319
+ </div>
320
+ <div>
321
+
322
+ <span class="uk-form-label">Checkbox</span>
323
+ <label><input class="uk-checkbox" type="checkbox" checked> Checked</label><br>
324
+ <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
325
+ <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
326
+ <label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
327
+ <label><input class="uk-checkbox" type="checkbox" disabled checked> Disabled Checked</label><br>
328
+ <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
329
+ <label><input class="uk-checkbox" type="checkbox" checked> A</label>
330
+ <label><input class="uk-checkbox" type="checkbox"> B</label>
331
+ <label><input class="uk-checkbox" type="checkbox" disabled> C</label>
332
+ <label><input class="uk-checkbox" type="checkbox" disabled checked> D</label>
333
+ </div>
334
+
335
+ </div>
336
+ <div>
337
+
338
+ <span class="uk-form-label">Checkbox</span>
339
+ <label><input class="uk-checkbox js-indeterminate" type="checkbox"> Indeterminate</label><br>
340
+ <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
341
+ <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
342
+ <label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
343
+ <label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> Disabled Indeterminate</label>
344
+ <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
345
+ <label><input class="uk-checkbox js-indeterminate" type="checkbox"> A</label>
346
+ <label><input class="uk-checkbox" type="checkbox"> B</label>
347
+ <label><input class="uk-checkbox" type="checkbox" disabled> C</label>
348
+ <label><input class="uk-checkbox js-indeterminate" type="checkbox" disabled> D</label>
349
+ </div>
350
+
351
+ <script>UIkit.util.$$('.js-indeterminate').forEach(el => { el.indeterminate = true; })</script>
352
+
353
+ </div>
354
+
355
+ </form>
356
+
357
+ <h2>Custom Controls</h2>
358
+
359
+ <form class="uk-form-stacked uk-child-width-1-2@m" uk-grid>
360
+ <div>
361
+
362
+ <h3>File</h3>
363
+
364
+ <div class="uk-margin">
365
+
366
+ <div uk-form-custom>
367
+ <input type="file" aria-label="Custom controls">
368
+ <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
369
+ </div>
370
+
371
+ </div>
372
+
373
+ <div class="uk-margin">
374
+ <span class="uk-text-middle">Here is a text</span>
375
+ <div uk-form-custom>
376
+ <input type="file" aria-label="Custom controls">
377
+ <span class="uk-link">upload</span>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="uk-margin" uk-margin>
382
+
383
+ <div uk-form-custom="target: true">
384
+ <input type="file" aria-label="Custom controls">
385
+ <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled>
386
+ </div>
387
+
388
+ <button class="uk-button uk-button-default">Submit</button>
389
+
390
+ </div>
391
+
392
+ </div>
393
+ <div>
394
+
395
+ <h3>Select</h3>
396
+
397
+ <div class="uk-margin">
398
+
399
+ <div uk-form-custom="target: true">
400
+ <select aria-label="Custom controls">
401
+ <option value="1">Option 01</option>
402
+ <option value="2">Option 02</option>
403
+ <option value="3">Option 03</option>
404
+ <option value="4">Option 04</option>
405
+ </select>
406
+ <span></span>
407
+ </div>
408
+
409
+ </div>
410
+
411
+ <div class="uk-margin">
412
+
413
+ <div uk-form-custom="target: > * > span:last-child">
414
+ <select aria-label="Custom controls">
415
+ <option value="1">Option 01</option>
416
+ <option value="2">Option 02</option>
417
+ <option value="3">Option 03</option>
418
+ <option value="4">Option 04</option>
419
+ </select>
420
+ <span class="uk-link">
421
+ <span uk-icon="icon: pencil"></span>
422
+ <span></span>
423
+ </span>
424
+ </div>
425
+
426
+ </div>
427
+
428
+ <div class="uk-margin">
429
+
430
+ <div uk-form-custom="target: > * > span:first-child">
431
+ <select aria-label="Custom controls">
432
+ <option value="">Please select...</option>
433
+ <option value="1">Option 01</option>
434
+ <option value="2">Option 02</option>
435
+ <option value="3">Option 03</option>
436
+ <option value="4">Option 04</option>
437
+ </select>
438
+ <button class="uk-button uk-button-default" type="button" tabindex="-1">
439
+ <span></span>
440
+ <span uk-icon="icon: chevron-down"></span>
441
+ </button>
442
+ </div>
443
+
444
+ </div>
445
+
446
+ <div class="uk-margin">
447
+
448
+ <div uk-form-custom="target: true">
449
+ <select aria-label="Custom controls">
450
+ <option value="">Please select...</option>
451
+ <option value="1">Option 01</option>
452
+ <option value="2">Option 02</option>
453
+ <option value="3">Option 03</option>
454
+ <option value="4">Option 04</option>
455
+ </select>
456
+ <span class="uk-select uk-form-width-medium"></span>
457
+ </div>
458
+
459
+ </div>
460
+
461
+ </div>
462
+ </form>
463
+
464
+ <p><span class="uk-label">Note</span> The hover and focus state for <code>uk-form-custom</code> are not styled by default, but you could use the adjacent sibling selector to do so.</p>
465
+
466
+ </div>
467
+ <form class="uk-form-stacked uk-width-1-3@s">
468
+
469
+ <h2>Stacked</h2>
470
+
471
+ <div class="uk-margin">
472
+ <span class="uk-form-label">States and styles</span>
473
+ <div class="uk-margin-small uk-grid-small uk-child-width-1-2" uk-grid>
474
+ <div>
475
+ <input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" disabled>
476
+ </div>
477
+ <div>
478
+ <input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" value="Some text..." disabled>
479
+ </div>
480
+ </div>
481
+ <div class="uk-margin-small uk-grid-small" uk-grid>
482
+ <div class="uk-width-expand">
483
+ <input class="uk-input" type="text" placeholder=":focus" aria-label="focus" autofocus required>
484
+ </div>
485
+ <div class="uk-width-auto">
486
+ <button class="uk-button uk-button-default uk-width-1-1">Required</button>
487
+ </div>
488
+ </div>
489
+ <div class="uk-margin-small">
490
+ <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" aria-label="form-danger" value="form-danger">
491
+ </div>
492
+ <div class="uk-margin-small">
493
+ <input class="uk-input uk-form-success" type="text" placeholder="form-success" aria-label="form-success" value="form-success">
494
+ </div>
495
+ <div class="uk-margin-small">
496
+ <input class="uk-input uk-form-blank" type="text" placeholder="form-blank" aria-label="form-blank">
497
+ </div>
498
+ </div>
499
+
500
+ <fieldset class="uk-fieldset">
501
+
502
+ <legend class="uk-legend">Legend</legend>
503
+
504
+ <div class="uk-margin">
505
+ <label class="uk-form-label" for="form-s-text">Text</label>
506
+ <input class="uk-input" id="form-s-text" type="text" placeholder="Some text...">
507
+ </div>
508
+
509
+ <div class="uk-margin">
510
+ <label class="uk-form-label" for="form-s-select">Select</label>
511
+ <select class="uk-select" id="form-s-select">
512
+ <option>Option 01</option>
513
+ <option>Option 02</option>
514
+ <optgroup label="Optgroup">
515
+ <option>Option A</option>
516
+ <option>Option B</option>
517
+ </optgroup>
518
+ </select>
519
+ </div>
520
+
521
+ <div class="uk-margin">
522
+ <label class="uk-form-label" for="form-s-textarea">Textarea</label>
523
+ <textarea class="uk-textarea" id="form-s-textarea" rows="5" placeholder="Some text..."></textarea>
524
+ </div>
525
+
526
+ <div class="uk-margin">
527
+ <span class="uk-form-label">Radio</span>
528
+ <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
529
+ <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
530
+ <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
531
+ <label><input class="uk-radio" type="radio" name="radio2"> A</label>
532
+ <label><input class="uk-radio" type="radio" name="radio2"> B</label>
533
+ <label><input class="uk-radio" type="radio" name="radio2"> C</label>
534
+ <label><input class="uk-radio" type="radio" name="radio2"> D</label>
535
+ </div>
536
+ </div>
537
+
538
+ <div class="uk-margin">
539
+ <span class="uk-form-label">Checkbox</span>
540
+ <label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
541
+ <label><input class="uk-checkbox" type="checkbox"> Option 02</label>
542
+ <div class="uk-margin uk-grid-small uk-child-width-auto" uk-grid>
543
+ <label><input class="uk-checkbox" type="checkbox"> A</label>
544
+ <label><input class="uk-checkbox" type="checkbox"> B</label>
545
+ <label><input class="uk-checkbox" type="checkbox"> C</label>
546
+ <label><input class="uk-checkbox" type="checkbox"> D</label>
547
+ </div>
548
+ </div>
549
+
550
+ <div class="uk-margin">
551
+ <label class="uk-form-label" for="form-s-multiple">Multiple</label>
552
+ <select class="uk-select" id="form-s-multiple" multiple>
553
+ <option>Option 01</option>
554
+ <option>Option 02</option>
555
+ <option>Option 03</option>
556
+ <option>Option 04</option>
557
+ <optgroup label="Optgroup">
558
+ <option>Option A</option>
559
+ <option>Option B</option>
560
+ </optgroup>
561
+ </select>
562
+ </div>
563
+
564
+ <div class="uk-margin">
565
+ <label class="uk-form-label" for="form-s-range">Range</label>
566
+ <input class="uk-range" id="form-s-range" type="range" value="2" min="0" max="10" step="0.1">
567
+ </div>
568
+
569
+ <div class="uk-margin">
570
+ <label class="uk-form-label" for="form-s-number">Number</label>
571
+ <input class="uk-input" id="form-s-number" type="number" min="0" max="10" value="5">
572
+ </div>
573
+
574
+ <div class="uk-margin">
575
+ <label class="uk-form-label" for="form-s-password">Password</label>
576
+ <input class="uk-input" id="form-s-password" type="password" placeholder="Password">
577
+ </div>
578
+
579
+ <div class="uk-margin">
580
+ <label class="uk-form-label" for="form-s-email">Email</label>
581
+ <input class="uk-input" id="form-s-email" type="email" placeholder="name@domain.com">
582
+ </div>
583
+
584
+ <div class="uk-margin">
585
+ <label class="uk-form-label" for="form-s-search">Search</label>
586
+ <input class="uk-input" id="form-s-search" type="search" placeholder="Search">
587
+ </div>
588
+
589
+ <div class="uk-margin">
590
+ <label class="uk-form-label" for="form-s-tel">Tel</label>
591
+ <input class="uk-input" id="form-s-tel" type="tel" placeholder="+49 555 123456">
592
+ </div>
593
+
594
+ <div class="uk-margin">
595
+ <label class="uk-form-label" for="form-s-url">URL</label>
596
+ <input class="uk-input" id="form-s-url" type="url" placeholder="http://">
597
+ </div>
598
+
599
+ <div class="uk-margin">
600
+ <label class="uk-form-label" for="form-s-file">File</label>
601
+ <input class="uk-width-1-1" id="form-s-file" type="file">
602
+ </div>
603
+
604
+ <div class="uk-margin">
605
+ <label class="uk-form-label" for="form-s-color">Color</label>
606
+ <input class="uk-input" id="form-s-color" type="color">
607
+ </div>
608
+
609
+ <div class="uk-margin">
610
+ <label class="uk-form-label" for="form-s-date">Date</label>
611
+ <input class="uk-input" id="form-s-date" type="date">
612
+ </div>
613
+
614
+ <div class="uk-margin">
615
+ <label class="uk-form-label" for="form-s-month">Month</label>
616
+ <input class="uk-input" id="form-s-month" type="month">
617
+ </div>
618
+
619
+ <div class="uk-margin">
620
+ <label class="uk-form-label" for="form-s-week">Week</label>
621
+ <input class="uk-input" id="form-s-week" type="week">
622
+ </div>
623
+
624
+ <div class="uk-margin">
625
+ <label class="uk-form-label" for="form-s-time">Time</label>
626
+ <input class="uk-input" id="form-s-time" type="time">
627
+ </div>
628
+
629
+ <div class="uk-margin">
630
+ <label class="uk-form-label" for="form-s-datetimelocal">Datetime local</label>
631
+ <input class="uk-input" id="form-s-datetimelocal" type="datetime-local">
632
+ </div>
633
+
634
+ <div class="uk-margin">
635
+ <div class="uk-form-label">Div as Input</div>
636
+ <div class="uk-input">This is a very long text which should be truncated</div>
637
+ </div>
638
+
639
+ <div class="uk-margin">
640
+ <div class="uk-form-label">Div as Select</div>
641
+ <div class="uk-select">This is a very long text which should be truncate</div>
642
+ </div>
643
+
644
+ </fieldset>
645
+
646
+ </form>
647
+ </div>
648
+
649
+ <h2>JavaScript Options</h2>
650
+
651
+ <div class="uk-overflow-auto">
652
+ <table class="uk-table uk-table-striped">
653
+ <thead>
654
+ <tr>
655
+ <th>Option</th>
656
+ <th>Value</th>
657
+ <th>Default</th>
658
+ <th>Description</th>
659
+ </tr>
660
+ </thead>
661
+ <tbody>
662
+ <tr>
663
+ <td><code>target</code></td>
664
+ <td>CSS selector, Boolean</td>
665
+ <td>false</td>
666
+ <td>Value display target.</td>
667
+ </tr>
668
+ </tbody>
669
+ </table>
670
+ </div>
671
+
672
+ </div>
673
+
674
+ </body>
675
+ </html>