uikit 3.14.3 → 3.14.4-dev.10a07fe5a

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 (86) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/css/uikit-core-rtl.css +84 -29
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +84 -29
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +90 -44
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +90 -44
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +189 -26
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +189 -26
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +135 -34
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +801 -617
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +801 -617
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/core/accordion.js +3 -3
  44. package/src/js/core/alert.js +1 -1
  45. package/src/js/core/drop.js +47 -20
  46. package/src/js/core/height-viewport.js +14 -9
  47. package/src/js/core/navbar.js +11 -9
  48. package/src/js/core/offcanvas.js +1 -47
  49. package/src/js/core/switcher.js +1 -1
  50. package/src/js/mixin/modal.js +90 -4
  51. package/src/js/mixin/position.js +44 -13
  52. package/src/js/mixin/togglable.js +105 -24
  53. package/src/js/util/animation.js +1 -0
  54. package/src/js/util/viewport.js +21 -10
  55. package/src/less/components/drop.less +19 -5
  56. package/src/less/components/dropdown.less +21 -5
  57. package/src/less/components/margin.less +13 -14
  58. package/src/less/components/modal.less +19 -4
  59. package/src/less/components/nav.less +1 -1
  60. package/src/less/components/navbar.less +56 -25
  61. package/src/less/components/offcanvas.less +21 -21
  62. package/src/less/components/position.less +1 -1
  63. package/src/less/components/utility.less +0 -1
  64. package/src/less/theme/dropdown.less +11 -0
  65. package/src/less/theme/navbar.less +12 -12
  66. package/src/scss/components/drop.scss +19 -5
  67. package/src/scss/components/dropdown.scss +21 -5
  68. package/src/scss/components/margin.scss +13 -14
  69. package/src/scss/components/modal.scss +19 -4
  70. package/src/scss/components/nav.scss +1 -1
  71. package/src/scss/components/navbar.scss +45 -14
  72. package/src/scss/components/offcanvas.scss +21 -21
  73. package/src/scss/components/position.scss +1 -1
  74. package/src/scss/components/utility.scss +0 -1
  75. package/src/scss/mixins-theme.scss +8 -12
  76. package/src/scss/mixins.scss +2 -0
  77. package/src/scss/theme/dropdown.scss +8 -0
  78. package/src/scss/theme/navbar.scss +9 -0
  79. package/src/scss/variables-theme.scss +27 -11
  80. package/src/scss/variables.scss +25 -11
  81. package/tests/drop.html +151 -2
  82. package/tests/dropdown.html +228 -13
  83. package/tests/height-viewport.html +62 -0
  84. package/tests/navbar.html +325 -18
  85. package/tests/offcanvas.html +8 -8
  86. package/tests/sticky-navbar.html +132 -0
package/tests/dropdown.html CHANGED
@@ -78,7 +78,7 @@
78
78
  <div class="uk-margin" uk-margin>
79
79
 
80
80
  <div class="uk-inline">
81
- <button class="uk-button uk-button-default" type="button">Hover</button>
81
+ <button class="uk-button uk-button-default" type="button">Hover, Click</button>
82
82
  <div uk-dropdown>
83
83
  <ul class="uk-nav uk-dropdown-nav">
84
84
  <li class="uk-active"><a href="#">Active</a></li>
@@ -99,7 +99,7 @@
99
99
  </div>
100
100
 
101
101
  <div class="uk-inline">
102
- <button class="uk-button uk-button-default" type="button">Click</button>
102
+ <button class="uk-button uk-button-default" type="button">Click only</button>
103
103
  <div uk-dropdown="mode: click">
104
104
  <ul class="uk-nav uk-dropdown-nav">
105
105
  <li class="uk-active"><a href="#">Active</a></li>
@@ -119,6 +119,38 @@
119
119
  </div>
120
120
  </div>
121
121
 
122
+ <div class="uk-inline">
123
+ <button class="uk-button uk-button-default" type="button">Hover only</button>
124
+ <div uk-dropdown="mode: hover">
125
+ <ul class="uk-nav uk-dropdown-nav">
126
+ <li class="uk-active"><a href="#">Active</a></li>
127
+ <li class="uk-parent">
128
+ <a href="#">Parent</a>
129
+ <ul class="uk-nav-sub">
130
+ <li><a href="#">Sub item</a></li>
131
+ <li><a href="#">Sub item</a></li>
132
+ </ul>
133
+ </li>
134
+ <li class="uk-nav-header">Header</li>
135
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
136
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
137
+ <li class="uk-nav-divider"></li>
138
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
139
+ </ul>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="uk-inline">
144
+ <button class="uk-button uk-button-default" type="button">Out Animation</button>
145
+ <div uk-dropdown="animate-out: true">
146
+ <ul class="uk-nav uk-dropdown-nav">
147
+ <li class="uk-active"><a href="#">Active</a></li>
148
+ <li><a href="#">Item</a></li>
149
+ <li><a href="#">Item</a></li>
150
+ </ul>
151
+ </div>
152
+ </div>
153
+
122
154
  <div class="uk-inline">
