uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.5fbbc45fb

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 (140) hide show
  1. package/CHANGELOG.md +39 -18
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +349 -160
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +349 -160
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +372 -190
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +372 -190
  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 +96 -131
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +96 -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 +102 -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 +549 -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 +552 -504
  42. package/dist/js/uikit.min.js +17 -1
  43. package/package.json +11 -11
  44. package/src/images/{backgrounds/nav-parent-close.svg → components/nav-parent-icon-large.svg} +0 -0
  45. package/src/images/{backgrounds/navbar-parent-close.svg → components/nav-parent-icon.svg} +0 -0
  46. package/src/images/{backgrounds/navbar-parent-open.svg → components/navbar-parent-icon.svg} +1 -1
  47. package/src/images/components/navbar-toggle-icon.svg +25 -3
  48. package/src/js/api/hooks.js +5 -1
  49. package/src/js/api/state.js +2 -2
  50. package/src/js/components/notification.js +3 -1
  51. package/src/js/core/accordion.js +9 -17
  52. package/src/js/core/alert.js +35 -14
  53. package/src/js/core/drop.js +110 -82
  54. package/src/js/core/height-viewport.js +4 -2
  55. package/src/js/core/icon.js +16 -0
  56. package/src/js/core/index.js +2 -0
  57. package/src/js/core/leader.js +2 -2
  58. package/src/js/core/navbar.js +30 -45
  59. package/src/js/core/offcanvas.js +8 -4
  60. package/src/js/core/scroll.js +37 -10
  61. package/src/js/core/toggle.js +3 -5
  62. package/src/js/mixin/media.js +4 -5
  63. package/src/js/mixin/modal.js +15 -12
  64. package/src/js/mixin/position.js +24 -26
  65. package/src/js/mixin/style.js +11 -0
  66. package/src/js/mixin/togglable.js +88 -124
  67. package/src/js/util/animation.js +9 -7
  68. package/src/js/util/class.js +3 -1
  69. package/src/js/util/filter.js +3 -7
  70. package/src/js/util/position.js +136 -130
  71. package/src/js/util/style.js +4 -13
  72. package/src/js/util/viewport.js +3 -5
  73. package/src/less/components/_import.less +1 -0
  74. package/src/less/components/drop.less +1 -18
  75. package/src/less/components/dropbar.less +126 -0
  76. package/src/less/components/dropdown.less +11 -19
  77. package/src/less/components/leader.less +1 -1
  78. package/src/less/components/nav.less +219 -58
  79. package/src/less/components/navbar.less +49 -81
  80. package/src/less/components/utility.less +10 -2
  81. package/src/less/theme/_import.less +1 -0
  82. package/src/less/theme/dropbar.less +44 -0
  83. package/src/less/theme/dropdown.less +0 -11
  84. package/src/less/theme/nav.less +45 -7
  85. package/src/less/theme/navbar.less +5 -44
  86. package/src/scss/components/_import.scss +1 -0
  87. package/src/scss/components/drop.scss +1 -18
  88. package/src/scss/components/dropbar.scss +126 -0
  89. package/src/scss/components/dropdown.scss +11 -19
  90. package/src/scss/components/leader.scss +1 -1
  91. package/src/scss/components/nav.scss +168 -46
  92. package/src/scss/components/navbar.scss +49 -69
  93. package/src/scss/components/utility.scss +8 -1
  94. package/src/scss/mixins-theme.scss +83 -61
  95. package/src/scss/mixins.scss +79 -29
  96. package/src/scss/theme/_import.scss +1 -0
  97. package/src/scss/theme/dropbar.scss +44 -0
  98. package/src/scss/theme/dropdown.scss +0 -8
  99. package/src/scss/theme/nav.scss +43 -7
  100. package/src/scss/theme/navbar.scss +4 -16
  101. package/src/scss/variables-theme.scss +62 -26
  102. package/src/scss/variables.scss +50 -21
  103. package/tests/accordion.html +2 -2
  104. package/tests/alert.html +2 -2
  105. package/tests/countdown.html +1 -1
  106. package/tests/drop.html +446 -416
  107. package/tests/dropbar.html +458 -0
  108. package/tests/dropdown.html +8 -470
  109. package/tests/filter.html +9 -12
  110. package/tests/flex.html +36 -36
  111. package/tests/form.html +1 -1
  112. package/tests/grid.html +22 -22
  113. package/tests/height.html +6 -6
  114. package/tests/index.html +129 -110
  115. package/tests/js/index.js +1 -4
  116. package/tests/lightbox.html +5 -5
  117. package/tests/list.html +8 -8
  118. package/tests/modal.html +13 -13
  119. package/tests/nav.html +117 -75
  120. package/tests/navbar.html +129 -249
  121. package/tests/offcanvas.html +17 -21
  122. package/tests/pagination.html +6 -6
  123. package/tests/parallax.html +1 -1
  124. package/tests/position.html +18 -16
  125. package/tests/progress.html +9 -9
  126. package/tests/scroll.html +7 -10
  127. package/tests/search.html +6 -6
  128. package/tests/slider.html +6 -5
  129. package/tests/slideshow.html +8 -8
  130. package/tests/sortable.html +6 -8
  131. package/tests/sticky-navbar.html +15 -15
  132. package/tests/sticky.html +8 -8
  133. package/tests/switcher.html +1 -1
  134. package/tests/tab.html +1 -1
  135. package/tests/table.html +7 -7
  136. package/tests/toggle.html +2 -2
  137. package/tests/tooltip.html +1 -1
  138. package/tests/upload.html +11 -11
  139. package/tests/utility.html +35 -16
  140. package/src/images/backgrounds/nav-parent-open.svg +0 -3
