uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.f2e3be255

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 (61) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/css/uikit-core-rtl.css +41 -14
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +41 -14
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +41 -15
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +41 -15
  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 +1 -1
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +1 -1
  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 +11 -3
  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 +57 -20
  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 +57 -20
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/backgrounds/nav-parent-close.svg +1 -1
  44. package/src/images/backgrounds/nav-parent-open.svg +1 -1
  45. package/src/images/backgrounds/navbar-parent-close.svg +3 -0
  46. package/src/images/backgrounds/navbar-parent-open.svg +3 -0
  47. package/src/js/core/navbar.js +44 -15
  48. package/src/js/mixin/position.js +16 -7
  49. package/src/less/components/dropdown.less +8 -0
  50. package/src/less/components/navbar.less +52 -13
  51. package/src/less/theme/navbar.less +4 -6
  52. package/src/scss/components/dropdown.scss +8 -0
  53. package/src/scss/components/nav.scss +2 -2
  54. package/src/scss/components/navbar.scss +52 -13
  55. package/src/scss/mixins-theme.scss +1 -4
  56. package/src/scss/theme/navbar.scss +3 -2
  57. package/src/scss/variables-theme.scss +16 -6
  58. package/src/scss/variables.scss +16 -5
  59. package/tests/drop.html +66 -16
  60. package/tests/dropdown.html +103 -16
  61. package/tests/navbar.html +281 -49
package/tests/navbar.html CHANGED
@@ -206,52 +206,6 @@
206
206
  </div>
207
207
  </div>
208
208
 
209
- <h2>Primary</h2>
210
-
211
- </div>
212
-
213
- <nav class="uk-navbar-container uk-margin">
214
- <div class="uk-container">
215
- <div uk-navbar>
216
- <div class="uk-navbar-left">
217
-
218
- <ul class="uk-navbar-nav uk-navbar-nav-primary">
219
- <li class="uk-active"><a href="#">Active</a></li>
220
- <li>
221
- <a href="#">Parent</a>
222
- <div class="uk-navbar-dropdown">
223
- <ul class="uk-nav uk-navbar-dropdown-nav">
224
- <li class="uk-active"><a href="#">Active</a></li>
225
- <li class="uk-parent">
226
- <a href="#">Parent</a>
227
- <ul class="uk-nav-sub">
228
- <li><a href="#">Sub item</a></li>
229
- <li><a href="#">Sub item</a></li>
230
- </ul>
231
- </li>
232
- <li class="uk-nav-header">Header</li>
233
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
234
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
235
- <li class="uk-nav-divider"></li>
236
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
237
- </ul>
238
- </div>
239
- </li>
240
- <li>
241
- <a href="#">Content</a>
242
- <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
243
- </li>
244
- <li><a href="#">Item</a></li>
245
- <li><a href="#">Item</a></li>
246
- </ul>
247
-
248
- </div>
249
- </div>
250
- </div>
251
- </nav>
252
-
253
- <div class="uk-container">
254
-
255
209
  <h2>Click</h2>
256
210
 
257
211
  </div>
@@ -300,6 +254,13 @@
300
254
 
301
255
  <h2>Dropdown</h2>
302
256
 
257
+ <div class="uk-margin">
258
+ <select id="js-size-switcher" class="uk-select uk-form-width-small">
259
+ <option value="">Default</option>
260
+ <option value="uk-navbar-dropdown-large">Large</option>
261
+ </select>
262
+ </div>
263
+
303
264
  </div>
304
265
 
305
266
  <nav class="uk-navbar-container uk-margin">
@@ -838,6 +799,210 @@
838
799
  </div>
839
800
  </nav>
840
801
 