123
155
  <button class="uk-button uk-button-default" type="button" disabled>Disabled</button>
124
156
  <div uk-dropdown="mode: click">
@@ -151,17 +183,6 @@
151
183
  </div>
152
184
  </div>
153
185
 
154
- <div class="uk-inline">
155
- <button class="uk-button uk-button-default" type="button">Hover only</button>
156
- <div uk-dropdown="mode: hover; delay-hide: 0">
157
- <ul class="uk-nav uk-dropdown-nav">
158
- <li class="uk-active"><a href="#">Active</a></li>
159
- <li><a href="#">Item</a></li>
160
- <li><a href="#">Item</a></li>
161
- </ul>
162
- </div>
163
- </div>
164
-
165
186
  <div class="uk-inline">
166
187
  <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
167
188
  <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~div; mode: click,hover">Same</button>
@@ -352,6 +373,200 @@
352
373
  </div>
353
374
  </div>
354
375
 
376
+ <h2>Stretch</h2>
377
+
378
+ <div class="uk-margin" uk-margin>
379
+
380
+ <div class="uk-inline">
381
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Fade</button>
382
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true">
383
+ <ul class="uk-nav uk-dropdown-nav">
384
+ <li class="uk-active"><a href="#">Active</a></li>
385
+ <li><a href="#">Item</a></li>
386
+ <li><a href="#">Item</a></li>
387
+ </ul>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="uk-inline">
392
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide</button>
393
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide">
394
+ <ul class="uk-nav uk-dropdown-nav">
395
+ <li class="uk-active"><a href="#">Active</a></li>
396
+ <li><a href="#">Item</a></li>
397
+ <li><a href="#">Item</a></li>
398
+ </ul>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="uk-inline">
403
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Left</button>
404
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-left">
405
+ <ul class="uk-nav uk-dropdown-nav">
406
+ <li class="uk-active"><a href="#">Active</a></li>
407
+ <li><a href="#">Item</a></li>
408
+ <li><a href="#">Item</a></li>
409
+ </ul>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="uk-inline">
414
+ <button class="uk-button uk-button-default" type="button">Bottom Stretch Slide Right</button>
415
+ <div uk-dropdown="pos: bottom-stretch; animate-out: true; animation: slide-right">
416
+ <ul class="uk-nav uk-dropdown-nav">
417
+ <li class="uk-active"><a href="#">Active</a></li>
418
+ <li><a href="#">Item</a></li>
419
+ <li><a href="#">Item</a></li>
420
+ </ul>
421
+ </div>
422
+ </div>
423
+
424
+ </div>
425
+
426
+ <div class="uk-margin" uk-margin>
427
+
428
+ <div class="uk-inline">
429
+ <button class="uk-button uk-button-default" type="button">Top Stretch Fade</button>
430
+ <div uk-dropdown="pos: top-stretch; animate-out: true">
431
+ <ul class="uk-nav uk-dropdown-nav">
432
+ <li class="uk-active"><a href="#">Active</a></li>
433
+ <li><a href="#">Item</a></li>
434
+ <li><a href="#">Item</a></li>
435
+ </ul>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="uk-inline">
440
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide</button>
441
+ <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide">
442
+ <ul class="uk-nav uk-dropdown-nav">
443
+ <li class="uk-active"><a href="#">Active</a></li>
444
+ <li><a href="#">Item</a></li>
445
+ <li><a href="#">Item</a></li>
446
+ </ul>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="uk-inline">
451
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide Left</button>
452
+ <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-left">
453
+ <ul class="uk-nav uk-dropdown-nav">
454
+ <li class="uk-active"><a href="#">Active</a></li>
455
+ <li><a href="#">Item</a></li>
456
+ <li><a href="#">Item</a></li>
457
+ </ul>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="uk-inline">
462
+ <button class="uk-button uk-button-default" type="button">Top Stretch Slide Right</button>
463
+ <div uk-dropdown="pos: top-stretch; animate-out: true; animation: slide-right">
464
+ <ul class="uk-nav uk-dropdown-nav">
465
+ <li class="uk-active"><a href="#">Active</a></li>
466
+ <li><a href="#">Item</a></li>
467
+ <li><a href="#">Item</a></li>
468
+ </ul>
469
+ </div>
470
+ </div>
471
+
472
+ </div>
473
+
474
+ <div class="uk-margin" uk-margin>
475
+
476
+ <div class="uk-inline">
477
+ <button class="uk-button uk-button-default" type="button">Left Stretch Fade</button>
478
+ <div uk-dropdown="pos: left-stretch; animate-out: true">
479
+ <ul class="uk-nav uk-dropdown-nav">
480
+ <li class="uk-active"><a href="#">Active</a></li>
481
+ <li><a href="#">Item</a></li>
482
+ <li><a href="#">Item</a></li>
483
+ </ul>
484
+ </div>
485
+ </div>
486
+
487
+ <div class="uk-inline">
488
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide</button>
489
+ <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide">
490
+ <ul class="uk-nav uk-dropdown-nav">
491
+ <li class="uk-active"><a href="#">Active</a></li>
492
+ <li><a href="#">Item</a></li>
493
+ <li><a href="#">Item</a></li>
494
+ </ul>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="uk-inline">
499
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide Left</button>
500
+ <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-left">
501
+ <ul class="uk-nav uk-dropdown-nav">
502
+ <li class="uk-active"><a href="#">Active</a></li>
503
+ <li><a href="#">Item</a></li>
504
+ <li><a href="#">Item</a></li>
505
+ </ul>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="uk-inline">
510
+ <button class="uk-button uk-button-default" type="button">Left Stretch Slide Right</button>
511
+ <div uk-dropdown="pos: left-stretch; animate-out: true; animation: slide-right">
512
+ <ul class="uk-nav uk-dropdown-nav">
513
+ <li class="uk-active"><a href="#">Active</a></li>
514
+ <li><a href="#">Item</a></li>
515
+ <li><a href="#">Item</a></li>
516
+ </ul>
517
+ </div>
518
+ </div>
519
+
520
+ </div>
521
+
522
+ <div class="uk-margin" uk-margin>
523
+
524
+ <div class="uk-inline">
525
+ <button class="uk-button uk-button-default" type="button">Right Stretch Fade</button>
526
+ <div uk-dropdown="pos: right-stretch; animate-out: true">
527
+ <ul class="uk-nav uk-dropdown-nav">
528
+ <li class="uk-active"><a href="#">Active</a></li>
529
+ <li><a href="#">Item</a></li>
530
+ <li><a href="#">Item</a></li>
531
+ </ul>
532
+ </div>
533
+ </div>
534
+
535
+ <div class="uk-inline">
536
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide</button>
537
+ <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide">
538
+ <ul class="uk-nav uk-dropdown-nav">
539
+ <li class="uk-active"><a href="#">Active</a></li>
540
+ <li><a href="#">Item</a></li>
541
+ <li><a href="#">Item</a></li>
542
+ </ul>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="uk-inline">
547
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide Left</button>
548
+ <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-left">
549
+ <ul class="uk-nav uk-dropdown-nav">
550
+ <li class="uk-active"><a href="#">Active</a></li>
551
+ <li><a href="#">Item</a></li>
552
+ <li><a href="#">Item</a></li>
553
+ </ul>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="uk-inline">
558
+ <button class="uk-button uk-button-default" type="button">Right Stretch Slide Right</button>
559
+ <div uk-dropdown="pos: right-stretch; animate-out: true; animation: slide-right">
560
+ <ul class="uk-nav uk-dropdown-nav">
561
+ <li class="uk-active"><a href="#">Active</a></li>
562
+ <li><a href="#">Item</a></li>
563
+ <li><a href="#">Item</a></li>
564
+ </ul>
565
+ </div>
566
+ </div>
567
+
568
+ </div>
569
+
355
570
  <h2>JavaScript Options</h2>