@@ -805,11 +805,13 @@
805
805
 
806
806
  }
807
807
  @mixin hook-drop-misc(){}
808
+ @mixin hook-dropbar(){}
809
+ @mixin hook-dropbar-top(){ box-shadow: $dropbar-top-box-shadow; }
810
+ @mixin hook-dropbar-bottom(){ box-shadow: $dropbar-bottom-box-shadow; }
811
+ @mixin hook-dropbar-left(){ box-shadow: $dropbar-left-box-shadow; }
812
+ @mixin hook-dropbar-right(){ box-shadow: $dropbar-right-box-shadow; }
813
+ @mixin hook-dropbar-misc(){}
808
814
  @mixin hook-dropdown(){ box-shadow: $dropdown-box-shadow; }
809
- @mixin hook-dropdown-stretch(){
810
- box-shadow: none;
811
- background: $dropdown-stretch-background;
812
- }
813
815
  @mixin hook-dropdown-nav(){ font-size: $dropdown-nav-font-size; }
814
816
  @mixin hook-dropdown-nav-item(){}
815
817
  @mixin hook-dropdown-nav-item-hover(){}
@@ -1269,17 +1271,6 @@
1269
1271
  }
1270
1272
  @mixin hook-inverse-component-nav(){
1271
1273
 
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
1274
  //
1284
1275
  // Default
1285
1276
  //
@@ -1350,13 +1341,63 @@
1350
1341
 
1351
1342
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: $inverse-nav-primary-sublist-item-active-color; }
1352
1343
 
