uikit 3.14.4-dev.2dc50ec60 → 3.14.4-dev.3c3ec2cad

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 (135) hide show
  1. package/CHANGELOG.md +39 -18
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +330 -78
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +330 -78
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +352 -107
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +352 -107
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +98 -131
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +98 -131
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +4 -2
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +4 -5
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +4 -5
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +4 -5
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +104 -139
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +531 -503
  38. package/dist/js/uikit-core.min.js +17 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +534 -504
  42. package/dist/js/uikit.min.js +17 -1
  43. package/package.json +11 -11
  44. package/src/images/components/navbar-toggle-icon.svg +25 -3
  45. package/src/js/api/hooks.js +5 -1
  46. package/src/js/api/state.js +2 -2
  47. package/src/js/components/notification.js +3 -1
  48. package/src/js/core/accordion.js +9 -17
  49. package/src/js/core/alert.js +35 -14
  50. package/src/js/core/drop.js +110 -82
  51. package/src/js/core/height-viewport.js +4 -2
  52. package/src/js/core/index.js +1 -1
  53. package/src/js/core/leader.js +2 -2
  54. package/src/js/core/navbar.js +30 -45
  55. package/src/js/core/offcanvas.js +8 -4
  56. package/src/js/core/scroll.js +37 -10
  57. package/src/js/core/toggle.js +3 -5
  58. package/src/js/mixin/media.js +4 -5
  59. package/src/js/mixin/modal.js +15 -12
  60. package/src/js/mixin/position.js +24 -26
  61. package/src/js/mixin/style.js +11 -0
  62. package/src/js/mixin/togglable.js +90 -124
  63. package/src/js/util/animation.js +9 -7
  64. package/src/js/util/class.js +3 -1
  65. package/src/js/util/filter.js +3 -7
  66. package/src/js/util/position.js +136 -130
  67. package/src/js/util/style.js +4 -13
  68. package/src/js/util/viewport.js +3 -5
  69. package/src/less/components/_import.less +1 -0
  70. package/src/less/components/drop.less +1 -18
  71. package/src/less/components/dropbar.less +126 -0
  72. package/src/less/components/dropdown.less +11 -19
  73. package/src/less/components/leader.less +1 -1
  74. package/src/less/components/nav.less +217 -33
  75. package/src/less/components/navbar.less +33 -54
  76. package/src/less/components/utility.less +10 -2
  77. package/src/less/theme/_import.less +1 -0
  78. package/src/less/theme/dropbar.less +44 -0
  79. package/src/less/theme/dropdown.less +0 -11
  80. package/src/less/theme/nav.less +45 -7
  81. package/src/less/theme/navbar.less +5 -36
  82. package/src/scss/components/_import.scss +1 -0
  83. package/src/scss/components/drop.scss +1 -18
  84. package/src/scss/components/dropbar.scss +126 -0
  85. package/src/scss/components/dropdown.scss +11 -19
  86. package/src/scss/components/leader.scss +1 -1
  87. package/src/scss/components/nav.scss +166 -32
  88. package/src/scss/components/navbar.scss +33 -54
  89. package/src/scss/components/utility.scss +8 -1
  90. package/src/scss/mixins-theme.scss +83 -36
  91. package/src/scss/mixins.scss +79 -4
  92. package/src/scss/theme/_import.scss +1 -0
  93. package/src/scss/theme/dropbar.scss +44 -0
  94. package/src/scss/theme/dropdown.scss +0 -8
  95. package/src/scss/theme/nav.scss +43 -7
  96. package/src/scss/theme/navbar.scss +4 -8
  97. package/src/scss/variables-theme.scss +59 -18
  98. package/src/scss/variables.scss +47 -13
  99. package/tests/accordion.html +2 -2
  100. package/tests/alert.html +2 -2
  101. package/tests/countdown.html +1 -1
  102. package/tests/drop.html +446 -416
  103. package/tests/dropbar.html +458 -0
  104. package/tests/dropdown.html +8 -470
  105. package/tests/filter.html +9 -12
  106. package/tests/flex.html +36 -36
  107. package/tests/form.html +1 -1
  108. package/tests/grid.html +22 -22
  109. package/tests/height.html +6 -6
  110. package/tests/index.html +127 -108
  111. package/tests/js/index.js +1 -4
  112. package/tests/lightbox.html +5 -5
  113. package/tests/list.html +8 -8
  114. package/tests/modal.html +13 -13
  115. package/tests/nav.html +121 -12
  116. package/tests/navbar.html +111 -226
  117. package/tests/offcanvas.html +10 -14
  118. package/tests/pagination.html +6 -6
  119. package/tests/parallax.html +1 -1
  120. package/tests/position.html +18 -16
  121. package/tests/progress.html +9 -9
  122. package/tests/scroll.html +7 -10
  123. package/tests/search.html +6 -6
  124. package/tests/slider.html +6 -5
  125. package/tests/slideshow.html +8 -8
  126. package/tests/sortable.html +6 -8
  127. package/tests/sticky-navbar.html +15 -15
  128. package/tests/sticky.html +8 -8
  129. package/tests/switcher.html +1 -1
  130. package/tests/tab.html +1 -1
  131. package/tests/table.html +7 -7
  132. package/tests/toggle.html +2 -2
  133. package/tests/tooltip.html +1 -1
  134. package/tests/upload.html +11 -11
  135. package/tests/utility.html +35 -16