356
571
 
357
572
  <div class="uk-overflow-auto">
package/tests/height-viewport.html CHANGED
@@ -138,6 +138,68 @@
138
138
  </div>
139
139
  </div>
140
140
 
141
+ <div class="uk-child-width-1-6@m uk-light" uk-grid style="height: 600px; overflow: auto;">
142
+ <div>
143
+
144
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-viewport">
145
+ <h1>CSS</h1>
146
+ </div>
147
+
148
+ </div>
149
+ <div>
150
+
151
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport>
152
+ <h1>JS</h1>
153
+ </div>
154
+
155
+ </div>
156
+ <div>
157
+
158
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true">
159
+ <div>
160
+ <h1>JS</h1>
161
+ <div>top: true</div>
162
+ </div>
163
+ </div>
164
+
165
+ </div>
166
+ <div>
167
+
168
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: true">
169
+ <div>
170
+ <h1>JS</h1>
171
+ <div>top: true</div>
172
+ <div>bottom: true</div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="uk-padding uk-background-secondary">Lorem ipsum dolor sit amet.</div>
177
+
178
+ </div>
179
+ <div>
180
+
181
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 10">
182
+ <div>
183
+ <h1>JS</h1>
184
+ <div>top: true</div>
185
+ <div>bottom: 10%</div>
186
+ </div>
187
+ </div>
188
+
189
+ </div>
190
+ <div>
191
+
192
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
193
+ <div>
194
+ <h1>JS</h1>
195
+ <div>top: true</div>
196
+ <div>bottom: 50px</div>
197
+ </div>
198
+ </div>
199
+
200
+ </div>
201
+ </div>
202
+
141
203
  <h2>JavaScript Options</h2>
142
204
 
143
205
  <div class="uk-overflow-auto">