uikit 3.14.2-dev.731537913 → 3.14.2-dev.7f1f28069

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 (53) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/build/util.js +8 -2
  3. package/dist/css/uikit-core-rtl.css +7 -1
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +7 -1
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +10 -14
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +10 -14
  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 +1 -1
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +1 -1
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +1 -1
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +1 -1
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +1 -1
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +1 -1
  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 +8 -6
  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 +8 -6
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +11 -11
  44. package/src/js/core/toggle.js +1 -1
  45. package/src/js/util/viewport.js +5 -3
  46. package/src/less/components/navbar.less +14 -2
  47. package/src/less/theme/navbar.less +3 -10
  48. package/src/scss/components/navbar.scss +14 -2
  49. package/src/scss/mixins-theme.scss +0 -10
  50. package/src/scss/theme/navbar.scss +3 -0
  51. package/src/scss/variables-theme.scss +3 -1
  52. package/src/scss/variables.scss +2 -0
  53. package/tests/navbar.html +15 -59
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "uikit",
3
3
  "title": "UIkit",
4
4
  "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
5
- "version": "3.14.2-dev.731537913",
5
+ "version": "3.14.2-dev.7f1f28069",
6
6
  "main": "dist/js/uikit.js",
7
7
  "style": "dist/css/uikit.css",
8
8
  "sideEffects": [
@@ -34,32 +34,32 @@
34
34
  },
35
35
  "homepage": "https://getuikit.com",
36
36
  "devDependencies": {
37
- "@babel/core": "^7.17.8",
38
- "@babel/preset-env": "^7.16.4",
37
+ "@babel/core": "^7.17.10",
38
+ "@babel/preset-env": "^7.17.10",
39
39
  "@rollup/plugin-alias": "^3.1.9",
40
40
  "@rollup/plugin-babel": "^5.3.1",
41
41
  "@rollup/plugin-replace": "^4.0.0",
42
- "archiver": "^5.3.0",
42
+ "archiver": "^5.3.1",
43
43
  "camelcase": "^6.3.0",
44
44
  "clean-css": "^5.3.0",
45
45
  "dateformat": "^5.0.3",
46
- "esbuild": "^0.14.32",
47
- "eslint": "^8.12.0",
46
+ "esbuild": "^0.14.38",
47
+ "eslint": "^8.15.0",
48
48
  "eslint-config-prettier": "^8.5.0",
49
- "fs-extra": "^10.0.1",
50
- "glob": "^7.2.0",
51
- "inquirer": "^8.2.2",
49
+ "fs-extra": "^10.1.0",
50
+ "glob": "^8.0.1",
51
+ "inquirer": "^8.2.4",
52
52
  "less": "^4.1.2",
53
53
  "minimist": "^1.2.6",
54
54
  "number-precision": "^1.5.2",
55
55
  "p-limit": "^4.0.0",
56
56
  "prettier": "^2.6.2",
57
- "rollup": "^2.70.1",
57
+ "rollup": "^2.72.1",
58
58
  "rollup-plugin-esbuild": "^4.9.1",
59
59
  "rollup-plugin-html": "^0.2.1",
60
60
  "rollup-plugin-modify": "^3.0.0",
61
61
  "rtlcss": "^3.5.0",
62
- "semver": "^7.3.2",
62
+ "semver": "^7.3.7",
63
63
  "svgo": "^2.8.0",
64
64
  "watch-run": "^1.2.5"
65
65
  }
