uikit 3.23.13 → 3.23.14-dev.be820cd99

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 (128) hide show
  1. package/.prettierignore +1 -0
  2. package/CHANGELOG.md +36 -0
  3. package/dist/css/uikit-core-rtl.css +301 -111
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +301 -111
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +305 -111
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +305 -111
  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 +49 -23
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +19 -14
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +19 -14
  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 +2 -2
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +2 -2
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +8 -3
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +2 -2
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +8 -3
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +48 -22
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +3 -3
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +2 -2
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +136 -63
  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 +185 -90
  42. package/dist/js/uikit.min.js +1 -1
  43. package/eslint.config.mjs +1 -1
  44. package/package.json +1 -1
  45. package/src/images/backgrounds/form-checkbox.svg +2 -2
  46. package/src/images/components/navbar-toggle-icon.svg +14 -7
  47. package/src/js/api/options.js +1 -1
  48. package/src/js/components/lightbox-panel.js +6 -4
  49. package/src/js/components/upload.js +1 -3
  50. package/src/js/core/drop.js +3 -8
  51. package/src/js/core/dropnav.js +4 -4
  52. package/src/js/core/img.js +1 -1
  53. package/src/js/core/index.js +1 -0
  54. package/src/js/core/navbar.js +3 -5
  55. package/src/js/core/overflow-fade.js +67 -0
  56. package/src/js/core/scrollspy.js +10 -10
  57. package/src/js/core/sticky.js +18 -16
  58. package/src/js/core/toggle.js +3 -5
  59. package/src/js/core/video.js +36 -10
  60. package/src/js/mixin/internal/animate-fade.js +32 -15
  61. package/src/js/mixin/internal/animate-slide.js +27 -9
  62. package/src/js/mixin/modal.js +3 -4
  63. package/src/js/mixin/slider.js +3 -1
  64. package/src/js/mixin/togglable.js +1 -1
  65. package/src/js/util/animation.js +3 -4
  66. package/src/js/util/await.js +7 -0
  67. package/src/js/util/player.js +1 -3
  68. package/src/js/util/scroll.js +2 -2
  69. package/src/js/util/selector.js +1 -1
  70. package/src/js/util/viewport.js +3 -1
  71. package/src/less/components/base.less +19 -4
  72. package/src/less/components/card.less +40 -1
  73. package/src/less/components/countdown.less +4 -42
  74. package/src/less/components/form.less +87 -67
  75. package/src/less/components/heading.less +0 -84
  76. package/src/less/components/icon.less +44 -0
  77. package/src/less/components/navbar.less +23 -9
  78. package/src/less/components/position.less +1 -1
  79. package/src/less/components/section.less +33 -0
  80. package/src/less/components/subnav.less +1 -1
  81. package/src/less/components/utility.less +45 -0
  82. package/src/less/components/visibility.less +1 -1
  83. package/src/less/components/width.less +0 -5
  84. package/src/less/theme/card.less +13 -0
  85. package/src/less/theme/icon.less +14 -0
  86. package/src/scss/components/base.scss +19 -4
  87. package/src/scss/components/card.scss +35 -1
  88. package/src/scss/components/countdown.scss +2 -40
  89. package/src/scss/components/form.scss +73 -55
  90. package/src/scss/components/heading.scss +0 -83
  91. package/src/scss/components/icon.scss +22 -0
  92. package/src/scss/components/navbar.scss +23 -9
  93. package/src/scss/components/position.scss +1 -1
  94. package/src/scss/components/section.scss +33 -0
  95. package/src/scss/components/subnav.scss +1 -1
  96. package/src/scss/components/utility.scss +45 -0
  97. package/src/scss/components/visibility.scss +1 -1
  98. package/src/scss/components/width.scss +0 -15
  99. package/src/scss/mixins-theme.scss +28 -8
  100. package/src/scss/mixins.scss +25 -8
  101. package/src/scss/variables-theme.scss +27 -30
  102. package/src/scss/variables.scss +25 -30
  103. package/tests/article.html +7 -7
  104. package/tests/base.html +13 -13
  105. package/tests/card.html +9 -1
  106. package/tests/column.html +1 -1
  107. package/tests/countdown.html +595 -8
  108. package/tests/cover.html +7 -13
  109. package/tests/dropbar.html +3 -3
  110. package/tests/dropdown.html +13 -13
  111. package/tests/dropnav.html +9 -9
  112. package/tests/form.html +56 -3
  113. package/tests/icon.html +31 -0
  114. package/tests/index.html +68 -58
  115. package/tests/js/index.js +76 -83
  116. package/tests/lightbox.html +4 -4
  117. package/tests/link.html +71 -8
  118. package/tests/modal.html +1 -1
  119. package/tests/navbar.html +32 -32
  120. package/tests/notification.html +5 -5
  121. package/tests/search.html +3 -3
  122. package/tests/slideshow.html +3 -3
  123. package/tests/sticky-navbar.html +72 -72
  124. package/tests/subnav.html +106 -2
  125. package/tests/tab.html +68 -21
  126. package/tests/table.html +8 -8
  127. package/tests/utility.html +159 -1
  128. package/tests/video.html +137 -10