@@ -3,13 +3,13 @@
3
3
  //
4
4
  // Component: `uk-nav`
5
5
  //
6
- // Sub-objects: `uk-nav-header`
6
+ // Sub-objects: `uk-nav-parent-icon`
7
+ // `uk-nav-header`
7
8
  // `uk-nav-divider`
8
9
  // `uk-nav-subtitle`
9
10
  // `uk-nav-sub`
10
11
  //
11
- // Modifiers: `uk-nav-parent-icon`
12
- // `uk-nav-default`
12
+ // Modifiers: `uk-nav-default`
13
13
  // `uk-nav-primary`
14
14
  // `uk-nav-center`,
15
15
  // `uk-nav-divider`
@@ -33,9 +33,7 @@
33
33
  @nav-sublist-deeper-padding-left: 15px;
34
34
  @nav-sublist-item-padding-vertical: 2px;
35
35
 
36
- @nav-parent-icon-width: (@global-line-height * 1em);
37
- @nav-parent-icon-height: @nav-parent-icon-width;
38
- @nav-parent-icon-color: @global-color;
36
+ @nav-parent-icon-margin-left: 4px;
39
37
 
40
38
  @nav-header-padding-vertical: @nav-item-padding-vertical;
41
39
  @nav-header-padding-horizontal: @nav-item-padding-horizontal;
@@ -76,7 +74,25 @@
76
74
  @nav-primary-sublist-item-hover-color: @global-color;
77
75
  @nav-primary-sublist-item-active-color: @global-emphasis-color;
78
76
 
79
- @nav-dividers-margin-top: 0;
77
+ @nav-secondary-font-size: @global-font-size;
78
+ @nav-secondary-line-height: @global-line-height;
79
+ @nav-secondary-item-color: @global-emphasis-color;
80
+ @nav-secondary-item-hover-color: @global-emphasis-color;
81
+ @nav-secondary-item-active-color: @global-emphasis-color;
82
+ @nav-secondary-subtitle-font-size: @global-small-font-size;
83
+ @nav-secondary-subtitle-color: @global-muted-color;
84
+ @nav-secondary-subtitle-hover-color: @global-color;
85
+ @nav-secondary-subtitle-active-color: @global-emphasis-color;
86
+ @nav-secondary-header-color: @global-emphasis-color;
87
+ @nav-secondary-divider-border-width: @global-border-width;
88
+ @nav-secondary-divider-border: @global-border;
89
+ @nav-secondary-sublist-font-size: @global-small-font-size;
90
+ @nav-secondary-sublist-line-height: @global-line-height;
91
+ @nav-secondary-sublist-item-color: @global-muted-color;
92
+ @nav-secondary-sublist-item-hover-color: @global-color;
93
+ @nav-secondary-sublist-item-active-color: @global-emphasis-color;
94
+
95
+ @nav-dividers-margin-top: 5px;
80
96
  @nav-dividers-border-width: @global-border-width;
