uikit 3.13.9 → 3.13.11-dev.1296bb84c

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 (102) hide show
  1. package/CHANGELOG.md +41 -1
  2. package/build/build.js +4 -1
  3. package/dist/css/uikit-core-rtl.css +49 -8
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +49 -8
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +49 -6
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +49 -6
  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 +7 -3
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +7 -3
  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 +21 -12
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +21 -12
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +2 -2
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +21 -12
  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 +2 -2
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +62 -30
  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 +433 -314
  38. package/dist/js/uikit-core.min.js +1 -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 +480 -322
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/components/slider.js +1 -1
  45. package/src/js/components/sortable.js +2 -3
  46. package/src/js/components/tooltip.js +38 -3
  47. package/src/js/core/cover.js +27 -14
  48. package/src/js/core/drop.js +40 -17
  49. package/src/js/core/height-match.js +1 -1
  50. package/src/js/core/margin.js +9 -2
  51. package/src/js/core/navbar.js +18 -6
  52. package/src/js/core/scrollspy-nav.js +6 -11
  53. package/src/js/core/sticky.js +58 -22
  54. package/src/js/core/toggle.js +8 -8
  55. package/src/js/mixin/media.js +12 -9
  56. package/src/js/mixin/modal.js +6 -2
  57. package/src/js/mixin/parallax.js +8 -3
  58. package/src/js/mixin/position.js +24 -24
  59. package/src/js/uikit-core.js +0 -4
  60. package/src/js/util/lang.js +34 -42
  61. package/src/js/util/position.js +180 -125
  62. package/src/js/util/viewport.js +42 -22
  63. package/src/less/components/drop.less +0 -1
  64. package/src/less/components/dropdown.less +11 -1
  65. package/src/less/components/icon.less +3 -0
  66. package/src/less/components/nav.less +23 -0
  67. package/src/less/components/navbar.less +26 -2
  68. package/src/less/components/search.less +2 -0
  69. package/src/less/components/sticky.less +8 -3
  70. package/src/less/components/utility.less +1 -0
  71. package/src/less/theme/dropdown.less +4 -0
  72. package/src/less/theme/nav.less +6 -0
  73. package/src/less/theme/navbar.less +4 -0
  74. package/src/less/theme/search.less +6 -0
  75. package/src/scss/components/drop.scss +0 -1
  76. package/src/scss/components/dropdown.scss +11 -1
  77. package/src/scss/components/icon.scss +3 -0
  78. package/src/scss/components/nav.scss +23 -0
  79. package/src/scss/components/navbar.scss +26 -2
  80. package/src/scss/components/search.scss +2 -0
  81. package/src/scss/components/sticky.scss +8 -3
  82. package/src/scss/components/utility.scss +1 -0
  83. package/src/scss/mixins-theme.scss +5 -0
  84. package/src/scss/mixins.scss +5 -0
  85. package/src/scss/theme/dropdown.scss +4 -0
  86. package/src/scss/theme/nav.scss +6 -0
  87. package/src/scss/theme/navbar.scss +4 -0
  88. package/src/scss/theme/search.scss +6 -0
  89. package/src/scss/variables-theme.scss +5 -1
  90. package/src/scss/variables.scss +5 -1
  91. package/tests/alert.html +1 -1
  92. package/tests/animation.html +216 -214
  93. package/tests/drop.html +154 -80
  94. package/tests/dropdown.html +16 -2
  95. package/tests/nav.html +27 -0
  96. package/tests/navbar.html +56 -5
  97. package/tests/parallax.html +5 -5
  98. package/tests/position.html +38 -39
  99. package/tests/sticky-navbar.html +6 -6
  100. package/tests/sticky-parallax.html +29 -13
  101. package/tests/sticky.html +300 -49
  102. package/src/js/core/core.js +0 -25
package/src/js/util/viewport.js CHANGED
@@ -8,8 +8,10 @@ import {
8
8
  isDocument,
9
9
  isUndefined,
10
10
  isWindow,
11
+ toFloat,
11
12
  toNode,
12
13
  toWindow,
14
+ ucfirst,
13
15
  } from './lang';
14
16
 
