uikit 3.14.4-dev.17d2f2727 → 3.14.4-dev.2dc50ec60

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 (75) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/css/uikit-core-rtl.css +62 -46
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +62 -46
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +62 -47
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +62 -47
  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 +7 -5
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +6 -14
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +6 -14
  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 +3 -3
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +23 -16
  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 +100 -56
  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 +108 -62
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
  44. package/src/images/components/nav-parent-icon.svg +3 -0
  45. package/src/images/components/navbar-parent-icon.svg +3 -0
  46. package/src/js/components/filter.js +5 -3
  47. package/src/js/components/sortable.js +2 -3
  48. package/src/js/core/height-viewport.js +3 -1
  49. package/src/js/core/icon.js +16 -0
  50. package/src/js/core/index.js +2 -0
  51. package/src/js/core/navbar.js +44 -15
  52. package/src/js/core/sticky.js +8 -9
  53. package/src/js/mixin/position.js +24 -7
  54. package/src/js/mixin/togglable.js +8 -17
  55. package/src/js/util/position.js +1 -0
  56. package/src/js/util/viewport.js +2 -27
  57. package/src/less/components/dropdown.less +8 -0
  58. package/src/less/components/nav.less +3 -26
  59. package/src/less/components/navbar.less +95 -14
  60. package/src/less/theme/navbar.less +4 -6
  61. package/src/scss/components/dropdown.scss +8 -0
  62. package/src/scss/components/nav.scss +3 -15
  63. package/src/scss/components/navbar.scss +83 -14
  64. package/src/scss/mixins-theme.scss +13 -17
  65. package/src/scss/mixins.scss +12 -13
  66. package/src/scss/theme/navbar.scss +3 -2
  67. package/src/scss/variables-theme.scss +16 -6
  68. package/src/scss/variables.scss +16 -5
  69. package/tests/drop.html +66 -16
  70. package/tests/dropdown.html +103 -16
  71. package/tests/index.html +3 -3
  72. package/tests/nav.html +20 -87
  73. package/tests/navbar.html +283 -56
  74. package/tests/offcanvas.html +8 -8
  75. package/src/images/backgrounds/nav-parent-close.svg +0 -3
@@ -51,7 +51,9 @@
51
51
  @navbar-nav-item-onclick-color: @global-emphasis-color;
52
52
  @navbar-nav-item-active-color: @global-emphasis-color;
53
53
 
54
- @navbar-item-padding-horizontal: @navbar-nav-item-padding-horizontal;
54
+ @navbar-parent-icon-margin-left: 4px;
55
+
56
+ @navbar-item-padding-horizontal: 15px;
55
57
  @navbar-item-color: @global-color;
56
58
 
57
59
  @navbar-toggle-color: @global-muted-color;
@@ -71,9 +73,22 @@
71
73
  @navbar-dropdown-grid-gutter-horizontal: @global-gutter;
72
74
  @navbar-dropdown-grid-gutter-vertical: @navbar-dropdown-grid-gutter-horizontal;
73
75
 
74
- @navbar-dropdown-dropbar-margin-top: 0px;
75
- @navbar-dropdown-dropbar-margin-bottom: @navbar-dropdown-dropbar-margin-top;
76
+ @navbar-dropdown-large-shift-margin: 0;
77
+ @navbar-dropdown-large-padding: 40px;
78
+
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
+
86
+ @navbar-dropdown-dropbar-padding-top: @navbar-dropdown-padding;
87
+ @navbar-dropdown-dropbar-padding-bottom: @navbar-dropdown-dropbar-padding-top;
76
88
  @navbar-dropdown-dropbar-padding-horizontal: @navbar-nav-item-padding-horizontal;
89
+ @navbar-dropdown-dropbar-viewport-margin: 15px;
90
+ @navbar-dropdown-dropbar-viewport-margin-s: @global-gutter;
91
+ @navbar-dropdown-dropbar-viewport-margin-m: @global-medium-gutter;
77
92
 
78
93
  @navbar-dropdown-nav-item-color: @global-muted-color;
79
94
  @navbar-dropdown-nav-item-hover-color: @global-color;
@@ -227,7 +242,6 @@
227
242
  /* 3 */
228
243
  box-sizing: border-box;
229
244
  min-height: @navbar-nav-item-height;
230
- padding: 0 @navbar-nav-item-padding-horizontal;
231
245
  /* 4 */