package/tests/cover.html CHANGED
@@ -39,7 +39,7 @@
39
39
  <h3>Video</h3>
40
40
 
41
41
  <div class="test-height uk-cover-container uk-light">
42
- <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" autoplay loop muted playsinline uk-cover></video>
42
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" playsinline loop muted uk-cover></video>
43
43
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
44
44
  <h1>Heading</h1>
45
45
  </div>
@@ -51,7 +51,7 @@
51
51
  <h3>Iframe (YouTube)</h3>
52
52
 
53
53
  <div class="test-height uk-cover-container uk-light">
54
- <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
54
+ <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
55
55
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
56
56
  <h1>Heading</h1>
57
57
  </div>
@@ -63,7 +63,7 @@
63
63
  <h3>Iframe (Vimeo)</h3>
64
64
 
65
65
  <div class="test-height uk-cover-container uk-light">
66
- <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
66
+ <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0&amp;muted=1" width="500" height="281" allowfullscreen uk-cover></iframe>
67
67
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
68
68
  <h1>Heading</h1>
69
69
  </div>
@@ -81,7 +81,7 @@
81
81
 
82
82
  <div class="uk-cover-container uk-light">
83
83
  <canvas width="600" height="400"></canvas>
84
- <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test2" autoplay loop muted playsinline uk-cover></video>
84
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test2" playsinline loop muted uk-cover></video>
85
85
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
86
86
  <h1>Heading</h1>
87
87
  </div>
@@ -94,7 +94,7 @@
94
94
 
95
95
  <div class="uk-cover-container uk-light">
96
96
  <canvas width="600" height="400"></canvas>
97
- <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
97
+ <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
98
98
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
99
99
  <h1>Heading</h1>
100
100
  </div>
@@ -111,7 +111,7 @@
111
111
  <h3>Video (JS)</h3>
112
112
 
113
113
  <div class="uk-cover-container uk-light" uk-height-viewport>
114
- <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test3" autoplay loop muted playsinline uk-cover></video>
114
+ <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4?test3" playsinline loop muted uk-cover></video>
115
115
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
116
116
  <h1>Heading</h1>
117
117
  </div>
@@ -123,7 +123,7 @@
123
123
  <h3>Iframe (YouTube)</h3>
124
124
 
125
125
  <div class="uk-cover-container uk-light" uk-height-viewport>
126
- <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
126
+ <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
127
127
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
128
128
  <h1>Heading</h1>
129
129
  </div>
@@ -145,12 +145,6 @@
145
145
  </tr>
146
146
  </thead>
147
147
  <tbody>
