uikit 3.13.8-dev.9cb7293e5 → 3.13.8-dev.eab90fc4f

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 (63) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/css/uikit-core-rtl.css +11 -2
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +11 -2
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +11 -2
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +11 -2
  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 +7 -3
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +7 -3
  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 +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  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 +1 -1
  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 +1 -1
  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 +64 -50
  37. package/dist/js/uikit-core.min.js +1 -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 +64 -50
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/core/height-match.js +1 -2
  44. package/src/js/core/margin.js +1 -1
  45. package/src/js/core/navbar.js +17 -7
  46. package/src/js/core/toggle.js +1 -1
  47. package/src/js/mixin/modal.js +6 -2
  48. package/src/js/uikit-core.js +0 -4
  49. package/src/js/util/lang.js +0 -4
  50. package/src/js/util/position.js +34 -1
  51. package/src/less/components/drop.less +0 -1
  52. package/src/less/components/navbar.less +11 -0
  53. package/src/less/components/search.less +2 -0
  54. package/src/less/theme/search.less +6 -0
  55. package/src/scss/components/drop.scss +0 -1
  56. package/src/scss/components/navbar.scss +11 -0
  57. package/src/scss/components/search.scss +2 -0
  58. package/src/scss/mixins-theme.scss +1 -0
  59. package/src/scss/mixins.scss +1 -0
  60. package/src/scss/theme/search.scss +6 -0
  61. package/tests/animation.html +216 -214
  62. package/tests/navbar.html +37 -0
  63. package/src/js/core/core.js +0 -25
package/tests/animation.html CHANGED
@@ -10,240 +10,242 @@
10
10
 
11
11
  <body>
12
12
 