81
97
  @nav-dividers-border: @global-border;
82
98
 
@@ -146,7 +162,7 @@ ul.uk-nav-sub {
146
162
  .uk-nav-sub a { padding: @nav-sublist-item-padding-vertical 0; }
147
163
 
148
164
 
149
- /* Parent icon modifier
165
+ /* Parent icon
150
166
  ========================================================================== */
151
167
 
152
168
  .uk-nav-parent-icon { margin-left: auto; }
@@ -322,6 +338,93 @@ ul.uk-nav-sub {
322
338
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: @nav-primary-sublist-item-active-color; }
323
339
 
324
340
 
341
+ /* Secondary modifier
342
+ ========================================================================== */
343
+
344
+ .uk-nav-secondary {
345
+ font-size: @nav-secondary-font-size;
346
+ line-height: @nav-secondary-line-height;
347
+ .hook-nav-secondary();
348
+ }
349
+
350
+ /*
351
+ * Items
352
+ */
353
+
354
+ .uk-nav-secondary > li > a {
355
+
356
+ color: @nav-secondary-item-color;
357
+ .hook-nav-secondary-item();
358
+ }
359
+
360
+ /* Hover */
361
+ .uk-nav-secondary > li > a:hover {
362
+ color: @nav-secondary-item-hover-color;
363
+ .hook-nav-secondary-item-hover();
364
+ }
365
+
366
+ /* Active */
367
+ .uk-nav-secondary > li.uk-active > a {
368
+ color: @nav-secondary-item-active-color;
369
+ .hook-nav-secondary-item-active();
370
+ }
371
+
372
+ /*
373
+ * Subtitle
374
+ */
375
+
376
+ .uk-nav-secondary .uk-nav-subtitle {
377
+ font-size: @nav-secondary-subtitle-font-size;
378
+ color: @nav-secondary-subtitle-color;
379
+ .hook-nav-secondary-subtitle();
380
+ }
381
+
382
+ /* Hover */
383
+ .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
384
+ color: @nav-secondary-subtitle-hover-color;
385
+ .hook-nav-secondary-subtitle-hover();
386
+ }
387
+
388
+ /* Active */
389
+ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
390
+ color: @nav-secondary-subtitle-active-color;
391
+ .hook-nav-secondary-subtitle-active();
392
+ }
393
+
394
+ /*
395
+ * Header
396
+ */
397
+
398
+ .uk-nav-secondary .uk-nav-header {
399
+ color: @nav-secondary-header-color;
400
+ .hook-nav-secondary-header();
401
+ }
402
+
403
+ /*
404
+ * Divider
405
+ */
406
+
407
+ .uk-nav-secondary .uk-nav-divider {
408
+ border-top: @nav-secondary-divider-border-width solid @nav-secondary-divider-border;
409
+ .hook-nav-secondary-divider();
410
+ }
411
+
412
+ /*
413
+ * Sublists
414
+ */
415
+
416
+ .uk-nav-secondary .uk-nav-sub {
417
+ font-size: @nav-secondary-sublist-font-size;
418
+ line-height: @nav-secondary-sublist-line-height;
419
+ }
420
+
421
+ .uk-nav-secondary .uk-nav-sub a { color: @nav-secondary-sublist-item-color; }
422
+
423
+ .uk-nav-secondary .uk-nav-sub a:hover { color: @nav-secondary-sublist-item-hover-color; }
424
+
425
+ .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @nav-secondary-sublist-item-active-color; }
426
+
427
+
325
428
  /* Alignment modifier
326
429
  ========================================================================== */
327
430
 