15
17
  export function isInView(element, offsetTop = 0, offsetLeft = 0) {
@@ -20,7 +22,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
20
22
  return intersectRect(
21
23
  ...scrollParents(element)
22
24
  .map((parent) => {
23
- const { top, left, bottom, right } = offset(getViewport(parent));
25
+ const { top, left, bottom, right } = offsetViewport(parent);
24
26
 
25
27
  return {
26
28
  top: top - offsetTop,
@@ -35,7 +37,7 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
35
37
 
36
38
  export function scrollTop(element, top) {
37
39
  if (isWindow(element) || isDocument(element)) {
38
- element = getScrollingElement(element);
40
+ element = scrollingElement(element);
39
41
  } else {
40
42
  element = toNode(element);
41
43
  }
@@ -52,12 +54,13 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
52
54
  return parents.reduce(
53
55
  (fn, scrollElement, i) => {
54
56
  const { scrollTop, scrollHeight, offsetHeight } = scrollElement;
55
- const maxScroll = scrollHeight - getViewportClientHeight(scrollElement);
56
- const { height: elHeight, top: elTop } = offset(parents[i - 1] || element);
57
+ const viewport = offsetViewport(scrollElement);
58
+ const maxScroll = scrollHeight - viewport.height;
59
+ const { height: elHeight, top: elTop } = parents[i - 1]
60
+ ? offsetViewport(parents[i - 1])
61
+ : offset(element);
57
62
 
58
- let top = Math.ceil(
59
- elTop - offset(getViewport(scrollElement)).top - offsetBy + scrollTop
60
- );
63
+ let top = Math.ceil(elTop - viewport.top - offsetBy + scrollTop);
61
64
 
62
65
  if (offsetBy > 0 && offsetHeight < elHeight + offsetBy) {
63
66
  top += offsetBy;
@@ -115,7 +118,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
115
118
 
116
119
  const [scrollElement] = scrollParents(element, /auto|scroll/, true);
117
120
  const { scrollHeight, scrollTop } = scrollElement;
118
- const viewportHeight = getViewportClientHeight(scrollElement);
121
+ const { height: viewportHeight } = offsetViewport(scrollElement);
119
122
  const maxScroll = scrollHeight - viewportHeight;
120
123
  const elementOffsetTop = offsetPosition(element)[0] - offsetPosition(scrollElement)[0];
121
124
 
@@ -126,7 +129,7 @@ export function scrolledOver(element, startOffset = 0, endOffset = 0) {
126
129
  }
127
130
 
128
131
  export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scrollable = false) {
129
- const scrollEl = getScrollingElement(element);
132
+ const scrollEl = scrollingElement(element);
130
133
 
131
134
  let ancestors = parents(element).reverse();
132
135
  ancestors = ancestors.slice(ancestors.indexOf(scrollEl) + 1);
@@ -141,26 +144,43 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden/, scroll
141
144
  ancestors.filter(
142
145
  (parent) =>
143
146
  overflowRe.test(css(parent, 'overflow')) &&
144
- (!scrollable || parent.scrollHeight > getViewportClientHeight(parent))
147
+ (!scrollable || parent.scrollHeight > offsetViewport(parent).height)
145
148
  )
146
149
  )
147
150
  .reverse();
148
151
  }
149
152
 
150
- export function getViewport(scrollElement) {
151
- return scrollElement === getScrollingElement(scrollElement) ? window : scrollElement;
153
+ export function offsetViewport(scrollElement) {
154
+ let viewportElement = getViewport(scrollElement);
155
+
156
+ // iOS 12 returns <body> as scrollingElement
157
+ if (viewportElement === scrollingElement(viewportElement)) {
158
+ viewportElement = document.documentElement;
159
+ }
160
+
161
+ let rect = offset(viewportElement);
162
+ for (let [prop, dir, start, end] of [
163
+ ['width', 'x', 'left', 'right'],
164
+ ['height', 'y', 'top', 'bottom'],
165
+ ]) {
166
+ if (!isWindow(getViewport(viewportElement))) {
167
+ rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
168
+ }
169
+ rect[prop] = rect[dir] = (
170
+ isWindow(viewportElement) ? scrollingElement(viewportElement) : viewportElement
171
+ )[`client${ucfirst(prop)}`];
172
+ rect[end] = rect[prop] + rect[start];
173
+ }
174
+ return rect;
152
175
  }
153
176
 
154
- // iOS 12 returns <body> as scrollingElement
155
- export function getViewportClientHeight(scrollElement) {
156
- return (
157
- scrollElement === getScrollingElement(scrollElement)
158
- ? document.documentElement
159
- : scrollElement
160
- ).clientHeight;
177
+ function scrollingElement(element) {
178
+ const {
179
+ document: { scrollingElement },
180
+ } = toWindow(element);
181
+ return scrollingElement;
161
182
  }
162
183
 
163
- export function getScrollingElement(element) {
164
- const { document } = toWindow(element);
165
- return document.scrollingElement || document.documentElement;
184
+ function getViewport(scrollElement) {
185
+ return scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
166
186
  }
package/src/less/components/drop.less CHANGED
@@ -45,7 +45,6 @@
45
45
  /* 3 */
46
46
  box-sizing: border-box;
47
47
  width: @drop-width;
48
- max-width: 100vw;
49
48
  }
50
49
 
51
50
  /* Show */
package/src/less/components/dropdown.less CHANGED
@@ -29,6 +29,7 @@
29
29
 
30
30
  @dropdown-nav-item-color: @global-muted-color;
31
31
  @dropdown-nav-item-hover-color: @global-color;
32
+ @dropdown-nav-subtitle-font-size: @global-small-font-size;
32
33
  @dropdown-nav-header-color: @global-emphasis-color;
33
34
  @dropdown-nav-divider-border-width: @global-border-width;
34
35
  @dropdown-nav-divider-border: @global-border;
@@ -74,7 +75,6 @@
74
75
  ========================================================================== */
75
76
 
76
77
  .uk-dropdown-nav {
77
- white-space: nowrap;
78
78
  .hook-dropdown-nav();
79
79
  }
80
80
 
@@ -94,6 +94,15 @@
94
94
  .hook-dropdown-nav-item-hover();
95
95
  }
96
96
 
97
+ /*
98
+ * Subtitle
99
+ */
100
+
101
+ .uk-dropdown-nav .uk-nav-subtitle {
102
+ font-size: @dropdown-nav-subtitle-font-size;
103
+ .hook-dropdown-nav-subtitle();
104
+ }
105
+
97
106
  /*
98
107
  * Header
99
108
  */
@@ -138,6 +147,7 @@
138
147
  .hook-dropdown-nav() {}
139
148
  .hook-dropdown-nav-item() {}
140
149
  .hook-dropdown-nav-item-hover() {}
150
+ .hook-dropdown-nav-subtitle() {}
141
151
  .hook-dropdown-nav-header() {}
142
152
  .hook-dropdown-nav-divider() {}
143
153
  .hook-dropdown-misc() {}
package/src/less/components/icon.less CHANGED
@@ -130,10 +130,13 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
130
130
 
131
131
  /*
132
132
  * Link
133
+ * 1. Allow text within link
133
134
  */
134
135
 
135
136
  .uk-icon-link {
136
137
  color: @icon-link-color;
138
+ /* 1 */
139
+ text-decoration: none !important;
137
140
  .hook-icon-link();
138
141
  }
139
142
 
package/src/less/components/nav.less CHANGED
@@ -5,6 +5,7 @@
5
5
  //
6
6
  // Sub-objects: `uk-nav-header`
7
7
  // `uk-nav-divider`
8
+ // `uk-nav-subtitle`
8
9
  // `uk-nav-sub`
9
10
  //
10
11
  // Modifiers: `uk-nav-parent-icon`
@@ -48,6 +49,7 @@
48
49
  @nav-default-item-color: @global-muted-color;
49
50
  @nav-default-item-hover-color: @global-color;
50
51
  @nav-default-item-active-color: @global-emphasis-color;
52
+ @nav-default-subtitle-font-size: @global-small-font-size;
51
53
  @nav-default-header-color: @global-emphasis-color;
52
54
  @nav-default-divider-border-width: @global-border-width;
53
55
  @nav-default-divider-border: @global-border;
@@ -60,6 +62,7 @@
60
62
  @nav-primary-item-color: @global-muted-color;
61
63
  @nav-primary-item-hover-color: @global-color;
62
64
  @nav-primary-item-active-color: @global-emphasis-color;
65
+ @nav-primary-subtitle-font-size: @global-medium-font-size;
63
66
  @nav-primary-header-color: @global-emphasis-color;
64
67
  @nav-primary-divider-border-width: @global-border-width;
65
68
  @nav-primary-divider-border: @global-border;
@@ -207,6 +210,15 @@ ul.uk-nav-sub {
207
210
  .hook-nav-default-item-active();
208
211
  }
209
212
 
213
+ /*
214
+ * Subtitle
215
+ */
216
+
217
+ .uk-nav-default .uk-nav-subtitle {
218
+ font-size: @nav-default-subtitle-font-size;
219
+ .hook-nav-default-subtitle();
220
+ }
221
+
210
222
  /*
211
223
  * Header
212
224
  */
@@ -266,6 +278,15 @@ ul.uk-nav-sub {
266
278
  .hook-nav-primary-item-active();
267
279
  }
268
280
 
281
+ /*
282
+ * Subtitle
283
+ */
284
+
285
+ .uk-nav-primary .uk-nav-subtitle {
286
+ font-size: @nav-primary-subtitle-font-size;
287
+ .hook-nav-primary-subtitle();
288
+ }
289
+
269
290
  /*
270
291
  * Header
271
292
  */
@@ -340,12 +361,14 @@ ul.uk-nav-sub {
340
361
  .hook-nav-default-item() {}
341
362
  .hook-nav-default-item-hover() {}
342
363
  .hook-nav-default-item-active() {}
364
+ .hook-nav-default-subtitle() {}
343
365
  .hook-nav-default-header() {}
344
366
  .hook-nav-default-divider() {}
345
367
  .hook-nav-primary() {}
346
368
  .hook-nav-primary-item() {}
347
369
  .hook-nav-primary-item-hover() {}
348
370
  .hook-nav-primary-item-active() {}
371
+ .hook-nav-primary-subtitle() {}
349
372
  .hook-nav-primary-header() {}
350
373
  .hook-nav-primary-divider() {}
351
374
  .hook-nav-dividers() {}
package/src/less/components/navbar.less CHANGED
@@ -66,11 +66,12 @@
66
66
 
67
67
  @navbar-dropdown-dropbar-margin-top: 0px;
68
68
  @navbar-dropdown-dropbar-margin-bottom: @navbar-dropdown-dropbar-margin-top;
69
- @navbar-dropdown-dropbar-padding: @navbar-nav-item-padding-horizontal;
69
+ @navbar-dropdown-dropbar-padding-horizontal: @navbar-nav-item-padding-horizontal;
70
70
 
71
71
  @navbar-dropdown-nav-item-color: @global-muted-color;
72
72
  @navbar-dropdown-nav-item-hover-color: @global-color;
73
73
  @navbar-dropdown-nav-item-active-color: @global-emphasis-color;
74
+ @navbar-dropdown-nav-subtitle-font-size: @global-small-font-size;
74
75
  @navbar-dropdown-nav-header-color: @global-emphasis-color;
75
76
  @navbar-dropdown-nav-divider-border-width: @global-border-width;
76
77
  @navbar-dropdown-nav-divider-border: @global-border;
@@ -316,6 +317,17 @@
316
317
  }
317
318
 
318
319
 
320
+ /* Justify modifier
321
+ ========================================================================== */
322
+
323
+ .uk-navbar-justify .uk-navbar-left,
324
+ .uk-navbar-justify .uk-navbar-right,
325
+ .uk-navbar-justify .uk-navbar-nav,
326
+ .uk-navbar-justify .uk-navbar-nav > li, // Nav item
327
+ .uk-navbar-justify .uk-navbar-item, // Content item
328
+ .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
329
+
330
+
319
331
  /* Style modifiers
320
332
  ========================================================================== */
321
333
 
@@ -400,7 +412,9 @@
400
412
  --uk-position-offset: @navbar-dropdown-dropbar-margin-top;
401
413
  /* 2 */
402
414
  margin-bottom: @navbar-dropdown-dropbar-margin-bottom;
403
- padding: @navbar-dropdown-dropbar-padding;
415
+ /* 3 */
416
+ padding-left: @navbar-dropdown-dropbar-padding-horizontal;
417
+ padding-right: @navbar-dropdown-dropbar-padding-horizontal;
404
418
  .hook-navbar-dropdown-dropbar();
405
419
  }
406
420
 
@@ -434,6 +448,15 @@
434
448
  .hook-navbar-dropdown-nav-item-active();
435
449
  }
436
450
 
451
+ /*
452
+ * Subtitle
453
+ */
454
+
455
+ .uk-navbar-dropdown-nav .uk-nav-subtitle {
456
+ font-size: @navbar-dropdown-nav-subtitle-font-size;
457
+ .hook-navbar-dropdown-nav-subtitle();
458
+ }
459
+
437
460
  /*
438
461
  * Header
439
462
  */
@@ -502,6 +525,7 @@
502
525
  .hook-navbar-dropdown-nav-item() {}
503
526
  .hook-navbar-dropdown-nav-item-hover() {}
504
527
  .hook-navbar-dropdown-nav-item-active() {}
528
+ .hook-navbar-dropdown-nav-subtitle() {}
505
529
  .hook-navbar-dropdown-nav-header() {}
506
530
  .hook-navbar-dropdown-nav-divider() {}
507
531
  .hook-navbar-dropbar(){}
package/src/less/components/search.less CHANGED
@@ -154,6 +154,7 @@
154
154
  align-items: center;
155
155
  /* 3 */
156
156
  color: @search-icon-color;
157
+ .hook-search-icon();
157
158
  }
158
159
 
159
160
  /*
@@ -294,6 +295,7 @@
294
295
  .hook-search-misc();
295
296
 
296
297
  .hook-search-input() {}
298
+ .hook-search-icon() {}
297
299
  .hook-search-default-input() {}
298
300
  .hook-search-default-input-focus() {}
299
301
  .hook-search-navbar-input() {}
package/src/less/components/sticky.less CHANGED
@@ -24,10 +24,16 @@
24
24
  ========================================================================== */
25
25
 
26
26
  /*
27
- * Create position context so it's t the same like when fixed.
27
+ * 1. Create position context so it's t the same like when fixed.
28
+ * 2. More robust if padding and border are used and the sticky height is transitioned
28
29
  */
29
30
 
30
- .uk-sticky { position: relative; }
31
+ .uk-sticky {
32
+ /* 1 */
33
+ position: relative;
34
+ /* 2 */
35
+ box-sizing: border-box;
36
+ }
31
37
 
32
38
  /*
33
39
  * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
@@ -35,7 +41,6 @@
35
41
 
36
42
  .uk-sticky-fixed {
37
43
  z-index: @sticky-z-index;
38
- box-sizing: border-box;
39
44
  margin: 0 !important;
40
45
  /* 1 */
41
46
  -webkit-backface-visibility: hidden;
package/src/less/components/utility.less CHANGED
@@ -152,6 +152,7 @@
152
152
  ========================================================================== */
153
153
 
154
154
  .uk-resize { resize: both; }
155
+ .uk-resize-horizontal { resize: horizontal; }
155
156
  .uk-resize-vertical { resize: vertical; }
156
157
 
157
158
 
package/src/less/theme/dropdown.less CHANGED
@@ -10,6 +10,8 @@
10
10
  @dropdown-padding: 25px;
11
11
  @dropdown-background: @global-background;
12
12
 
13
+ @dropdown-nav-subtitle-font-size: 12px;
14
+
13
15
  //
14
16
  // New
15
17
  //
@@ -34,6 +36,8 @@
34
36
 
35
37
  .hook-dropdown-nav-item-hover() {}
36
38
 
39
+ .hook-dropdown-nav-subtitle() {}
40
+
37
41
  .hook-dropdown-nav-header() {}
38
42
 
39
43
  .hook-dropdown-nav-divider() {}
package/src/less/theme/nav.less CHANGED
@@ -7,6 +7,8 @@
7
7
  // Variables
8
8
  // ========================================================================
9
9
 
10
+ @nav-default-subtitle-font-size: 12px;
11
+
10
12
  //
11
13
  // New
12
14
  //
@@ -49,6 +51,8 @@
49
51
 
50
52
  .hook-nav-default-item-active() {}
51
53
 
54
+ .hook-nav-default-subtitle() {}
55
+
52
56
  .hook-nav-default-header() {}
53
57
 
54
58
  .hook-nav-default-divider() {}
@@ -65,6 +69,8 @@
65
69
 
66
70
  .hook-nav-primary-item-active() {}
67
71
 
72
+ .hook-nav-primary-subtitle() {}
73
+
68
74
  .hook-nav-primary-header() {}
69
75
 
70
76
  .hook-nav-primary-divider() {}
package/src/less/theme/navbar.less CHANGED
@@ -14,6 +14,8 @@
14
14
  @navbar-dropdown-background: @global-background;
15
15
  @navbar-dropdown-grid-gutter-horizontal: (@navbar-dropdown-padding * 2);
16
16
 
17
+ @navbar-dropdown-nav-subtitle-font-size: 12px;
18
+
17
19
  //
18
20
  // New
19
21
  //
@@ -109,6 +111,8 @@
109
111
 
110
112
  .hook-navbar-dropdown-nav-item-hover() {}
111
113
 
114
+ .hook-navbar-dropdown-nav-subtitle() {}
115
+
112
116
  .hook-navbar-dropdown-nav-header() {}
113
117
 
114
118
  .hook-navbar-dropdown-nav-divider() {}
package/src/less/theme/search.less CHANGED
@@ -25,6 +25,12 @@
25
25
  .hook-search-input() {}
26
26
 
27
27
 
28
+ // Icon
29
+ // ========================================================================
30
+
31
+ .hook-search-icon() {}
32
+
33
+
28
34
  // Default modifiers
29
35
  // ========================================================================
30
36
 
package/src/scss/components/drop.scss CHANGED
@@ -45,7 +45,6 @@ $drop-width: 300px !default;
45
45
  /* 3 */
46
46
  box-sizing: border-box;
47
47
  width: $drop-width;
48
- max-width: 100vw;
49
48
  }
50
49
 
51
50
  /* Show */
package/src/scss/components/dropdown.scss CHANGED
@@ -29,6 +29,7 @@ $dropdown-color: $global-color !default;
29
29
 
30
30
  $dropdown-nav-item-color: $global-muted-color !default;
31
31
  $dropdown-nav-item-hover-color: $global-color !default;
32
+ $dropdown-nav-subtitle-font-size: $global-small-font-size !default;
32
33
  $dropdown-nav-header-color: $global-emphasis-color !default;
33
34
  $dropdown-nav-divider-border-width: $global-border-width !default;
34
35
  $dropdown-nav-divider-border: $global-border !default;
@@ -74,7 +75,6 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
74
75
  ========================================================================== */
75
76
 
76
77
  .uk-dropdown-nav {
77
- white-space: nowrap;
78
78
  @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();}
79
79
  }
80
80
 
@@ -94,6 +94,15 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
94
94
  @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();}
95
95
  }
96
96
 
97
+ /*
98
+ * Subtitle
99
+ */
100
+
101
+ .uk-dropdown-nav .uk-nav-subtitle {
102
+ font-size: $dropdown-nav-subtitle-font-size;
103
+ @if(mixin-exists(hook-dropdown-nav-subtitle)) {@include hook-dropdown-nav-subtitle();}
104
+ }
105
+
97
106
  /*
98
107
  * Header
99
108
  */
@@ -138,6 +147,7 @@ $dropdown-nav-sublist-item-hover-color: $global-color !default;
138
147
  // @mixin hook-dropdown-nav(){}
139
148
  // @mixin hook-dropdown-nav-item(){}
140
149
  // @mixin hook-dropdown-nav-item-hover(){}
150
+ // @mixin hook-dropdown-nav-subtitle(){}
141
151
  // @mixin hook-dropdown-nav-header(){}
142
152
  // @mixin hook-dropdown-nav-divider(){}
143
153
  // @mixin hook-dropdown-misc(){}
package/src/scss/components/icon.scss CHANGED
@@ -130,10 +130,13 @@ button.uk-icon:not(:disabled) { cursor: pointer; }
130
130
 
131
131
  /*
132
132
  * Link
133
+ * 1. Allow text within link
133
134
  */
134
135
 
135
136
  .uk-icon-link {
136
137
  color: $icon-link-color;
138
+ /* 1 */
139
+ text-decoration: none !important;
137
140
  @if(mixin-exists(hook-icon-link)) {@include hook-icon-link();}
138
141
  }
139
142
 
package/src/scss/components/nav.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  //
6
6
  // Sub-objects: `uk-nav-header`
7
7
  // `uk-nav-divider`
8
+ // `uk-nav-subtitle`
8
9
  // `uk-nav-sub`
9
10
  //
10
11
  // Modifiers: `uk-nav-parent-icon`
@@ -48,6 +49,7 @@ $nav-divider-margin-horizontal: 0 !default;
48
49
  $nav-default-item-color: $global-muted-color !default;
49
50
  $nav-default-item-hover-color: $global-color !default;
50
51
  $nav-default-item-active-color: $global-emphasis-color !default;
52
+ $nav-default-subtitle-font-size: $global-small-font-size !default;
51
53
  $nav-default-header-color: $global-emphasis-color !default;
52
54
  $nav-default-divider-border-width: $global-border-width !default;
53
55
  $nav-default-divider-border: $global-border !default;
@@ -60,6 +62,7 @@ $nav-primary-item-line-height: $global-line-height !default;
60
62
  $nav-primary-item-color: $global-muted-color !default;
61
63
  $nav-primary-item-hover-color: $global-color !default;
62
64
  $nav-primary-item-active-color: $global-emphasis-color !default;
65
+ $nav-primary-subtitle-font-size: $global-medium-font-size !default;
63
66
  $nav-primary-header-color: $global-emphasis-color !default;
64
67
  $nav-primary-divider-border-width: $global-border-width !default;
65
68
  $nav-primary-divider-border: $global-border !default;
@@ -207,6 +210,15 @@ ul.uk-nav-sub {
207
210
  @if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
208
211
  }
209
212
 
213
+ /*
214
+ * Subtitle
215
+ */
216
+
217
+ .uk-nav-default .uk-nav-subtitle {
218
+ font-size: $nav-default-subtitle-font-size;
219
+ @if(mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
220
+ }
221
+
210
222
  /*
211
223
  * Header
212
224
  */
@@ -266,6 +278,15 @@ ul.uk-nav-sub {
266
278
  @if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
267
279
  }
268
280
 
281
+ /*
282
+ * Subtitle
283
+ */
284
+
285
+ .uk-nav-primary .uk-nav-subtitle {
286
+ font-size: $nav-primary-subtitle-font-size;
287
+ @if(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
288
+ }
289
+
269
290
  /*
270
291
  * Header
271
292
  */
@@ -340,12 +361,14 @@ ul.uk-nav-sub {
340
361
  // @mixin hook-nav-default-item(){}
341
362
  // @mixin hook-nav-default-item-hover(){}
342
363
  // @mixin hook-nav-default-item-active(){}
364
+ // @mixin hook-nav-default-subtitle(){}
343
365
  // @mixin hook-nav-default-header(){}
344
366
  // @mixin hook-nav-default-divider(){}
345
367
  // @mixin hook-nav-primary(){}
346
368
  // @mixin hook-nav-primary-item(){}
347
369
  // @mixin hook-nav-primary-item-hover(){}
348
370
  // @mixin hook-nav-primary-item-active(){}
371
+ // @mixin hook-nav-primary-subtitle(){}
349
372
  // @mixin hook-nav-primary-header(){}
350
373
  // @mixin hook-nav-primary-divider(){}
351
374
  // @mixin hook-nav-dividers(){}
package/src/scss/components/navbar.scss CHANGED
@@ -66,11 +66,12 @@ $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-ho
66
66
 
67
67
  $navbar-dropdown-dropbar-margin-top: 0px !default;
68
68
  $navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default;
69
- $navbar-dropdown-dropbar-padding: $navbar-nav-item-padding-horizontal !default;
69
+ $navbar-dropdown-dropbar-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
70
70
 
71
71
  $navbar-dropdown-nav-item-color: $global-muted-color !default;
72
72
  $navbar-dropdown-nav-item-hover-color: $global-color !default;
73
73
  $navbar-dropdown-nav-item-active-color: $global-emphasis-color !default;
74
+ $navbar-dropdown-nav-subtitle-font-size: $global-small-font-size !default;
74
75
  $navbar-dropdown-nav-header-color: $global-emphasis-color !default;
75
76
  $navbar-dropdown-nav-divider-border-width: $global-border-width !default;
76
77
  $navbar-dropdown-nav-divider-border: $global-border !default;
@@ -316,6 +317,17 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
316
317
  }
317
318
 
318
319
 
320
+ /* Justify modifier
321
+ ========================================================================== */
322
+
323
+ .uk-navbar-justify .uk-navbar-left,
324
+ .uk-navbar-justify .uk-navbar-right,
325
+ .uk-navbar-justify .uk-navbar-nav,
326
+ .uk-navbar-justify .uk-navbar-nav > li, // Nav item
327
+ .uk-navbar-justify .uk-navbar-item, // Content item
328
+ .uk-navbar-justify .uk-navbar-toggle { flex-grow: 1; }
329
+
330
+
319
331
  /* Style modifiers
320
332
  ========================================================================== */
321
333
 
@@ -400,7 +412,9 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
400
412
  --uk-position-offset: #{$navbar-dropdown-dropbar-margin-top};
401
413
  /* 2 */
402
414
  margin-bottom: $navbar-dropdown-dropbar-margin-bottom;
403
- padding: $navbar-dropdown-dropbar-padding;
415
+ /* 3 */
416
+ padding-left: $navbar-dropdown-dropbar-padding-horizontal;
417
+ padding-right: $navbar-dropdown-dropbar-padding-horizontal;
404
418
  @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
405
419
  }
406
420
 
@@ -434,6 +448,15 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
434
448
  @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();}
435
449
  }