1344
+ //
1345
+ // Secondary
1346
+ //
1347
+
1348
+ .uk-nav-secondary > li > a {
1349
+ color: $inverse-nav-secondary-item-color;
1350
+ @if(mixin-exists(hook-inverse-nav-secondary-item)) {@include hook-inverse-nav-secondary-item();}
1351
+ }
1352
+
1353
+ .uk-nav-secondary > li > a:hover {
1354
+ color: $inverse-nav-secondary-item-hover-color;
1355
+ @if(mixin-exists(hook-inverse-nav-secondary-item-hover)) {@include hook-inverse-nav-secondary-item-hover();}
1356
+ }
1357
+
1358
+ .uk-nav-secondary > li.uk-active > a {
1359
+ color: $inverse-nav-secondary-item-active-color;
1360
+ @if(mixin-exists(hook-inverse-nav-secondary-item-active)) {@include hook-inverse-nav-secondary-item-active();}
1361
+ }
1362
+
1363
+ .uk-nav-secondary .uk-nav-subtitle {
1364
+ color: $inverse-nav-secondary-subtitle-color;
1365
+ @if(mixin-exists(hook-inverse-nav-secondary-subtitle)) {@include hook-inverse-nav-secondary-subtitle();}
1366
+ }
1367
+
1368
+ .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
1369
+ color: $inverse-nav-secondary-subtitle-hover-color;
1370
+ @if(mixin-exists(hook-inverse-nav-secondary-subtitle-hover)) {@include hook-inverse-nav-secondary-subtitle-hover();}
1371
+ }
1372
+
1373
+ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
1374
+ color: $inverse-nav-secondary-subtitle-active-color;
1375
+ @if(mixin-exists(hook-inverse-nav-secondary-subtitle-active)) {@include hook-inverse-nav-secondary-subtitle-active();}
1376
+ }
1377
+
1378
+ .uk-nav-secondary .uk-nav-header {
1379
+ color: $inverse-nav-secondary-header-color;
1380
+ @if(mixin-exists(hook-inverse-nav-secondary-header)) {@include hook-inverse-nav-secondary-header();}
1381
+ }
1382
+
1383
+ .uk-nav-secondary .uk-nav-divider {
1384
+ border-top-color: $inverse-nav-secondary-divider-border;
1385
+ @if(mixin-exists(hook-inverse-nav-secondary-divider)) {@include hook-inverse-nav-secondary-divider();}
1386
+ }
1387
+
1388
+ .uk-nav-secondary .uk-nav-sub a { color: $inverse-nav-secondary-sublist-item-color; }
1389
+
1390
+ .uk-nav-secondary .uk-nav-sub a:hover { color: $inverse-nav-secondary-sublist-item-hover-color; }
1391
+
1392
+ .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $inverse-nav-secondary-sublist-item-active-color; }
1393
+
1353
1394
  //
1354
1395
  // Dividers
1355
1396
  //
1356
1397
 
1357
1398
  .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
1358
1399
  border-top-color: $inverse-nav-dividers-border;
1359
- @if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
1400
+ @if(mixin-exists(hook-inverse-nav-dividers)) {@include hook-inverse-nav-dividers();}
1360
1401
  }
1361
1402
 
1362
1403
  }
@@ -1387,18 +1428,6 @@
1387
1428
  @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
1388
1429
  }
1389
1430
 
1390
- //
1391
- // Parent icon modifier
1392
- //
1393
-
1394
- .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
1395
- @include svg-fill($internal-navbar-parent-close-image, "#000", $inverse-navbar-parent-icon-color);
1396
- @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
1397
- }
1398
-
1399
- .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
1400
- .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after { @include svg-fill($internal-navbar-parent-open-image, "#000", $inverse-navbar-parent-icon-color); }
1401
-
1402
1431
  //
1403
1432
  // Item
1404
1433
  //
@@ -1591,7 +1620,8 @@
1591
1620
  @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
1592
1621
  }
1593
1622
 
1594
- .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
1623
+ .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
1624
+ .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
1595
1625
  .uk-logo-inverse { display: block; }
1596
1626
 
1597
1627
  }
@@ -1728,7 +1758,6 @@
1728
1758
  @mixin hook-modal-close-full-hover(){}
1729
1759
  @mixin hook-modal-misc(){}
1730
1760
  @mixin hook-nav-sub(){}
1731
- @mixin hook-nav-parent-icon(){}
1732
1761
  @mixin hook-nav-header(){}
1733
1762
  @mixin hook-nav-divider(){}
1734
1763
  @mixin hook-nav-default(){}
@@ -1745,9 +1774,19 @@
1745
1774
  @mixin hook-nav-primary-subtitle(){}
1746
1775
  @mixin hook-nav-primary-header(){}
1747
1776
  @mixin hook-nav-primary-divider(){}