232
246
  font-size: @navbar-nav-item-font-size;
233
247
  font-family: @navbar-nav-item-font-family;
@@ -240,6 +254,7 @@
240
254
  */
241
255
 
242
256
  .uk-navbar-nav > li > a {
257
+ padding: 0 @navbar-nav-item-padding-horizontal;
243
258
  color: @navbar-nav-item-color;
244
259
  .hook-navbar-nav-item();
245
260
  }
@@ -268,6 +283,14 @@
268
283
  }
269
284
 
270
285
 
286
+ /* Parent icon modifier
287
+ ========================================================================== */
288
+
289
+ .uk-navbar-parent-icon { margin-left: @navbar-parent-icon-margin-left; }
290
+
291
+ .uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotate(180deg); }
292
+
293
+
271
294
  /* Item
272
295
  ========================================================================== */
273
296
 
@@ -288,6 +311,7 @@
288
311
  ========================================================================== */
289
312
 
290
313
  .uk-navbar-toggle {
314
+ padding: 0 @navbar-item-padding-horizontal;
291
315
  color: @navbar-toggle-color;
292
316
  .hook-navbar-toggle();
293
317
  }
@@ -384,7 +408,7 @@
384
408
  /* Show */
385
409
  .uk-navbar-dropdown.uk-open { display: block; }
386
410
 
387
-
411
+ // Color Mode
388
412
  .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
389
413
  .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
390
414
 
@@ -412,43 +436,88 @@
412
436
  .uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 4); }
413
437
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 5); }
414
438
 
439
+ /*
440
+ * Size modifier
441
+ */
442
+
443
+ .uk-navbar-dropdown-large {
444
+ --uk-position-shift-offset: @navbar-dropdown-large-shift-margin;
445
+ padding: @navbar-dropdown-large-padding;
446
+ }
447
+
415
448
  /*
416
449
  * Stretch modifier
417
450
  * 1. Allow scrolling
451
+ * 2. Style
418
452
  */
419
453
 
420
- .uk-navbar-dropdown-stretch {
454
+ .uk-navbar-dropdown-stretch {
421
455
  --uk-position-offset: 0;
422
456
  --uk-position-shift-offset: 0;
423
457
  --uk-position-viewport-offset: 0;
424
458
  /* 1 */
425
459
  overflow-y: auto;
426
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;
427
464
  .hook-navbar-dropdown-stretch();
428
465
  }
429
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
+
485
+ }
486
+
430
487
  /*
431
488
  * Dropbar modifier
432
489
  * 1. Reset dropdown width to prevent to early shifting
433
- * 2. Set position
434
- * 3. Bottom padding for dropbar
435
- * 4. Horizontal padding
490
+ * 2. Reset style
491
+ * 3. Padding
436
492
  */
437
493
 
438
494
  .uk-navbar-dropdown-dropbar {
439
495
  /* 1 */
440
496
  width: auto;
441
497
  /* 2 */
442
- --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
498
+ background: transparent;
443
499
  /* 3 */
444
- margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
445
- /* 4 */
446
- padding-left: @navbar-dropdown-dropbar-padding-horizontal;
447
- padding-right: @navbar-dropdown-dropbar-padding-horizontal;
500
+ padding: @navbar-dropdown-dropbar-padding-top @navbar-dropdown-dropbar-padding-horizontal @navbar-dropdown-dropbar-padding-bottom @navbar-dropdown-dropbar-padding-horizontal;
448
501
  --uk-position-shift-offset: 0;
502
+ --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
449
503
  .hook-navbar-dropdown-dropbar();
450
504
  }
451
505
 
506
+ /* Phone landscape and bigger */
507
+ @media (min-width: @breakpoint-small) {
508
+
509
+ .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin-s; }
510
+
511
+ }
512
+
513
+ /* Tablet landscape and bigger */
514
+ @media (min-width: @breakpoint-medium) {
515
+
516
+ .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin-m; }
517
+
518
+ }
519
+
520
+
452
521
 
