uikit 3.14.4-dev.838f092aa → 3.14.4-dev.8a8016a73

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 (137) hide show
  1. package/CHANGELOG.md +41 -12
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +380 -101
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +380 -101
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +397 -106
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +397 -106
  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 +7 -5
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +100 -136
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +100 -136
  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 +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 +22 -7
  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 +22 -7
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +3 -3
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +97 -135
  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 +501 -453
  38. package/dist/js/uikit-core.min.js +14 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +554 -489
  42. package/dist/js/uikit.min.js +14 -1
  43. package/package.json +1 -1
  44. package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
  45. package/src/images/components/nav-parent-icon.svg +3 -0
  46. package/src/images/components/navbar-parent-icon.svg +3 -0
  47. package/src/images/components/navbar-toggle-icon.svg +22 -3
  48. package/src/js/api/state.js +2 -2
  49. package/src/js/components/filter.js +5 -3
  50. package/src/js/components/sortable.js +2 -3
  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 +89 -62
  54. package/src/js/core/height-viewport.js +14 -6
  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 +42 -30
  59. package/src/js/core/scroll.js +37 -10
  60. package/src/js/core/sticky.js +8 -9
  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 +10 -7
  64. package/src/js/mixin/position.js +26 -11
  65. package/src/js/mixin/slider-drag.js +20 -8
  66. package/src/js/mixin/style.js +11 -0
  67. package/src/js/mixin/togglable.js +80 -133
  68. package/src/js/util/animation.js +4 -3
  69. package/src/js/util/dimensions.js +6 -6
  70. package/src/js/util/filter.js +3 -7
  71. package/src/js/util/position.js +108 -107
  72. package/src/js/util/style.js +4 -13
  73. package/src/js/util/viewport.js +5 -32
  74. package/src/less/components/_import.less +1 -0
  75. package/src/less/components/drop.less +1 -18
  76. package/src/less/components/dropbar.less +115 -0
  77. package/src/less/components/dropdown.less +16 -16
  78. package/src/less/components/leader.less +1 -1
  79. package/src/less/components/nav.less +240 -63
  80. package/src/less/components/navbar.less +73 -27
  81. package/src/less/components/utility.less +21 -4
  82. package/src/less/theme/_import.less +1 -0
  83. package/src/less/theme/dropbar.less +44 -0
  84. package/src/less/theme/dropdown.less +0 -11
  85. package/src/less/theme/nav.less +43 -9
  86. package/src/less/theme/navbar.less +4 -10
  87. package/src/scss/components/_import.scss +1 -0
  88. package/src/scss/components/drop.scss +1 -18
  89. package/src/scss/components/dropbar.scss +115 -0
  90. package/src/scss/components/dropdown.scss +16 -16
  91. package/src/scss/components/leader.scss +1 -1
  92. package/src/scss/components/nav.scss +189 -51
  93. package/src/scss/components/navbar.scss +61 -27
  94. package/src/scss/components/utility.scss +19 -3
  95. package/src/scss/mixins-theme.scss +93 -25
  96. package/src/scss/mixins.scss +89 -17
  97. package/src/scss/theme/_import.scss +1 -0
  98. package/src/scss/theme/dropbar.scss +44 -0
  99. package/src/scss/theme/dropdown.scss +0 -8
  100. package/src/scss/theme/nav.scss +41 -9
  101. package/src/scss/theme/navbar.scss +4 -7
  102. package/src/scss/variables-theme.scss +69 -17
  103. package/src/scss/variables.scss +58 -13
  104. package/tests/accordion.html +2 -2
  105. package/tests/alert.html +2 -2
  106. package/tests/countdown.html +1 -1
  107. package/tests/drop.html +451 -371
  108. package/tests/dropbar.html +456 -0
  109. package/tests/dropdown.html +26 -401
  110. package/tests/filter.html +9 -12
  111. package/tests/form.html +1 -1
  112. package/tests/index.html +126 -107
  113. package/tests/js/index.js +1 -4
  114. package/tests/lightbox.html +5 -5
  115. package/tests/list.html +8 -8
  116. package/tests/modal.html +13 -13
  117. package/tests/nav.html +117 -75
  118. package/tests/navbar.html +1997 -1138
  119. package/tests/offcanvas.html +17 -21
  120. package/tests/parallax.html +1 -1
  121. package/tests/position.html +18 -16
  122. package/tests/progress.html +9 -9
  123. package/tests/scroll.html +7 -10
  124. package/tests/search.html +5 -5
  125. package/tests/slider.html +6 -5
  126. package/tests/slideshow.html +8 -8
  127. package/tests/sortable.html +6 -8
  128. package/tests/sticky-navbar.html +6 -6
  129. package/tests/sticky.html +8 -8
  130. package/tests/switcher.html +1 -1
  131. package/tests/tab.html +1 -1
  132. package/tests/table.html +7 -7
  133. package/tests/toggle.html +2 -2
  134. package/tests/tooltip.html +1 -1
  135. package/tests/upload.html +11 -11
  136. package/tests/utility.html +19 -0
  137. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/src/js/util/viewport.js CHANGED
