uikit 3.14.4-dev.51a1b06ef → 3.14.4-dev.5e7e87ba7

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 (112) hide show
  1. package/CHANGELOG.md +27 -17
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +265 -59
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +265 -59
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +285 -63
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +285 -63
  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 +69 -114
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +69 -114
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +1 -1
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +1 -1
  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 +1 -1
  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 +85 -131
  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 +297 -324
  38. package/dist/js/uikit-core.min.js +14 -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 +297 -324
  42. package/dist/js/uikit.min.js +14 -1
  43. package/package.json +1 -1
  44. package/src/images/components/navbar-toggle-icon.svg +22 -3
  45. package/src/js/api/state.js +1 -1
  46. package/src/js/core/accordion.js +9 -17
  47. package/src/js/core/alert.js +35 -14
  48. package/src/js/core/drop.js +90 -61
  49. package/src/js/core/navbar.js +28 -45
  50. package/src/js/mixin/position.js +18 -20
  51. package/src/js/mixin/togglable.js +80 -124
  52. package/src/js/util/animation.js +4 -3
  53. package/src/js/util/filter.js +3 -7
  54. package/src/js/util/position.js +42 -47
  55. package/src/js/util/viewport.js +1 -1
  56. package/src/less/components/_import.less +1 -0
  57. package/src/less/components/drop.less +1 -18
  58. package/src/less/components/dropbar.less +115 -0
  59. package/src/less/components/dropdown.less +6 -20
  60. package/src/less/components/nav.less +203 -19
  61. package/src/less/components/navbar.less +10 -51
  62. package/src/less/theme/_import.less +1 -0
  63. package/src/less/theme/dropbar.less +44 -0
  64. package/src/less/theme/dropdown.less +0 -11
  65. package/src/less/theme/nav.less +46 -0
  66. package/src/less/theme/navbar.less +1 -5
  67. package/src/scss/components/_import.scss +1 -0
  68. package/src/scss/components/drop.scss +1 -18
  69. package/src/scss/components/dropbar.scss +115 -0
  70. package/src/scss/components/dropdown.scss +6 -20
  71. package/src/scss/components/nav.scss +153 -19
  72. package/src/scss/components/navbar.scss +10 -51
  73. package/src/scss/mixins-theme.scss +76 -6
  74. package/src/scss/mixins.scss +73 -2
  75. package/src/scss/theme/_import.scss +1 -0
  76. package/src/scss/theme/dropbar.scss +44 -0
  77. package/src/scss/theme/dropdown.scss +0 -8
  78. package/src/scss/theme/nav.scss +44 -0
  79. package/src/scss/theme/navbar.scss +1 -5
  80. package/src/scss/variables-theme.scss +50 -9
  81. package/src/scss/variables.scss +39 -7
  82. package/tests/accordion.html +2 -2
  83. package/tests/alert.html +2 -2
  84. package/tests/countdown.html +1 -1
  85. package/tests/drop.html +444 -412
  86. package/tests/dropbar.html +456 -0
  87. package/tests/dropdown.html +8 -470
  88. package/tests/filter.html +9 -12
  89. package/tests/form.html +1 -1
  90. package/tests/index.html +123 -104
  91. package/tests/lightbox.html +5 -5
  92. package/tests/list.html +8 -8
  93. package/tests/modal.html +13 -13
  94. package/tests/nav.html +117 -8
  95. package/tests/navbar.html +75 -211
  96. package/tests/offcanvas.html +2 -6
  97. package/tests/parallax.html +1 -1
  98. package/tests/position.html +13 -24
  99. package/tests/progress.html +9 -9
  100. package/tests/scroll.html +7 -10
  101. package/tests/search.html +5 -5
  102. package/tests/slider.html +6 -5
  103. package/tests/slideshow.html +8 -8
  104. package/tests/sortable.html +6 -8
  105. package/tests/sticky-navbar.html +6 -6
  106. package/tests/sticky.html +8 -8
  107. package/tests/switcher.html +1 -1
  108. package/tests/tab.html +1 -1
  109. package/tests/table.html +7 -7
  110. package/tests/toggle.html +2 -2
  111. package/tests/tooltip.html +1 -1
  112. package/tests/upload.html +11 -11