802
+ <div class="uk-container">
803
+
804
+ <h2>Parent Icon</h2>
805
+
806
+ </div>
807
+
808
+ <nav class="uk-navbar-container uk-margin">
809
+ <div class="uk-container">
810
+ <div class="uk-navbar-parent-icon" uk-navbar>
811
+ <div class="uk-navbar-left">
812
+
813
+ <ul class="uk-navbar-nav">
814
+ <li class="uk-active uk-parent">
815
+ <a href="#">Left</a>
816
+ <div class="uk-navbar-dropdown">
817
+ <ul class="uk-nav uk-navbar-dropdown-nav">
818
+ <li class="uk-active"><a href="#">Active</a></li>
819
+ <li class="uk-parent">
820
+ <a href="#">Parent</a>
821
+ <ul class="uk-nav-sub">
822
+ <li><a href="#">Sub item</a></li>
823
+ <li><a href="#">Sub item</a></li>
824
+ </ul>
825
+ </li>
826
+ <li class="uk-nav-header">Header</li>
827
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
828
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
829
+ <li class="uk-nav-divider"></li>
830
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
831
+ </ul>
832
+ </div>
833
+ </li>
834
+ <li class="uk-parent">
835
+ <a href="#">2 Columns</a>
836
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
837
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
838
+ <div>
839
+ <ul class="uk-nav uk-navbar-dropdown-nav">
840
+ <li class="uk-active"><a href="#">Active</a></li>
841
+ <li class="uk-parent"><a href="#">Parent</a></li>
842
+ <li class="uk-nav-header">Header</li>
843
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
844
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
845
+ <li class="uk-nav-divider"></li>
846
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
847
+ </ul>
848
+ </div>
849
+ <div>
850
+ <ul class="uk-nav uk-navbar-dropdown-nav">
851
+ <li class="uk-active"><a href="#">Active</a></li>
852
+ <li class="uk-parent"><a href="#">Parent</a></li>
853
+ <li class="uk-nav-header">Header</li>
854
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
855
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
856
+ <li class="uk-nav-divider"></li>
857
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
858
+ </ul>
859
+ </div>
860
+ </div>
861
+ </div>
862
+ </li>
863
+ <li class="uk-parent">
864
+ <a href="#">3 Columns</a>
865
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
866
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
867
+ <div>
868
+ <ul class="uk-nav uk-navbar-dropdown-nav">
869
+ <li class="uk-active"><a href="#">Active</a></li>
870
+ <li class="uk-parent"><a href="#">Parent</a></li>
871
+ <li class="uk-nav-header">Header</li>
872
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
873
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
874
+ </ul>
875
+ </div>
876
+ <div>
877
+ <ul class="uk-nav uk-navbar-dropdown-nav">
878
+ <li class="uk-active"><a href="#">Active</a></li>
879
+ <li class="uk-parent"><a href="#">Parent</a></li>
880
+ <li class="uk-nav-header">Header</li>
881
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
882
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
883
+ </ul>
884
+ </div>
885
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
886
+ </div>
887
+ </div>
888
+ </li>
889
+ <li class="uk-parent">
890
+ <a href="#">Justify</a>
891
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
892
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
893
+ <div>
894
+ <ul class="uk-nav uk-navbar-dropdown-nav">
895
+ <li class="uk-active"><a href="#">Active</a></li>
896
+ <li class="uk-parent">
897
+ <a href="#">Parent</a>
898
+ <ul class="uk-nav-sub">
899
+ <li><a href="#">Sub item</a></li>
900
+ <li><a href="#">Sub item</a></li>
901
+ </ul>
902
+ </li>
903
+ <li class="uk-nav-header">Header</li>
904
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
905
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
906
+ <li class="uk-nav-divider"></li>
907
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
908
+ </ul>
909
+ </div>
910
+ <div>
911
+ <ul class="uk-nav uk-navbar-dropdown-nav">
912
+ <li class="uk-active"><a href="#">Active</a></li>
913
+ <li class="uk-parent">
914
+ <a href="#">Parent</a>
915
+ <ul class="uk-nav-sub">
916
+ <li><a href="#">Sub item</a></li>
917
+ <li><a href="#">Sub item</a></li>
918
+ </ul>
919
+ </li>
920
+ <li class="uk-nav-header">Header</li>
921
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
922
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
923
+ <li class="uk-nav-divider"></li>
924
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
925
+ </ul>
926
+ </div>
927
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
928
+ </div>
929
+ </div>
930
+ </li>
931
+ <li class="uk-parent">
932
+ <a href="#">Justify Full</a>
933
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
934
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
935
+ <div>
936
+ <ul class="uk-nav uk-navbar-dropdown-nav">
937
+ <li class="uk-active"><a href="#">Active</a></li>
938
+ <li class="uk-parent">
939
+ <a href="#">Parent</a>
940
+ <ul class="uk-nav-sub">
941
+ <li><a href="#">Sub item</a></li>
942
+ <li><a href="#">Sub item</a></li>
943
+ </ul>
944
+ </li>
945
+ <li class="uk-nav-header">Header</li>
946
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
947
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
948
+ <li class="uk-nav-divider"></li>
949
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
950
+ </ul>
951
+ </div>
952
+ <div>
953
+ <ul class="uk-nav uk-navbar-dropdown-nav">
954
+ <li class="uk-active"><a href="#">Active</a></li>
955
+ <li class="uk-parent">
956
+ <a href="#">Parent</a>
957
+ <ul class="uk-nav-sub">
958
+ <li><a href="#">Sub item</a></li>
959
+ <li><a href="#">Sub item</a></li>
960
+ </ul>
961
+ </li>
962
+ <li class="uk-nav-header">Header</li>
963
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
964
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
965
+ <li class="uk-nav-divider"></li>
966
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
967
+ </ul>
968
+ </div>
969
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
970
+ </div>
971
+ </div>
972
+ </li>
973
+ </ul>
974
+
975
+ </div>
976
+ <div class="uk-navbar-right">
977
+
978
+ <ul class="uk-navbar-nav">
979
+ <li class="uk-parent">
980
+ <a href="#">1 Column</a>
981
+ <div class="uk-navbar-dropdown">
982
+ <ul class="uk-nav uk-navbar-dropdown-nav">
983
+ <li class="uk-active"><a href="#">Active</a></li>
984
+ <li class="uk-parent">
985
+ <a href="#">Parent</a>
986
+ <ul class="uk-nav-sub">
987
+ <li><a href="#">Sub item</a></li>
988
+ <li><a href="#">Sub item</a></li>
989
+ </ul>
990
+ </li>
991
+ <li class="uk-nav-header">Header</li>
992
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
993
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
994
+ <li class="uk-nav-divider"></li>
995
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
996
+ </ul>
997
+ </div>
998
+ </li>
999
+ </ul>
1000
+
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+ </nav>
1005
+
841
1006
  <div class="uk-container">