@@ -1,18 +1,7 @@
1
1
  import { css } from './style';
2
2
  import { isVisible, parents } from './filter';
3
3
  import { offset, offsetPosition } from './dimensions';
4
- import {
5
- clamp,
6
- findIndex,
7
- intersectRect,
8
- isDocument,
9
- isUndefined,
10
- isWindow,
11
- toFloat,
12
- toNode,
13
- toWindow,
14
- ucfirst,
15
- } from './lang';
4
+ import { clamp, findIndex, intersectRect, isWindow, toFloat, toWindow, ucfirst } from './lang';
16
5
 
17
6
  export function isInView(element, offsetTop = 0, offsetLeft = 0) {
18
7
  if (!isVisible(element)) {
@@ -35,20 +24,6 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
35
24
  );
36
25
  }
37
26
 
38
- export function scrollTop(element, top) {
39
- if (isWindow(element) || isDocument(element)) {
40
- element = scrollingElement(element);
41
- } else {
42
- element = toNode(element);
43
- }
44
-
45
- if (isUndefined(top)) {
46
- return element.scrollTop;
47
- } else {
48
- element.scrollTop = top;
49
- }
50
- }
51
-
52
27
  export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
53
28
  const parents = isVisible(element) ? scrollParents(element) : [];
54
29
  return parents.reduce(
@@ -90,7 +65,7 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
90
65
  (function step() {
91
66
  const percent = ease(clamp((Date.now() - start) / duration));
92
67
 
93
- scrollTop(element, scroll + top * percent);
68
+ element.scrollTop = scroll + top * percent;
94
69
 
95
70
  // scroll more if we have not reached our destination
96
71
  if (percent === 1) {
@@ -153,12 +128,10 @@ export function scrollParents(element, overflowRe = /auto|scroll|hidden|clip/, s
153
128
  export function offsetViewport(scrollElement) {
154
129
  const window = toWindow(scrollElement);
155
130
  const {
156
- document: { body, documentElement },
131
+ document: { documentElement },
157
132
  } = window;
158
133
  let viewportElement =
159
- scrollElement === scrollingElement(scrollElement) || scrollElement === body
160
- ? window
161
- : scrollElement;
134
+ scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
162
135
 
163
136
  const { visualViewport } = window;
164
137
  if (isWindow(viewportElement) && visualViewport) {
@@ -177,7 +150,7 @@ export function offsetViewport(scrollElement) {
177
150
  // iOS 12 returns <body> as scrollingElement
178
151
  viewportElement = documentElement;
179
152
  } else {
180
- rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
153
+ rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
181
154
  }
182
155
  rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
183
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,115 @@
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
+
24
+ /* ========================================================================
25
+ Component: Dropbar
26
+ ========================================================================== */
27
+
28
+ /*
29
+ * 1. Hide by default
30
+ * 2. Set position
31
+ * 3. Style
32
+ */
33
+
34
+ .uk-dropbar {
35
+ --uk-position-offset: @dropbar-margin;
36
+ --uk-position-shift-offset: 0;
37
+ --uk-position-viewport-offset: 0;
38
+ /* 1 */
39
+ display: none;
40
+ /* 2 */
41
+ position: absolute;
42
+ z-index: @dropbar-z-index;
43
+ /* 3 */
44
+ box-sizing: border-box;
45
+ padding: @dropbar-padding-top @dropbar-padding-horizontal @dropbar-padding-bottom @dropbar-padding-horizontal;
46
+ background: @dropbar-background;
47
+ color: @dropbar-color;
48
+ .hook-dropbar();
49
+ }
50
+
51
+ /* Show */
52
+ .uk-dropbar.uk-open { display: block; }
53
+
54
+ /*
55
+ * Remove margin from the last-child
56
+ */
57
+
58
+ .uk-dropbar > :last-child { margin-bottom: 0; }
59
+
60
+ /* Phone landscape and bigger */
61
+ @media (min-width: @breakpoint-small) {
62
+
63
+ .uk-dropbar {
64
+ padding-left: @dropbar-padding-horizontal-s;
65
+ padding-right: @dropbar-padding-horizontal-s;
66
+ }
67
+
68
+ }
69
+
70
+ /* Tablet landscape and bigger */
71
+ @media (min-width: @breakpoint-medium) {
72
+
73
+ .uk-dropbar {
74
+ padding-left: @dropbar-padding-horizontal-m;
75
+ padding-right: @dropbar-padding-horizontal-m;
76
+ }
77
+
78
+ }
79
+
80
+ // Color Mode
81
+ .uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
82
+ .uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
83
+
84
+
85
+ /* Direction modifier
86
+ ========================================================================== */
87
+
88
+ .uk-dropbar-top {
89
+ .hook-dropbar-top();
90
+ }
91
+
92
+ .uk-dropbar-bottom {
93
+ .hook-dropbar-bottom();
94
+ }
95
+
96
+ .uk-dropbar-left {
97
+ .hook-dropbar-left();
98
+ }
99
+
100
+ .uk-dropbar-right {
101
+ .hook-dropbar-right();
102
+ }
103
+
104
+
105
+ // Hooks
106
+ // ========================================================================
107
+
108
+ .hook-dropbar-misc();
109
+
110
+ .hook-dropbar() {}
111
+ .hook-dropbar-top() {}
112
+ .hook-dropbar-bottom() {}
113
+ .hook-dropbar-left() {}
114
+ .hook-dropbar-right() {}
115
+ .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,9 @@
24
24
  @dropdown-padding: 15px;
25
25
  @dropdown-background: @global-muted-background;
26
26
  @dropdown-color: @global-color;
27
+ @dropdown-color-mode: none;
28
+
29
+ @dropdown-large-padding: 40px;
27
30
 
28
31
  @dropdown-nav-item-color: @global-muted-color;
29
32
  @dropdown-nav-item-hover-color: @global-color;
@@ -57,7 +60,6 @@
57
60
  /* 3 */
58
61
  box-sizing: border-box;
59
62
  min-width: @dropdown-min-width;
60
- max-width: 100vw;
61
63
  /* 4 */
62
64
  padding: @dropdown-padding;
63
65
  background: @dropdown-background;
@@ -68,22 +70,21 @@
68
70
  /* Show */
69
71
  .uk-dropdown.uk-open { display: block; }
70
72
 
71
-
72
- /* Stretch modifier
73
- ========================================================================== */
74
-
75
73
  /*
76
- * 1. Allow scrolling
74
+ * Remove margin from the last-child
77
75
  */
78
76
 
79
- .uk-dropdown-stretch {
80
- --uk-position-offset: 0;
81
- --uk-position-viewport-offset: 0;
82
- /* 1 */
83
- overflow-y: auto;
84
- -webkit-overflow-scrolling: touch;
85
- .hook-dropdown-stretch();
86
- }
77
+ .uk-dropdown > :last-child { margin-bottom: 0; }
78
+
79
+ // Color Mode
80
+ .uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
81
+ .uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
82
+
83
+
84
+ /* Size modifier
85
+ ========================================================================== */
86
+
87
+ .uk-dropdown-large { padding: @dropdown-large-padding; }
87
88
 
88
89
 
89
90
  /* Nav
@@ -160,7 +161,6 @@
160
161
  .hook-dropdown-misc();
161
162
 
162
163
  .hook-dropdown() {}
163
- .hook-dropdown-stretch() {}
164
164
  .hook-dropdown-nav() {}
165
165
  .hook-dropdown-nav-item() {}
166
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