436
450
 
451
+ /*
452
+ * Subtitle
453
+ */
454
+
455
+ .uk-navbar-dropdown-nav .uk-nav-subtitle {
456
+ font-size: $navbar-dropdown-nav-subtitle-font-size;
457
+ @if(mixin-exists(hook-navbar-dropdown-nav-subtitle)) {@include hook-navbar-dropdown-nav-subtitle();}
458
+ }
459
+
437
460
  /*
438
461
  * Header
439
462
  */
@@ -502,6 +525,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
502
525
  // @mixin hook-navbar-dropdown-nav-item(){}
503
526
  // @mixin hook-navbar-dropdown-nav-item-hover(){}
504
527
  // @mixin hook-navbar-dropdown-nav-item-active(){}
528
+ // @mixin hook-navbar-dropdown-nav-subtitle(){}
505
529
  // @mixin hook-navbar-dropdown-nav-header(){}
506
530
  // @mixin hook-navbar-dropdown-nav-divider(){}
507
531
  // @mixin hook-navbar-dropbar(){}
package/src/scss/components/search.scss CHANGED
@@ -154,6 +154,7 @@ $search-toggle-hover-color: $global-color !default;
154
154
  align-items: center;
155
155
  /* 3 */
156
156
  color: $search-icon-color;
157
+ @if(mixin-exists(hook-search-icon)) {@include hook-search-icon();}
157
158
  }
158
159
 
159
160
  /*
@@ -294,6 +295,7 @@ $search-toggle-hover-color: $global-color !default;
294
295
  @if(mixin-exists(hook-search-misc)) {@include hook-search-misc();}
295
296
 
296
297
  // @mixin hook-search-input(){}
298
+ // @mixin hook-search-icon(){}
297
299
  // @mixin hook-search-default-input(){}
298
300
  // @mixin hook-search-default-input-focus(){}
299
301
  // @mixin hook-search-navbar-input(){}