@@ -339,13 +442,18 @@ ul.uk-nav-sub {
339
442
  .uk-nav-center .uk-nav-sub,
340
443
  .uk-nav-center .uk-nav-sub ul { padding-left: 0; }
341
444
 
342
- /* Parent icon modifier */
343
- .uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
445
+ /* Parent icon */
446
+ .uk-nav-center .uk-nav-parent-icon { margin-left: @nav-parent-icon-margin-left; }
344
447
 
345
448
 
346
449
  /* Style modifier
347
450
  ========================================================================== */
348
451
 
452
+ /*
453
+ * Divider
454
+ * Naming is in plural to prevent conflicts with divider sub object.
455
+ */
456
+
349
457
  .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
350
458
  margin-top: @nav-dividers-margin-top;
351
459
  padding-top: @nav-dividers-margin-top;
@@ -360,7 +468,6 @@ ul.uk-nav-sub {
360
468
  .hook-nav-misc();
361
469
 
362
470
  .hook-nav-sub() {}
363
- .hook-nav-parent-icon() {}
364
471
  .hook-nav-header() {}
365
472
  .hook-nav-divider() {}
366
473
  .hook-nav-default() {}
@@ -377,6 +484,15 @@ ul.uk-nav-sub {
377
484
  .hook-nav-primary-subtitle() {}
378
485
  .hook-nav-primary-header() {}
379
486
  .hook-nav-primary-divider() {}
487
+ .hook-nav-secondary() {}
488
+ .hook-nav-secondary-item() {}
489
+ .hook-nav-secondary-item-hover() {}
490
+ .hook-nav-secondary-item-active() {}
491
+ .hook-nav-secondary-subtitle() {}
492
+ .hook-nav-secondary-subtitle-hover() {}
493
+ .hook-nav-secondary-subtitle-active() {}
494
+ .hook-nav-secondary-header() {}
495
+ .hook-nav-secondary-divider() {}
380
496
  .hook-nav-dividers() {}
381
497
  .hook-nav-misc() {}
382
498
 
@@ -384,26 +500,37 @@ ul.uk-nav-sub {
384
500
  // Inverse
385
501
  // ========================================================================
386
502
 
387
- @inverse-nav-parent-icon-color: @inverse-global-color;
388
- @inverse-nav-default-item-color: @inverse-global-muted-color;
389
- @inverse-nav-default-item-hover-color: @inverse-global-color;
390
- @inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
391
- @inverse-nav-default-header-color: @inverse-global-emphasis-color;
392
- @inverse-nav-default-divider-border: @inverse-global-border;
393
- @inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
394
- @inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
395
- @inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
396
-
397
- @inverse-nav-primary-item-color: @inverse-global-muted-color;
398
- @inverse-nav-primary-item-hover-color: @inverse-global-color;
399
- @inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
400
- @inverse-nav-primary-header-color: @inverse-global-emphasis-color;
401
- @inverse-nav-primary-divider-border: @inverse-global-border;
402
- @inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
403
- @inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
404
- @inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
405
-
406
- @inverse-nav-dividers-border: @inverse-global-border;
503
+ @inverse-nav-default-item-color: @inverse-global-muted-color;
504
+ @inverse-nav-default-item-hover-color: @inverse-global-color;
505
+ @inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
506
+ @inverse-nav-default-header-color: @inverse-global-emphasis-color;
507
+ @inverse-nav-default-divider-border: @inverse-global-border;
508
+ @inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
509
+ @inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
510
+ @inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
511
+
512
+ @inverse-nav-primary-item-color: @inverse-global-muted-color;
513
+ @inverse-nav-primary-item-hover-color: @inverse-global-color;
514
+ @inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
515
+ @inverse-nav-primary-header-color: @inverse-global-emphasis-color;
516
+ @inverse-nav-primary-divider-border: @inverse-global-border;
517
+ @inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
518
+ @inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
519
+ @inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
520
+
521
+ @inverse-nav-secondary-item-color: @inverse-global-emphasis-color;
522
+ @inverse-nav-secondary-item-hover-color: @inverse-global-emphasis-color;
523
+ @inverse-nav-secondary-item-active-color: @inverse-global-emphasis-color;
524
+ @inverse-nav-secondary-subtitle-color: @inverse-global-muted-color;
525
+ @inverse-nav-secondary-subtitle-hover-color: @inverse-global-color;
526
+ @inverse-nav-secondary-subtitle-active-color: @inverse-global-emphasis-color;
527
+ @inverse-nav-secondary-header-color: @inverse-global-emphasis-color;
528
+ @inverse-nav-secondary-divider-border: @inverse-global-border;
529
+ @inverse-nav-secondary-sublist-item-color: @inverse-global-muted-color;
530
+ @inverse-nav-secondary-sublist-item-hover-color: @inverse-global-color;
531
+ @inverse-nav-secondary-sublist-item-active-color: @inverse-global-emphasis-color;
532
+
533
+ @inverse-nav-dividers-border: @inverse-global-border;
407
534
 
408
535
  .hook-inverse() {
409
536
 
@@ -477,18 +604,67 @@ ul.uk-nav-sub {
477
604
 
478
605
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: @inverse-nav-primary-sublist-item-active-color; }
479
606
 
607
+ //
608
+ // Secondary
609
+ //
610
+
611
+ .uk-nav-secondary > li > a {
612
+ color: @inverse-nav-secondary-item-color;
613
+ .hook-inverse-nav-secondary-item();
614
+ }
615
+
616
+ .uk-nav-secondary > li > a:hover {
617
+ color: @inverse-nav-secondary-item-hover-color;
618
+ .hook-inverse-nav-secondary-item-hover();
619
+ }
620
+
621
+ .uk-nav-secondary > li.uk-active > a {
622
+ color: @inverse-nav-secondary-item-active-color;
623
+ .hook-inverse-nav-secondary-item-active();
624
+ }
625
+
626
+ .uk-nav-secondary .uk-nav-subtitle {
627
+ color: @inverse-nav-secondary-subtitle-color;
628
+ .hook-inverse-nav-secondary-subtitle();
629
+ }
630
+
631
+ .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
632
+ color: @inverse-nav-secondary-subtitle-hover-color;
633
+ .hook-inverse-nav-secondary-subtitle-hover();
634
+ }
635
+
636
+ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
637
+ color: @inverse-nav-secondary-subtitle-active-color;
638
+ .hook-inverse-nav-secondary-subtitle-active();
639
+ }
640
+
641
+ .uk-nav-secondary .uk-nav-header {
642
+ color: @inverse-nav-secondary-header-color;
643
+ .hook-inverse-nav-secondary-header();
644
+ }
645
+
646
+ .uk-nav-secondary .uk-nav-divider {
647
+ border-top-color: @inverse-nav-secondary-divider-border;
648
+ .hook-inverse-nav-secondary-divider();
649
+ }
650
+
651
+ .uk-nav-secondary .uk-nav-sub a { color: @inverse-nav-secondary-sublist-item-color; }
652
+
653
+ .uk-nav-secondary .uk-nav-sub a:hover { color: @inverse-nav-secondary-sublist-item-hover-color; }
654
+
655
+ .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @inverse-nav-secondary-sublist-item-active-color; }
656
+
480
657
  //
481
658
  // Dividers
482
659
  //
483
660
 
484
661
  .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
485
662
  border-top-color: @inverse-nav-dividers-border;
486
- .hook-nav-dividers();
663
+ .hook-inverse-nav-dividers();
487
664
  }
488
665
 
489
666
  }