@@ -5,7 +5,7 @@
5
5
  //
6
6
  // Adopted: `uk-dropdown-nav`
7
7
  //
8
- // Modifiers: `uk-dropdown-stretch`
8
+ // Modifiers: `uk-dropdown-large`
9
9
  // `uk-dropdown-stack`
10
10
  // `uk-dropdown-grid`
11
11
  //
@@ -24,6 +24,7 @@
24
24
  @dropdown-padding: 15px;
25
25
  @dropdown-background: @global-muted-background;
26
26
  @dropdown-color: @global-color;
27
+ @dropdown-color-mode: none;
27
28
 
28
29
  @dropdown-large-padding: 40px;
29
30
 
@@ -59,7 +60,6 @@
59
60
  /* 3 */
60
61
  box-sizing: border-box;
61
62
  min-width: @dropdown-min-width;
62
- max-width: 100vw;
63
63
  /* 4 */
64
64
  padding: @dropdown-padding;
65
65
  background: @dropdown-background;
@@ -76,6 +76,10 @@
76
76
 
77
77
  .uk-dropdown > :last-child { margin-bottom: 0; }
78
78
 
79
+ // Color Mode
80
+ .uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
81
+ .uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
82
+
79
83
 
80
84
  /* Size modifier
81
85
  ========================================================================== */
@@ -83,23 +87,6 @@
83
87
  .uk-dropdown-large { padding: @dropdown-large-padding; }
84
88
 
85
89
 
86
- /* Stretch modifier
87
- ========================================================================== */
88
-
89
- /*
90
- * 1. Allow scrolling
91
- */
92
-
93
- .uk-dropdown-stretch {
94
- --uk-position-offset: 0;
95
- --uk-position-viewport-offset: 0;
96
- /* 1 */
97
- overflow-y: auto;
98
- -webkit-overflow-scrolling: touch;
99
- .hook-dropdown-stretch();
100
- }
101
-
102
-
103
90
  /* Nav
104
91
  * Adopts `uk-nav`
105
92
  ========================================================================== */
@@ -174,7 +161,6 @@
174
161
  .hook-dropdown-misc();
175
162
 
176
163
  .hook-dropdown() {}
177
- .hook-dropdown-stretch() {}
178
164
  .hook-dropdown-nav() {}
179
165
  .hook-dropdown-nav-item() {}
180
166
  .hook-dropdown-nav-item-hover() {}
@@ -72,6 +72,24 @@
72
72
  @nav-primary-sublist-item-hover-color: @global-color;
73
73
  @nav-primary-sublist-item-active-color: @global-emphasis-color;
74
74
 
75
+ @nav-secondary-font-size: @global-font-size;
76
+ @nav-secondary-line-height: @global-line-height;
77
+ @nav-secondary-item-color: @global-emphasis-color;
78
+ @nav-secondary-item-hover-color: @global-emphasis-color;
79
+ @nav-secondary-item-active-color: @global-emphasis-color;
80
+ @nav-secondary-subtitle-font-size: @global-small-font-size;
81
+ @nav-secondary-subtitle-color: @global-muted-color;
82
+ @nav-secondary-subtitle-hover-color: @global-color;
83
+ @nav-secondary-subtitle-active-color: @global-emphasis-color;
84
+ @nav-secondary-header-color: @global-emphasis-color;
85
+ @nav-secondary-divider-border-width: @global-border-width;
86
+ @nav-secondary-divider-border: @global-border;
87
+ @nav-secondary-sublist-font-size: @global-small-font-size;
88
+ @nav-secondary-sublist-line-height: @global-line-height;
89
+ @nav-secondary-sublist-item-color: @global-muted-color;
90
+ @nav-secondary-sublist-item-hover-color: @global-color;
91
+ @nav-secondary-sublist-item-active-color: @global-emphasis-color;
92
+
75
93
  @nav-dividers-margin-top: 5px;
76
94
  @nav-dividers-border-width: @global-border-width;
77
95
  @nav-dividers-border: @global-border;
@@ -318,6 +336,93 @@ ul.uk-nav-sub {
318
336
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: @nav-primary-sublist-item-active-color; }
319
337
 
