uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.6923b7e2c

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 (129) hide show
  1. package/CHANGELOG.md +34 -17
  2. package/dist/css/uikit-core-rtl.css +337 -159
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +337 -159
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +357 -163
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +357 -163
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +69 -114
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +69 -114
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +4 -5
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +4 -5
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +1 -1
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +4 -5
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +1 -1
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +1 -1
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +88 -134
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +366 -361
  37. package/dist/js/uikit-core.min.js +14 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +366 -361
  41. package/dist/js/uikit.min.js +14 -1
  42. package/package.json +1 -1
  43. package/src/images/{backgrounds/nav-parent-close.svg → components/nav-parent-icon-large.svg} +0 -0
  44. package/src/images/{backgrounds/navbar-parent-close.svg → components/nav-parent-icon.svg} +0 -0
  45. package/src/images/{backgrounds/navbar-parent-open.svg → components/navbar-parent-icon.svg} +1 -1
  46. package/src/images/components/navbar-toggle-icon.svg +22 -3
  47. package/src/js/api/state.js +1 -1
  48. package/src/js/core/accordion.js +9 -17
  49. package/src/js/core/alert.js +35 -14
  50. package/src/js/core/drop.js +87 -61
  51. package/src/js/core/height-viewport.js +4 -2
  52. package/src/js/core/icon.js +16 -0
  53. package/src/js/core/index.js +2 -0
  54. package/src/js/core/leader.js +2 -2
  55. package/src/js/core/navbar.js +28 -45
  56. package/src/js/core/scroll.js +37 -10
  57. package/src/js/mixin/media.js +4 -5
  58. package/src/js/mixin/position.js +21 -24
  59. package/src/js/mixin/togglable.js +80 -124
  60. package/src/js/util/animation.js +4 -3
  61. package/src/js/util/filter.js +3 -7
  62. package/src/js/util/position.js +42 -47
  63. package/src/js/util/style.js +4 -13
  64. package/src/js/util/viewport.js +3 -5
  65. package/src/less/components/_import.less +1 -0
  66. package/src/less/components/drop.less +1 -18
  67. package/src/less/components/dropbar.less +115 -0
  68. package/src/less/components/dropdown.less +11 -19
  69. package/src/less/components/leader.less +1 -1
  70. package/src/less/components/nav.less +218 -59
  71. package/src/less/components/navbar.less +36 -82
  72. package/src/less/components/utility.less +10 -2
  73. package/src/less/theme/_import.less +1 -0
  74. package/src/less/theme/dropbar.less +44 -0
  75. package/src/less/theme/dropdown.less +0 -11
  76. package/src/less/theme/nav.less +45 -7
  77. package/src/less/theme/navbar.less +1 -13
  78. package/src/scss/components/_import.scss +1 -0
  79. package/src/scss/components/drop.scss +1 -18
  80. package/src/scss/components/dropbar.scss +115 -0
  81. package/src/scss/components/dropdown.scss +11 -19
  82. package/src/scss/components/leader.scss +1 -1
  83. package/src/scss/components/nav.scss +167 -47
  84. package/src/scss/components/navbar.scss +36 -70
  85. package/src/scss/components/utility.scss +8 -1
  86. package/src/scss/mixins-theme.scss +80 -33
  87. package/src/scss/mixins.scss +77 -29
  88. package/src/scss/theme/_import.scss +1 -0
  89. package/src/scss/theme/dropbar.scss +44 -0
  90. package/src/scss/theme/dropdown.scss +0 -8
  91. package/src/scss/theme/nav.scss +43 -7
  92. package/src/scss/theme/navbar.scss +1 -13
  93. package/src/scss/variables-theme.scss +54 -22
  94. package/src/scss/variables.scss +43 -20
  95. package/tests/accordion.html +2 -2
  96. package/tests/alert.html +2 -2
  97. package/tests/countdown.html +1 -1
  98. package/tests/drop.html +442 -412
  99. package/tests/drop2.html +475 -0
  100. package/tests/dropbar.html +456 -0
  101. package/tests/dropdown.html +8 -470
  102. package/tests/filter.html +9 -12
  103. package/tests/form.html +1 -1
  104. package/tests/index.html +126 -107
  105. package/tests/lightbox.html +5 -5
  106. package/tests/list.html +8 -8
  107. package/tests/modal.html +13 -13
  108. package/tests/nav.html +117 -75
  109. package/tests/navbar.html +94 -241
  110. package/tests/offcanvas.html +17 -21
  111. package/tests/parallax.html +1 -1
  112. package/tests/position.html +13 -24
  113. package/tests/progress.html +9 -9
  114. package/tests/scroll.html +7 -10
  115. package/tests/search.html +5 -5
  116. package/tests/slide.html +191 -0
  117. package/tests/slider.html +6 -5
  118. package/tests/slideshow.html +8 -8
  119. package/tests/sortable.html +6 -8
  120. package/tests/sticky-navbar.html +6 -6
  121. package/tests/sticky.html +8 -8
  122. package/tests/switcher.html +1 -1
  123. package/tests/tab.html +1 -1
  124. package/tests/table.html +7 -7
  125. package/tests/toggle.html +2 -2
  126. package/tests/tooltip.html +1 -1
  127. package/tests/upload.html +11 -11
  128. package/tests/utility.html +19 -0
  129. package/src/images/backgrounds/nav-parent-open.svg +0 -3