453
522
  /* Dropdown Nav
454
523
  * Adopts `uk-nav`
@@ -577,6 +646,10 @@
577
646
 
578
647
  .hook-inverse() {
579
648
 
649
+ //
650
+ // Nav Item
651
+ //
652
+
580
653
  .uk-navbar-nav > li > a {
581
654
  color: @inverse-navbar-nav-item-color;
582
655
  .hook-inverse-navbar-nav-item();
@@ -598,11 +671,19 @@
598
671
  .hook-inverse-navbar-nav-item-active();
599
672
  }
600
673
 
674
+ //
675
+ // Item
676
+ //
677
+
601
678
  .uk-navbar-item {
602
679
  color: @inverse-navbar-item-color;
603
680
  .hook-inverse-navbar-item();
604
681
  }
605
682
 
683
+ //
684
+ // Toggle
685
+ //
686
+
606
687
  .uk-navbar-toggle {
607
688
  color: @inverse-navbar-toggle-color;
608
689
  .hook-inverse-navbar-toggle();
@@ -10,10 +10,13 @@
10
10
  @navbar-gap: 30px;
11
11
 
12
12
  @navbar-nav-gap: 30px;
13
+
13
14
  @navbar-nav-item-padding-horizontal: 0;
14
15
 
15
16
  @navbar-nav-item-font-size: @global-small-font-size;
16
17
 
18
+ @navbar-item-padding-horizontal: 0;
19
+
17
20
  @navbar-dropdown-margin: 15px;
18
21
  @navbar-dropdown-padding: 25px;
19
22
  @navbar-dropdown-background: @global-background;
@@ -31,8 +34,6 @@
31
34
 
32
35
  @navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
33
36
 
34
- @navbar-dropdown-stretch-background: @global-muted-background;
35
-
36
37
  @navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
37
38
 
38
39
  @navbar-dropdown-grid-divider-border-width: @global-border-width;
@@ -106,10 +107,7 @@
106
107
 
107
108
  .hook-navbar-dropdown() { box-shadow: @navbar-dropdown-box-shadow; }
108
109
 
109
- .hook-navbar-dropdown-stretch() {
110
- box-shadow: none;
111
- background: @navbar-dropdown-stretch-background;
112
- }
110
+ .hook-navbar-dropdown-stretch() { box-shadow: none; }
113
111
 
114
112
  .hook-navbar-dropdown-dropbar() { box-shadow: none; }
115
113
 
@@ -25,6 +25,8 @@ $dropdown-padding: 15px !default;
25
25
  $dropdown-background: $global-muted-background !default;
26
26
  $dropdown-color: $global-color !default;
27
27
 
28
+ $dropdown-large-padding: 40px !default;
29
+
28
30
  $dropdown-nav-item-color: $global-muted-color !default;
29
31
  $dropdown-nav-item-hover-color: $global-color !default;
30
32
  $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
@@ -69,6 +71,12 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
69
71
  .uk-dropdown.uk-open { display: block; }
70
72
 
71
73
 
74
+ /* Size modifier
75
+ ========================================================================== */
76
+
77
+ .uk-dropdown-large { padding: $dropdown-large-padding; }
78
+
79
+
72
80
  /* Stretch modifier
73
81
  ========================================================================== */
74
82
 
@@ -80,9 +80,6 @@ $nav-dividers-margin-top: 0 !default;
80
80
  $nav-dividers-border-width: $global-border-width !default;
81
81
  $nav-dividers-border: $global-border !default;
82
82
 
83
- $internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
84
- $internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default;
85
-
86
83
 
87
84
  /* ========================================================================
88
85
  Component: Nav
@@ -152,18 +149,9 @@ ul.uk-nav-sub {
152
149
  /* Parent icon modifier
153
150
  ========================================================================== */
154
151
 
155
- .uk-nav-parent-icon > .uk-parent > a::after {
156
- content: "";
157
- width: $nav-parent-icon-width;
158
- height: $nav-parent-icon-height;
159
- margin-left: auto;
160
- @include svg-fill($internal-nav-parent-close-image, "#000", $nav-parent-icon-color);
161
- background-repeat: no-repeat;
162
- background-position: 50% 50%;
163
- @if(mixin-exists(hook-nav-parent-icon)) {@include hook-nav-parent-icon();}
164
- }
152
+ .uk-nav-parent-icon { margin-left: auto; }
165
153
 
166
- .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $nav-parent-icon-color); }
154
+ .uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon { transform: rotate(180deg); }
167
155
 
168
156
 
169
157
  /* Header
@@ -352,7 +340,7 @@ ul.uk-nav-sub {
352
340
  .uk-nav-center .uk-nav-sub ul { padding-left: 0; }
353
341
 
354
342
  /* Parent icon modifier */