320
338
 
339
+ /* Secondary modifier
340
+ ========================================================================== */
341
+
342
+ .uk-nav-secondary {
343
+ font-size: @nav-secondary-font-size;
344
+ line-height: @nav-secondary-line-height;
345
+ .hook-nav-secondary();
346
+ }
347
+
348
+ /*
349
+ * Items
350
+ */
351
+
352
+ .uk-nav-secondary > li > a {
353
+
354
+ color: @nav-secondary-item-color;
355
+ .hook-nav-secondary-item();
356
+ }
357
+
358
+ /* Hover */
359
+ .uk-nav-secondary > li > a:hover {
360
+ color: @nav-secondary-item-hover-color;
361
+ .hook-nav-secondary-item-hover();
362
+ }
363
+
364
+ /* Active */
365
+ .uk-nav-secondary > li.uk-active > a {
366
+ color: @nav-secondary-item-active-color;
367
+ .hook-nav-secondary-item-active();
368
+ }
369
+
370
+ /*
371
+ * Subtitle
372
+ */
373
+
374
+ .uk-nav-secondary .uk-nav-subtitle {
375
+ font-size: @nav-secondary-subtitle-font-size;
376
+ color: @nav-secondary-subtitle-color;
377
+ .hook-nav-secondary-subtitle();
378
+ }
379
+
380
+ /* Hover */
381
+ .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
382
+ color: @nav-secondary-subtitle-hover-color;
383
+ .hook-nav-secondary-subtitle-hover();
384
+ }
385
+
386
+ /* Active */
387
+ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
388
+ color: @nav-secondary-subtitle-active-color;
389
+ .hook-nav-secondary-subtitle-active();
390
+ }
391
+
392
+ /*
393
+ * Header
394
+ */
395
+
396
+ .uk-nav-secondary .uk-nav-header {
397
+ color: @nav-secondary-header-color;
398
+ .hook-nav-secondary-header();
399
+ }
400
+
401
+ /*
402
+ * Divider
403
+ */
404
+
405
+ .uk-nav-secondary .uk-nav-divider {
406
+ border-top: @nav-secondary-divider-border-width solid @nav-secondary-divider-border;
407
+ .hook-nav-secondary-divider();
408
+ }
409
+
410
+ /*
411
+ * Sublists
412
+ */
413
+
414
+ .uk-nav-secondary .uk-nav-sub {
415
+ font-size: @nav-secondary-sublist-font-size;
416
+ line-height: @nav-secondary-sublist-line-height;
417
+ }
418
+
419
+ .uk-nav-secondary .uk-nav-sub a { color: @nav-secondary-sublist-item-color; }
420
+
421
+ .uk-nav-secondary .uk-nav-sub a:hover { color: @nav-secondary-sublist-item-hover-color; }
422
+
423
+ .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @nav-secondary-sublist-item-active-color; }
424
+
425
+
321
426
  /* Alignment modifier
322
427
  ========================================================================== */
323
428
 