842
1007
 
843
1008
  <h2>Boundary Align</h2>
@@ -1391,7 +1556,7 @@
1391
1556
 
1392
1557
  <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
1393
1558
  <div class="uk-container">
1394
- <div uk-navbar="dropbar: +.uk-navbar-dropbar">
1559
+ <div uk-navbar="dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
1395
1560
  <div class="uk-navbar-left">
1396
1561
 
1397
1562
  <ul class="uk-navbar-nav">
@@ -1591,7 +1756,7 @@
1591
1756
 
1592
1757
  <nav class="uk-navbar-container uk-margin">
1593
1758
  <div class="uk-container">
1594
- <div uk-navbar="dropbar: true; align: right">
1759
+ <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
1595
1760
  <div class="uk-navbar-left">
1596
1761
 
1597
1762
  <ul class="uk-navbar-nav">
@@ -1747,7 +1912,7 @@
1747
1912
 
1748
1913
  <nav class="uk-navbar-container uk-margin uk-position-relative uk-position-z-index"><!-- Position context only needed for demo showcase -->
1749
1914
  <div class="uk-container">
1750
- <div uk-navbar="dropbar: true; align: center">
1915
+ <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
1751
1916
  <div class="uk-navbar-left">
1752
1917
 
1753
1918
  <ul class="uk-navbar-nav">
@@ -2131,6 +2296,59 @@
2131
2296
  </div>
2132
2297
  </nav>
2133
2298
 
2299
+ <div class="uk-container">
2300
+
2301
+ <h2>Primary</h2>
2302
+
2303
+ </div>
2304
+
2305
+ <nav class="uk-navbar-container uk-margin">
2306
+ <div class="uk-container">
2307
+ <div class="uk-navbar-primary" uk-navbar>
2308
+ <div class="uk-navbar-left">
2309
+
2310
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2311
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
2312
+ <li class="uk-active"><a href="#">Active</a></li>
2313
+ <li>
2314
+ <a href="#">Parent</a>
2315
+ <div class="uk-navbar-dropdown">
2316
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2317
+ <li class="uk-active"><a href="#">Active</a></li>
2318
+ <li class="uk-parent">
2319
+ <a href="#">Parent</a>
2320
+ <ul class="uk-nav-sub">
2321
+ <li><a href="#">Sub item</a></li>
2322
+ <li><a href="#">Sub item</a></li>
2323
+ </ul>
2324
+ </li>
2325
+ <li class="uk-nav-header">Header</li>
2326
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2327
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2328
+ <li class="uk-nav-divider"></li>
2329
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2330
+ </ul>
2331
+ </div>
2332
+ </li>
2333
+ <li>
2334
+ <a href="#">Content</a>
2335
+ <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
2336
+ </li>
2337
+ <li><a href="#">Item</a></li>
2338
+ <li><a href="#">Item</a></li>
2339
+ </ul>
2340
+
2341
+ </div>
2342
+ <div class="uk-navbar-right">
2343
+
2344
+ <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2345
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2346
+
2347
+ </div>
2348
+ </div>
2349
+ </div>
2350
+ </nav>
2351
+
2134
2352
  <div class="uk-container">
2135
2353
 
2136
2354
  <h2>Dropdown Stretch</h2>
@@ -3119,5 +3337,19 @@
3119
3337
 
3120
3338
  </script>
3121
3339
 
3340
+ <script>
3341
+
3342
+ var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
3343
+
3344
+ UIkit.util.on('#js-size-switcher', 'change', function () {
3345
+ var value = this.value;
3346
+ UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
3347
+ UIkit.util.removeClass(table, options);
3348
+ UIkit.util.addClass(table, value);
3349
+ });
3350
+ });
3351
+
3352
+ </script>
3353
+
3122
3354
  </body>
3123
3355
  </html>