@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/sticky-navbar.html ADDED
@@ -0,0 +1,1421 @@
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>Sticky Navbar - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ </head>
10
+
11
+ <body style="padding-bottom: 1100px;">
12
+
13
+ <div class="uk-container uk-margin-bottom">
14
+
15
+ <h1>Sticky Navbar</h1>
16
+
17
+ </div>
18
+
19
+ <div class="tm-header">
20
+ <div uk-sticky="end: #sticky-dropdown; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
21
+ <nav class="uk-navbar-container">
22
+ <div class="uk-container">
23
+ <div uk-navbar>
24
+ <div class="uk-navbar-left">
25
+
26
+ <a class="uk-navbar-item uk-logo" href="#">Sticky + Dropdown</a>
27
+
28
+ <ul class="uk-navbar-nav">
29
+ <li class="uk-active"><a href>Active</a></li>
30
+ <li>
31
+ <a href>Parent</a>
32
+ <div class="uk-navbar-dropdown">
33
+ <ul class="uk-nav uk-navbar-dropdown-nav">
34
+ <li class="uk-active"><a href="#">Active</a></li>
35
+ <li class="uk-parent">
36
+ <a href="#">Parent</a>
37
+ <ul class="uk-nav-sub">
38
+ <li><a href="#">Sub item</a></li>
39
+ <li><a href="#">Sub item</a></li>
40
+ </ul>
41
+ </li>
42
+ <li class="uk-nav-header">Header</li>
43
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
44
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
45
+ <li class="uk-nav-divider"></li>
46
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
47
+ </ul>
48
+ </div>
49
+ </li>
50
+ <li>
51
+ <a href>Parent</a>
52
+ <div class="uk-navbar-dropdown">
53
+ <ul class="uk-nav uk-navbar-dropdown-nav">
54
+ <li class="uk-active"><a href="#">Active</a></li>
55
+ <li class="uk-parent">
56
+ <a href="#">Parent</a>
57
+ <ul class="uk-nav-sub">
58
+ <li><a href="#">Sub item</a></li>
59
+ <li><a href="#">Sub item</a></li>
60
+ </ul>
61
+ </li>
62
+ <li class="uk-nav-header">Header</li>
63
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
64
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
65
+ <li class="uk-nav-divider"></li>
66
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
67
+ </ul>
68
+ </div>
69
+ </li>
70
+ <li><a href>Item</a></li>
71
+ </ul>
72
+
73
+ </div>
74
+ <div class="uk-navbar-right">
75
+
76
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
77
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false">
78
+ <ul class="uk-nav uk-navbar-dropdown-nav">
79
+ <li class="uk-active"><a href="#">Active</a></li>
80
+ <li class="uk-parent">
81
+ <a href="#">Parent</a>
82
+ <ul class="uk-nav-sub">
83
+ <li><a href="#">Sub item</a></li>
84
+ <li><a href="#">Sub item</a></li>
85
+ </ul>
86
+ </li>
87
+ <li class="uk-nav-header">Header</li>
88
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
89
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
90
+ <li class="uk-nav-divider"></li>
91
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
92
+ </ul>
93
+ </div>
94
+
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </nav>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="uk-section uk-section-default">
103
+ <div id="sticky-dropdown" class="uk-container">
104
+
105
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
106
+
107
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
108
+
109
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
110
+
111
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
112
+
113
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
114
+
115
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
116
+
117
+ </div>
118
+ </div>
119
+
120
+ <div class="tm-header">
121
+ <div uk-sticky="end: #sticky-dropbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
122
+ <nav class="uk-navbar-container">
123
+ <div class="uk-container">
124
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
125
+ <div class="uk-navbar-left">
126
+
127
+ <a class="uk-navbar-item uk-logo" href="#">Sticky + Dropbar</a>
128
+
129
+ <ul class="uk-navbar-nav">
130
+ <li class="uk-active"><a href>Active</a></li>
131
+ <li>
132
+ <a href>Parent</a>
133
+ <div class="uk-navbar-dropdown">
134
+ <ul class="uk-nav uk-navbar-dropdown-nav">
135
+ <li class="uk-active"><a href="#">Active</a></li>
136
+ <li class="uk-parent">
137
+ <a href="#">Parent</a>
138
+ <ul class="uk-nav-sub">
139
+ <li><a href="#">Sub item</a></li>
140
+ <li><a href="#">Sub item</a></li>
141
+ </ul>
142
+ </li>
143
+ <li class="uk-nav-header">Header</li>
144
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
145
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
146
+ <li class="uk-nav-divider"></li>
147
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
148
+ </ul>
149
+ </div>
150
+ </li>
151
+ <li>
152
+ <a href>Parent</a>
153
+ <div class="uk-navbar-dropdown">
154
+ <ul class="uk-nav uk-navbar-dropdown-nav">
155
+ <li class="uk-active"><a href="#">Active</a></li>
156
+ <li class="uk-parent">
157
+ <a href="#">Parent</a>
158
+ <ul class="uk-nav-sub">
159
+ <li><a href="#">Sub item</a></li>
160
+ <li><a href="#">Sub item</a></li>
161
+ </ul>
162
+ </li>
163
+ <li class="uk-nav-header">Header</li>
164
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
165
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
166
+ <li class="uk-nav-divider"></li>
167
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
168
+ </ul>
169
+ </div>
170
+ </li>
171
+ <li><a href>Item</a></li>
172
+ </ul>
173
+
174
+ </div>
175
+ <div class="uk-navbar-right">
176
+
177
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
178
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
179
+ <ul class="uk-nav uk-navbar-dropdown-nav">
180
+ <li class="uk-active"><a href="#">Active</a></li>
181
+ <li class="uk-parent">
182
+ <a href="#">Parent</a>
183
+ <ul class="uk-nav-sub">
184
+ <li><a href="#">Sub item</a></li>
185
+ <li><a href="#">Sub item</a></li>
186
+ </ul>
187
+ </li>
188
+ <li class="uk-nav-header">Header</li>
189
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
190
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
191
+ <li class="uk-nav-divider"></li>
192
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
193
+ </ul>
194
+ </div>
195
+
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </nav>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="uk-section uk-section-default">
204
+ <div id="sticky-dropbar" class="uk-container">
205
+
206
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
207
+
208
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
209
+
210
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
211
+
212
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
213
+
214
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
215
+
216
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
217
+
218
+ </div>
219
+ </div>
220
+
221
+ <div class="tm-header">
222
+ <div uk-sticky="end: #scrollup-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
223
+ <nav class="uk-navbar-container">
224
+ <div class="uk-container uk-container-expand">
225
+ <div uk-navbar>
226
+ <div class="uk-navbar-left">
227
+
228
+ <a class="uk-navbar-item uk-logo" href="#">Scroll Up + Dropdown</a>
229
+
230
+ <ul class="uk-navbar-nav">
231
+ <li class="uk-active"><a href>Active</a></li>
232
+ <li>
233
+ <a href>Parent</a>
234
+ <div class="uk-navbar-dropdown">
235
+ <ul class="uk-nav uk-navbar-dropdown-nav">
236
+ <li class="uk-active"><a href="#">Active</a></li>
237
+ <li class="uk-parent">
238
+ <a href="#">Parent</a>
239
+ <ul class="uk-nav-sub">
240
+ <li><a href="#">Sub item</a></li>
241
+ <li><a href="#">Sub item</a></li>
242
+ </ul>
243
+ </li>
244
+ <li class="uk-nav-header">Header</li>
245
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
246
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
247
+ <li class="uk-nav-divider"></li>
248
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
249
+ </ul>
250
+ </div>
251
+ </li>
252
+ <li>
253
+ <a href>Parent</a>
254
+ <div class="uk-navbar-dropdown">
255
+ <ul class="uk-nav uk-navbar-dropdown-nav">
256
+ <li class="uk-active"><a href="#">Active</a></li>
257
+ <li class="uk-parent">
258
+ <a href="#">Parent</a>
259
+ <ul class="uk-nav-sub">
260
+ <li><a href="#">Sub item</a></li>
261
+ <li><a href="#">Sub item</a></li>
262
+ </ul>
263
+ </li>
264
+ <li class="uk-nav-header">Header</li>
265
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
266
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
267
+ <li class="uk-nav-divider"></li>
268
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
269
+ </ul>
270
+ </div>
271
+ </li>
272
+ <li><a href>Item</a></li>
273
+ </ul>
274
+
275
+ </div>
276
+ <div class="uk-navbar-right">
277
+
278
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
279
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false">
280
+ <ul class="uk-nav uk-navbar-dropdown-nav">
281
+ <li class="uk-active"><a href="#">Active</a></li>
282
+ <li class="uk-parent">
283
+ <a href="#">Parent</a>
284
+ <ul class="uk-nav-sub">
285
+ <li><a href="#">Sub item</a></li>
286
+ <li><a href="#">Sub item</a></li>
287
+ </ul>
288
+ </li>
289
+ <li class="uk-nav-header">Header</li>
290
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
291
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
292
+ <li class="uk-nav-divider"></li>
293
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
294
+ </ul>
295
+ </div>
296
+
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </nav>
301
+ </div>
302
+ </div>
303
+
304
+ <div class="uk-section uk-section-default">
305
+ <div id="scrollup-dropdown" class="uk-container">
306
+
307
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
308
+
309
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
310
+
311
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
312
+
313
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
314
+
315
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
316
+
317
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
318
+
319
+ </div>
320
+ </div>
321
+
322
+ <div class="tm-header">
323
+ <div uk-sticky="end: #scrollup-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
324
+ <nav class="uk-navbar-container">
325
+ <div class="uk-container uk-container-expand">
326
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container">
327
+ <div class="uk-navbar-left">
328
+
329
+ <a class="uk-navbar-item uk-logo" href="#">Scroll Up + Dropbar</a>
330
+
331
+ <ul class="uk-navbar-nav">
332
+ <li class="uk-active"><a href>Active</a></li>
333
+ <li>
334
+ <a href>Parent</a>
335
+ <div class="uk-navbar-dropdown">
336
+ <ul class="uk-nav uk-navbar-dropdown-nav">
337
+ <li class="uk-active"><a href="#">Active</a></li>
338
+ <li class="uk-parent">
339
+ <a href="#">Parent</a>
340
+ <ul class="uk-nav-sub">
341
+ <li><a href="#">Sub item</a></li>
342
+ <li><a href="#">Sub item</a></li>
343
+ </ul>
344
+ </li>
345
+ <li class="uk-nav-header">Header</li>
346
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
347
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
348
+ <li class="uk-nav-divider"></li>
349
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
350
+ </ul>
351
+ </div>
352
+ </li>
353
+ <li>
354
+ <a href>Parent</a>
355
+ <div class="uk-navbar-dropdown">
356
+ <ul class="uk-nav uk-navbar-dropdown-nav">
357
+ <li class="uk-active"><a href="#">Active</a></li>
358
+ <li class="uk-parent">
359
+ <a href="#">Parent</a>
360
+ <ul class="uk-nav-sub">
361
+ <li><a href="#">Sub item</a></li>
362
+ <li><a href="#">Sub item</a></li>
363
+ </ul>
364
+ </li>
365
+ <li class="uk-nav-header">Header</li>
366
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
367
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
368
+ <li class="uk-nav-divider"></li>
369
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
370
+ </ul>
371
+ </div>
372
+ </li>
373
+ <li><a href>Item</a></li>
374
+ </ul>
375
+
376
+ </div>
377
+ <div class="uk-navbar-right">
378
+
379
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
380
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
381
+ <ul class="uk-nav uk-navbar-dropdown-nav">
382
+ <li class="uk-active"><a href="#">Active</a></li>
383
+ <li class="uk-parent">
384
+ <a href="#">Parent</a>
385
+ <ul class="uk-nav-sub">
386
+ <li><a href="#">Sub item</a></li>
387
+ <li><a href="#">Sub item</a></li>
388
+ </ul>
389
+ </li>
390
+ <li class="uk-nav-header">Header</li>
391
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
392
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
393
+ <li class="uk-nav-divider"></li>
394
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
395
+ </ul>
396
+ </div>
397
+
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </nav>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="uk-section uk-section-default">
406
+ <div id="scrollup-dropbar" class="uk-container">
407
+
408
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
409
+
410
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
411
+
412
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
413
+
414
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
415
+
416
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
417
+
418
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
419
+
420
+ </div>
421
+ </div>
422
+
423
+ <div id="transparent-dropdown" class="uk-section-primary uk-preserve-color">
424
+
425
+ <div class="tm-header">
426
+ <div uk-sticky="start: 200; end: #transparent-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
427
+ <nav class="uk-navbar-container uk-light">
428
+ <div class="uk-container uk-container-expand">
429
+ <div uk-navbar>
430
+ <div class="uk-navbar-left">
431
+
432
+ <a class="uk-navbar-item uk-logo" href="#">Transparent + Dropdown</a>
433
+
434
+ <ul class="uk-navbar-nav">
435
+ <li class="uk-active"><a href>Active</a></li>
436
+ <li>
437
+ <a href>Parent</a>
438
+ <div class="uk-navbar-dropdown">
439
+ <ul class="uk-nav uk-navbar-dropdown-nav">
440
+ <li class="uk-active"><a href="#">Active</a></li>
441
+ <li class="uk-parent">
442
+ <a href="#">Parent</a>
443
+ <ul class="uk-nav-sub">
444
+ <li><a href="#">Sub item</a></li>
445
+ <li><a href="#">Sub item</a></li>
446
+ </ul>
447
+ </li>
448
+ <li class="uk-nav-header">Header</li>
449
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
450
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
451
+ <li class="uk-nav-divider"></li>
452
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
453
+ </ul>
454
+ </div>
455
+ </li>
456
+ <li>
457
+ <a href>Parent</a>
458
+ <div class="uk-navbar-dropdown">
459
+ <ul class="uk-nav uk-navbar-dropdown-nav">
460
+ <li class="uk-active"><a href="#">Active</a></li>
461
+ <li class="uk-parent">
462
+ <a href="#">Parent</a>
463
+ <ul class="uk-nav-sub">
464
+ <li><a href="#">Sub item</a></li>
465
+ <li><a href="#">Sub item</a></li>
466
+ </ul>
467
+ </li>
468
+ <li class="uk-nav-header">Header</li>
469
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
470
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
471
+ <li class="uk-nav-divider"></li>
472
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
473
+ </ul>
474
+ </div>
475
+ </li>
476
+ <li><a href>Item</a></li>
477
+ </ul>
478
+
479
+ </div>
480
+ <div class="uk-navbar-right">
481
+
482
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
483
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false">
484
+ <ul class="uk-nav uk-navbar-dropdown-nav">
485
+ <li class="uk-active"><a href="#">Active</a></li>
486
+ <li class="uk-parent">
487
+ <a href="#">Parent</a>
488
+ <ul class="uk-nav-sub">
489
+ <li><a href="#">Sub item</a></li>
490
+ <li><a href="#">Sub item</a></li>
491
+ </ul>
492
+ </li>
493
+ <li class="uk-nav-header">Header</li>
494
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
495
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
496
+ <li class="uk-nav-divider"></li>
497
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
498
+ </ul>
499
+ </div>
500
+
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </nav>
505
+ </div>
506
+ </div>
507
+
508
+ <div class="uk-section uk-light">
509
+ <div class="uk-container">
510
+
511
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
512
+
513
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
514
+
515
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
516
+
517
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
518
+
519
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
520
+
521
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
522
+
523
+ </div>
524
+ </div>
525
+
526
+ </div>
527
+
528
+ <div id="transparent-dropbar" class="uk-section-secondary uk-preserve-color uk-inverse-light">
529
+
530
+ <div class="tm-header">
531
+ <div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent">
532
+ <nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent">
533
+ <div class="uk-container uk-container-expand">
534
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; dropbar-transparent-mode: remove;">
535
+ <div class="uk-navbar-left">
536
+
537
+ <a class="uk-navbar-item uk-logo" href="#">Transparent + Dropbar Remove</a>
538
+
539
+ <ul class="uk-navbar-nav">
540
+ <li class="uk-active"><a href>Active</a></li>
541
+ <li>
542
+ <a href>Parent</a>
543
+ <div class="uk-navbar-dropdown">
544
+ <ul class="uk-nav uk-navbar-dropdown-nav">
545
+ <li class="uk-active"><a href="#">Active</a></li>
546
+ <li class="uk-parent">
547
+ <a href="#">Parent</a>
548
+ <ul class="uk-nav-sub">
549
+ <li><a href="#">Sub item</a></li>
550
+ <li><a href="#">Sub item</a></li>
551
+ </ul>
552
+ </li>
553
+ <li class="uk-nav-header">Header</li>
554
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
555
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
556
+ <li class="uk-nav-divider"></li>
557
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
558
+ </ul>
559
+ </div>
560
+ </li>
561
+ <li>
562
+ <a href>Parent</a>
563
+ <div class="uk-navbar-dropdown">
564
+ <ul class="uk-nav uk-navbar-dropdown-nav">
565
+ <li class="uk-active"><a href="#">Active</a></li>
566
+ <li class="uk-parent">
567
+ <a href="#">Parent</a>
568
+ <ul class="uk-nav-sub">
569
+ <li><a href="#">Sub item</a></li>
570
+ <li><a href="#">Sub item</a></li>
571
+ </ul>
572
+ </li>
573
+ <li class="uk-nav-header">Header</li>
574
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
575
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
576
+ <li class="uk-nav-divider"></li>
577
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
578
+ </ul>
579
+ </div>
580
+ </li>
581
+ <li><a href>Item</a></li>
582
+ </ul>
583
+
584
+ </div>
585
+ <div class="uk-navbar-right">
586
+
587
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
588
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
589
+ <ul class="uk-nav uk-navbar-dropdown-nav">
590
+ <li class="uk-active"><a href="#">Active</a></li>
591
+ <li class="uk-parent">
592
+ <a href="#">Parent</a>
593
+ <ul class="uk-nav-sub">
594
+ <li><a href="#">Sub item</a></li>
595
+ <li><a href="#">Sub item</a></li>
596
+ </ul>
597
+ </li>
598
+ <li class="uk-nav-header">Header</li>
599
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
600
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
601
+ <li class="uk-nav-divider"></li>
602
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
603
+ </ul>
604
+ </div>
605
+
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </nav>
610
+ </div>
611
+ </div>
612
+
613
+ <div class="uk-section uk-light">
614
+ <div class="uk-container">
615
+
616
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
617
+
618
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
619
+
620
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
621
+
622
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
623
+
624
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
625
+
626
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
627
+
628
+ </div>
629
+ </div>
630
+
631
+ </div>
632
+
633
+ <div id="sticky-transparent-dropbar-remove" class="uk-section-secondary uk-preserve-color uk-inverse-light" style="background-image: url('images/dark.jpg');">
634
+
635
+ <div class="tm-header">
636
+ <div uk-sticky="end: #sticky-transparent-dropbar-remove; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
637
+ <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="sel-active: .uk-navbar-transparent">
638
+ <div class="uk-container uk-container-expand">
639
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; dropbar-transparent-mode: remove;">
640
+ <div class="uk-navbar-left">
641
+
642
+ <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Dropbar Remove</a>
643
+
644
+ <ul class="uk-navbar-nav">
645
+ <li class="uk-active"><a href>Active</a></li>
646
+ <li>
647
+ <a href>Parent</a>
648
+ <div class="uk-navbar-dropdown">
649
+ <ul class="uk-nav uk-navbar-dropdown-nav">
650
+ <li class="uk-active"><a href="#">Active</a></li>
651
+ <li class="uk-parent">
652
+ <a href="#">Parent</a>
653
+ <ul class="uk-nav-sub">
654
+ <li><a href="#">Sub item</a></li>
655
+ <li><a href="#">Sub item</a></li>
656
+ </ul>
657
+ </li>
658
+ <li class="uk-nav-header">Header</li>
659
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
660
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
661
+ <li class="uk-nav-divider"></li>
662
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
663
+ </ul>
664
+ </div>
665
+ </li>
666
+ <li>
667
+ <a href>Parent</a>
668
+ <div class="uk-navbar-dropdown">
669
+ <ul class="uk-nav uk-navbar-dropdown-nav">
670
+ <li class="uk-active"><a href="#">Active</a></li>
671
+ <li class="uk-parent">
672
+ <a href="#">Parent</a>
673
+ <ul class="uk-nav-sub">
674
+ <li><a href="#">Sub item</a></li>
675
+ <li><a href="#">Sub item</a></li>
676
+ </ul>
677
+ </li>
678
+ <li class="uk-nav-header">Header</li>
679
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
680
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
681
+ <li class="uk-nav-divider"></li>
682
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
683
+ </ul>
684
+ </div>
685
+ </li>
686
+ <li><a href>Item</a></li>
687
+ </ul>
688
+
689
+ </div>
690
+ <div class="uk-navbar-right">
691
+
692
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
693
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
694
+ <ul class="uk-nav uk-navbar-dropdown-nav">
695
+ <li class="uk-active"><a href="#">Active</a></li>
696
+ <li class="uk-parent">
697
+ <a href="#">Parent</a>
698
+ <ul class="uk-nav-sub">
699
+ <li><a href="#">Sub item</a></li>
700
+ <li><a href="#">Sub item</a></li>
701
+ </ul>
702
+ </li>
703
+ <li class="uk-nav-header">Header</li>
704
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
705
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
706
+ <li class="uk-nav-divider"></li>
707
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
708
+ </ul>
709
+ </div>
710
+
711
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
712
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
713
+ <ul class="uk-nav uk-navbar-dropdown-nav">
714
+ <li class="uk-active"><a href="#">Active</a></li>
715
+ <li class="uk-parent">
716
+ <a href="#">Parent</a>
717
+ <ul class="uk-nav-sub">
718
+ <li><a href="#">Sub item</a></li>
719
+ <li><a href="#">Sub item</a></li>
720
+ </ul>
721
+ </li>
722
+ <li class="uk-nav-header">Header</li>
723
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
724
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
725
+ <li class="uk-nav-divider"></li>
726
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
727
+ </ul>
728
+ </div>
729
+
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </nav>
734
+ </div>
735
+ </div>
736
+
737
+ <div class="uk-section uk-light">
738
+ <div class="uk-container">
739
+
740
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
741
+
742
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
743
+
744
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
745
+
746
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
747
+
748
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
749
+
750
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
751
+
752
+ </div>
753
+ </div>
754
+
755
+ </div>
756
+
757
+ <div id="sticky-transparent-dropbar-behind" class="uk-section-secondary uk-preserve-color uk-inverse-light" style="background-image: url('images/dark.jpg');">
758
+
759
+ <div class="tm-header">
760
+ <div uk-sticky="end: #sticky-transparent-dropbar-behind; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
761
+ <nav class="uk-navbar-container uk-navbar-transparent uk-position-relative uk-position-z-index-high" uk-inverse>
762
+ <div class="uk-container uk-container-expand">
763
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; dropbar-transparent-mode: behind;">
764
+ <div class="uk-navbar-left">
765
+
766
+ <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Dropbar Behind</a>
767
+
768
+ <ul class="uk-navbar-nav">
769
+ <li class="uk-active"><a href>Active</a></li>
770
+ <li>
771
+ <a href>Parent</a>
772
+ <div class="uk-navbar-dropdown">
773
+ <ul class="uk-nav uk-navbar-dropdown-nav">
774
+ <li class="uk-active"><a href="#">Active</a></li>
775
+ <li class="uk-parent">
776
+ <a href="#">Parent</a>
777
+ <ul class="uk-nav-sub">
778
+ <li><a href="#">Sub item</a></li>
779
+ <li><a href="#">Sub item</a></li>
780
+ </ul>
781
+ </li>
782
+ <li class="uk-nav-header">Header</li>
783
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
784
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
785
+ <li class="uk-nav-divider"></li>
786
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
787
+ </ul>
788
+ </div>
789
+ </li>
790
+ <li>
791
+ <a href>Parent</a>
792
+ <div class="uk-navbar-dropdown">
793
+ <ul class="uk-nav uk-navbar-dropdown-nav">
794
+ <li class="uk-active"><a href="#">Active</a></li>
795
+ <li class="uk-parent">
796
+ <a href="#">Parent</a>
797
+ <ul class="uk-nav-sub">
798
+ <li><a href="#">Sub item</a></li>
799
+ <li><a href="#">Sub item</a></li>
800
+ </ul>
801
+ </li>
802
+ <li class="uk-nav-header">Header</li>
803
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
804
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
805
+ <li class="uk-nav-divider"></li>
806
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
807
+ </ul>
808
+ </div>
809
+ </li>
810
+ <li><a href>Item</a></li>
811
+ </ul>
812
+
813
+ </div>
814
+ <div class="uk-navbar-right">
815
+
816
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
817
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
818
+ <ul class="uk-nav uk-navbar-dropdown-nav">
819
+ <li class="uk-active"><a href="#">Active</a></li>
820
+ <li class="uk-parent">
821
+ <a href="#">Parent</a>
822
+ <ul class="uk-nav-sub">
823
+ <li><a href="#">Sub item</a></li>
824
+ <li><a href="#">Sub item</a></li>
825
+ </ul>
826
+ </li>
827
+ <li class="uk-nav-header">Header</li>
828
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
829
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
830
+ <li class="uk-nav-divider"></li>
831
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
832
+ </ul>
833
+ </div>
834
+
835
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
836
+ <div class="uk-dropbar uk-dropbar-top uk-position-z-index uk-padding-remove-top" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true; container: #sticky-transparent-dropbar-behind [uk-sticky]; bg-scroll: false;">
837
+ <div uk-height-placeholder="!.tm-header"></div>
838
+ <ul class="uk-nav uk-navbar-dropdown-nav">
839
+ <li class="uk-active"><a href="#">Active</a></li>
840
+ <li class="uk-parent">
841
+ <a href="#">Parent</a>
842
+ <ul class="uk-nav-sub">
843
+ <li><a href="#">Sub item</a></li>
844
+ <li><a href="#">Sub item</a></li>
845
+ </ul>
846
+ </li>
847
+ <li class="uk-nav-header">Header</li>
848
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
849
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
850
+ <li class="uk-nav-divider"></li>
851
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
852
+ </ul>
853
+ </div>
854
+
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </nav>
859
+ </div>
860
+ </div>
861
+
862
+ <div class="uk-section uk-light">
863
+ <div class="uk-container">
864
+
865
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
866
+
867
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
868
+
869
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
870
+
871
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
872
+
873
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
874
+
875
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
876
+
877
+ </div>
878
+ </div>
879
+
880
+ </div>
881
+
882
+ <div id="sticky-transparent-dropbar-behind-blend" class="uk-section-default uk-preserve-color" style="background-image: url('images/light.jpg');">
883
+
884
+ <div class="tm-header">
885
+ <div class="uk-blend-difference uk-position-z-index-high" uk-sticky="end: #sticky-transparent-dropbar-behind-blend; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
886
+ <nav class="uk-navbar-container uk-navbar-transparent uk-light">
887
+ <div class="uk-container uk-container-expand">
888
+ <div uk-navbar="target-y: #sticky-transparent-dropbar-behind-blend .uk-navbar-container; container: #sticky-transparent-dropbar-behind-blend .tm-header; dropbar: true; dropbar-anchor: !.tm-header > *; dropbar-transparent-mode: behind; close-on-scroll: true">
889
+ <div class="uk-navbar-left">
890
+
891
+ <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Dropbar Behind + Blend</a>
892
+
893
+ <ul class="uk-navbar-nav">
894
+ <li class="uk-active"><a href>Active</a></li>
895
+ <li>
896
+ <a href>Parent</a>
897
+ <div class="uk-navbar-dropdown uk-padding-remove-top">
898
+ <ul class="uk-nav uk-navbar-dropdown-nav">
899
+ <li class="uk-active"><a href="#">Active</a></li>
900
+ <li class="uk-parent">
901
+ <a href="#">Parent</a>
902
+ <ul class="uk-nav-sub">
903
+ <li><a href="#">Sub item</a></li>
904
+ <li><a href="#">Sub item</a></li>
905
+ </ul>
906
+ </li>
907
+ <li class="uk-nav-header">Header</li>
908
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
909
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
910
+ <li class="uk-nav-divider"></li>
911
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
912
+ </ul>
913
+ </div>
914
+ </li>
915
+ <li>
916
+ <a href>Parent</a>
917
+ <div class="uk-navbar-dropdown uk-padding-remove-top">
918
+ <ul class="uk-nav uk-navbar-dropdown-nav">
919
+ <li class="uk-active"><a href="#">Active</a></li>
920
+ <li class="uk-parent">
921
+ <a href="#">Parent</a>
922
+ <ul class="uk-nav-sub">
923
+ <li><a href="#">Sub item</a></li>
924
+ <li><a href="#">Sub item</a></li>
925
+ </ul>
926
+ </li>
927
+ <li class="uk-nav-header">Header</li>
928
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
929
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
930
+ <li class="uk-nav-divider"></li>
931
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
932
+ </ul>
933
+ </div>
934
+ </li>
935
+ <li><a href>Item</a></li>
936
+ </ul>
937
+
938
+ </div>
939
+ <div class="uk-navbar-right">
940
+
941
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
942
+ <div class="uk-navbar-dropdown uk-padding-remove-top" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: #sticky-transparent-dropbar-behind-blend .uk-navbar-container; container: #sticky-transparent-dropbar-behind-blend .tm-header;">
943
+ <ul class="uk-nav uk-navbar-dropdown-nav">
944
+ <li class="uk-active"><a href="#">Active</a></li>
945
+ <li class="uk-parent">
946
+ <a href="#">Parent</a>
947
+ <ul class="uk-nav-sub">
948
+ <li><a href="#">Sub item</a></li>
949
+ <li><a href="#">Sub item</a></li>
950
+ </ul>
951
+ </li>
952
+ <li class="uk-nav-header">Header</li>
953
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
954
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
955
+ <li class="uk-nav-divider"></li>
956
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
957
+ </ul>
958
+ </div>
959
+
960
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
961
+ <div class="uk-dropbar uk-dropbar-top uk-position-z-index uk-padding-remove-top" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true; container: #sticky-transparent-dropbar-behind-blend .tm-header; bg-scroll: false;">
962
+ <div uk-height-placeholder="!.tm-header"></div>
963
+ <ul class="uk-nav uk-navbar-dropdown-nav">
964
+ <li class="uk-active"><a href="#">Active</a></li>
965
+ <li class="uk-parent">
966
+ <a href="#">Parent</a>
967
+ <ul class="uk-nav-sub">
968
+ <li><a href="#">Sub item</a></li>
969
+ <li><a href="#">Sub item</a></li>
970
+ </ul>
971
+ </li>
972
+ <li class="uk-nav-header">Header</li>
973
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
974
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
975
+ <li class="uk-nav-divider"></li>
976
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
977
+ </ul>
978
+ </div>
979
+
980
+ </div>
981
+ </div>
982
+ </div>
983
+ </nav>
984
+ </div>
985
+ </div>
986
+
987
+ <div class="uk-section">
988
+ <div class="uk-container">
989
+
990
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
991
+
992
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
993
+
994
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
995
+
996
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
997
+
998
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
999
+
1000
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1001
+
1002
+ </div>
1003
+ </div>
1004
+
1005
+ </div>
1006
+
1007
+ <div id="sticky-transparent-recolor" class="uk-position-relative">
1008
+
1009
+ <div class="tm-header uk-position-top">
1010
+ <div uk-sticky="end: #sticky-transparent-recolor; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
1011
+ <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="sel-active: .uk-navbar-transparent">
1012
+ <div class="uk-container uk-container-expand">
1013
+ <div uk-navbar>
1014
+ <div class="uk-navbar-left">
1015
+
1016
+ <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Recolor</a>
1017
+
1018
+ <ul class="uk-navbar-nav">
1019
+ <li class="uk-active"><a href>Active</a></li>
1020
+ <li>
1021
+ <a href>Parent</a>
1022
+ <div class="uk-navbar-dropdown">
1023
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1024
+ <li class="uk-active"><a href="#">Active</a></li>
1025
+ <li class="uk-parent">
1026
+ <a href="#">Parent</a>
1027
+ <ul class="uk-nav-sub">
1028
+ <li><a href="#">Sub item</a></li>
1029
+ <li><a href="#">Sub item</a></li>
1030
+ </ul>
1031
+ </li>
1032
+ <li class="uk-nav-header">Header</li>
1033
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1034
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1035
+ <li class="uk-nav-divider"></li>
1036
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1037
+ </ul>
1038
+ </div>
1039
+ </li>
1040
+ <li>
1041
+ <a href>Parent</a>
1042
+ <div class="uk-navbar-dropdown">
1043
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1044
+ <li class="uk-active"><a href="#">Active</a></li>
1045
+ <li class="uk-parent">
1046
+ <a href="#">Parent</a>
1047
+ <ul class="uk-nav-sub">
1048
+ <li><a href="#">Sub item</a></li>
1049
+ <li><a href="#">Sub item</a></li>
1050
+ </ul>
1051
+ </li>
1052
+ <li class="uk-nav-header">Header</li>
1053
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1054
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1055
+ <li class="uk-nav-divider"></li>
1056
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1057
+ </ul>
1058
+ </div>
1059
+ </li>
1060
+ <li><a href>Item</a></li>
1061
+ </ul>
1062
+
1063
+ </div>
1064
+ <div class="uk-navbar-right">
1065
+
1066
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
1067
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1068
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1069
+ <li class="uk-active"><a href="#">Active</a></li>
1070
+ <li class="uk-parent">
1071
+ <a href="#">Parent</a>
1072
+ <ul class="uk-nav-sub">
1073
+ <li><a href="#">Sub item</a></li>
1074
+ <li><a href="#">Sub item</a></li>
1075
+ </ul>
1076
+ </li>
1077
+ <li class="uk-nav-header">Header</li>
1078
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1079
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1080
+ <li class="uk-nav-divider"></li>
1081
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1082
+ </ul>
1083
+ </div>
1084
+
1085
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1086
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
1087
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1088
+ <li class="uk-active"><a href="#">Active</a></li>
1089
+ <li class="uk-parent">
1090
+ <a href="#">Parent</a>
1091
+ <ul class="uk-nav-sub">
1092
+ <li><a href="#">Sub item</a></li>
1093
+ <li><a href="#">Sub item</a></li>
1094
+ </ul>
1095
+ </li>
1096
+ <li class="uk-nav-header">Header</li>
1097
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1098
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1099
+ <li class="uk-nav-divider"></li>
1100
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1101
+ </ul>
1102
+ </div>
1103
+
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+ </nav>
1108
+ </div>
1109
+ </div>
1110
+
1111
+ <div class="uk-section uk-section-default">
1112
+ <div uk-height-placeholder="#sticky-transparent-recolor .tm-header"></div>
1113
+ <div class="uk-container">
1114
+
1115
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1116
+
1117
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1118
+
1119
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1120
+
1121
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1122
+
1123
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1124
+
1125
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1126
+
1127
+ </div>
1128
+ </div>
1129
+
1130
+ <div class="uk-section uk-section-primary">
1131
+ <div class="uk-container">
1132
+
1133
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1134
+
1135
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1136
+
1137
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1138
+
1139
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1140
+
1141
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1142
+
1143
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1144
+
1145
+ </div>
1146
+ </div>
1147
+
1148
+ <div class="uk-section uk-section-muted">
1149
+ <div class="uk-container">
1150
+
1151
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1152
+
1153
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1154
+
1155
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1156
+
1157
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1158
+
1159
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1160
+
1161
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1162
+
1163
+ </div>
1164
+ </div>
1165
+
1166
+ <div class="uk-section uk-section-secondary">
1167
+ <div class="uk-container">
1168
+
1169
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1170
+
1171
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1172
+
1173
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1174
+
1175
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1176
+
1177
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1178
+
1179
+ <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
1180
+
1181
+ </div>
1182
+ </div>
1183
+
1184
+ </div>
1185
+
1186
+ <div id="sticky-transparent-recolor-tiles" class="uk-position-relative">
1187
+
1188
+ <div class="tm-header uk-position-top">
1189
+ <div uk-sticky="end: #sticky-transparent-recolor-tiles; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
1190
+ <nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right">
1191
+ <div class="uk-container uk-container-expand">
1192
+ <div uk-navbar>
1193
+ <div class="uk-navbar-left">
1194
+
1195
+ <a class="uk-navbar-item uk-logo" href="#">Always Transparent + Recolor Partially</a>
1196
+
1197
+ <ul class="uk-navbar-nav">
1198
+ <li class="uk-active"><a href>Active</a></li>
1199
+ <li>
1200
+ <a href>Parent</a>
1201
+ <div class="uk-navbar-dropdown">
1202
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1203
+ <li class="uk-active"><a href="#">Active</a></li>
1204
+ <li class="uk-parent">
1205
+ <a href="#">Parent</a>
1206
+ <ul class="uk-nav-sub">
1207
+ <li><a href="#">Sub item</a></li>
1208
+ <li><a href="#">Sub item</a></li>
1209
+ </ul>
1210
+ </li>
1211
+ <li class="uk-nav-header">Header</li>
1212
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1213
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1214
+ <li class="uk-nav-divider"></li>
1215
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1216
+ </ul>
1217
+ </div>
1218
+ </li>
1219
+ <li>
1220
+ <a href>Parent</a>
1221
+ <div class="uk-navbar-dropdown">
1222
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1223
+ <li class="uk-active"><a href="#">Active</a></li>
1224
+ <li class="uk-parent">
1225
+ <a href="#">Parent</a>
1226
+ <ul class="uk-nav-sub">
1227
+ <li><a href="#">Sub item</a></li>
1228
+ <li><a href="#">Sub item</a></li>
1229
+ </ul>
1230
+ </li>
1231
+ <li class="uk-nav-header">Header</li>
1232
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1233
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1234
+ <li class="uk-nav-divider"></li>
1235
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1236
+ </ul>
1237
+ </div>
1238
+ </li>
1239
+ <li><a href>Item</a></li>
1240
+ </ul>
1241
+
1242
+ </div>
1243
+ <div class="uk-navbar-center">
1244
+
1245
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1246
+
1247
+ <ul class="uk-navbar-nav">
1248
+ <li class="uk-active"><a href>Active</a></li>
1249
+ <li><a href="#">Center</a></li>
1250
+ </ul>
1251
+
1252
+ </div>
1253
+ <div class="uk-navbar-right">
1254
+
1255
+ <a class="uk-navbar-toggle" href uk-navbar-toggle-icon></a>
1256
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1257
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1258
+ <li class="uk-active"><a href="#">Active</a></li>
1259
+ <li class="uk-parent">
1260
+ <a href="#">Parent</a>
1261
+ <ul class="uk-nav-sub">
1262
+ <li><a href="#">Sub item</a></li>
1263
+ <li><a href="#">Sub item</a></li>
1264
+ </ul>
1265
+ </li>
1266
+ <li class="uk-nav-header">Header</li>
1267
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1268
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1269
+ <li class="uk-nav-divider"></li>
1270
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1271
+ </ul>
1272
+ </div>
1273
+
1274
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1275
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; pos: bottom-center; stretch: true; animation: slide-top; animate-out: true; bg-scroll: false;">
1276
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1277
+ <li class="uk-active"><a href="#">Active</a></li>
1278
+ <li class="uk-parent">
1279
+ <a href="#">Parent</a>
1280
+ <ul class="uk-nav-sub">
1281
+ <li><a href="#">Sub item</a></li>
1282
+ <li><a href="#">Sub item</a></li>
1283
+ </ul>
1284
+ </li>
1285
+ <li class="uk-nav-header">Header</li>
1286
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: table"></span> Item</a></li>
1287
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1288
+ <li class="uk-nav-divider"></li>
1289
+ <li><a href="#"><span class="uk-margin-xsmall-right" uk-icon="icon: trash"></span> Item</a></li>
1290
+ </ul>
1291
+ </div>
1292
+
1293
+ </div>
1294
+ </div>
1295
+ </div>
1296
+ </nav>
1297
+ </div>
1298
+ </div>
1299
+
1300
+
1301
+ <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
1302
+ <div>
1303
+
1304
+ <div class="uk-tile uk-tile-default uk-tile-large">
1305
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1306
+
1307
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1308
+ </div>
1309
+
1310
+ </div>
1311
+ <div>
1312
+
1313
+ <div class="uk-tile uk-tile-primary uk-tile-large">
1314
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1315
+
1316
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1317
+ </div>
1318
+
1319
+ </div>
1320
+ <div>
1321
+
1322
+ <div class="uk-tile uk-tile-secondary uk-tile-large">
1323
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1324
+
1325
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1326
+ </div>
1327
+
1328
+ </div>
1329
+ </div>
1330
+
1331
+ <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
1332
+ <div>
1333
+
1334
+ <div class="uk-tile uk-tile-primary uk-tile-large">
1335
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1336
+
1337
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1338
+ </div>
1339
+
1340
+ </div>
1341
+ <div>
1342
+
1343
+ <div class="uk-tile uk-tile-muted uk-tile-large">
1344
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1345
+
1346
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1347
+ </div>
1348
+
1349
+ </div>
1350
+ <div>
1351
+
1352
+ <div class="uk-tile uk-tile-default uk-tile-large">
1353
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1354
+
1355
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1356
+ </div>
1357
+
1358
+ </div>
1359
+ </div>
1360
+
1361
+ <div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
1362
+ <div>
1363
+
1364
+ <div class="uk-tile uk-tile-default uk-tile-large">
1365
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1366
+
1367
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1368
+ </div>
1369
+
1370
+ </div>
1371
+ <div>
1372
+
1373
+ <div class="uk-tile uk-tile-secondary uk-tile-large">
1374
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1375
+
1376
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1377
+ </div>
1378
+
1379
+ </div>
1380
+ <div>
1381
+
1382
+ <div class="uk-tile uk-tile-muted uk-tile-large">
1383
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1384
+
1385
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1386
+ </div>
1387
+
1388
+ </div>
1389
+ </div>
1390
+
1391
+ <div class="uk-section uk-section-secondary uk-preserve-color uk-inverse-light">
1392
+ <div class="uk-container">
1393
+
1394
+ <div class="uk-panel uk-light uk-margin-medium">
1395
+ <h3>Section Primary with cards</h3>
1396
+ </div>
1397
+
1398
+ <div class="uk-grid-match uk-child-width-expand@m" uk-grid>
1399
+ <div>
1400
+ <div class="uk-card uk-card-default uk-card-body">
1401
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1402
+
1403
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1404
+ </div>
1405
+ </div>
1406
+ <div>
1407
+ <div class="uk-card uk-card-default uk-card-body">
1408
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1409
+
1410
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
1411
+ </div>
1412
+ </div>
1413
+ </div>
1414
+
1415
+ </div>
1416
+ </div>
1417
+
1418
+ </div>
1419
+
1420
+ </body>
1421
+ </html>