@@ -377,6 +482,15 @@ ul.uk-nav-sub {
377
482
  .hook-nav-primary-subtitle() {}
378
483
  .hook-nav-primary-header() {}
379
484
  .hook-nav-primary-divider() {}
485
+ .hook-nav-secondary() {}
486
+ .hook-nav-secondary-item() {}
487
+ .hook-nav-secondary-item-hover() {}
488
+ .hook-nav-secondary-item-active() {}
489
+ .hook-nav-secondary-subtitle() {}
490
+ .hook-nav-secondary-subtitle-hover() {}
491
+ .hook-nav-secondary-subtitle-active() {}
492
+ .hook-nav-secondary-header() {}
493
+ .hook-nav-secondary-divider() {}
380
494
  .hook-nav-dividers() {}
381
495
  .hook-nav-misc() {}
382
496
 
@@ -384,25 +498,37 @@ ul.uk-nav-sub {
384
498
  // Inverse
385
499
  // ========================================================================
386
500
 
387
- @inverse-nav-default-item-color: @inverse-global-muted-color;
388
- @inverse-nav-default-item-hover-color: @inverse-global-color;
389
- @inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
390
- @inverse-nav-default-header-color: @inverse-global-emphasis-color;
391
- @inverse-nav-default-divider-border: @inverse-global-border;
392
- @inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
393
- @inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
394
- @inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
395
-
396
- @inverse-nav-primary-item-color: @inverse-global-muted-color;
397
- @inverse-nav-primary-item-hover-color: @inverse-global-color;
398
- @inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
399
- @inverse-nav-primary-header-color: @inverse-global-emphasis-color;
400
- @inverse-nav-primary-divider-border: @inverse-global-border;
401
- @inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
402
- @inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
403
- @inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
404
-
405
- @inverse-nav-dividers-border: @inverse-global-border;
501
+ @inverse-nav-default-item-color: @inverse-global-muted-color;
502
+ @inverse-nav-default-item-hover-color: @inverse-global-color;
503
+ @inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
504
+ @inverse-nav-default-header-color: @inverse-global-emphasis-color;
505
+ @inverse-nav-default-divider-border: @inverse-global-border;
506
+ @inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
507
+ @inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
508
+ @inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
509
+
510
+ @inverse-nav-primary-item-color: @inverse-global-muted-color;
511
+ @inverse-nav-primary-item-hover-color: @inverse-global-color;
512
+ @inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
513
+ @inverse-nav-primary-header-color: @inverse-global-emphasis-color;
514
+ @inverse-nav-primary-divider-border: @inverse-global-border;
515
+ @inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
516
+ @inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
517
+ @inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
518
+
519
+ @inverse-nav-secondary-item-color: @inverse-global-emphasis-color;
520
+ @inverse-nav-secondary-item-hover-color: @inverse-global-emphasis-color;
521
+ @inverse-nav-secondary-item-active-color: @inverse-global-emphasis-color;
522
+ @inverse-nav-secondary-subtitle-color: @inverse-global-muted-color;
523
+ @inverse-nav-secondary-subtitle-hover-color: @inverse-global-color;
524
+ @inverse-nav-secondary-subtitle-active-color: @inverse-global-emphasis-color;
525
+ @inverse-nav-secondary-header-color: @inverse-global-emphasis-color;
526
+ @inverse-nav-secondary-divider-border: @inverse-global-border;
527
+ @inverse-nav-secondary-sublist-item-color: @inverse-global-muted-color;
528
+ @inverse-nav-secondary-sublist-item-hover-color: @inverse-global-color;
529
+ @inverse-nav-secondary-sublist-item-active-color: @inverse-global-emphasis-color;
530
+
531
+ @inverse-nav-dividers-border: @inverse-global-border;
406
532
 
407
533
  .hook-inverse() {
408
534
 
@@ -476,6 +602,56 @@ ul.uk-nav-sub {
476
602
 
477
603
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: @inverse-nav-primary-sublist-item-active-color; }
478
604
 
605
+ //
606
+ // Secondary
607
+ //
608
+
609
+ .uk-nav-secondary > li > a {
610
+ color: @inverse-nav-secondary-item-color;
611
+ .hook-inverse-nav-secondary-item();
612
+ }
613
+
614
+ .uk-nav-secondary > li > a:hover {
615
+ color: @inverse-nav-secondary-item-hover-color;
616
+ .hook-inverse-nav-secondary-item-hover();
617
+ }
618
+
619
+ .uk-nav-secondary > li.uk-active > a {
620
+ color: @inverse-nav-secondary-item-active-color;
621
+ .hook-inverse-nav-secondary-item-active();
622
+ }
623
+
624
+ .uk-nav-secondary .uk-nav-subtitle {
625
+ color: @inverse-nav-secondary-subtitle-color;
626
+ .hook-inverse-nav-secondary-subtitle();
627
+ }
628
+
629
+ .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
630
+ color: @inverse-nav-secondary-subtitle-hover-color;
631
+ .hook-inverse-nav-secondary-subtitle-hover();
632
+ }
633
+
634
+ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
635
+ color: @inverse-nav-secondary-subtitle-active-color;
636
+ .hook-inverse-nav-secondary-subtitle-active();
637
+ }
638
+
639
+ .uk-nav-secondary .uk-nav-header {
640
+ color: @inverse-nav-secondary-header-color;
641
+ .hook-inverse-nav-secondary-header();
642
+ }
643
+
644
+ .uk-nav-secondary .uk-nav-divider {
645
+ border-top-color: @inverse-nav-secondary-divider-border;
646
+ .hook-inverse-nav-secondary-divider();
647
+ }
648
+
649
+ .uk-nav-secondary .uk-nav-sub a { color: @inverse-nav-secondary-sublist-item-color; }
650
+
651
+ .uk-nav-secondary .uk-nav-sub a:hover { color: @inverse-nav-secondary-sublist-item-hover-color; }
652
+
653
+ .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: @inverse-nav-secondary-sublist-item-active-color; }
654
+
479
655
  //