490
667
 
491
- .hook-inverse-nav-parent-icon() {}
492
668
  .hook-inverse-nav-default-item() {}
493
669
  .hook-inverse-nav-default-item-hover() {}
494
670
  .hook-inverse-nav-default-item-active() {}
@@ -499,4 +675,12 @@ ul.uk-nav-sub {
499
675
  .hook-inverse-nav-primary-item-active() {}
500
676
  .hook-inverse-nav-primary-header() {}
501
677
  .hook-inverse-nav-primary-divider() {}
678
+ .hook-inverse-nav-secondary-item() {}
679
+ .hook-inverse-nav-secondary-item-hover() {}
680
+ .hook-inverse-nav-secondary-item-active() {}
681
+ .hook-inverse-nav-secondary-subtitle() {}
682
+ .hook-inverse-nav-secondary-subtitle-hover() {}
683
+ .hook-inverse-nav-secondary-subtitle-active() {}
684
+ .hook-inverse-nav-secondary-header() {}
685
+ .hook-inverse-nav-secondary-divider() {}
502
686
  .hook-inverse-nav-dividers() {}
@@ -10,6 +10,7 @@
10
10
  // `uk-navbar-center-left`
11
11
  // `uk-navbar-center-right`
12
12
  // `uk-navbar-nav`
13
+ // `uk-navbar-parent-icon`
13
14
  // `uk-navbar-item`
14
15
  // `uk-navbar-toggle`
15
16
  // `uk-navbar-subtitle`
@@ -76,20 +77,17 @@
76
77
  @navbar-dropdown-large-shift-margin: 0;
77
78
  @navbar-dropdown-large-padding: 40px;
78
79
 
79
- @navbar-dropdown-stretch-padding-top: 15px;
80
- @navbar-dropdown-stretch-padding-bottom: @navbar-dropdown-stretch-padding-top;
81
- @navbar-dropdown-stretch-padding-horizontal: 15px;
82
- @navbar-dropdown-stretch-padding-horizontal-s: @global-gutter;
83
- @navbar-dropdown-stretch-padding-horizontal-m: @global-medium-gutter;
84
- @navbar-dropdown-stretch-background: @navbar-dropdown-background;
85
-
80
+ @navbar-dropdown-dropbar-shift-margin: 0;
86
81
  @navbar-dropdown-dropbar-padding-top: @navbar-dropdown-padding;
87
82
  @navbar-dropdown-dropbar-padding-bottom: @navbar-dropdown-dropbar-padding-top;
88
- @navbar-dropdown-dropbar-padding-horizontal: @navbar-nav-item-padding-horizontal;
89
83
  @navbar-dropdown-dropbar-viewport-margin: 15px;
90
84
  @navbar-dropdown-dropbar-viewport-margin-s: @global-gutter;
91
85
  @navbar-dropdown-dropbar-viewport-margin-m: @global-medium-gutter;
92
86
 
87
+ @navbar-dropdown-dropbar-large-shift-margin: 0;
88
+ @navbar-dropdown-dropbar-large-padding-top: @navbar-dropdown-large-padding;
89
+ @navbar-dropdown-dropbar-large-padding-bottom: @navbar-dropdown-dropbar-large-padding-top;
90
+
93
91
  @navbar-dropdown-nav-item-color: @global-muted-color;
94
92
  @navbar-dropdown-nav-item-hover-color: @global-color;
95
93
  @navbar-dropdown-nav-item-active-color: @global-emphasis-color;
@@ -101,7 +99,6 @@
101
99
  @navbar-dropdown-nav-sublist-item-hover-color: @global-color;
102
100
  @navbar-dropdown-nav-sublist-item-active-color: @global-emphasis-color;
103
101
 
104
- @navbar-dropbar-background: @navbar-dropdown-background;
105
102
  @navbar-dropbar-z-index: @global-z-index - 20;
106
103
 
107
104
 
@@ -397,7 +394,6 @@
397
394
  /* 3 */
398
395
  box-sizing: border-box;
399
396
  width: @navbar-dropdown-width;
400
- max-width: 100vw;
401
397
  /* 4 */
402
398
  padding: @navbar-dropdown-padding;
403
399
  background: @navbar-dropdown-background;
@@ -408,6 +404,12 @@
408
404
  /* Show */
409
405
  .uk-navbar-dropdown.uk-open { display: block; }
410
406
 
407
+ /*
408
+ * Remove margin from the last-child
409
+ */
410
+
411
+ .uk-navbar-dropdown > :last-child { margin-bottom: 0; }
412
+
411
413
  // Color Mode
412
414
  .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
413
415
  .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
@@ -443,45 +445,7 @@
443
445
  .uk-navbar-dropdown-large {
444
446
  --uk-position-shift-offset: @navbar-dropdown-large-shift-margin;
445
447
  padding: @navbar-dropdown-large-padding;
446
- }
447
-
448
- /*
449
- * Stretch modifier
450
- * 1. Allow scrolling
451
- * 2. Style
452
- */
453
-
454
- .uk-navbar-dropdown-stretch {
455
- --uk-position-offset: 0;
456
- --uk-position-shift-offset: 0;
457
- --uk-position-viewport-offset: 0;
458
- /* 1 */
459
- overflow-y: auto;
460
- -webkit-overflow-scrolling: touch;
461
- /* 2 */
462
- padding: @navbar-dropdown-stretch-padding-top @navbar-dropdown-stretch-padding-horizontal @navbar-dropdown-stretch-padding-bottom @navbar-dropdown-stretch-padding-horizontal;
463
- background: @navbar-dropdown-stretch-background;
464
- .hook-navbar-dropdown-stretch();
465
- }
466
-
467
- /* Phone landscape and bigger */
468
- @media (min-width: @breakpoint-small) {
469
-
470
- .uk-navbar-dropdown-stretch {
471
- padding-left: @navbar-dropdown-stretch-padding-horizontal-s;
472
- padding-right: @navbar-dropdown-stretch-padding-horizontal-s;
473
- }
474
-
475
- }
476
-
477
- /* Tablet landscape and bigger */
478
- @media (min-width: @breakpoint-medium) {
479
-
480
- .uk-navbar-dropdown-stretch {
481
- padding-left: @navbar-dropdown-stretch-padding-horizontal-m;
482
- padding-right: @navbar-dropdown-stretch-padding-horizontal-m;
483
- }
484
-
448
+ .hook-navbar-dropdown-large();
485
449
  }
486
450
 
487
451
  /*
@@ -497,8 +461,9 @@
497
461
  /* 2 */
498
462
  background: transparent;
499
463
  /* 3 */
500
- padding: @navbar-dropdown-dropbar-padding-top @navbar-dropdown-dropbar-padding-horizontal @navbar-dropdown-dropbar-padding-bottom @navbar-dropdown-dropbar-padding-horizontal;
501
- --uk-position-shift-offset: 0;
464
+ padding: @navbar-dropdown-dropbar-padding-top 0 @navbar-dropdown-dropbar-padding-bottom 0;
465
+ --uk-position-offset: 0;
466
+ --uk-position-shift-offset: @navbar-dropdown-dropbar-shift-margin;
502
467
  --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
503
468
  .hook-navbar-dropdown-dropbar();
504
469
  }