13
- <div class="uk-container">
14
-
15
- <h1>Animation</h1>
16
-
17
- <div class="uk-child-width-1-4@m" uk-grid>
18
- <div class="uk-animation-toggle" tabindex="0">
19
- <div class="uk-card uk-card-default uk-card-body uk-animation-fade">
20
- <h3 class="uk-card-title">Fade</h3>
21
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
22
- </div>
23
- </div>
24
- <div class="uk-animation-toggle" tabindex="0">
25
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up">
26
- <h3 class="uk-card-title">Scale Up</h3>
27
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
28
- </div>
29
- </div>
30
- <div class="uk-animation-toggle" tabindex="0">
31
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down">
32
- <h3 class="uk-card-title">Scale Down</h3>
33
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
34
- </div>
35
- </div>
36
- <div class="uk-animation-toggle" tabindex="0">
37
- <div class="uk-card uk-card-default uk-card-body uk-animation-shake">
38
- <h3 class="uk-card-title">Shake</h3>
39
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
40
- </div>
41
- </div>
42
- <div class="uk-animation-toggle" tabindex="0">
43
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left">
44
- <h3 class="uk-card-title">Left</h3>
45
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
13
+ <div class="uk-overflow-hidden">
14
+ <div class="uk-container">
15
+
16
+ <h1>Animation</h1>
17
+
18
+ <div class="uk-child-width-1-4@m" uk-grid>
19
+ <div class="uk-animation-toggle" tabindex="0">
20
+ <div class="uk-card uk-card-default uk-card-body uk-animation-fade">
21
+ <h3 class="uk-card-title">Fade</h3>
22
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
23
+ </div>
24
+ </div>
25
+ <div class="uk-animation-toggle" tabindex="0">
26
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up">
27
+ <h3 class="uk-card-title">Scale Up</h3>
28
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
29
+ </div>
30
+ </div>
31
+ <div class="uk-animation-toggle" tabindex="0">
32
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down">
33
+ <h3 class="uk-card-title">Scale Down</h3>
34
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
35
+ </div>
36
+ </div>
37
+ <div class="uk-animation-toggle" tabindex="0">
38
+ <div class="uk-card uk-card-default uk-card-body uk-animation-shake">
39
+ <h3 class="uk-card-title">Shake</h3>
40
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
41
+ </div>
42
+ </div>
43
+ <div class="uk-animation-toggle" tabindex="0">
44
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left">
45
+ <h3 class="uk-card-title">Left</h3>
46
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
47
+ </div>
48
+ </div>
49
+ <div class="uk-animation-toggle" tabindex="0">
50
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top">
51
+ <h3 class="uk-card-title">Top</h3>
52
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
53
+ </div>
54
+ </div>
55
+ <div class="uk-animation-toggle" tabindex="0">
56
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom">
57
+ <h3 class="uk-card-title">Bottom</h3>
58
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
59
+ </div>
60
+ </div>
61
+ <div class="uk-animation-toggle" tabindex="0">
62
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right">
63
+ <h3 class="uk-card-title">Right</h3>
64
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
65
+ </div>
66
+ </div>
67
+ <div class="uk-animation-toggle" tabindex="0">
68
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small">
69
+ <h3 class="uk-card-title">Left Small</h3>
70
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
71
+ </div>
72
+ </div>
73
+ <div class="uk-animation-toggle" tabindex="0">
74
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small">
75
+ <h3 class="uk-card-title">Top Small</h3>
76
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
77
+ </div>
78
+ </div>
79
+ <div class="uk-animation-toggle" tabindex="0">
80
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small">
81
+ <h3 class="uk-card-title">Bottom Small</h3>
82
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
83
+ </div>
84
+ </div>
85
+ <div class="uk-animation-toggle" tabindex="0">
86
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small">
87
+ <h3 class="uk-card-title">Right Small</h3>
88
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
89
+ </div>
90
+ </div>
91
+ <div class="uk-animation-toggle" tabindex="0">
92
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium">
93
+ <h3 class="uk-card-title">Left Medium</h3>
94
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
95
+ </div>
96
+ </div>
97
+ <div class="uk-animation-toggle" tabindex="0">
98
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium">
99
+ <h3 class="uk-card-title">Top Medium</h3>
100
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
101
+ </div>
102
+ </div>
103
+ <div class="uk-animation-toggle" tabindex="0">
104
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium">
105
+ <h3 class="uk-card-title">Bottom Medium</h3>
106
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
107
+ </div>
108
+ </div>
109
+ <div class="uk-animation-toggle" tabindex="0">
110
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium">
111
+ <h3 class="uk-card-title">Right Medium</h3>
112
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <h2>Reverse</h2>
118
+
119
+ <div class="uk-child-width-1-4@m" uk-grid>
120
+ <div class="uk-animation-toggle" tabindex="0">
121
+ <div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse">
122
+ <h3 class="uk-card-title">Fade</h3>
123
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
124
+ </div>
125
+ </div>
126
+ <div class="uk-animation-toggle" tabindex="0">
127
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse">
128
+ <h3 class="uk-card-title">Scale Up</h3>
129
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
130
+ </div>
131
+ </div>
132
+ <div class="uk-animation-toggle" tabindex="0">
133
+ <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse">
134
+ <h3 class="uk-card-title">Scale Down</h3>
135
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
136
+ </div>
137
+ </div>
138
+ <div class="uk-animation-toggle" tabindex="0">
139
+ <div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse">
140
+ <h3 class="uk-card-title">Shake</h3>
141
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
142
+ </div>
143
+ </div>
144
+ <div class="uk-animation-toggle" tabindex="0">
145
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse">
146
+ <h3 class="uk-card-title">Left</h3>
147
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
148
+ </div>
149
+ </div>
150
+ <div class="uk-animation-toggle" tabindex="0">
151
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse">
152
+ <h3 class="uk-card-title">Top</h3>
153
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
154
+ </div>
155
+ </div>
156
+ <div class="uk-animation-toggle" tabindex="0">
157
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse">
158
+ <h3 class="uk-card-title">Bottom</h3>
159
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
160
+ </div>
161
+ </div>
162
+ <div class="uk-animation-toggle" tabindex="0">
163
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse">
164
+ <h3 class="uk-card-title">Right</h3>
165
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
166
+ </div>
167
+ </div>
168
+ <div class="uk-animation-toggle" tabindex="0">
169
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse">
170
+ <h3 class="uk-card-title">Left Small</h3>
171
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
172
+ </div>
173
+ </div>
174
+ <div class="uk-animation-toggle" tabindex="0">
175
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse">
176
+ <h3 class="uk-card-title">Top Small</h3>
177
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
178
+ </div>
179
+ </div>
180
+ <div class="uk-animation-toggle" tabindex="0">
181
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse">
182
+ <h3 class="uk-card-title">Bottom Small</h3>
183
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
184
+ </div>
46
185
  </div>
47
- </div>
48
- <div class="uk-animation-toggle" tabindex="0">
49
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top">
50
- <h3 class="uk-card-title">Top</h3>
51
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
186
+ <div class="uk-animation-toggle" tabindex="0">
187
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse">
188
+ <h3 class="uk-card-title">Right Small</h3>
189
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
190
+ </div>
52
191
  </div>
53
- </div>
54
- <div class="uk-animation-toggle" tabindex="0">
55
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom">
56
- <h3 class="uk-card-title">Bottom</h3>
57
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
192
+ <div class="uk-animation-toggle" tabindex="0">
193
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse">
194
+ <h3 class="uk-card-title">Left Medium</h3>
195
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
196
+ </div>
58
197
  </div>
59
- </div>
60
- <div class="uk-animation-toggle" tabindex="0">
61
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right">
62
- <h3 class="uk-card-title">Right</h3>
63
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
198
+ <div class="uk-animation-toggle" tabindex="0">
199
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse">
200
+ <h3 class="uk-card-title">Top Medium</h3>
201
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
202
+ </div>
64
203
  </div>