480
656
  // Dividers
481
657
  //
@@ -497,4 +673,12 @@ ul.uk-nav-sub {
497
673
  .hook-inverse-nav-primary-item-active() {}
498
674
  .hook-inverse-nav-primary-header() {}
499
675
  .hook-inverse-nav-primary-divider() {}
676
+ .hook-inverse-nav-secondary-item() {}
677
+ .hook-inverse-nav-secondary-item-hover() {}
678
+ .hook-inverse-nav-secondary-item-active() {}
679
+ .hook-inverse-nav-secondary-subtitle() {}
680
+ .hook-inverse-nav-secondary-subtitle-hover() {}
681
+ .hook-inverse-nav-secondary-subtitle-active() {}
682
+ .hook-inverse-nav-secondary-header() {}
683
+ .hook-inverse-nav-secondary-divider() {}
500
684
  .hook-inverse-nav-dividers() {}
@@ -77,13 +77,6 @@
77
77
  @navbar-dropdown-large-shift-margin: 0;
78
78
  @navbar-dropdown-large-padding: 40px;
79
79
 
80
- @navbar-dropdown-stretch-padding-top: 15px;
81
- @navbar-dropdown-stretch-padding-bottom: @navbar-dropdown-stretch-padding-top;
82
- @navbar-dropdown-stretch-padding-horizontal: 15px;
83
- @navbar-dropdown-stretch-padding-horizontal-s: @global-gutter;
84
- @navbar-dropdown-stretch-padding-horizontal-m: @global-medium-gutter;
85
- @navbar-dropdown-stretch-background: @navbar-dropdown-background;
86
-
87
80
  @navbar-dropdown-dropbar-padding-top: @navbar-dropdown-padding;
88
81
  @navbar-dropdown-dropbar-padding-bottom: @navbar-dropdown-dropbar-padding-top;
89
82
  @navbar-dropdown-dropbar-padding-horizontal: @navbar-nav-item-padding-horizontal;
@@ -102,7 +95,6 @@
102
95
  @navbar-dropdown-nav-sublist-item-hover-color: @global-color;
103
96
  @navbar-dropdown-nav-sublist-item-active-color: @global-emphasis-color;
104
97
 
105
- @navbar-dropbar-background: @navbar-dropdown-background;
106
98
  @navbar-dropbar-z-index: @global-z-index - 20;
107
99
 
108
100
 
@@ -398,7 +390,6 @@
398
390
  /* 3 */
399
391
  box-sizing: border-box;
400
392
  width: @navbar-dropdown-width;
401
- max-width: 100vw;
402
393
  /* 4 */
403
394
  padding: @navbar-dropdown-padding;
404
395
  background: @navbar-dropdown-background;
@@ -452,45 +443,6 @@
452
443
  padding: @navbar-dropdown-large-padding;
453
444
  }
454
445
 