@@ -517,6 +482,12 @@
517
482
 
518
483
  }
519
484
 
485
+ .uk-navbar-dropdown-dropbar-large {
486
+ --uk-position-shift-offset: @navbar-dropdown-dropbar-large-shift-margin;
487
+ padding-top: @navbar-dropdown-dropbar-large-padding-top;
488
+ padding-bottom: @navbar-dropdown-dropbar-large-padding-bottom;
489
+ .hook-navbar-dropdown-dropbar-large();
490
+ }
520
491
 
521
492
 
522
493
  /* Dropdown Nav
@@ -589,12 +560,19 @@
589
560
  /* Dropbar
590
561
  ========================================================================== */
591
562
 
563
+ /*
564
+ * 1. Reset dropbar
565
+ * 2. Width
566
+ */
567
+
592
568
  .uk-navbar-dropbar {
593
- position: absolute;
569
+ /* 1 */
570
+ display: block !important;
594
571
  z-index: @navbar-dropbar-z-index;
572
+ padding: 0;
573
+ /* 2 */
595
574
  left: 0;
596
575
  right: 0;
597
- background: @navbar-dropbar-background;
598
576
  .hook-navbar-dropbar();
599
577
  }
600
578
 
@@ -620,8 +598,9 @@
620
598
  .hook-navbar-transparent() {}