148
- <tr>
149
- <td><code>automute</code></td>
150
- <td>Boolean</td>
151
- <td>true</td>
152
- <td>Automutes the video.</td>
153
- </tr>
154
148
  <tr>
155
149
  <td><code>width</code></td>
156
150
  <td>Number</td>
package/tests/dropbar.html CHANGED
@@ -450,7 +450,7 @@
450
450
  </div>
451
451
  <div class="uk-navbar-right">
452
452
 
453
- <a href class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon></a>
453
+ <a href class="uk-navbar-toggle" uk-navbar-toggle-icon></a>
454
454
  <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; target-y: !.uk-navbar-container; stretch: true; animation: slide-top; animate-out: true">
455
455
 
456
456
  <div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
@@ -480,7 +480,7 @@
480
480
  </div>
481
481
  <div class="uk-navbar-right">
482
482
 
483
- <a href class="uk-navbar-toggle uk-navbar-toggle-animate uk-position-z-index" uk-navbar-toggle-icon></a>
483
+ <a href class="uk-navbar-toggle uk-position-z-index" uk-navbar-toggle-icon></a>
484
484
  <div class="uk-dropbar uk-dropbar-top uk-position-z-index-zero" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true">
485
485
 
486
486
  <div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
@@ -510,7 +510,7 @@
510
510
  </div>
511
511
  <div class="uk-navbar-right">
512
512
 
513
- <a href class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon></a>
513
+ <a href class="uk-navbar-toggle" uk-navbar-toggle-icon></a>
514
514
  <div class="uk-dropbar uk-dropbar-top uk-position-z-index-negative" uk-drop="mode: click; inset: true; pos: top-center; stretch: true; animation: slide-top; animate-out: true">
515
515
 
516
516
  <div class="uk-height-1-1 uk-flex uk-flex-center uk-flex-middle">
package/tests/dropdown.html CHANGED
@@ -92,7 +92,7 @@
92
92
 
93
93
  <div class="uk-inline">
94
94
  <button class="uk-button uk-button-default" type="button">Scrollable</button>
95
- <div class="uk-overflow-auto uk-height-medium" uk-dropdown>
95
+ <div class="uk-overflow-auto uk-height-medium uk-dropdown" uk-drop>
96
96
  <ul class="uk-nav uk-dropdown-nav">
97
97
  <li class="uk-active"><a href="#">Active</a></li>
98
98
  <li class="uk-parent">
@@ -119,7 +119,7 @@
119
119
 
120
120
  <div class="uk-inline">
121
121
  <button class="uk-button uk-button-default" type="button">Bottom Left</button>
122
- <div uk-dropdown>
122
+ <div class="uk-dropdown" uk-drop>
123
123
  <ul class="uk-nav uk-dropdown-nav">
124
124
  <li class="uk-active"><a href="#">Active</a></li>
125
125
  <li><a href="#">Item</a></li>
@@ -130,7 +130,7 @@
130
130
 
131
131
  <div class="uk-inline">
132
132
  <button class="uk-button uk-button-default" type="button">Bottom Center</button>
133
- <div uk-dropdown="pos: bottom-center">
133
+ <div class="uk-dropdown" uk-drop="pos: bottom-center">
134
134
  <ul class="uk-nav uk-dropdown-nav">
135
135
  <li class="uk-active"><a href="#">Active</a></li>
136
136
  <li><a href="#">Item</a></li>
@@ -141,7 +141,7 @@
141
141
 
142
142
  <div class="uk-inline">
143
143
  <button class="uk-button uk-button-default" type="button">Bottom Right</button>
144
- <div uk-dropdown="pos: bottom-right">
144
+ <div class="uk-dropdown" uk-drop="pos: bottom-right">
145
145
  <ul class="uk-nav uk-dropdown-nav">
146
146
  <li class="uk-active"><a href="#">Active</a></li>
147
147
  <li><a href="#">Item</a></li>
@@ -156,7 +156,7 @@
156
156
 