1777
+ @mixin hook-nav-secondary(){
1778
+ > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) { margin-top: $nav-background-margin-top; }
1779
+ }
1780
+ @mixin hook-nav-secondary-item(){ padding: $nav-background-item-padding-vertical $nav-background-item-padding-horizontal; }
1781
+ @mixin hook-nav-secondary-item-hover(){ background-color: $nav-background-item-hover-background; }
1782
+ @mixin hook-nav-secondary-item-active(){ background-color: $nav-background-item-active-background; }
1783
+ @mixin hook-nav-secondary-subtitle(){}
1784
+ @mixin hook-nav-secondary-subtitle-hover(){}
1785
+ @mixin hook-nav-secondary-subtitle-active(){}
1786
+ @mixin hook-nav-secondary-header(){}
1787
+ @mixin hook-nav-secondary-divider(){}
1748
1788
  @mixin hook-nav-dividers(){}
1749
1789
  @mixin hook-nav-misc(){}
1750
- @mixin hook-inverse-nav-parent-icon(){}
1751
1790
  @mixin hook-inverse-nav-default-item(){}
1752
1791
  @mixin hook-inverse-nav-default-item-hover(){}
1753
1792
  @mixin hook-inverse-nav-default-item-active(){}
@@ -1758,6 +1797,15 @@
1758
1797
  @mixin hook-inverse-nav-primary-item-active(){}
1759
1798
  @mixin hook-inverse-nav-primary-header(){}
1760
1799
  @mixin hook-inverse-nav-primary-divider(){}
1800
+ @mixin hook-inverse-nav-secondary-item(){}
1801
+ @mixin hook-inverse-nav-secondary-item-hover(){ background-color: $inverse-nav-background-item-hover-background; }
1802
+ @mixin hook-inverse-nav-secondary-item-active(){ background-color: $inverse-nav-background-item-active-background; }
1803
+ @mixin hook-inverse-nav-secondary-subtitle(){}
1804
+ @mixin hook-inverse-nav-secondary-subtitle-hover(){}
1805
+ @mixin hook-inverse-nav-secondary-subtitle-active(){}
1806
+ @mixin hook-inverse-nav-secondary-header(){}
1807
+ @mixin hook-inverse-nav-secondary-divider(){}
1808
+ @mixin hook-inverse-nav-dividers(){}
1761
1809
  @mixin hook-navbar(){}
1762
1810
  @mixin hook-navbar-container(){}
1763
1811
  @mixin hook-navbar-nav-item(){
@@ -1778,8 +1826,9 @@
1778
1826
  @mixin hook-navbar-transparent(){}
1779
1827
  @mixin hook-navbar-sticky(){}
1780
1828
  @mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
1781
- @mixin hook-navbar-dropdown-stretch(){ box-shadow: none; }
1829
+ @mixin hook-navbar-dropdown-large(){}
1782
1830
  @mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
1831
+ @mixin hook-navbar-dropdown-dropbar-large(){}
1783
1832
  @mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
1784
1833
  @mixin hook-navbar-dropdown-nav-item(){}
1785
1834
  @mixin hook-navbar-dropdown-nav-item-hover(){}
@@ -1787,35 +1836,8 @@
1787
1836
  @mixin hook-navbar-dropdown-nav-subtitle(){}
1788
1837
  @mixin hook-navbar-dropdown-nav-header(){}
1789
1838
  @mixin hook-navbar-dropdown-nav-divider(){}
1790
- @mixin hook-navbar-dropbar(){ box-shadow: $navbar-dropbar-box-shadow; }
1791
- @mixin hook-navbar-misc(){
1792
-
1793
- /*
1794
- * Grid Divider
1795
- */
1796
-
1797
- .uk-navbar-dropdown-grid > * { position: relative; }
1798
-
1799
- .uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
1800
- content: "";
1801
- position: absolute;
1802
- top: 0;
1803
- bottom: 0;
1804
- left: ($navbar-dropdown-grid-gutter-horizontal * 0.5);
1805
- border-left: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;
1806
- }
1807
-
1808
- /* Vertical */
1809
- .uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before {
1810
- content: "";
1811
- position: absolute;
1812
- top: -($navbar-dropdown-grid-gutter-vertical * 0.5);
1813
- left: $navbar-dropdown-grid-gutter-horizontal;
1814
- right: 0;
1815
- border-top: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;
1816
- }
1817
-
1818
- }
1839
+ @mixin hook-navbar-dropbar(){}
1840
+ @mixin hook-navbar-misc(){}
1819
1841
  @mixin hook-inverse-navbar-nav-item(){}