621
599
  .hook-navbar-sticky() {}
622
600
  .hook-navbar-dropdown() {}
623
- .hook-navbar-dropdown-stretch() {}
601
+ .hook-navbar-dropdown-large() {}
624
602
  .hook-navbar-dropdown-dropbar() {}
603
+ .hook-navbar-dropdown-dropbar-large() {}
625
604
  .hook-navbar-dropdown-nav() {}
626
605
  .hook-navbar-dropdown-nav-item() {}
627
606
  .hook-navbar-dropdown-nav-item-hover() {}
@@ -147,6 +147,13 @@
147
147
  .uk-overflow-auto > :last-child { margin-bottom: 0; }
148
148
 
149
149
 
150
+ /* Box Sizing
151
+ ========================================================================== */
152
+
153
+ .uk-box-sizing-content { box-sizing: content-box; }
154
+ .uk-box-sizing-border { box-sizing: border-box; }
155
+
156
+
150
157
  /* Resize
151
158
  ========================================================================== */
152
159
 
@@ -413,7 +420,7 @@
413
420
  .hook-logo-hover();
414
421
  }
415
422
 
416
- .uk-logo > :where(img, svg, video) { display: block; }
423
+ .uk-logo :where(img, svg, video) { display: block; }
417
424
 
418
425
  .uk-logo-inverse { display: none; }