157
157
  <div class="uk-inline">
158
158
  <button class="uk-button uk-button-default" type="button">Top Left</button>
159
- <div uk-dropdown="pos: top-left">
159
+ <div class="uk-dropdown" uk-drop="pos: top-left">
160
160
  <ul class="uk-nav uk-dropdown-nav">
161
161
  <li class="uk-active"><a href="#">Active</a></li>
162
162
  <li><a href="#">Item</a></li>
@@ -167,7 +167,7 @@
167
167
 
168
168
  <div class="uk-inline">
169
169
  <button class="uk-button uk-button-default" type="button">Top Center</button>
170
- <div uk-dropdown="pos: top-center">
170
+ <div class="uk-dropdown" uk-drop="pos: top-center">
171
171
  <ul class="uk-nav uk-dropdown-nav">
172
172
  <li class="uk-active"><a href="#">Active</a></li>
173
173
  <li><a href="#">Item</a></li>
@@ -178,7 +178,7 @@
178
178
 
179
179
  <div class="uk-inline">
180
180
  <button class="uk-button uk-button-default" type="button">Top Right</button>
181
- <div uk-dropdown="pos: top-right">
181
+ <div class="uk-dropdown" uk-drop="pos: top-right">
182
182
  <ul class="uk-nav uk-dropdown-nav">
183
183
  <li class="uk-active"><a href="#">Active</a></li>
184
184
  <li><a href="#">Item</a></li>
@@ -193,7 +193,7 @@
193
193
 
194
194
  <div class="uk-inline">
195
195
  <button class="uk-button uk-button-default" type="button">Left Top</button>
196
- <div uk-dropdown="pos: left-top">
196
+ <div class="uk-dropdown" uk-drop="pos: left-top">
197
197
  <ul class="uk-nav uk-dropdown-nav">
198
198
  <li class="uk-active"><a href="#">Active</a></li>
199
199
  <li><a href="#">Item</a></li>
@@ -204,7 +204,7 @@
204
204
 
205
205
  <div class="uk-inline">
206
206
  <button class="uk-button uk-button-default" type="button">Left Center</button>
207
- <div uk-dropdown="pos: left-center">
207
+ <div class="uk-dropdown" uk-drop="pos: left-center">
208
208
  <ul class="uk-nav uk-dropdown-nav">
209
209
  <li class="uk-active"><a href="#">Active</a></li>
210
210
  <li><a href="#">Item</a></li>
@@ -215,7 +215,7 @@
215
215
 
216
216
  <div class="uk-inline">
217
217
  <button class="uk-button uk-button-default" type="button">Left Bottom</button>
218
- <div uk-dropdown="pos: left-bottom">
218
+ <div class="uk-dropdown" uk-drop="pos: left-bottom">
219
219
  <ul class="uk-nav uk-dropdown-nav">
220
220
  <li class="uk-active"><a href="#">Active</a></li>
221
221
  <li><a href="#">Item</a></li>
@@ -230,7 +230,7 @@
230
230
 
231
231
  <div class="uk-inline">
232
232
  <button class="uk-button uk-button-default" type="button">Right Top</button>
233
- <div uk-dropdown="pos: right-top">
233
+ <div class="uk-dropdown" uk-drop="pos: right-top">
234
234
  <ul class="uk-nav uk-dropdown-nav">
235
235
  <li class="uk-active"><a href="#">Active</a></li>
236
236
  <li><a href="#">Item</a></li>
@@ -241,7 +241,7 @@
241
241
 
242
242
  <div class="uk-inline">
243
243
  <button class="uk-button uk-button-default" type="button">Right Center</button>
244
- <div uk-dropdown="pos: right-center">
244
+ <div class="uk-dropdown" uk-drop="pos: right-center">
245
245
  <ul class="uk-nav uk-dropdown-nav">
246
246
  <li class="uk-active"><a href="#">Active</a></li>