@@ -157,7 +157,7 @@ export default {
157
157
  name: 'click',
158
158
 
159
159
  filter() {
160
- return includes(['click', 'hover'], this.mode);
160
+ return ['click', 'hover'].some((mode) => includes(this.mode, mode));
161
161
  },
162
162
 
163
163
  handler(e) {
@@ -158,11 +158,13 @@ export function offsetViewport(scrollElement) {
158
158
  ['width', 'x', 'left', 'right'],
159
159
  ['height', 'y', 'top', 'bottom'],
160
160
  ]) {
161
- if (!isWindow(getViewport(viewportElement))) {
161
+ if (!isWindow(viewportElement)) {
162
162
  rect[start] += toFloat(css(viewportElement, `border${ucfirst(start)}Width`));
163
+ } else {
164
+ // iOS 12 returns <body> as scrollingElement
165
+ viewportElement = viewportElement.document.documentElement;
163
166
  }
164
- rect[prop] = rect[dir] =
165
- viewportElement[(isWindow(viewportElement) ? 'inner' : 'client') + ucfirst(prop)];
167
+ rect[prop] = rect[dir] = viewportElement[`client${ucfirst(prop)}`];
166
168
  rect[end] = rect[prop] + rect[start];
167
169
  }
168
170
  return rect;
@@ -40,6 +40,7 @@
40
40
  @navbar-color-mode: none;
41
41
 
42
42
  @navbar-nav-item-height: 80px;
43
+ @navbar-nav-item-gap: 0;
43
44
  @navbar-nav-item-padding-horizontal: 15px;
44
45
  @navbar-nav-item-color: @global-muted-color;
45
46
  @navbar-nav-item-font-size: @global-font-size;
@@ -48,6 +49,7 @@
48
49
  @navbar-nav-item-onclick-color: @global-emphasis-color;
49
50
  @navbar-nav-item-active-color: @global-emphasis-color;
50
51
 
52
+ @navbar-item-padding-horizontal: @navbar-nav-item-padding-horizontal;
51
53
  @navbar-item-color: @global-color;
52
54
 
53
55
  @navbar-toggle-color: @global-muted-color;
@@ -93,6 +95,7 @@
93
95
 
94
96
  .uk-navbar {
95
97
  display: flex;
98
+ --uk-navbar-nav-item-gap: @navbar-nav-item-gap;
96
99
  /* 1 */
97
100
  position: relative;
98
101
  .hook-navbar();
@@ -127,6 +130,7 @@
127
130
  .uk-navbar-center-left > *,
128
131
  .uk-navbar-center-right > * {
129
132
  display: flex;
133
+ gap: var(--uk-navbar-nav-item-gap);
130
134
  /* 1 */
131
135
  align-items: center;
132
136
  }
@@ -168,8 +172,14 @@
168
172
  top: 0;
169
173
  }
170
174
 
171
- .uk-navbar-center-left { right: 100%; }
172
- .uk-navbar-center-right { left: 100%; }
175
+ .uk-navbar-center-left {
176
+ right: 100%; // Fallback if gap is 0
177
+ right: ~'calc(100% + var(--uk-navbar-nav-item-gap))';
178
+ }
179
+ .uk-navbar-center-right {
180
+ left: 100%; // Fallback if gap is 0
181
+ left: ~'calc(100% + var(--uk-navbar-nav-item-gap))';
182
+ }
173
183
 
174
184
  [class*='uk-navbar-center-'] {
175
185
  width: max-content;
@@ -186,6 +196,7 @@
186
196
 
187
197
  .uk-navbar-nav {
188
198
  display: flex;
199
+ gap: var(--uk-navbar-nav-item-gap);
189
200
  /* 1 */
190
201
  margin: 0;
191
202
  padding: 0;
@@ -267,6 +278,7 @@
267
278
  ========================================================================== */
268
279
 
269
280
  .uk-navbar-item {
281
+ padding: 0 @navbar-item-padding-horizontal;
270
282
  color: @navbar-item-color;
271
283
  .hook-navbar-item();
272
284
  }
@@ -7,6 +7,9 @@
7
7
  // Variables
8
8
  // ========================================================================
9
9
 
10
+ @navbar-nav-item-gap: 30px;
11
+ @navbar-nav-item-padding-horizontal: 0;
12
+
10
13
  @navbar-nav-item-font-size: @global-small-font-size;
11
14
 
12
15
  @navbar-dropdown-margin: 15px;
@@ -129,16 +132,6 @@
129
132
 
130
133
  .hook-navbar-misc() {
131
134
 
132
- /*
133
- * Navbar
134
- */
135
-
136
- .uk-navbar-container > .uk-container .uk-navbar-left {
137
- margin-left: -@navbar-nav-item-padding-horizontal;
138
- margin-right: -@navbar-nav-item-padding-horizontal;
139
- }
140
- .uk-navbar-container > .uk-container .uk-navbar-right { margin-right: -@navbar-nav-item-padding-horizontal; }
141
-
142
135
  /*
143
136
  * Grid Divider
144
137
  */
@@ -40,6 +40,7 @@ $navbar-background: $global-muted-background !defau
40
40
  $navbar-color-mode: none !default;
41
41
 
42
42
  $navbar-nav-item-height: 80px !default;
43
+ $navbar-nav-item-gap: 0 !default;
43
44
  $navbar-nav-item-padding-horizontal: 15px !default;
44
45
  $navbar-nav-item-color: $global-muted-color !default;
45
46
  $navbar-nav-item-font-size: $global-font-size !default;
@@ -48,6 +49,7 @@ $navbar-nav-item-hover-color: $global-color !default;
48
49
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
49
50
  $navbar-nav-item-active-color: $global-emphasis-color !default;
50
51
 
52
+ $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
51
53
  $navbar-item-color: $global-color !default;
52
54
 
53
55
  $navbar-toggle-color: $global-muted-color !default;
@@ -93,6 +95,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
93
95
 
94
96
  .uk-navbar {
95
97
  display: flex;
98
+ --uk-navbar-nav-item-gap: #{$navbar-nav-item-gap};
96
99
  /* 1 */
97
100
  position: relative;
98
101
  @if(mixin-exists(hook-navbar)) {@include hook-navbar();}
@@ -127,6 +130,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
127
130
  .uk-navbar-center-left > *,
128
131
  .uk-navbar-center-right > * {
129
132
  display: flex;
133
+ gap: var(--uk-navbar-nav-item-gap);
130
134
  /* 1 */
131
135
  align-items: center;
132
136
  }
@@ -168,8 +172,14 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
168
172
  top: 0;
169
173
  }
170
174
 
171
- .uk-navbar-center-left { right: 100%; }
172
- .uk-navbar-center-right { left: 100%; }
175
+ .uk-navbar-center-left {
176
+ right: 100%; // Fallback if gap is 0
177
+ right: unquote('calc(100% + var(--uk-navbar-nav-item-gap))');
178
+ }
179
+ .uk-navbar-center-right {
180
+ left: 100%; // Fallback if gap is 0
181
+ left: unquote('calc(100% + var(--uk-navbar-nav-item-gap))');
182
+ }
173
183
 
174
184
  [class*='uk-navbar-center-'] {
175
185
  width: max-content;
@@ -186,6 +196,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
186
196
 
187
197
  .uk-navbar-nav {
188
198
  display: flex;
199
+ gap: var(--uk-navbar-nav-item-gap);
189
200
  /* 1 */
190
201
  margin: 0;
191
202
  padding: 0;
@@ -267,6 +278,7 @@ $navbar-dropbar-z-index: $global-z-index - 20 !default;
267
278
  ========================================================================== */
268
279
 
269
280
  .uk-navbar-item {
281
+ padding: 0 $navbar-item-padding-horizontal;
270
282
  color: $navbar-item-color;
271
283
  @if(mixin-exists(hook-navbar-item)) {@include hook-navbar-item();}
272
284
  }
@@ -1761,16 +1761,6 @@
1761
1761
  @mixin hook-navbar-dropbar(){ box-shadow: $navbar-dropbar-box-shadow; }
1762
1762
  @mixin hook-navbar-misc(){
1763
1763
 
1764
- /*
1765
- * Navbar
1766
- */
1767
-
1768
- .uk-navbar-container > .uk-container .uk-navbar-left {
1769
- margin-left: (-$navbar-nav-item-padding-horizontal);
1770
- margin-right: (-$navbar-nav-item-padding-horizontal);
1771
- }
1772
- .uk-navbar-container > .uk-container .uk-navbar-right { margin-right: (-$navbar-nav-item-padding-horizontal); }
1773
-
1774
1764
  /*
1775
1765
  * Grid Divider
1776
1766
  */
@@ -7,6 +7,9 @@
7
7
  // Variables
8
8
  // ========================================================================
9
9
 
10
+ $navbar-nav-item-gap: 30px !default;
11
+ $navbar-nav-item-padding-horizontal: 0 !default;
12
+
10
13
  $navbar-nav-item-font-size: $global-small-font-size !default;
11
14
 
12
15
  $navbar-dropdown-margin: 15px !default;
@@ -730,13 +730,15 @@ $inverse-nav-dividers-border: $inverse-global-border !default;
730
730
  $navbar-background: $global-muted-background !default;
731
731
  $navbar-color-mode: none !default;
732
732
  $navbar-nav-item-height: 80px !default;
733
- $navbar-nav-item-padding-horizontal: 15px !default;
733
+ $navbar-nav-item-gap: 30px !default;
734
+ $navbar-nav-item-padding-horizontal: 0 !default;
734
735
  $navbar-nav-item-color: $global-muted-color !default;
735
736
  $navbar-nav-item-font-size: $global-small-font-size !default;
736
737
  $navbar-nav-item-font-family: $global-font-family !default;
737
738
  $navbar-nav-item-hover-color: $global-color !default;
738
739
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
739
740
  $navbar-nav-item-active-color: $global-emphasis-color !default;
741
+ $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
740
742
  $navbar-item-color: $global-color !default;
741
743
  $navbar-toggle-color: $global-muted-color !default;
742
744
  $navbar-toggle-hover-color: $global-color !default;
@@ -728,6 +728,7 @@ $inverse-nav-dividers-border: $inverse-global-border !default;
728
728
  $navbar-background: $global-muted-background !default;
729
729
  $navbar-color-mode: none !default;
730
730
  $navbar-nav-item-height: 80px !default;
731
+ $navbar-nav-item-gap: 0 !default;
731
732
  $navbar-nav-item-padding-horizontal: 15px !default;
732
733
  $navbar-nav-item-color: $global-muted-color !default;
733
734
  $navbar-nav-item-font-size: $global-font-size !default;
@@ -735,6 +736,7 @@ $navbar-nav-item-font-family: $global-font-family !default;
735
736
  $navbar-nav-item-hover-color: $global-color !default;
736
737
  $navbar-nav-item-onclick-color: $global-emphasis-color !default;
737
738
  $navbar-nav-item-active-color: $global-emphasis-color !default;
739
+ $navbar-item-padding-horizontal: $navbar-nav-item-padding-horizontal !default;
738
740
  $navbar-item-color: $global-color !default;
739
741
  $navbar-toggle-color: $global-muted-color !default;
740
742
  $navbar-toggle-hover-color: $global-color !default;
package/tests/navbar.html CHANGED
@@ -1400,33 +1400,25 @@
1400
1400
 
1401
1401
  <nav class="uk-navbar uk-navbar-container uk-margin">
1402
1402
  <div class="uk-navbar-left">
1403
- <div>
1404
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1405
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1406
- </div>
1403
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1404
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1407
1405
  </div>
1408
1406
  <div class="uk-navbar-right">
1409
- <div>
1410
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
1411
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1412
- </div>
1407
+ <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
1408
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1413
1409
  </div>
1414
1410
  </nav>
1415
1411
 
1416
1412
  <nav class="uk-navbar uk-navbar-container uk-margin">
1417
1413
  <div class="uk-navbar-left">
1418
- <div>
1419
- <a class="uk-navbar-toggle" href="#">Menu</a>
1420
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1421
- </div>
1414
+ <a class="uk-navbar-toggle" href="#">Menu</a>
1415
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1422
1416
  </div>
1423
1417
  <div class="uk-navbar-right">
1424
- <div>
1425
- <a class="uk-navbar-toggle" href="#">
1426
- <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
1427
- </a>
1428
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1429
- </div>
1418
+ <a class="uk-navbar-toggle" href="#">
1419
+ <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
1420
+ </a>
1421
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1430
1422
  </div>
1431
1423
  </nav>
1432
1424
 
@@ -1767,8 +1759,6 @@
1767
1759
  <div class="uk-navbar">
1768
1760
  <div class="uk-navbar-left">
1769
1761
 
1770
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1771
-
1772
1762
  <ul class="uk-navbar-nav">
1773
1763
  <li class="uk-active"><a href="#">Active</a></li>
1774
1764
  <li><a href="#">Parent</a></li>
@@ -1818,6 +1808,8 @@
1818
1808
  </ul>
1819
1809
  </div>
1820
1810
 
1811
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1812
+
1821
1813
  </div>
1822
1814
  </div>
1823
1815
  </div>
@@ -1843,19 +1835,7 @@
1843
1835
  </div>
1844
1836
  <div class="uk-navbar-right">
1845
1837
 
1846
- <div class="uk-navbar-item">
1847
- <ul class="uk-grid-small" uk-grid>
1848
- <li>
1849
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1850
- </li>
1851
- <li>
1852
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1853
- </li>
1854
- <li>
1855
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1856
- </li>
1857
- </ul>
1858
- </div>
1838
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1859
1839
 
1860
1840
  </div>
1861
1841
  </div>
@@ -1906,19 +1886,7 @@
1906
1886
  <li><a href="#">Item</a></li>
1907
1887
  </ul>
1908
1888
 
1909
- <div class="uk-navbar-item">
1910
- <ul class="uk-grid-small" uk-grid>
1911
- <li>
1912
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1913
- </li>
1914
- <li>
1915
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1916
- </li>
1917
- <li>
1918
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1919
- </li>
1920
- </ul>
1921
- </div>
1889
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1922
1890
 
1923
1891
  </div>
1924
1892
  </div>
@@ -1945,19 +1913,7 @@
1945
1913
  </div>
1946
1914
  <div class="uk-navbar-right">
1947
1915
 
1948
- <div class="uk-navbar-item">
1949
- <ul class="uk-grid-small" uk-grid>
1950
- <li>
1951
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1952
- </li>
1953
- <li>
1954
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1955
- </li>
1956
- <li>
1957
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1958
- </li>
1959
- </ul>
1960
- </div>
1916
+ <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1961
1917
 
1962
1918
  </div>
1963
1919
  </div>