1820
1842
  @mixin hook-inverse-navbar-nav-item-hover(){}
1821
1843
  @mixin hook-inverse-navbar-nav-item-onclick(){}
@@ -580,8 +580,13 @@
580
580
 
581
581
  }
582
582
  @mixin hook-drop-misc(){}
583
+ @mixin hook-dropbar(){}
584
+ @mixin hook-dropbar-top(){}
585
+ @mixin hook-dropbar-bottom(){}
586
+ @mixin hook-dropbar-left(){}
587
+ @mixin hook-dropbar-right(){}
588
+ @mixin hook-dropbar-misc(){}
583
589
  @mixin hook-dropdown(){}
584
- @mixin hook-dropdown-stretch(){}
585
590
  @mixin hook-dropdown-nav(){}
586
591
  @mixin hook-dropdown-nav-item(){}
587
592
  @mixin hook-dropdown-nav-item-hover(){}
@@ -1020,17 +1025,6 @@
1020
1025
  }
1021
1026
  @mixin hook-inverse-component-nav(){
1022
1027
 
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
1028
  //
1035
1029
  // Default
1036
1030
  //
@@ -1101,13 +1095,63 @@
1101
1095
 
1102
1096
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: $inverse-nav-primary-sublist-item-active-color; }
1103
1097
 
1098
+ //
1099
+ // Secondary
1100
+ //
1101
+
1102
+ .uk-nav-secondary > li > a {
1103
+ color: $inverse-nav-secondary-item-color;
1104
+ @if(mixin-exists(hook-inverse-nav-secondary-item)) {@include hook-inverse-nav-secondary-item();}
1105
+ }
1106
+
1107
+ .uk-nav-secondary > li > a:hover {
1108
+ color: $inverse-nav-secondary-item-hover-color;
1109
+ @if(mixin-exists(hook-inverse-nav-secondary-item-hover)) {@include hook-inverse-nav-secondary-item-hover();}
1110
+ }
1111
+
1112
+ .uk-nav-secondary > li.uk-active > a {
1113
+ color: $inverse-nav-secondary-item-active-color;
1114
+ @if(mixin-exists(hook-inverse-nav-secondary-item-active)) {@include hook-inverse-nav-secondary-item-active();}
1115
+ }
1116
+
1117
+ .uk-nav-secondary .uk-nav-subtitle {
1118
+ color: $inverse-nav-secondary-subtitle-color;
1119
+ @if(mixin-exists(hook-inverse-nav-secondary-subtitle)) {@include hook-inverse-nav-secondary-subtitle();}
1120
+ }
1121
+
1122
+ .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
1123
+ color: $inverse-nav-secondary-subtitle-hover-color;
1124
+ @if(mixin-exists(hook-inverse-nav-secondary-subtitle-hover)) {@include hook-inverse-nav-secondary-subtitle-hover();}
1125
+ }
1126
+
1127
+ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
1128
+ color: $inverse-nav-secondary-subtitle-active-color;
1129
+ @if(mixin-exists(hook-inverse-nav-secondary-subtitle-active)) {@include hook-inverse-nav-secondary-subtitle-active();}
1130
+ }
1131
+
1132
+ .uk-nav-secondary .uk-nav-header {
1133
+ color: $inverse-nav-secondary-header-color;
1134
+ @if(mixin-exists(hook-inverse-nav-secondary-header)) {@include hook-inverse-nav-secondary-header();}
1135
+ }
1136
+
1137
+ .uk-nav-secondary .uk-nav-divider {
1138
+ border-top-color: $inverse-nav-secondary-divider-border;
1139
+ @if(mixin-exists(hook-inverse-nav-secondary-divider)) {@include hook-inverse-nav-secondary-divider();}
1140
+ }
1141
+
1142
+ .uk-nav-secondary .uk-nav-sub a { color: $inverse-nav-secondary-sublist-item-color; }
1143
+
1144
+ .uk-nav-secondary .uk-nav-sub a:hover { color: $inverse-nav-secondary-sublist-item-hover-color; }
1145
+
1146
+ .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $inverse-nav-secondary-sublist-item-active-color; }
1147
+
1104
1148
  //
