uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.6002e7046

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 (136) 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 +527 -486
  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 +530 -487
  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 +115 -114
  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/form.html +1 -1
  111. package/tests/index.html +126 -107
  112. package/tests/js/index.js +1 -4
  113. package/tests/lightbox.html +5 -5
  114. package/tests/list.html +8 -8
  115. package/tests/modal.html +13 -13
  116. package/tests/nav.html +117 -75
  117. package/tests/navbar.html +129 -249
  118. package/tests/offcanvas.html +17 -21
  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 +19 -0
  136. package/src/images/backgrounds/nav-parent-open.svg +0 -3
package/src/js/util/style.js CHANGED
@@ -8,6 +8,7 @@ import {
8
8
  isString,
9
9
  isUndefined,
10
10
  memoize,
11
+ startsWith,
11
12
  toNodes,
12
13
  } from './lang';
13
14
 
@@ -62,18 +63,11 @@ export function css(element, property, value, priority = '') {
62
63
  return elements[0];
63
64
  }
64
65
 
65
- const propertyRe = /^\s*(["'])?(.*?)\1\s*$/;
66
- export function getCssVar(name, element = document.documentElement) {
67
- return css(element, `--uk-${name}`).replace(propertyRe, '$2');
68
- }
69
-
70
66
  // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
71
67
  export const propName = memoize((name) => vendorPropName(name));
72
68
 
73
- const cssPrefixes = ['webkit', 'moz'];
74
-
75
69
  function vendorPropName(name) {
76
- if (name[0] === '-') {
70
+ if (startsWith(name, '--')) {
77
71
  return name;
78
72
  }
79
73
 
@@ -85,11 +79,8 @@ function vendorPropName(name) {
85
79
  return name;
86
80
  }
87
81
 
88
- let i = cssPrefixes.length,
89
- prefixedName;
90
-
91
- while (i--) {
92
- prefixedName = `-${cssPrefixes[i]}-${name}`;
82
+ for (const prefix of ['webkit', 'moz']) {
83
+ const prefixedName = `-${prefix}-${name}`;
93
84
  if (prefixedName in style) {
94
85
  return prefixedName;
95
86
  }
package/src/js/util/viewport.js CHANGED
@@ -128,12 +128,10 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
128
128
  export function offsetViewport(scrollElement) {
129
129
  const window = toWindow(scrollElement);
130
130
  const {
131
- document: { body, documentElement },
131
+ document: { documentElement },
132
132
  } = window;
133
133
  let viewportElement =
134
- scrollElement === scrollingElement(scrollElement) || scrollElement === body
135
- ? window
136
- : scrollElement;
134
+ scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
137
135
 
138
136
  const { visualViewport } = window;
139
137
  if (isWindow(viewportElement) && visualViewport) {
@@ -152,7 +150,7 @@ export function offsetViewport(scrollElement) {
152
150
  // iOS 12 returns <body> as scrollingElement
153
151
  viewportElement = documentElement;
154
152
  } else {
155
- rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
153
+ rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
156
154
  }
157
155
  rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
158
156
  rect[end] = rect[prop] + rect[start];
package/src/less/components/_import.less CHANGED
@@ -40,6 +40,7 @@
40
40
  @import "accordion.less";
41
41
  @import "drop.less"; // After: Card
42
42
  @import "dropdown.less"; // After: Card
43
+ @import "dropbar.less";
43
44
  @import "modal.less"; // After: Close
44
45
  @import "slideshow.less";
45
46
  @import "slider.less";
package/src/less/components/drop.less CHANGED
@@ -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 @@
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
 
package/src/less/components/dropbar.less ADDED
@@ -0,0 +1,126 @@
1
+ // Name: Dropbar
2
+ // Description: Component to create dropbar menus
3
+ //
4
+ // Component: `uk-dropbar`
5
+ //
6
+ // ========================================================================
7
+
8
+
9
+ // Variables
10
+ // ========================================================================
11
+
12
+ @dropbar-margin: 0;
13
+ @dropbar-z-index: @global-z-index + 20;
14
+ @dropbar-padding-top: 15px;
15
+ @dropbar-padding-bottom: @dropbar-padding-top;
16
+ @dropbar-padding-horizontal: 15px;
17
+ @dropbar-padding-horizontal-s: @global-gutter;
18
+ @dropbar-padding-horizontal-m: @global-medium-gutter;
19
+ @dropbar-background: @global-muted-background;
20
+ @dropbar-color: @global-color;
21
+ @dropbar-color-mode: none;
22
+
23
+ @dropbar-large-padding-top: 40px;
24
+ @dropbar-large-padding-bottom: @dropbar-large-padding-top;
25
+
26
+
27
+ /* ========================================================================
28
+ Component: Dropbar
29
+ ========================================================================== */
30
+
31
+ /*
32
+ * 1. Hide by default
33
+ * 2. Set position
34
+ * 3. Style
35
+ */
36
+
37
+ .uk-dropbar {
38
+ --uk-position-offset: @dropbar-margin;
39
+ --uk-position-shift-offset: 0;
40
+ --uk-position-viewport-offset: 0;
41
+ /* 1 */
42
+ display: none;
43
+ /* 2 */
44
+ position: absolute;
45
+ z-index: @dropbar-z-index;
46
+ /* 3 */
47
+ box-sizing: border-box;
48
+ padding: @dropbar-padding-top @dropbar-padding-horizontal @dropbar-padding-bottom @dropbar-padding-horizontal;
49
+ background: @dropbar-background;
50
+ color: @dropbar-color;
51
+ .hook-dropbar();
52
+ }
53
+
54
+ /* Show */
55
+ .uk-dropbar.uk-open { display: block; }
56
+
57
+ /*
58
+ * Remove margin from the last-child
59
+ */
60
+
61
+ .uk-dropbar > :last-child { margin-bottom: 0; }
62
+
63
+ /* Phone landscape and bigger */
64
+ @media (min-width: @breakpoint-small) {
65
+
66
+ .uk-dropbar {
67
+ padding-left: @dropbar-padding-horizontal-s;
68
+ padding-right: @dropbar-padding-horizontal-s;
69
+ }
70
+
71
+ }
72
+
73
+ /* Tablet landscape and bigger */
74
+ @media (min-width: @breakpoint-medium) {
75
+
76
+ .uk-dropbar {
77
+ padding-left: @dropbar-padding-horizontal-m;
78
+ padding-right: @dropbar-padding-horizontal-m;
79
+ }
80
+
81
+ }
82
+
83
+ // Color Mode
84
+ .uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
85
+ .uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
86
+
87
+ /* Size modifier
88
+ ========================================================================== */
89
+
90
+ .uk-dropbar-large {
91
+ padding-top: @dropbar-large-padding-top;
92
+ padding-bottom: @dropbar-large-padding-bottom;
93
+ }
94
+
95
+
96
+ /* Direction modifier
97
+ ========================================================================== */
98
+
99
+ .uk-dropbar-top {
100
+ .hook-dropbar-top();
101
+ }
102
+
103
+ .uk-dropbar-bottom {
104
+ .hook-dropbar-bottom();
105
+ }
106
+
107
+ .uk-dropbar-left {
108
+ .hook-dropbar-left();
109
+ }
110
+
111
+ .uk-dropbar-right {
112
+ .hook-dropbar-right();
113
+ }
114
+
115
+
116
+ // Hooks
117
+ // ========================================================================
118
+
119
+ .hook-dropbar-misc();
120
+
121
+ .hook-dropbar() {}
122
+ .hook-dropbar-top() {}
123
+ .hook-dropbar-bottom() {}
124
+ .hook-dropbar-left() {}
125
+ .hook-dropbar-right() {}
126
+ .hook-dropbar-misc() {}
package/src/less/components/dropdown.less CHANGED
@@ -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;
@@ -70,28 +70,21 @@
70
70
  /* Show */
71
71
  .uk-dropdown.uk-open { display: block; }
72
72
 
73
+ /*
74
+ * Remove margin from the last-child
75
+ */
73
76
 
74
- /* Size modifier
75
- ========================================================================== */
77
+ .uk-dropdown > :last-child { margin-bottom: 0; }
76
78
 
77
- .uk-dropdown-large { padding: @dropdown-large-padding; }
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) {}
78
82
 
79
83
 
80
- /* Stretch modifier
84
+ /* Size modifier
81
85
  ========================================================================== */
82
86
 
83
- /*
84
- * 1. Allow scrolling
85
- */
86
-
87
- .uk-dropdown-stretch {
88
- --uk-position-offset: 0;
89
- --uk-position-viewport-offset: 0;
90
- /* 1 */
91
- overflow-y: auto;
92
- -webkit-overflow-scrolling: touch;
93
- .hook-dropdown-stretch();
94
- }
87
+ .uk-dropdown-large { padding: @dropdown-large-padding; }
95
88
 
96
89
 
97
90
  /* Nav
@@ -168,7 +161,6 @@
168
161
  .hook-dropdown-misc();
169
162
 
170
163
  .hook-dropdown() {}
171
- .hook-dropdown-stretch() {}
172
164
  .hook-dropdown-nav() {}
173
165
  .hook-dropdown-nav-item() {}
174
166
  .hook-dropdown-nav-item-hover() {}
package/src/less/components/leader.less CHANGED
@@ -49,7 +49,7 @@
49
49
  * Pass fill character to JS
50
50
  */
51
51
 
52
- :root { --uk-leader-fill-content: '@{leader-fill-content}'; }
52
+ :root { --uk-leader-fill-content: @leader-fill-content; }
53
53
 
54
54
 
55
55
  // Hooks
package/src/less/components/nav.less CHANGED
@@ -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,13 +74,28 @@
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
 
83
- @internal-nav-parent-close-image: "../../images/backgrounds/nav-parent-close.svg";
84
- @internal-nav-parent-open-image: "../../images/backgrounds/nav-parent-open.svg";
85
-
86
99
 
87
100
  /* ========================================================================
88
101
  Component: Nav
@@ -149,21 +162,12 @@ ul.uk-nav-sub {
149
162
  .uk-nav-sub a { padding: @nav-sublist-item-padding-vertical 0; }
150
163
 
151
164
 
152
- /* Parent icon modifier
165
+ /* Parent icon
153
166
  ========================================================================== */
154
167
 
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
- .svg-fill(@internal-nav-parent-close-image, "#000", @nav-parent-icon-color);
161
- background-repeat: no-repeat;
162
- background-position: 50% 50%;
163
- .hook-nav-parent-icon();
164
- }
168
+ .uk-nav-parent-icon { margin-left: auto; }
165
169
 
166
- .uk-nav-parent-icon > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @nav-parent-icon-color); }
170
+ .uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon { transform: rotate(180deg); }
167
171
 
168
172
 
169
173
  /* Header
@@ -334,6 +338,93 @@ ul.uk-nav-sub {
334
338
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: @nav-primary-sublist-item-active-color; }
335
339
 
336
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
+
337
428
  /* Alignment modifier
338
429
  ========================================================================== */
339
430
 
@@ -351,13 +442,18 @@ ul.uk-nav-sub {
351
442
  .uk-nav-center .uk-nav-sub,
352
443
  .uk-nav-center .uk-nav-sub ul { padding-left: 0; }
353
444
 
354
- /* Parent icon modifier */
355
- .uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { margin-left: 0; }
445
+ /* Parent icon */
446
+ .uk-nav-center .uk-nav-parent-icon { margin-left: @nav-parent-icon-margin-left; }
356
447
 
357
448
 
358
449
  /* Style modifier
359
450
  ========================================================================== */
360
451
 
452
+ /*
453
+ * Divider
454
+ * Naming is in plural to prevent conflicts with divider sub object.
455
+ */
456
+
361
457
  .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
362
458
  margin-top: @nav-dividers-margin-top;
363
459
  padding-top: @nav-dividers-margin-top;
@@ -372,7 +468,6 @@ ul.uk-nav-sub {
372
468
  .hook-nav-misc();
373
469
 
374
470
  .hook-nav-sub() {}
375
- .hook-nav-parent-icon() {}
376
471
  .hook-nav-header() {}
377
472
  .hook-nav-divider() {}
378
473
  .hook-nav-default() {}
@@ -389,6 +484,15 @@ ul.uk-nav-sub {
389
484
  .hook-nav-primary-subtitle() {}
390
485
  .hook-nav-primary-header() {}
391
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() {}
392
496
  .hook-nav-dividers() {}
393
497
  .hook-nav-misc() {}
394
498
 
@@ -396,40 +500,40 @@ ul.uk-nav-sub {
396
500
  // Inverse
397
501
  // ========================================================================
398
502
 
399
- @inverse-nav-parent-icon-color: @inverse-global-color;
400
- @inverse-nav-default-item-color: @inverse-global-muted-color;
401
- @inverse-nav-default-item-hover-color: @inverse-global-color;
402
- @inverse-nav-default-item-active-color: @inverse-global-emphasis-color;
403
- @inverse-nav-default-header-color: @inverse-global-emphasis-color;
404
- @inverse-nav-default-divider-border: @inverse-global-border;
405
- @inverse-nav-default-sublist-item-color: @inverse-global-muted-color;
406
- @inverse-nav-default-sublist-item-hover-color: @inverse-global-color;
407
- @inverse-nav-default-sublist-item-active-color: @inverse-global-emphasis-color;
408
-
409
- @inverse-nav-primary-item-color: @inverse-global-muted-color;
410
- @inverse-nav-primary-item-hover-color: @inverse-global-color;
411
- @inverse-nav-primary-item-active-color: @inverse-global-emphasis-color;
412
- @inverse-nav-primary-header-color: @inverse-global-emphasis-color;
413
- @inverse-nav-primary-divider-border: @inverse-global-border;
414
- @inverse-nav-primary-sublist-item-color: @inverse-global-muted-color;
415
- @inverse-nav-primary-sublist-item-hover-color: @inverse-global-color;
416
- @inverse-nav-primary-sublist-item-active-color: @inverse-global-emphasis-color;
417
-
418
- @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;
419
534
 
420
535
  .hook-inverse() {
421
536
 
422
- //
423
- // Parent icon modifier
424
- //
425
-
426
- .uk-nav-parent-icon > .uk-parent > a::after {
427
- .svg-fill(@internal-nav-parent-close-image, "#000", @inverse-nav-parent-icon-color);
428
- .hook-inverse-nav-parent-icon();
429
- }
430
-
431
- .uk-nav-parent-icon > .uk-parent.uk-open > a::after { .svg-fill(@internal-nav-parent-open-image, "#000", @inverse-nav-parent-icon-color); }
432
-
433
537
  //
434
538
  // Default
435
539
  //
@@ -500,18 +604,67 @@ ul.uk-nav-sub {
500
604
 
501
605
  .uk-nav-primary .uk-nav-sub li.uk-active > a { color: @inverse-nav-primary-sublist-item-active-color; }
502
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
+
503
657
  //
504
658
  // Dividers
505
659
  //
506
660
 
507
661
  .uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
508
662
  border-top-color: @inverse-nav-dividers-border;
509
- .hook-nav-dividers();
663
+ .hook-inverse-nav-dividers();
510
664
  }
511
665
 
512
666
  }
513
667
 
514
- .hook-inverse-nav-parent-icon() {}
515
668
  .hook-inverse-nav-default-item() {}
516
669
  .hook-inverse-nav-default-item-hover() {}
517
670
  .hook-inverse-nav-default-item-active() {}
@@ -522,4 +675,12 @@ ul.uk-nav-sub {
522
675
  .hook-inverse-nav-primary-item-active() {}
523
676
  .hook-inverse-nav-primary-header() {}
524
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() {}
525
686
  .hook-inverse-nav-dividers() {}