455
- /*
456
- * Stretch modifier
457
- * 1. Allow scrolling
458
- * 2. Style
459
- */
460
-
461
- .uk-navbar-dropdown-stretch {
462
- --uk-position-offset: 0;
463
- --uk-position-shift-offset: 0;
464
- --uk-position-viewport-offset: 0;
465
- /* 1 */
466
- overflow-y: auto;
467
- -webkit-overflow-scrolling: touch;
468
- /* 2 */
469
- padding: @navbar-dropdown-stretch-padding-top @navbar-dropdown-stretch-padding-horizontal @navbar-dropdown-stretch-padding-bottom @navbar-dropdown-stretch-padding-horizontal;
470
- background: @navbar-dropdown-stretch-background;
471
- .hook-navbar-dropdown-stretch();
472
- }
473
-
474
- /* Phone landscape and bigger */
475
- @media (min-width: @breakpoint-small) {
476
-
477
- .uk-navbar-dropdown-stretch {
478
- padding-left: @navbar-dropdown-stretch-padding-horizontal-s;
479
- padding-right: @navbar-dropdown-stretch-padding-horizontal-s;
480
- }
481
-
482
- }
483
-
484
- /* Tablet landscape and bigger */
485
- @media (min-width: @breakpoint-medium) {
486
-
487
- .uk-navbar-dropdown-stretch {
488
- padding-left: @navbar-dropdown-stretch-padding-horizontal-m;
489
- padding-right: @navbar-dropdown-stretch-padding-horizontal-m;
490
- }
491
-
492
- }
493
-
494
446
  /*
495
447
  * Dropbar modifier
496
448
  * 1. Reset dropdown width to prevent to early shifting
@@ -505,6 +457,7 @@
505
457
  background: transparent;
506
458
  /* 3 */
507
459
  padding: @navbar-dropdown-dropbar-padding-top @navbar-dropdown-dropbar-padding-horizontal @navbar-dropdown-dropbar-padding-bottom @navbar-dropdown-dropbar-padding-horizontal;
460
+ --uk-position-offset: 0;
508
461
  --uk-position-shift-offset: 0;
509
462
  --uk-position-viewport-offset: @navbar-dropdown-dropbar-viewport-margin;
510
463
  .hook-navbar-dropdown-dropbar();
@@ -595,12 +548,19 @@
595
548
  /* Dropbar
596
549
  ========================================================================== */
597
550
 
551
+ /*
552
+ * 1. Reset dropbar
553
+ * 2. Width
554
+ */
555
+
598
556
  .uk-navbar-dropbar {
599
- position: absolute;
557
+ /* 1 */
558
+ display: block !important;
600
559
  z-index: @navbar-dropbar-z-index;
560
+ padding: 0;
561
+ /* 2 */
601
562
  left: 0;
602
563
  right: 0;
603
- background: @navbar-dropbar-background;
604
564
  .hook-navbar-dropbar();
605
565
  }
606
566
 
@@ -626,7 +586,6 @@
626
586
  .hook-navbar-transparent() {}
627
587
  .hook-navbar-sticky() {}
628
588
  .hook-navbar-dropdown() {}
629
- .hook-navbar-dropdown-stretch() {}
630
589
  .hook-navbar-dropdown-dropbar() {}
631
590
  .hook-navbar-dropdown-nav() {}
632
591
  .hook-navbar-dropdown-nav-item() {}
@@ -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
 
@@ -11,6 +11,16 @@
11
11
 
12
12
  @nav-default-subtitle-font-size: 12px;
13
13
 
14
+ //
15
+ // New
16
+ //
17
+
18
+ @nav-background-margin-top: 0;
19
+ @nav-background-item-padding-horizontal: 10px;
20
+ @nav-background-item-padding-vertical: 10px;
21
+ @nav-background-item-hover-background: @global-muted-background;
22
+ @nav-background-item-active-background: @global-muted-background;
23
+
14
24
 
15
25
  // Sublists
16
26
  // ========================================================================
@@ -66,6 +76,30 @@
66
76
  .hook-nav-primary-divider() {}
67
77
 
68
78
 
79
+ // Secondary style modifier
80
+ // ========================================================================
81
+
82
+ .hook-nav-secondary() {
83
+ > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) { margin-top: @nav-background-margin-top; }
84
+ }
85
+
86
+ .hook-nav-secondary-item() { padding: @nav-background-item-padding-vertical @nav-background-item-padding-horizontal; }
87
+
88
+ .hook-nav-secondary-item-hover() { background-color: @nav-background-item-hover-background; }
89
+
90
+ .hook-nav-secondary-item-active() { background-color: @nav-background-item-active-background; }
91
+
92
+ .hook-nav-secondary-subtitle() {}
93
+
94
+ .hook-nav-secondary-subtitle-hover() {}
95
+
96
+ .hook-nav-secondary-subtitle-active() {}
97
+
98
+ .hook-nav-secondary-header() {}
99
+
100
+ .hook-nav-secondary-divider() {}
101
+
102
+
69
103
  // Style modifier