65
- </div>
66
- <div class="uk-animation-toggle" tabindex="0">
67
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small">
68
- <h3 class="uk-card-title">Left Small</h3>
69
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
204
+ <div class="uk-animation-toggle" tabindex="0">
205
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse">
206
+ <h3 class="uk-card-title">Bottom Medium</h3>
207
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
208
+ </div>
70
209
  </div>
71
- </div>
72
- <div class="uk-animation-toggle" tabindex="0">
73
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small">
74
- <h3 class="uk-card-title">Top Small</h3>
75
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
76
- </div>
77
- </div>
78
- <div class="uk-animation-toggle" tabindex="0">
79
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small">
80
- <h3 class="uk-card-title">Bottom Small</h3>
81
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
210
+ <div class="uk-animation-toggle" tabindex="0">
211
+ <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse">
212
+ <h3 class="uk-card-title">Right Medium</h3>
213
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
214
+ </div>
82
215
  </div>
83
216
  </div>
84
- <div class="uk-animation-toggle" tabindex="0">
85
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small">
86
- <h3 class="uk-card-title">Right Small</h3>
87
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
88
- </div>
89
- </div>
90
- <div class="uk-animation-toggle" tabindex="0">
91
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium">
92
- <h3 class="uk-card-title">Left Medium</h3>
93
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
94
- </div>
95
- </div>
96
- <div class="uk-animation-toggle" tabindex="0">
97
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium">
98
- <h3 class="uk-card-title">Top Medium</h3>
99
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
100
- </div>
101
- </div>
102
- <div class="uk-animation-toggle" tabindex="0">
103
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium">
104
- <h3 class="uk-card-title">Bottom Medium</h3>
105
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
106
- </div>
107
- </div>
108
- <div class="uk-animation-toggle" tabindex="0">
109
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium">
110
- <h3 class="uk-card-title">Right Medium</h3>
111
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
112
- </div>
113
- </div>
114
- </div>
115
-
116
- <h2>Reverse</h2>
117
217
 
118
- <div class="uk-child-width-1-4@m" uk-grid>
119
- <div class="uk-animation-toggle" tabindex="0">
120
- <div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse">
121
- <h3 class="uk-card-title">Fade</h3>
122
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
123
- </div>
124
- </div>
125
- <div class="uk-animation-toggle" tabindex="0">
126
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse">
127
- <h3 class="uk-card-title">Scale Up</h3>
128
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
129
- </div>
130
- </div>
131
- <div class="uk-animation-toggle" tabindex="0">
132
- <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse">
133
- <h3 class="uk-card-title">Scale Down</h3>
134
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
135
- </div>
136
- </div>
137
- <div class="uk-animation-toggle" tabindex="0">
138
- <div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse">
139
- <h3 class="uk-card-title">Shake</h3>
140
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
141
- </div>
142
- </div>
143
- <div class="uk-animation-toggle" tabindex="0">
144
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse">
145
- <h3 class="uk-card-title">Left</h3>
146
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
147
- </div>
148
- </div>
149
- <div class="uk-animation-toggle" tabindex="0">
150
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse">
151
- <h3 class="uk-card-title">Top</h3>
152
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
153
- </div>
154
- </div>
155
- <div class="uk-animation-toggle" tabindex="0">
156
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse">
157
- <h3 class="uk-card-title">Bottom</h3>
158
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
159
- </div>
160
- </div>
161
- <div class="uk-animation-toggle" tabindex="0">
162
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse">
163
- <h3 class="uk-card-title">Right</h3>
164
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
165
- </div>
166
- </div>
167
- <div class="uk-animation-toggle" tabindex="0">
168
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse">
169
- <h3 class="uk-card-title">Left Small</h3>
170
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
171
- </div>
172
- </div>
173
- <div class="uk-animation-toggle" tabindex="0">
174
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse">
175
- <h3 class="uk-card-title">Top Small</h3>
176
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
177
- </div>
178
- </div>
179
- <div class="uk-animation-toggle" tabindex="0">
180
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse">
181
- <h3 class="uk-card-title">Bottom Small</h3>
182
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
183
- </div>
184
- </div>
185
- <div class="uk-animation-toggle" tabindex="0">
186
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse">
187
- <h3 class="uk-card-title">Right Small</h3>
188
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
189
- </div>
190
- </div>
191
- <div class="uk-animation-toggle" tabindex="0">
192
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse">
193
- <h3 class="uk-card-title">Left Medium</h3>
194
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
195
- </div>
196
- </div>
197
- <div class="uk-animation-toggle" tabindex="0">
198
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse">
199
- <h3 class="uk-card-title">Top Medium</h3>
200
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
201
- </div>
202
- </div>
203
- <div class="uk-animation-toggle" tabindex="0">
204
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse">
205
- <h3 class="uk-card-title">Bottom Medium</h3>
206
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
207
- </div>
208
- </div>
209
- <div class="uk-animation-toggle" tabindex="0">
210
- <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse">
211
- <h3 class="uk-card-title">Right Medium</h3>
212
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
213
- </div>
214
- </div>
215
- </div>
218
+ <h2>Kenburns</h2>
216
219
 