355
- .uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { margin-left: 0; }
343
+ .uk-nav-center .uk-nav-parent-icon { margin-left: 0; }
356
344
 
357
345
 
358
346
  /* Style modifier
@@ -51,7 +51,9 @@ $navbar-nav-item-hover-color: $global-color !default;
51
51
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
52
52
  $navbar-nav-item-active-color: $global-emphasis-color !default;
53
53
 
54
- $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
54
+ $navbar-parent-icon-margin-left: 4px !default;
55
+
56
+ $navbar-item-padding-horizontal: 15px !default;
55
57
  $navbar-item-color: $global-color !default;
56
58
 
57
59
  $navbar-toggle-color: $global-muted-color !default;
@@ -71,9 +73,22 @@ $navbar-dropdown-color-mode: none !default;
71
73
  $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
72
74
  $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
73
75
 
74
- $navbar-dropdown-dropbar-margin-top: 0px !default;
75
- $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
76
+ $navbar-dropdown-large-shift-margin: 0 !default;
77
+ $navbar-dropdown-large-padding: 40px !default;
78
+
79
+ $navbar-dropdown-stretch-padding-top: 15px !default;
80
+ $navbar-dropdown-stretch-padding-bottom: $navbar-dropdown-stretch-padding-top !default;
81
+ $navbar-dropdown-stretch-padding-horizontal: 15px !default;
82
+ $navbar-dropdown-stretch-padding-horizontal-s: $global-gutter !default;
83
+ $navbar-dropdown-stretch-padding-horizontal-m: $global-medium-gutter !default;
84
+ $navbar-dropdown-stretch-background: $navbar-dropdown-background !default;
85
+
86
+ $navbar-dropdown-dropbar-padding-top: $navbar-dropdown-padding !default;
87
+ $navbar-dropdown-dropbar-padding-bottom: $navbar-dropdown-dropbar-padding-top !default;
76
88
  $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
89
+ $navbar-dropdown-dropbar-viewport-margin: 15px !default;
90
+ $navbar-dropdown-dropbar-viewport-margin-s: $global-gutter !default;
91
+ $navbar-dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
77
92
 
78
93
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
79
94
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
@@ -227,7 +242,6 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
227
242
  /* 3 */
228
243
  box-sizing: border-box;
229
244
  min-height: $navbar-nav-item-height;
230
- padding: 0 $navbar-nav-item-padding-horizontal;
231
245
  /* 4 */
232
246
  font-size: $navbar-nav-item-font-size;
233
247
  font-family: $navbar-nav-item-font-family;
@@ -240,6 +254,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
240
254
  */
241
255
 
242
256
  .uk-navbar-nav > li > a {
257
+ padding: 0 $navbar-nav-item-padding-horizontal;
243
258
  color: $navbar-nav-item-color;
244
259
  @if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
245
260
  }
@@ -268,6 +283,14 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
268
283
  }
269
284
 
270
285
 
286
+ /* Parent icon modifier
287
+ ========================================================================== */
288
+
289
+ .uk-navbar-parent-icon { margin-left: $navbar-parent-icon-margin-left; }
290
+
291
+ .uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon { transform: rotate(180deg); }
292
+
293
+
271
294
  /* Item
272
295
  ========================================================================== */
273
296
 
@@ -288,6 +311,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
288
311
  ========================================================================== */
289
312
 
290
313
  .uk-navbar-toggle {
314
+ padding: 0 $navbar-item-padding-horizontal;
291
315
  color: $navbar-toggle-color;
292
316
  @if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();}
293
317
  }
@@ -384,7 +408,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
384
408
  /* Show */
385
409
  .uk-navbar-dropdown.uk-open { display: block; }
386
410
 
387
-
411
+ // Color Mode
388
412
  @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
389
413
  @if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
390
414
 
@@ -412,43 +436,88 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
412
436
  .uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 4); }
413
437
  .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); }
414
438
 
439
+ /*
440
+ * Size modifier
441
+ */
442
+
443
+ .uk-navbar-dropdown-large {
444
+ --uk-position-shift-offset: #{$navbar-dropdown-large-shift-margin};
445
+ padding: $navbar-dropdown-large-padding;
446
+ }
447
+
415
448
  /*
416
449
  * Stretch modifier
417
450
  * 1. Allow scrolling
451
+ * 2. Style
418
452
  */
419
453
 
