uikit 3.13.10 → 3.13.11-dev.eb080f280

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 (92) hide show
  1. package/CHANGELOG.md +29 -1
  2. package/dist/css/uikit-core-rtl.css +46 -8
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +46 -8
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +46 -6
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +46 -6
  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 +18 -11
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +18 -11
  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 +18 -11
  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 +2 -2
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +62 -30
  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 +349 -253
  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 +392 -259
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/js/components/sortable.js +2 -3
  44. package/src/js/components/tooltip.js +38 -3
  45. package/src/js/core/drop.js +20 -10
  46. package/src/js/core/navbar.js +18 -6
  47. package/src/js/core/scrollspy-nav.js +4 -9
  48. package/src/js/core/sticky.js +55 -21
  49. package/src/js/mixin/media.js +12 -9
  50. package/src/js/mixin/modal.js +6 -2
  51. package/src/js/mixin/parallax.js +5 -1
  52. package/src/js/mixin/position.js +24 -24
  53. package/src/js/uikit-core.js +0 -4
  54. package/src/js/util/lang.js +0 -4
  55. package/src/js/util/position.js +180 -125
  56. package/src/js/util/viewport.js +42 -22
  57. package/src/less/components/drop.less +0 -1
  58. package/src/less/components/dropdown.less +11 -1
  59. package/src/less/components/icon.less +3 -0
  60. package/src/less/components/nav.less +22 -0
  61. package/src/less/components/navbar.less +26 -2
  62. package/src/less/components/search.less +2 -0
  63. package/src/less/components/sticky.less +8 -3
  64. package/src/less/theme/dropdown.less +4 -0
  65. package/src/less/theme/nav.less +6 -0
  66. package/src/less/theme/navbar.less +4 -0
  67. package/src/less/theme/search.less +6 -0
  68. package/src/scss/components/drop.scss +0 -1
  69. package/src/scss/components/dropdown.scss +11 -1
  70. package/src/scss/components/icon.scss +3 -0
  71. package/src/scss/components/nav.scss +22 -0
  72. package/src/scss/components/navbar.scss +26 -2
  73. package/src/scss/components/search.scss +2 -0
  74. package/src/scss/components/sticky.scss +8 -3
  75. package/src/scss/mixins-theme.scss +5 -0
  76. package/src/scss/mixins.scss +5 -0
  77. package/src/scss/theme/dropdown.scss +4 -0
  78. package/src/scss/theme/nav.scss +6 -0
  79. package/src/scss/theme/navbar.scss +4 -0
  80. package/src/scss/theme/search.scss +6 -0
  81. package/src/scss/variables-theme.scss +5 -1
  82. package/src/scss/variables.scss +5 -1
  83. package/tests/animation.html +216 -214
  84. package/tests/dropdown.html +16 -2
  85. package/tests/nav.html +27 -0
  86. package/tests/navbar.html +55 -4
  87. package/tests/parallax.html +4 -4
  88. package/tests/position.html +38 -39
  89. package/tests/sticky-navbar.html +6 -6
  90. package/tests/sticky-parallax.html +23 -7
  91. package/tests/sticky.html +300 -49
  92. 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/dropdown.html CHANGED
@@ -24,7 +24,7 @@
24
24
  <h1>Dropdown</h1>
25
25
 
26
26
  <div uk-grid>
27
- <div class="uk-width-1-3@m">
27
+ <div class="uk-width-1-4@m">
28
28
 
29
29
  <div class="uk-dropdown test">
30
30
 
@@ -59,7 +59,21 @@
59
59
  </div>
60
60
 
61
61
  </div>
62
- <div class="uk-width-2-3@m">
62
+ <div class="uk-width-1-4@m">
63
+
64
+ <div class="uk-dropdown test">
65
+
66
+ <ul class="uk-nav uk-dropdown-nav">
67
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
68
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
69
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
70
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
71
+ </ul>
72
+
73
+ </div>
74
+
75
+ </div>
76
+ <div class="uk-width-1-2@m">
63
77
 
64
78
  <div class="uk-margin" uk-margin>
65
79
 
package/tests/nav.html CHANGED
@@ -287,6 +287,33 @@
287
287
  </div>
288
288
  </div>
289
289
 
290
+ <div class="uk-child-width-1-4@m" uk-grid>
291
+ <div>
292
+
293
+ <h2>Default</h2>
294
+
295
+ <ul class="uk-nav uk-nav-default">
296
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
297
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
298
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
299
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
300
+ </ul>
301
+
302
+ </div>
303
+ <div>
304
+
305
+ <h2>Primary</h2>
306
+
307
+ <ul class="uk-nav uk-nav-primary">
308
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
309
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
310
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
311
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
312
+ </ul>
313
+
314
+ </div>
315
+ </div>
316
+
290
317
  <h2>JavaScript Options</h2>
291
318
 
292
319
  <table class="uk-table uk-table-striped">