1105
1149
  // Dividers
1106
1150
  //
1107
1151
 
1108
1152
  .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
1109
1153
  border-top-color: $inverse-nav-dividers-border;
1110
- @if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
1154
+ @if(mixin-exists(hook-inverse-nav-dividers)) {@include hook-inverse-nav-dividers();}
1111
1155
  }
1112
1156
 
1113
1157
  }
@@ -1138,18 +1182,6 @@
1138
1182
  @if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
1139
1183
  }
1140
1184
 
1141
- //
1142
- // Parent icon modifier
1143
- //
1144
-
1145
- .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
1146
- @include svg-fill($internal-navbar-parent-close-image, "#000", $inverse-navbar-parent-icon-color);
1147
- @if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
1148
- }
1149
-
1150
- .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
1151
- .uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after { @include svg-fill($internal-navbar-parent-open-image, "#000", $inverse-navbar-parent-icon-color); }
1152
-
1153
1185
  //
1154
1186
  // Item
1155
1187
  //
@@ -1342,7 +1374,8 @@
1342
1374
  @if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
1343
1375
  }
1344
1376
 
1345
- .uk-logo > :not(.uk-logo-inverse):not(:only-of-type) { display: none; }
1377
+ .uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
1378
+ .uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
1346
1379
  .uk-logo-inverse { display: block; }
1347
1380
 
1348
1381
  }
@@ -1455,7 +1488,6 @@
1455
1488
  @mixin hook-modal-close-full-hover(){}
1456
1489
  @mixin hook-modal-misc(){}
1457
1490
  @mixin hook-nav-sub(){}
1458
- @mixin hook-nav-parent-icon(){}
1459
1491
  @mixin hook-nav-header(){}
1460
1492
  @mixin hook-nav-divider(){}
1461
1493
  @mixin hook-nav-default(){}
@@ -1472,9 +1504,17 @@
1472
1504
  @mixin hook-nav-primary-subtitle(){}
1473
1505
  @mixin hook-nav-primary-header(){}
1474
1506
  @mixin hook-nav-primary-divider(){}
1507
+ @mixin hook-nav-secondary(){}
1508
+ @mixin hook-nav-secondary-item(){}
1509
+ @mixin hook-nav-secondary-item-hover(){}
1510
+ @mixin hook-nav-secondary-item-active(){}
1511
+ @mixin hook-nav-secondary-subtitle(){}
1512
+ @mixin hook-nav-secondary-subtitle-hover(){}
1513
+ @mixin hook-nav-secondary-subtitle-active(){}
1514
+ @mixin hook-nav-secondary-header(){}
1515
+ @mixin hook-nav-secondary-divider(){}
1475
1516
  @mixin hook-nav-dividers(){}
1476
1517
  @mixin hook-nav-misc(){}
1477
- @mixin hook-inverse-nav-parent-icon(){}
1478
1518
  @mixin hook-inverse-nav-default-item(){}
1479
1519
  @mixin hook-inverse-nav-default-item-hover(){}
1480
1520
  @mixin hook-inverse-nav-default-item-active(){}
@@ -1485,6 +1525,15 @@
1485
1525
  @mixin hook-inverse-nav-primary-item-active(){}
1486
1526
  @mixin hook-inverse-nav-primary-header(){}
1487
1527
  @mixin hook-inverse-nav-primary-divider(){}
1528
+ @mixin hook-inverse-nav-secondary-item(){}
1529
+ @mixin hook-inverse-nav-secondary-item-hover(){}
1530
+ @mixin hook-inverse-nav-secondary-item-active(){}
1531
+ @mixin hook-inverse-nav-secondary-subtitle(){}
1532
+ @mixin hook-inverse-nav-secondary-subtitle-hover(){}
1533
+ @mixin hook-inverse-nav-secondary-subtitle-active(){}
1534
+ @mixin hook-inverse-nav-secondary-header(){}
1535
+ @mixin hook-inverse-nav-secondary-divider(){}
1536
+ @mixin hook-inverse-nav-dividers(){}
1488
1537
  @mixin hook-navbar(){}