420
- .uk-navbar-dropdown-stretch {
454
+ .uk-navbar-dropdown-stretch {
421
455
  --uk-position-offset: 0;
422
456
  --uk-position-shift-offset: 0;
423
457
  --uk-position-viewport-offset: 0;
424
458
  /* 1 */
425
459
  overflow-y: auto;
426
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;
427
464
  @if(mixin-exists(hook-navbar-dropdown-stretch)) {@include hook-navbar-dropdown-stretch();}
428
465
  }
429
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
+
485
+ }
486
+
430
487
  /*
431
488
  * Dropbar modifier
432
489
  * 1. Reset dropdown width to prevent to early shifting
433
- * 2. Set position
434
- * 3. Bottom padding for dropbar
435
- * 4. Horizontal padding
490
+ * 2. Reset style
491
+ * 3. Padding
436
492
  */
437
493
 
438
494
  .uk-navbar-dropdown-dropbar {
439
495
  /* 1 */
440
496
  width: auto;
441
497
  /* 2 */
442
- --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
498
+ background: transparent;
443
499
  /* 3 */
444
- margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
445
- /* 4 */
446
- padding-left: $navbar-dropdown-dropbar-padding-horizontal;
447
- padding-right: $navbar-dropdown-dropbar-padding-horizontal;
500
+ padding: $navbar-dropdown-dropbar-padding-top $navbar-dropdown-dropbar-padding-horizontal $navbar-dropdown-dropbar-padding-bottom $navbar-dropdown-dropbar-padding-horizontal;
448
501
  --uk-position-shift-offset: 0;
502
+ --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin};
449
503
  @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
450
504
  }
451
505
 
506
+ /* Phone landscape and bigger */
507
+ @media (min-width: $breakpoint-small) {
508
+
509
+ .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-s}; }
510
+
511
+ }
512
+
513
+ /* Tablet landscape and bigger */
514
+ @media (min-width: $breakpoint-medium) {
515
+
516
+ .uk-navbar-dropdown-dropbar { --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin-m}; }
517
+
518
+ }
519
+
520
+
452
521
 