70
104
  // ========================================================================
71
105
 
@@ -81,6 +115,9 @@
81
115
  // Inverse
82
116
  // ========================================================================
83
117
 
118
+ @inverse-nav-background-item-hover-background: @inverse-global-muted-background;
119
+ @inverse-nav-background-item-active-background: @inverse-global-muted-background;
120
+
84
121
  .hook-inverse-nav-default-item() {}
85
122
  .hook-inverse-nav-default-item-hover() {}
86
123
  .hook-inverse-nav-default-item-active() {}
@@ -93,4 +130,13 @@
93
130
  .hook-inverse-nav-primary-header() {}
94
131
  .hook-inverse-nav-primary-divider() {}
95
132
 
133
+ .hook-inverse-nav-secondary-item() {}
134
+ .hook-inverse-nav-secondary-item-hover() { background-color: @inverse-nav-background-item-hover-background; }
135
+ .hook-inverse-nav-secondary-item-active() { background-color: @inverse-nav-background-item-active-background; }
136
+ .hook-inverse-nav-secondary-subtitle() {}
137
+ .hook-inverse-nav-secondary-subtitle-hover() {}
138
+ .hook-inverse-nav-secondary-subtitle-active() {}
139
+ .hook-inverse-nav-secondary-header() {}
140
+ .hook-inverse-nav-secondary-divider() {}
141
+
96
142
  .hook-inverse-nav-dividers() {}
@@ -34,8 +34,6 @@
34
34
 
35
35
  @navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15);
36
36
 
37
- @navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05);
38
-
39
37
  @navbar-dropdown-grid-divider-border-width: @global-border-width;
40
38
  @navbar-dropdown-grid-divider-border: @navbar-dropdown-nav-divider-border;
41
39
 
@@ -107,8 +105,6 @@
107
105
 
108
106
  .hook-navbar-dropdown() { box-shadow: @navbar-dropdown-box-shadow; }
109
107
 
110
- .hook-navbar-dropdown-stretch() { box-shadow: none; }
111
-
112
108
  .hook-navbar-dropdown-dropbar() { box-shadow: none; }
113
109
 
114
110
 
@@ -131,7 +127,7 @@
131
127
  // Dropbar
132
128
  // ========================================================================
133
129
 
134
- .hook-navbar-dropbar() { box-shadow: @navbar-dropbar-box-shadow; }
130
+ .hook-navbar-dropbar() {}
135
131
 
136
132
 
137
133
  // Miscellaneous
@@ -40,6 +40,7 @@
40
40
  @import "accordion.scss";
41
41
  @import "drop.scss"; // After: Card
42
42
  @import "dropdown.scss"; // After: Card
43
+ @import "dropbar.scss";
43
44
  @import "modal.scss"; // After: Close
44
45
  @import "slideshow.scss";
45
46
  @import "slider.scss";
@@ -3,8 +3,7 @@
3
3
  //
4
4
  // Component: `uk-drop`
5
5
  //
6
- // Modifiers: `uk-drop-stretch`
7
- // `uk-drop-stack`
6
+ // Modifiers: `uk-drop-stack`
8
7
  // `uk-drop-grid`
9
8
  //
10
9
  // States: `uk-open`
@@ -50,22 +49,6 @@ $drop-width: 300px !default;
50
49
  .uk-drop.uk-open { display: block; }
51
50
 
52
51
 
53
- /* Stretch modifier
54
- ========================================================================== */
55
-
56
- /*
57
- * 1. Allow scrolling
58
- */
59
-
60
- .uk-drop-stretch {
61
- --uk-position-offset: 0;
62
- --uk-position-viewport-offset: 0;
63
- /* 1 */
64
- overflow-y: auto;
65
- -webkit-overflow-scrolling: touch;
66
- }
67
-
68
-
69
52
  /* Grid modifiers
70
53
  ========================================================================== */
71
54