1489
1538
  @mixin hook-navbar-container(){}
1490
1539
  @mixin hook-navbar-nav-item(){}
@@ -1501,8 +1550,9 @@
1501
1550
  @mixin hook-navbar-transparent(){}
1502
1551
  @mixin hook-navbar-sticky(){}
1503
1552
  @mixin hook-navbar-dropdown(){}
1504
- @mixin hook-navbar-dropdown-stretch(){}
1553
+ @mixin hook-navbar-dropdown-large(){}
1505
1554
  @mixin hook-navbar-dropdown-dropbar(){}
1555
+ @mixin hook-navbar-dropdown-dropbar-large(){}
1506
1556
  @mixin hook-navbar-dropdown-nav(){}
1507
1557
  @mixin hook-navbar-dropdown-nav-item(){}
1508
1558
  @mixin hook-navbar-dropdown-nav-item-hover(){}
@@ -39,6 +39,7 @@
39
39
  @import "accordion.scss";
40
40
  @import "drop.scss";
41
41
  @import "dropdown.scss";
42
+ @import "dropbar.scss";
42
43
  @import "modal.scss";
43
44
  @import "slider.scss";
44
45
  @import "sticky.scss";
@@ -0,0 +1,44 @@
1
+ //
2
+ // Component: Dropbar
3
+ //
4
+ // ========================================================================
5
+
6
+
7
+ // Variables
8
+ // ========================================================================
9
+
10
+ $dropbar-padding-top: 25px !default;
11
+ $dropbar-background: $global-background !default;
12
+
13
+ //
14
+ // New
15
+ //
16
+
17
+ $dropbar-top-box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05) !default;
18
+ $dropbar-bottom-box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05) !default;
19
+ $dropbar-left-box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
20
+ $dropbar-right-box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
21
+
22
+
23
+ // Component
24
+ // ========================================================================
25
+
26
+ // @mixin hook-dropbar(){}
27
+
28
+
29
+ // Direction modifier
30
+ // ========================================================================
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+ // Miscellaneous
42
+ // ========================================================================
43
+
44
+ // @mixin hook-dropbar-misc(){}
@@ -20,8 +20,6 @@ $dropdown-nav-font-size: $global-small-font-size !defaul
20
20
 
21
21
  $dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
22
22
 
23
- $dropdown-stretch-background: $global-muted-background !default;
24
-
25
23
 
26
24
  // Component
27
25
  // ========================================================================
@@ -29,12 +27,6 @@ $dropdown-stretch-background: $global-muted-background !defau
29
27
 
30
28
 
31
29
 
32
- // Stretch modifier
33
- // ========================================================================
34
-
35
-
36
-
37
-
38
30
  // Nav
39
31
  // ========================================================================
40
32
 
@@ -11,17 +11,21 @@ $nav-default-font-size: $global-small-font-size !defaul
11
11
 
12
12
  $nav-default-subtitle-font-size: 12px !default;
13
13
 
14
+ //
15
+ // New
16
+ //
14
17
 
15
- // Sublists
16
- // ========================================================================
17
-
18
- // @mixin hook-nav-sub(){}
18
+ $nav-background-margin-top: 0 !default;
19
+ $nav-background-item-padding-horizontal: 10px !default;
20
+ $nav-background-item-padding-vertical: 10px !default;
21
+ $nav-background-item-hover-background: $global-muted-background !default;
22
+ $nav-background-item-active-background: $global-muted-background !default;
19
23
 
20
24
 
21
- // Parent icon modifier
25
+ // Sublists
22
26
  // ========================================================================
23
27
 
24
- // @mixin hook-nav-parent-icon(){}
28
+ // @mixin hook-nav-sub(){}
25
29
 
26
30
 
27
31
  // Header
@@ -72,6 +76,28 @@ $nav-default-subtitle-font-size: 12px !default;
72
76
  // @mixin hook-nav-primary-divider(){}
73
77
 
74
78
 