217
- <h2>Kenburns</h2>
220
+ <div class="uk-child-width-1-2@m" uk-grid>
221
+ <div>
218
222
 
219
- <div class="uk-child-width-1-2@m" uk-grid>
220
- <div>
223
+ <div class="uk-overflow-hidden">
224
+ <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" width="1800" height="1200" alt="">
225
+ </div>
221
226
 
222
- <div class="uk-overflow-hidden">
223
- <img class="uk-animation-kenburns uk-transform-origin-center-right" src="images/dark.jpg" width="1800" height="1200" alt="">
224
227
  </div>
228
+ <div>
225
229
 
226
- </div>
227
- <div>
230
+ <div class="uk-overflow-hidden">
231
+ <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" width="1800" height="1200" alt="">
232
+ </div>
228
233
 
229
- <div class="uk-overflow-hidden">
230
- <img class="uk-animation-kenburns uk-animation-reverse uk-transform-origin-top-center" src="images/dark.jpg" width="1800" height="1200" alt="">
231
234
  </div>
232
-
233
235
  </div>
234
- </div>
235
236
 
236
- <h2>Stroke</h2>
237
+ <h2>Stroke</h2>
237
238
 
238
- <div class="uk-child-width-1-2@m uk-text-center" uk-grid>
239
- <div class="uk-animation-toggle" tabindex="0">
240
- <img class="uk-animation-stroke" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
241
- </div>
242
- <div class="uk-animation-toggle" tabindex="0">
243
- <img class="uk-animation-stroke uk-animation-reverse" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
239
+ <div class="uk-child-width-1-2@m uk-text-center" uk-grid>
240
+ <div class="uk-animation-toggle" tabindex="0">
241
+ <img class="uk-animation-stroke" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
242
+ </div>
243
+ <div class="uk-animation-toggle" tabindex="0">
244
+ <img class="uk-animation-stroke uk-animation-reverse" width="400" height="400" src="images/icons.svg#cloud-upload" alt="" uk-svg="stroke-animation: true">
245
+ </div>
244
246
  </div>
245
- </div>
246
247
 
248
+ </div>
247
249
  </div>
248
250
 
249
251
  </body>
package/tests/navbar.html CHANGED
@@ -1721,6 +1721,43 @@
1721
1721
  </div>
1722
1722
  </nav>
1723
1723
 
1724
+ <h2>Justify</h2>
1725
+
1726
+ <nav class="uk-navbar-container uk-margin">
1727
+ <div class="uk-navbar-justify" uk-navbar>
1728
+ <div class="uk-navbar-left">
1729
+
1730
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1731
+
1732
+ <ul class="uk-navbar-nav">
1733
+ <li class="uk-active"><a href="#">Active</a></li>
1734
+ <li><a href="#">Parent</a></li>
1735
+ <li><a href="#">Item</a></li>
1736
+ <li><a href="#">Item</a></li>
1737
+ </ul>
1738
+
1739
+ </div>
1740
+ <div class="uk-navbar-right">
1741
+
1742
+ <ul class="uk-navbar-nav">
1743
+ <li><a href="#">Item</a></li>
1744
+ </ul>
1745
+
1746
+ <div class="uk-navbar-item">
1747
+ <ul class="uk-grid-small" uk-grid>
1748
+ <li>
1749
+ <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1750
+ </li>
1751
+ <li>
1752
+ <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1753
+ </li>
1754
+ </ul>
1755
+ </div>
1756
+
1757
+ </div>
1758
+ </div>
1759
+ </nav>
1760
+
1724
1761
  <h2>Layouts</h2>
1725
1762
 
1726
1763
  </div>
package/src/js/core/core.js DELETED
@@ -1,25 +0,0 @@
1
- import { css, inBrowser, on, toMs } from 'uikit-util';
2
-
3
- export default function () {
4
- if (!inBrowser) {
5
- return;
6
- }
7
-
8
- let started = 0;
9
- on(
10
- document,
11
- 'animationstart',
12
- ({ target }) => {
13
- if ((css(target, 'animationName') || '').match(/^uk-.*(left|right)/)) {
14
- started++;
15
- css(document.documentElement, 'overflowX', 'hidden');
16
- setTimeout(() => {
17
- if (!--started) {
18
- css(document.documentElement, 'overflowX', '');
19
- }
20
- }, toMs(css(target, 'animationDuration')) + 100);
21
- }
22
- },
23
- true
24
- );
25
- }