453
522
  /* Dropdown Nav
454
523
  * Adopts `uk-nav`
@@ -1269,17 +1269,6 @@
1269
1269
  }
1270
1270
  @mixin hook-inverse-component-nav(){
1271
1271
 
1272
- //
1273
- // Parent icon modifier
1274
- //
1275
-
1276
- .uk-nav-parent-icon > .uk-parent > a::after {
1277
- @include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
1278
- @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
1279
- }
1280
-
1281
- .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
1282
-
1283
1272
  //
1284
1273
  // Default
1285
1274
  //
@@ -1362,6 +1351,10 @@
1362
1351
  }
1363
1352
  @mixin hook-inverse-component-navbar(){
1364
1353
 
1354
+ //
1355
+ // Nav Item
1356
+ //
1357
+
1365
1358
  .uk-navbar-nav > li > a {
1366
1359
  color: $inverse-navbar-nav-item-color;
1367
1360
  @if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();}
@@ -1383,11 +1376,19 @@
1383
1376
  @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
1384
1377
  }
1385
1378
 
1379
+ //
1380
+ // Item
1381
+ //
1382
+
1386
1383
  .uk-navbar-item {
1387
1384
  color: $inverse-navbar-item-color;
1388
1385
  @if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();}
1389
1386
  }
1390
1387
 
1388
+ //
1389
+ // Toggle
1390
+ //
1391
+
1391
1392
  .uk-navbar-toggle {
1392
1393
  color: $inverse-navbar-toggle-color;
1393
1394
  @if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();}
@@ -1704,7 +1705,6 @@
1704
1705
  @mixin hook-modal-close-full-hover(){}
1705
1706
  @mixin hook-modal-misc(){}
1706
1707
  @mixin hook-nav-sub(){}
1707
- @mixin hook-nav-parent-icon(){}
1708
1708
  @mixin hook-nav-header(){}
1709
1709
  @mixin hook-nav-divider(){}
1710
1710
  @mixin hook-nav-default(){}
@@ -1723,7 +1723,6 @@
1723
1723
  @mixin hook-nav-primary-divider(){}
1724
1724
  @mixin hook-nav-dividers(){}
1725
1725
  @mixin hook-nav-misc(){}
1726
- @mixin hook-inverse-nav-parent-icon(){}
1727
1726
  @mixin hook-inverse-nav-default-item(){}
1728
1727
  @mixin hook-inverse-nav-default-item-hover(){}
1729
1728
  @mixin hook-inverse-nav-default-item-active(){}
@@ -1754,10 +1753,7 @@
1754
1753
  @mixin hook-navbar-transparent(){}
1755
1754
  @mixin hook-navbar-sticky(){}
1756
1755
  @mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
1757
- @mixin hook-navbar-dropdown-stretch(){
1758
- box-shadow: none;
1759
- background: $navbar-dropdown-stretch-background;
1760
- }
1756
+ @mixin hook-navbar-dropdown-stretch(){ box-shadow: none; }
1761
1757
  @mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
1762
1758
  @mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
1763
1759
  @mixin hook-navbar-dropdown-nav-item(){}
@@ -1020,17 +1020,6 @@
1020
1020
  }
1021
1021
  @mixin hook-inverse-component-nav(){
1022
1022
 
1023
- //
1024
- // Parent icon modifier
1025
- //
1026
-
1027
- .uk-nav-parent-icon > .uk-parent > a::after {
1028
- @include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
1029
- @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
1030
- }
1031
-
1032
- .uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
1033
-
1034
1023
  //
1035
1024
  // Default
1036
1025
  //
@@ -1113,6 +1102,10 @@
1113
1102
  }
1114
1103
  @mixin hook-inverse-component-navbar(){
1115
1104
 
1105
+ //
1106
+ // Nav Item
1107
+ //
1108
+
1116
1109
  .uk-navbar-nav > li > a {
1117
1110
  color: $inverse-navbar-nav-item-color;
1118
1111
  @if(mixin-exists(hook-inverse-navbar-nav-item)) {@include hook-inverse-navbar-nav-item();}
@@ -1134,11 +1127,19 @@
1134
1127
  @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
1135
1128
  }
1136
1129
 
1130
+ //
1131
+ // Item
1132
+ //
1133
+
1137
1134
  .uk-navbar-item {
1138
1135
  color: $inverse-navbar-item-color;
1139
1136
  @if(mixin-exists(hook-inverse-navbar-item)) {@include hook-inverse-navbar-item();}
1140
1137
  }
1141
1138
 
1139
+ //
1140
+ // Toggle
1141
+ //
1142
+
1142
1143
  .uk-navbar-toggle {
1143
1144
  color: $inverse-navbar-toggle-color;
1144
1145
  @if(mixin-exists(hook-inverse-navbar-toggle)) {@include hook-inverse-navbar-toggle();}
@@ -1431,7 +1432,6 @@
1431
1432
  @mixin hook-modal-close-full-hover(){}
1432
1433
  @mixin hook-modal-misc(){}
1433
1434
  @mixin hook-nav-sub(){}
1434
- @mixin hook-nav-parent-icon(){}
1435
1435
  @mixin hook-nav-header(){}
1436
1436
  @mixin hook-nav-divider(){}
1437
1437
  @mixin hook-nav-default(){}
@@ -1450,7 +1450,6 @@
1450
1450
  @mixin hook-nav-primary-divider(){}
1451
1451
  @mixin hook-nav-dividers(){}
1452
1452
  @mixin hook-nav-misc(){}
1453
- @mixin hook-inverse-nav-parent-icon(){}
1454
1453
  @mixin hook-inverse-nav-default-item(){}
1455
1454
  @mixin hook-inverse-nav-default-item-hover(){}
1456
1455
  @mixin hook-inverse-nav-default-item-active(){}
@@ -10,10 +10,13 @@
10
10
  $navbar-gap: 30px !default;
11
11
 
12
12
  $navbar-nav-gap: 30px !default;
13
+
13
14
  $navbar-nav-item-padding-horizontal: 0 !default;
14
15
 
15
16
  $navbar-nav-item-font-size: $global-small-font-size !default;
16
17
 
18
+ $navbar-item-padding-horizontal: 0 !default;
19
+
17
20
  $navbar-dropdown-margin: 15px !default;
18
21
  $navbar-dropdown-padding: 25px !default;
19
22
  $navbar-dropdown-background: $global-background !default;
@@ -31,8 +34,6 @@ $navbar-dropdown-nav-font-size: $global-small-font-size !defaul
31
34
 
32
35
  $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
33
36
 
34
- $navbar-dropdown-stretch-background: $global-muted-background !default;
35
-
36
37
  $navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
37
38
 
38
39
  $navbar-dropdown-grid-divider-border-width: $global-border-width !default;