79
+ // Secondary style modifier
80
+ // ========================================================================
81
+
82
+
83
+
84
+
85
+
86
+
87
+
88
+
89
+
90
+ // @mixin hook-nav-secondary-subtitle(){}
91
+
92
+ // @mixin hook-nav-secondary-subtitle-hover(){}
93
+
94
+ // @mixin hook-nav-secondary-subtitle-active(){}
95
+
96
+ // @mixin hook-nav-secondary-header(){}
97
+
98
+ // @mixin hook-nav-secondary-divider(){}
99
+
100
+
75
101
  // Style modifier
76
102
  // ========================================================================
77
103
 
@@ -87,7 +113,8 @@ $nav-default-subtitle-font-size: 12px !default;
87
113
  // Inverse
88
114
  // ========================================================================
89
115
 
90
- // @mixin hook-inverse-nav-parent-icon(){}
116
+ $inverse-nav-background-item-hover-background: $inverse-global-muted-background !default;
117
+ $inverse-nav-background-item-active-background: $inverse-global-muted-background !default;
91
118
 
92
119
  // @mixin hook-inverse-nav-default-item(){}
93
120
  // @mixin hook-inverse-nav-default-item-hover(){}
@@ -101,4 +128,13 @@ $nav-default-subtitle-font-size: 12px !default;
101
128
  // @mixin hook-inverse-nav-primary-header(){}
102
129
  // @mixin hook-inverse-nav-primary-divider(){}
103
130
 
131
+ // @mixin hook-inverse-nav-secondary-item(){}
132
+
133
+
134
+ // @mixin hook-inverse-nav-secondary-subtitle(){}
135
+ // @mixin hook-inverse-nav-secondary-subtitle-hover(){}
136
+ // @mixin hook-inverse-nav-secondary-subtitle-active(){}
137
+ // @mixin hook-inverse-nav-secondary-header(){}
138
+ // @mixin hook-inverse-nav-secondary-divider(){}
139
+
104
140
  // @mixin hook-inverse-nav-dividers(){}
@@ -20,7 +20,6 @@ $navbar-item-padding-horizontal: 0 !default;
20
20
  $navbar-dropdown-margin: 15px !default;
21
21
  $navbar-dropdown-padding: 25px !default;
22
22
  $navbar-dropdown-background: $global-background !default;
23
- $navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
24
23
 
25
24
  $navbar-dropdown-nav-subtitle-font-size: 12px !default;
26
25
 
@@ -34,11 +33,6 @@ $navbar-dropdown-nav-font-size: $global-small-font-size !defaul
34
33
 
35
34
  $navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
36
35
 
37
- $navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
38
-
39
- $navbar-dropdown-grid-divider-border-width: $global-border-width !default;
40
- $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;
41
-
42
36
 
43
37
  // Component
44
38
  // ========================================================================
@@ -64,12 +58,6 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
64
58
  // @mixin hook-navbar-nav-item-active(){}
65
59
 
66
60
 
67
- // Parent icon modifier
68
- // ========================================================================
69
-
70
- // @mixin hook-nav-parent-icon(){}
71
-
72
-
73
61
  // Item
74
62
  // ========================================================================
75
63
 
@@ -109,9 +97,11 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
109
97
 
110
98
 
111
99
 
100
+ // @mixin hook-navbar-dropdown-large(){}
112
101
 
113
102
 
114
103
 
104
+ // @mixin hook-navbar-dropdown-dropbar-large(){}
115
105
 
116
106
 
117
107
  // Dropdown nav
@@ -133,13 +123,13 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
133
123
  // Dropbar
134
124
  // ========================================================================
135
125
 
136
-
126
+ // @mixin hook-navbar-dropbar(){}
137
127
 
138
128
 
139
129
  // Miscellaneous
140
130
  // ========================================================================
141
131
 
142
-
132
+ // @mixin hook-navbar-misc(){}
143
133
 
144
134
 
145
135
  // Inverse
@@ -150,8 +140,6 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
150
140
  // @mixin hook-inverse-navbar-nav-item-onclick(){}
151
141
  // @mixin hook-inverse-navbar-nav-item-active(){}
152
142
 
153
- // @mixin hook-inverse-nav-parent-icon(){}
154
-
155
143
  // @mixin hook-inverse-navbar-item(){}
156
144
 
157
145
  // @mixin hook-inverse-navbar-toggle(){}