247
247
  <li><a href="#">Item</a></li>
@@ -252,7 +252,7 @@
252
252
 
253
253
  <div class="uk-inline">
254
254
  <button class="uk-button uk-button-default" type="button">Right Bottom</button>
255
- <div uk-dropdown="pos: right-bottom">
255
+ <div class="uk-dropdown" uk-drop="pos: right-bottom">
256
256
  <ul class="uk-nav uk-dropdown-nav">
257
257
  <li class="uk-active"><a href="#">Active</a></li>
258
258
  <li><a href="#">Item</a></li>
package/tests/dropnav.html CHANGED
@@ -109,7 +109,7 @@
109
109
  </li>
110
110
  <li>
111
111
  <a href>Stretch <span uk-drop-parent-icon></span></a>
112
- <div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
112
+ <div class="uk-dropdown" uk-drop="boundary: !.uk-dropnav; stretch: x; flip: false">
113
113
  <div class="uk-child-width-1-3@m" uk-grid>
114
114
  <div>
115
115
  <ul class="uk-nav uk-dropdown-nav">
@@ -151,7 +151,7 @@
151
151
  </li>
152
152
  <li>
153
153
  <a href>Stretch Full <span uk-drop-parent-icon></span></a>
154
- <div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; stretch: x; flip: false">
154
+ <div class="uk-dropdown" uk-drop="stretch: x; flip: false">
155
155
  <div class="uk-child-width-1-3@m" uk-grid>
156
156
  <div>
157
157
  <ul class="uk-nav uk-dropdown-nav">
@@ -273,7 +273,7 @@
273
273
  </li>
274
274
  <li>
275
275
  <a href>Stretch <span uk-drop-parent-icon></span></a>
276
- <div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
276
+ <div class="uk-dropdown" uk-drop="mode: click; boundary: !.uk-dropnav; stretch: x; flip: false">
277
277
  <div class="uk-child-width-1-3@m" uk-grid>
278
278
  <div>
279
279
  <ul class="uk-nav uk-dropdown-nav">
@@ -315,7 +315,7 @@
315
315
  </li>
316
316
  <li>
317
317
  <a href>Stretch Full <span uk-drop-parent-icon></span></a>
318
- <div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; stretch: x; flip: false">
318
+ <div class="uk-dropdown" uk-drop="mode: click; stretch: x; flip: false">
319
319
  <div class="uk-child-width-1-3@m" uk-grid>
320
320
  <div>
321
321
  <ul class="uk-nav uk-dropdown-nav">
@@ -446,7 +446,7 @@
446
446
  </li>
447
447
  <li>
448
448
  <a href>Stretch <span uk-drop-parent-icon></span></a>
449
- <div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
449
+ <div class="uk-dropdown" uk-drop="boundary: !.uk-dropnav; stretch: x; flip: false">
450
450
  <div class="uk-child-width-1-3@m" uk-grid>
451
451
  <div>
452
452
  <ul class="uk-nav uk-dropdown-nav">
@@ -488,7 +488,7 @@
488
488
  </li>
489
489
  <li>
490
490
  <a href>Stretch Full <span uk-drop-parent-icon></span></a>
491
- <div class="uk-dropdown" uk-drop="cls-drop: uk-dropdown; stretch: x; flip: false">
491
+ <div class="uk-dropdown" uk-drop="stretch: x; flip: false">
492
492
  <div class="uk-child-width-1-3@m" uk-grid>
493
493
  <div>
494
494
  <ul class="uk-nav uk-dropdown-nav">
@@ -610,7 +610,7 @@
610
610
  </li>
611
611
  <li>
612
612
  <a href>Stretch <span uk-drop-parent-icon></span></a>
613
- <div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; boundary: !.uk-dropnav; stretch: x; flip: false">
613
+ <div class="uk-dropdown" uk-drop="mode: click; boundary: !.uk-dropnav; stretch: x; flip: false">
614
614
  <div class="uk-child-width-1-3@m" uk-grid>