package/tests/drop2.html ADDED
@@ -0,0 +1,475 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-gb" dir="ltr">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Drop - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .test-boundary {
12
+ padding: 15px;
13
+ border: 1px dashed rgba(0,0,0,0.2);
14
+ }
15
+
16
+ .test-boundary-overflow { width: 250%; }
17
+
18
+ .gap { gap: 10px; }
19
+
20
+ </style>
21
+ </head>
22
+
23
+ <body>
24
+
25
+ <div class="uk-container">
26
+
27
+
28
+ <h2>Stretch</h2>
29
+
30
+ <div class="uk-margin" uk-margin>
31
+
32
+ <div class="uk-inline">
33
+ <button class="uk-button uk-button-default" type="button">Bottom Fade</button>
34
+ <div uk-drop="pos: bottom-left; stretch: true; animate-out: true">
35
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="uk-inline">
40
+ <button class="uk-button uk-button-default" type="button">Bottom Slide</button>
41
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: true; animate-out: true; animation: slide-top">
42
+ <div class="uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
43
+ </div>
44
+ </div>
45
+
46
+ <div class="uk-inline">
47
+ <button class="uk-button uk-button-default" type="button">Bottom Reveal</button>
48
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: true; animate-out: true; animation: reveal-top">
49
+ <div class="uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
50
+ </div>
51
+ </div>
52
+
53
+ <div class="uk-inline">
54
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Left</button>
55
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; target-x: true; animate-out: true; animation: slide-left">
56
+ <div class="uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="uk-inline">
61
+ <button class="uk-button uk-button-default" type="button">Bottom Reveal Left</button>
62
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; target-x: true; animate-out: true; animation: reveal-left">
63
+ <div class="uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="uk-inline">
68
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Right</button>
69
+ <div uk-dropdown="mode: click; pos: bottom-right; stretch: y; target-x: true; animate-out: true; animation: slide-right">
70
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
71
+ </div>
72
+ </div>
73
+
74
+ <div class="uk-inline">
75
+ <button class="uk-button uk-button-default" type="button">Bottom Reveal Right</button>
76
+ <div uk-dropdown="mode: click; pos: bottom-right; stretch: y; target-x: true; animate-out: true; animation: reveal-right">
77
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="uk-inline">
82
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Top</button>
83
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: x; target-x: true; animate-out: true; animation: slide-top">
84
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="uk-inline">
89
+ <button class="uk-button uk-button-default" type="button">Bottom Reveal Top</button>
90
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: x; target-x: true; animate-out: true; animation: reveal-top">
91
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="uk-inline">
96
+ <button class="uk-button uk-button-default" type="button">Bottom Slide Bottom</button>
97
+ <div uk-dropdown="mode: click; pos: bottom-left; inset: true; stretch: x; target-y: true; animate-out: true; animation: slide-bottom">
98
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="uk-inline">
103
+ <button class="uk-button uk-button-default" type="button">Bottom Reveal Bottom</button>
104
+ <div uk-dropdown="mode: click; pos: bottom-left; inset: true; stretch: x; target-y: true; animate-out: true; animation: reveal-bottom">
105
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
106
+ </div>
107
+ </div>
108
+
109
+ </div>
110
+
111
+ <div class="uk-margin" uk-margin>
112
+
113
+ <div class="uk-inline">
114
+ <button class="uk-button uk-button-default" type="button">Top Fade</button>
115
+ <div uk-dropdown="pos: top-left; stretch: true; animate-out: true">
116
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="uk-inline">
121
+ <button class="uk-button uk-button-default" type="button">Top Slide</button>
122
+ <div uk-dropdown="pos: top-left; stretch: true; animate-out: true; animation: slide-bottom">
123
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="uk-inline">
128
+ <button class="uk-button uk-button-default" type="button">Top Slide Left</button>
129
+ <div uk-dropdown="pos: top-left; stretch: y; boundary-align: x; animate-out: true; animation: slide-left">
130
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="uk-inline">
135
+ <button class="uk-button uk-button-default" type="button">Top Slide Right</button>
136
+ <div uk-dropdown="pos: top-right; stretch: y; boundary-align: x; animate-out: true; animation: slide-right">
137
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
138
+ </div>
139
+ </div>
140
+
141
+ </div>
142
+
143
+ <div class="uk-margin" uk-margin>
144
+
145
+ <div class="uk-inline">
146
+ <button class="uk-button uk-button-default" type="button">Left Fade</button>
147
+ <div uk-dropdown="pos: left-top; stretch: true; animate-out: true">
148
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="uk-inline">
153
+ <button class="uk-button uk-button-default" type="button">Left Slide</button>
154
+ <div uk-dropdown="pos: left-top; stretch: true; animate-out: true; animation: slide">
155
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="uk-inline">
160
+ <button class="uk-button uk-button-default" type="button">Left Slide Left</button>
161
+ <div uk-dropdown="pos: left-top; inset: true; stretch: y; boundary-align: true; animate-out: true; animation: slide-left; flip: false">
162
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="uk-inline">
167
+ <button class="uk-button uk-button-default" type="button">Left Slide Right</button>
168
+ <div uk-dropdown="pos: left-top; stretch: y; animation: slide-right">
169
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
170
+ </div>
171
+ </div>
172
+
173
+ </div>
174
+
175
+ <div class="uk-margin" uk-margin>
176
+
177
+ <div class="uk-inline">
178
+ <button class="uk-button uk-button-default" type="button">Right Fade</button>
179
+ <div uk-dropdown="pos: right-top; stretch: true; animate-out: true">
180
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="uk-inline">
185
+ <button class="uk-button uk-button-default" type="button">Right Slide</button>
186
+ <div uk-dropdown="pos: right-top; stretch: true; animate-out: true; animation: slide">
187
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="uk-inline">
192
+ <button class="uk-button uk-button-default" type="button">Right Slide Left</button>
193
+ <div uk-dropdown="pos: right-top; stretch: y; animate-out: true; animation: slide-left">
194
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="uk-inline">
199
+ <button class="uk-button uk-button-default" type="button">Right Slide Right</button>
200
+ <div uk-dropdown="pos: right-top; inset: true; stretch: y; boundary-align: true; animate-out: true; animation: slide-right; flip: false">
201
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
202
+ </div>
203
+ </div>
204
+
205
+ </div>
206
+
207
+ <div class="uk-child-width-1-4@m" uk-grid>
208
+ <div>
209
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
210
+
211
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Fade</button></div>
212
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true">
213
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
214
+ </div>
215
+
216
+ </div>
217
+ </div>
218
+ <div>
219
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
220
+
221
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Top</button></div>
222
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: slide-top">
223
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
224
+ </div>
225
+
226
+ </div>
227
+ </div>
228
+ <div>
229
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
230
+
231
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Bottom</button></div>
232
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: slide-bottom">
233
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
234
+ </div>
235
+
236
+ </div>
237
+ </div>
238
+ <div>
239
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
240
+
241
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Left</button></div>
242
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: slide-left">
243
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
244
+ </div>
245
+
246
+ </div>
247
+ </div>
248
+ <div>
249
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
250
+
251
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Slide Right</button></div>
252
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: slide-right">
253
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
254
+ </div>
255
+
256
+ </div>
257
+ </div>
258
+ <div>
259
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
260
+
261
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Reveal Top</button></div>
262
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: reveal-top">
263
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
264
+ </div>
265
+
266
+ </div>
267
+ </div>
268
+ <div>
269
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
270
+
271
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Reveal Bottom</button></div>
272
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: reveal-bottom">
273
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
274
+ </div>
275
+
276
+ </div>
277
+ </div>
278
+ <div>
279
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
280
+
281
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Reveal Left</button></div>
282
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: reveal-left">
283
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
284
+ </div>
285
+
286
+ </div>
287
+ </div>
288
+ <div>
289
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
290
+
291
+ <div class="uk-text-center"><button class="uk-button uk-button-default" type="button">Bottom Reveal Right</button></div>
292
+ <div uk-dropdown="mode: click; pos: bottom-left; stretch: y; animate-out: true; animation: reveal-right">
293
+ <div class="uk-background-muted uk-padding uk-height-1-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
294
+ </div>
295
+
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <h2>JavaScript Options</h2>
301
+
302
+ <div class="uk-overflow-auto">
303
+ <table class="uk-table uk-table-striped">
304
+ <thead>
305
+ <tr>
306
+ <th>Option</th>
307
+ <th>Value</th>
308
+ <th>Default</th>
309
+ <th>Description</th>
310
+ </tr>
311
+ </thead>
312
+ <tbody>
313
+ <tr>
314
+ <td><code>toggle</code></td>
315
+ <td>CSS Selector</td>
316
+ <td>'- *'</td>
317
+ <td>CSS selector for the element to be used as toggle. By default, the preceding element.</td>
318
+ </tr>
319
+ <tr>
320
+ <td><code>pos</code></td>
321
+ <td>String</td>
322
+ <td>'bottom-left'</td>
323
+ <td>Drop position.</td>
324
+ </tr>
325
+ <tr>
326
+ <td><code>stretch</code></td>
327
+ <td>false|true|'x'|'y'</td>
328
+ <td>true</td>
329
+ <td>Stretch drop on both (true) or given axis.</td>
330
+ </tr>
331
+ <tr>
332
+ <td><code>mode</code></td>
333
+ <td>hover | click</td>
334
+ <td>click,hover</td>
335
+ <td>Comma-separated list of drop trigger behaviour modes.</td>
336
+ </tr>
337
+ <tr>
338
+ <td><code>delay-show</code></td>
339
+ <td>Number</td>
340
+ <td>0</td>
341
+ <td>Delay time in hover mode before a drop is shown in ms.</td>
342
+ </tr>
343
+ <tr>
344
+ <td><code>delay-hide</code></td>
345
+ <td>Number</td>
346
+ <td>800</td>
347
+ <td>Delay time in hover mode before a drop is hidden in ms.</td>
348
+ </tr>
349
+ <tr>
350
+ <td><code>display</code></td>
351
+ <td>`dynamic`|`static`</td>
352
+ <td>`dynamic`</td>
353
+ <td>Disable dynamic positioning while scrolling by setting this option to `static`.</td>
354
+ </tr>
355
+ <tr>
356
+ <td><code>boundary</code></td>
357
+ <td>CSS selector</td>
358
+ <td>false</td>
359
+ <td>The area the drop can't exceed causing it to flip and shift. By default, the nearest scrolling ancestor.</td>
360
+ </tr>
361
+ <tr>
362
+ <td><code>target</code></td>
363
+ <td>CSS selector</td>
364
+ <td>'- *'</td>
365
+ <td>The element the drop is positioned to.</td>
366
+ </tr>
367
+ <tr>
368
+ <td><code>target-x</code></td>
369
+ <td>CSS selector</td>
370
+ <td>false</td>
371
+ <td>The element's X axis the drop is positioned to.</td>
372
+ </tr>
373
+ <tr>
374
+ <td><code>target-y</code></td>
375
+ <td>CSS selector</td>
376
+ <td>false</td>
377
+ <td>The element's Y axis the drop is positioned to.</td>
378
+ </tr>
379
+ <tr>
380
+ <td><code>inset</code></td>
381
+ <td>Boolean</td>
382
+ <td>false</td>
383
+ <td>Position inside its target.</td>
384
+ </tr>
385
+ <tr>
386
+ <td><code>flip</code></td>
387
+ <td>Boolean</td>
388
+ <td>true</td>
389
+ <td>Flips the Drop along the main axis if it overflows the boundary.</td>
390
+ </tr>
391
+ <tr>
392
+ <td><code>shift</code></td>
393
+ <td>Boolean</td>
394
+ <td>true</td>
395
+ <td>Shifts the Drop along the cross axis if it overflows the boundary.</td>
396
+ </tr>
397
+ <tr>
398
+ <td><code>offset</code></td>
399
+ <td>Number</td>
400
+ <td>0</td>
401
+ <td>The drop offset.</td>
402
+ </tr>
403
+ <tr>
404
+ <td><code>animation</code></td>
405
+ <td>String</td>
406
+ <td>'uk-animation-fade'</td>
407
+ <td>Space-separated names of animations. Comma-separated for animation out.</td>
408
+ </tr>
409
+ <tr>
410
+ <td><code>animate-out</code></td>
411
+ <td>Boolean</td>
412
+ <td>false</td>
413
+ <td>Use animation when closing the drop.</td>
414
+ </tr>
415
+ <tr>
416
+ <td><code>bg-scroll</code></td>
417
+ <td>Boolean</td>
418
+ <td>true</td>
419
+ <td>Allow background scrolling while drop is opened.</td>
420
+ </tr>
421
+ <tr>
422
+ <td><code>duration</code></td>
423
+ <td>Number</td>
424
+ <td>200</td>
425
+ <td>The animation duration.</td>
426
+ </tr>
427
+ <tr>
428
+ <td><code>container</code></td>
429
+ <td>Boolean</td>
430
+ <td>false</td>
431
+ <td>Define a target container via a selector to specify where the drop should be appended in the DOM.</td>
432
+ </tr>
433
+ </tbody>
434
+ </table>
435
+ </div>
436
+
437
+ </div>
438
+
439
+ <script>
440
+
441
+ const {$$, addClass, attr, on, removeClass, trigger } = UIkit.util;
442
+
443
+ on('#js-style-switcher', 'change', (e) => {
444
+ const options = $$('option', e.target).map(({value}) => value);
445
+ for (const el of $$('.uk-drop')) {
446
+ removeClass(el, options);
447
+ addClass(el, e.target.value);
448
+ }
449
+ });
450
+
451
+ on('#js-boundary-overflow-switcher', 'change', (e) => {
452
+ const options = $$('option', e.target).map(({value}) => value);
453
+ for (const el of $$('.js-boundary-overflow')) {
454
+ removeClass(el, options);
455
+ addClass(el, e.target.value);
456
+ }
457
+ });
458
+
459
+ on('#js-stretch-switcher', 'change', (e) =>
460
+ attr($$('.js-options'), 'stretch', e.target.value)
461
+ );
462
+ trigger('#js-stretch-switcher', 'change');
463
+
464
+ on('#js-boundary-switcher', 'change', (e) =>
465
+ attr($$('.js-options'), 'boundary', e.target.value)
466
+ );
467
+
468
+ on('#js-target-switcher', 'change', (e) =>
469
+ attr($$('.js-options'), 'target', e.target.value)
470
+ );
471
+
472
+ </script>
473
+
474
+ </body>
475
+ </html>