419
426
 
@@ -525,7 +532,8 @@
525
532
  .hook-inverse-logo-hover();
526
533
  }
527
534
 
528
- .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
535
+ .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
536
+ .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
529
537
  .uk-logo-inverse { display: block; }
530
538
 
531
539
  }
@@ -39,6 +39,7 @@
39
39
  @import "accordion.less";
40
40
  @import "drop.less";
41
41
  @import "dropdown.less";
42
+ @import "dropbar.less";
42
43
  @import "modal.less";
43
44
  @import "slider.less";
44
45
  @import "sticky.less";
@@ -0,0 +1,44 @@
1
+ //
2
+ // Component: Dropbar
3
+ //
4
+ // ========================================================================
5
+
6
+
7
+ // Variables
8
+ // ========================================================================
9
+
10
+ @dropbar-padding-top: 25px;
11
+ @dropbar-background: @global-background;
12
+
13
+ //
14
+ // New
15
+ //
16
+
17
+ @dropbar-top-box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05);
18
+ @dropbar-bottom-box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05);
19
+ @dropbar-left-box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05);
20
+ @dropbar-right-box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05);
21
+
22
+
23
+ // Component
24
+ // ========================================================================
25
+
26
+ .hook-dropbar() {}
27
+
28
+
29
+ // Direction modifier
30
+ // ========================================================================
31
+
32
+ .hook-dropbar-top() { box-shadow: @dropbar-top-box-shadow; }
33
+
34
+ .hook-dropbar-bottom() { box-shadow: @dropbar-bottom-box-shadow; }
35
+
36
+ .hook-dropbar-left() { box-shadow: @dropbar-left-box-shadow; }
37
+
38
+ .hook-dropbar-right() { box-shadow: @dropbar-right-box-shadow; }
39
+
40
+
41
+ // Miscellaneous
42
+ // ========================================================================
43
+
44
+ .hook-dropbar-misc() {}
@@ -20,8 +20,6 @@
20
20
 
21
21
  @dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
22
22
 
23
- @dropdown-stretch-background: @global-muted-background;
24
-
25
23
 
26
24
  // Component
27
25
  // ========================================================================
@@ -29,15 +27,6 @@
29
27
  .hook-dropdown() { box-shadow: @dropdown-box-shadow; }
30
28
 
31
29
 
32
- // Stretch modifier
33
- // ========================================================================
34
-
35
- .hook-dropdown-stretch() {
36
- box-shadow: none;
37
- background: @dropdown-stretch-background;
38
- }
39
-
40
-
41
30
  // Nav
42
31
  // ========================================================================
43
32