615
615
  <div>
616
616
  <ul class="uk-nav uk-dropdown-nav">
@@ -652,7 +652,7 @@
652
652
  </li>
653
653
  <li>
654
654
  <a href>Stretch Full <span uk-drop-parent-icon></span></a>
655
- <div class="uk-dropdown" uk-drop="mode: click; cls-drop: uk-dropdown; stretch: x; flip: false">
655
+ <div class="uk-dropdown" uk-drop="mode: click; stretch: x; flip: false">
656
656
  <div class="uk-child-width-1-3@m" uk-grid>
657
657
  <div>
658
658
  <ul class="uk-nav uk-dropdown-nav">
@@ -828,7 +828,7 @@
828
828
 
829
829
  on('#js-nav-switcher', 'change', (e) => {
830
830
  const options = $$('option', e.target).map(({value}) => value);
831
- for (const el of $$('.uk-subnav')) {
831
+ for (const el of $$('nav > :first-child')) {
832
832
  removeClass(el, options);
833
833
  addClass(el, e.target.value);
834
834
  }
package/tests/form.html CHANGED
@@ -34,6 +34,10 @@
34
34
  <select class="uk-select uk-form-width-large" id="form-h-select">
35
35
  <option>Option 01</option>
36
36
  <option>Option 02</option>
37
+ <optgroup label="Optgroup">
38
+ <option>Option A</option>
39
+ <option>Option B</option>
40
+ </optgroup>
37
41
  </select>
38
42
  </div>
39
43
  </div>
@@ -94,6 +98,10 @@
94
98
  <option>Option 02</option>
95
99
  <option>Option 03</option>
96
100
  <option>Option 04</option>
101
+ <optgroup label="Optgroup">
102
+ <option>Option A</option>
103
+ <option>Option B</option>
104
+ </optgroup>
97
105
  </select>
98
106
  </div>
99
107
  </div>
@@ -117,9 +125,14 @@
117
125
  <select class="uk-select uk-form-width-small uk-form-large" aria-label="Large">
118
126
  <option>Option 01</option>
119
127
  <option>Option 02</option>
128
+ <optgroup label="Optgroup">
129
+ <option>Option A</option>
130
+ <option>Option B</option>
131
+ </optgroup>
120
132
  </select>
121
133
  <button class="uk-button uk-button-default uk-button-large">Button</button>
122
- <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
134
+ <input class="uk-checkbox uk-form-large" type="checkbox">
135
+ <input class="uk-radio uk-form-large" type="radio">
123
136
  </div>
124
137
 
125
138
  <div class="uk-margin" uk-margin>
@@ -128,9 +141,14 @@
128
141
  <select class="uk-select uk-form-width-small" aria-label="Default">
129
142
  <option>Option 01</option>
130
143
  <option>Option 02</option>
144
+ <optgroup label="Optgroup">
145
+ <option>Option A</option>
146
+ <option>Option B</option>
147
+ </optgroup>
131
148
  </select>
132
149
  <button class="uk-button uk-button-default">Button</button>
133
- <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
150
+ <input class="uk-checkbox" type="checkbox">
151
+ <input class="uk-radio" type="radio">
134
152
  </div>
135
153
 
136
154
  <div class="uk-margin" uk-margin>
@@ -139,9 +157,14 @@
139
157
  <select class="uk-select uk-form-width-small uk-form-small" aria-label="Small">
140
158
  <option>Option 01</option>
141
159
  <option>Option 02</option>
160
+ <optgroup label="Optgroup">
161
+ <option>Option A</option>
162
+ <option>Option B</option>
163
+ </optgroup>
142
164
  </select>
143
165
  <button class="uk-button uk-button-default uk-button-small">Button</button>
144
- <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
166
+ <input class="uk-checkbox uk-form-small" type="checkbox">
167
+ <input class="uk-radio uk-form-small" type="radio">
145
168
  </div>
146
169
 
147
170
  </form>
@@ -245,12 +268,20 @@
245
268
  <select class="uk-select uk-form-width-large" aria-label="Select">
246
269
  <option>Option 01</option>
247
270
  <option>Option 02</option>
271
+ <optgroup label="Optgroup">
272
+ <option>Option A</option>
273
+ <option>Option B</option>
274
+ </optgroup>
248
275
  </select>
249
276
 
250
277
  <p class="uk-margin-small">
251
278
  <select class="uk-select uk-form-width-large" aria-label="Select disabled" disabled>
252
279
  <option>Option 01</option>
253
280
  <option>Option 02</option>
281
+ <optgroup label="Optgroup">
282
+ <option>Option A</option>
283
+ <option>Option B</option>
284
+ </optgroup>
254
285
  </select>
255
286
  </p>
256
287
 
@@ -260,6 +291,10 @@
260
291
  <option>Option 02</option>
261
292
  <option>Option 03</option>
262
293
  <option>Option 04</option>
294
+ <optgroup label="Optgroup">
295
+ <option>Option A</option>
296
+ <option>Option B</option>
297
+ </optgroup>
263
298
  </select>
264
299
  </p>
265
300
 
@@ -476,6 +511,10 @@
476
511
  <select class="uk-select" id="form-s-select">
477
512
  <option>Option 01</option>
478
513
  <option>Option 02</option>
514
+ <optgroup label="Optgroup">
515
+ <option>Option A</option>
516
+ <option>Option B</option>
517
+ </optgroup>
479
518
  </select>
480
519
  </div>
481
520
 
@@ -515,6 +554,10 @@
515
554
  <option>Option 02</option>
516
555
  <option>Option 03</option>
517
556
  <option>Option 04</option>
557
+ <optgroup label="Optgroup">
558
+ <option>Option A</option>
559
+ <option>Option B</option>
560
+ </optgroup>
518
561
  </select>
519
562
  </div>
520
563
 
@@ -588,6 +631,16 @@
588
631
  <input class="uk-input" id="form-s-datetimelocal" type="datetime-local">
589
632
  </div>
590
633
 
634
+ <div class="uk-margin">
635
+ <div class="uk-form-label">Div as Input</div>
636
+ <div class="uk-input">This is a very long text which should be truncated</div>
637
+ </div>
638
+
639
+ <div class="uk-margin">
640
+ <div class="uk-form-label">Div as Select</div>
641
+ <div class="uk-select">This is a very long text which should be truncate</div>
642
+ </div>
643
+
591
644
  </fieldset>
592
645
 
593
646
  </form>
package/tests/icon.html CHANGED
@@ -760,6 +760,37 @@
760
760
 
761
761
  </ul>
762
762
 
763
+ <h2>Overlay</h2>
764
+
765
+ <div class="uk-child-width-1-2@m" uk-grid>
766
+ <div>
767
+
768
+ <a href class="uk-inline uk-dark">
769
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
770
+ <div class="uk-position-center">
771
+ <ul class="uk-grid-small uk-flex-middle" uk-grid>
772
+ <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: play-circle"></span></li>
773
+ <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: youtube"></span></li>
774
+ </ul>
775
+ </div>
776
+ </a>
777
+
778
+ </div>
779
+ <div>
780
+
781
+ <a href class="uk-inline uk-light">
782
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
783
+ <div class="uk-position-center">
784
+ <ul class="uk-grid-small uk-flex-middle" uk-grid>
785
+ <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: play-circle"></span></li>
786
+ <li><span class="uk-icon-overlay" href="#" uk-icon="ratio: 3; icon: youtube"></span></li>
787
+ </ul>
788
+ </div>
789
+ </a>
790
+
791
+ </div>
792
+ </div>
793
+
763
794
  </div>
764
795
  <div class="uk-width-auto@m">
765
796