@frankenstyle/uikit 0.0.1 → 0.0.3

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 (90) hide show
  1. package/.prettierignore +0 -1
  2. package/CHANGELOG.md +62 -0
  3. package/README.md +0 -1
  4. package/build/publishDev.js +2 -3
  5. package/build/release.js +12 -7
  6. package/build/util.js +6 -6
  7. package/dist/css/uikit-rtl.css +105 -92
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +105 -92
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +1 -1
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +35 -30
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +35 -30
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +2 -2
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +1 -7
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +1 -7
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +41 -42
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +1 -7
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +34 -35
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +5 -6
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +2 -2
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +123 -70
  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 +131 -74
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +23 -24
  44. package/src/images/components/accordion-icon.svg +20 -0
  45. package/src/js/components/internal/slider-transitioner.js +1 -1
  46. package/src/js/components/slider.js +6 -7
  47. package/src/js/components/sortable.js +5 -6
  48. package/src/js/core/accordion.js +14 -10
  49. package/src/js/core/drop.js +8 -1
  50. package/src/js/core/height-viewport.js +12 -1
  51. package/src/js/core/icon.js +4 -2
  52. package/src/js/core/index.js +1 -0
  53. package/src/js/core/modal.js +5 -5
  54. package/src/js/core/overflow-fade.js +83 -8
  55. package/src/js/mixin/slider-drag.js +21 -14
  56. package/src/js/mixin/slider-nav.js +16 -18
  57. package/src/js/util/attr.js +1 -5
  58. package/src/less/components/accordion.less +110 -46
  59. package/src/less/components/card.less +1 -1
  60. package/src/less/components/form.less +10 -7
  61. package/src/less/components/lightbox.less +0 -5
  62. package/src/less/components/nav.less +1 -1
  63. package/src/less/components/overlay.less +2 -2
  64. package/src/less/components/utility.less +7 -4
  65. package/src/less/theme/accordion.less +31 -38
  66. package/src/scss/components/accordion.scss +77 -30
  67. package/src/scss/components/form.scss +4 -4
  68. package/src/scss/components/lightbox.scss +0 -5
  69. package/src/scss/components/nav.scss +1 -1
  70. package/src/scss/components/utility.scss +7 -4
  71. package/src/scss/mixins-theme.scss +39 -23
  72. package/src/scss/mixins.scss +38 -15
  73. package/src/scss/variables-theme.scss +20 -18
  74. package/src/scss/variables.scss +18 -14
  75. package/tests/accordion.html +76 -17
  76. package/tests/card.html +87 -1
  77. package/tests/height-viewport.html +12 -3
  78. package/tests/index.html +7 -7
  79. package/tests/navbar.html +1 -1
  80. package/tests/overlay.html +181 -13
  81. package/tests/parallax.html +1 -1
  82. package/tests/position.html +16 -16
  83. package/tests/sticky.html +2 -2
  84. package/tests/tab.html +1 -1
  85. package/tests/thumbnav.html +2 -2
  86. package/tests/toggle.html +2 -2
  87. package/tests/transition.html +19 -19
  88. package/tests/upload.html +2 -2
  89. package/src/images/backgrounds/accordion-close.svg +0 -4
  90. package/src/images/backgrounds/accordion-open.svg +0 -3
package/tests/card.html CHANGED
@@ -181,7 +181,93 @@
181
181
  </div>
182
182
 
183
183
  <div class="uk-section-default ">
184
- <div class="uk-section uk-section-small uk-background-cover" style="background-image: url('images/photo.jpg');">
184
+ <div class="uk-section uk-section-small uk-background-cover uk-inverse-light" style="background-image: url('images/photo.jpg');">
185
+ <div class="uk-container">
186
+
187
+ <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
188
+ <div>
189
+
190
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
191
+ <h3 class="uk-card-title">Default</h3>
192
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
193
+ </div>
194
+
195
+ </div>
196
+ <div>
197
+
198
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
199
+ <h3 class="uk-card-title">Primary</h3>
200
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
201
+ </div>
202
+
203
+ </div>
204
+ <div>
205
+
206
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
207
+ <h3 class="uk-card-title">Secondary</h3>
208
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
209
+ </div>
210
+
211
+ </div>
212
+ <div>
213
+
214
+ <div class="uk-card uk-card-overlay uk-card-hover uk-card-body">
215
+ <h3 class="uk-card-title">Overlay</h3>
216
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
217
+ </div>
218
+
219
+ </div>
220
+ </div>
221
+
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="uk-section-default ">
227
+ <div class="uk-section uk-section-small uk-background-cover uk-inverse-dark" style="background-image: url('images/light.jpg');">
228
+ <div class="uk-container">
229
+
230
+ <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
231
+ <div>
232
+
233
+ <div class="uk-card uk-card-default uk-card-hover uk-card-body">
234
+ <h3 class="uk-card-title">Default</h3>
235
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
236
+ </div>
237
+
238
+ </div>
239
+ <div>
240
+
241
+ <div class="uk-card uk-card-primary uk-card-hover uk-card-body">
242
+ <h3 class="uk-card-title">Primary</h3>
243
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
244
+ </div>
245
+
246
+ </div>
247
+ <div>
248
+
249
+ <div class="uk-card uk-card-secondary uk-card-hover uk-card-body">
250
+ <h3 class="uk-card-title">Secondary</h3>
251
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
252
+ </div>
253
+
254
+ </div>
255
+ <div>
256
+
257
+ <div class="uk-card uk-card-overlay uk-card-hover uk-card-body">
258
+ <h3 class="uk-card-title">Overlay</h3>
259
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
260
+ </div>
261
+
262
+ </div>
263
+ </div>
264
+
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="uk-section-default ">
270
+ <div class="uk-section uk-section-small uk-background-cover uk-inverse-light" style="background-image: url('images/dark.jpg');">
185
271
  <div class="uk-container">
186
272
 
187
273
  <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
package/tests/height-viewport.html CHANGED
@@ -65,11 +65,12 @@
65
65
  </div>
66
66
  <div>
67
67
 
68
- <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
68
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px; media: @xl">
69
69
  <div>
70
70
  <h1>JS</h1>
71
71
  <div>top: true</div>
72
72
  <div>bottom: 50px</div>
73
+ <div>media: @xl</div>
73
74
  </div>
74
75
  </div>
75
76
 
@@ -127,11 +128,12 @@
127
128
  </div>
128
129
  <div>
129
130
 
130
- <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
131
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px; media: @xl">
131
132
  <div>
132
133
  <h1>JS</h1>
133
134
  <div>top: true</div>
134
135
  <div>bottom: 50px</div>
136
+ <div>media: @xl</div>
135
137
  </div>
136
138
  </div>
137
139
 
@@ -189,11 +191,12 @@
189
191
  </div>
190
192
  <div>
191
193
 
192
- <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px">
194
+ <div class="uk-section uk-section-primary uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-height-viewport="offset-top: true; offset-bottom: 50px; media: @xl">
193
195
  <div>
194
196
  <h1>JS</h1>
195
197
  <div>top: true</div>
196
198
  <div>bottom: 50px</div>
199
+ <div>media: @xl</div>
197
200
  </div>
198
201
  </div>
199
202
 
@@ -243,6 +246,12 @@
243
246
  <td>min-height</td>
244
247
  <td>The CSS property to set. (min-height, height, max-height)</td>
245
248
  </tr>
249
+ <tr>
250
+ <td><code>media</code></td>
251
+ <td>Boolean, Number, String</td>
252
+ <td>false</td>
253
+ <td>Condition for the component to be active - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
254
+ </tr>
246
255
  </tbody>
247
256
  </table>
248
257
  </div>
package/tests/index.html CHANGED
@@ -663,7 +663,7 @@
663
663
  </div>
664
664
  <div>
665
665
 
666
- <div class="uk-inline-clip">
666
+ <div class="uk-inline-clip uk-inverse-light">
667
667
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
668
668
  <div class="uk-overlay uk-overlay-default uk-position-bottom">
669
669
  <p>Default Lorem ipsum dolor sit amet, consectetur.</p>
@@ -673,7 +673,7 @@
673
673
  </div>
674
674
  <div>
675
675
 
676
- <div class="uk-inline-clip">
676
+ <div class="uk-inline-clip uk-inverse-light">
677
677
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
678
678
  <div class="uk-overlay uk-overlay-primary uk-position-bottom">
679
679
  <p>Primary Lorem ipsum dolor sit amet, consectetur.</p>
@@ -683,7 +683,7 @@
683
683
  </div>
684
684
  <div>
685
685
 
686
- <div class="uk-inline-clip">
686
+ <div class="uk-inline-clip uk-inverse-light">
687
687
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
688
688
  <div class="uk-card uk-card-body uk-card-overlay uk-card-hover uk-position-cover uk-position-medium">
689
689
  <h3 class="uk-card-title">Card Overlay</h3>
@@ -722,10 +722,10 @@
722
722
  <dd>A description text</dd>
723
723
  </dl>
724
724
 
725
- <ul uk-accordion>
725
+ <ul class="uk-accordion-default" uk-accordion>
726
726
  <li class="uk-open">
727
727
 
728
- <a class="uk-accordion-title" href="#">Item 1</a>
728
+ <a class="uk-accordion-title" href="#">Item 1 <span uk-accordion-icon></span></a>
729
729
  <div class="uk-accordion-content">
730
730
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
731
731
  </div>
@@ -733,7 +733,7 @@
733
733
  </li>
734
734
  <li>
735
735
 
736
- <a class="uk-accordion-title" href="#">Item 2</a>
736
+ <a class="uk-accordion-title" href="#">Item 2 <span uk-accordion-icon></span></a>
737
737
  <div class="uk-accordion-content">
738
738
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
739
739
  </div>
@@ -741,7 +741,7 @@
741
741
  </li>
742
742
  <li>
743
743
 
744
- <a class="uk-accordion-title" href="#">Item 3</a>
744
+ <a class="uk-accordion-title" href="#">Item 3 <span uk-accordion-icon></span></a>
745
745
  <div class="uk-accordion-content">
746
746
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
747
747
  </div>
package/tests/navbar.html CHANGED
@@ -2697,7 +2697,7 @@
2697
2697
 
2698
2698
  <h2>Mouse Tracker</h2>
2699
2699
 
2700
- <div id="js-mousetracker" class="uk-position-relative">
2700
+ <div id="js-mousetracker" class="uk-position-relative uk-inverse-light">
2701
2701
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
2702
2702
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center" style="height: 150px; width: 150px;">
2703
2703
  <div id="js-mousetarget" class="uk-position-center"></div>
package/tests/overlay.html CHANGED
@@ -14,10 +14,12 @@
14
14
 
15
15
  <h1>Overlay</h1>
16
16
 
17
- <div class="uk-child-width-1-2@m" uk-grid>
17
+ <h2>Default</h2>
18
+
19
+ <div class="uk-child-width-1-3@m" uk-grid>
18
20
  <div>
19
21
 
20
- <div class="uk-inline">
22
+ <div class="uk-inline uk-inverse-light">
21
23
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
22
24
  <div class="uk-overlay uk-overlay-default uk-position-bottom">
23
25
  <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
@@ -27,20 +29,70 @@
27
29
  </div>
28
30
  <div>
29
31
 
30
- <div class="uk-inline">
32
+ <div class="uk-inline uk-inverse-dark">
33
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
34
+ <div class="uk-overlay uk-overlay-default uk-position-bottom">
35
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
36
+ </div>
37
+ </div>
38
+
39
+ </div>
40
+ <div>
41
+
42
+ <div class="uk-inline uk-inverse-light">
43
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
44
+ <div class="uk-overlay uk-overlay-default uk-position-bottom">
45
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
46
+ </div>
47
+ </div>
48
+
49
+ </div>
50
+ <div>
51
+
52
+ <div class="uk-inline uk-inverse-light">
31
53
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
32
- <div class="uk-overlay uk-overlay-primary uk-position-bottom">
33
- <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
54
+ <div class="uk-overlay-default uk-position-cover">
55
+ <div class="uk-overlay uk-position-bottom">
56
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
57
+ </div>
34
58
  </div>
35
59
  </div>
36
60
 
37
61
  </div>
38
62
  <div>
39
63
 
40
- <div class="uk-inline">
64
+ <div class="uk-inline uk-inverse-dark">
65
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
66
+ <div class="uk-overlay-default uk-position-cover">
67
+ <div class="uk-overlay uk-position-bottom">
68
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ </div>
74
+ <div>
75
+
76
+ <div class="uk-inline uk-inverse-light">
77
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
78
+ <div class="uk-overlay-default uk-position-cover">
79
+ <div class="uk-overlay uk-position-bottom">
80
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
81
+ </div>
82
+ </div>
83
+ </div>
84
+
85
+ </div>
86
+ </div>
87
+
88
+ <h2>Primary</h2>
89
+
90
+ <div class="uk-child-width-1-3@m" uk-grid>
91
+ <div>
92
+
93
+ <div class="uk-inline uk-inverse-light">
41
94
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
42
- <div class="uk-overlay-default uk-position-cover"></div>
43
- <div class="uk-overlay uk-position-bottom uk-dark">
95
+ <div class="uk-overlay uk-overlay-primary uk-position-bottom">
44
96
  <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
45
97
  </div>
46
98
  </div>
@@ -48,17 +100,65 @@
48
100
  </div>
49
101
  <div>
50
102
 
51
- <div class="uk-inline">
103
+ <div class="uk-inline uk-inverse-dark">
104
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
105
+ <div class="uk-overlay uk-overlay-primary uk-position-bottom">
106
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
107
+ </div>
108
+ </div>
109
+
110
+ </div>
111
+ <div>
112
+
113
+ <div class="uk-inline uk-inverse-light">
114
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
115
+ <div class="uk-overlay uk-overlay-primary uk-position-bottom">
116
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
117
+ </div>
118
+ </div>
119
+
120
+ </div>
121
+
122
+ <div>
123
+
124
+ <div class="uk-inline uk-inverse-light">
52
125
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
53
- <div class="uk-overlay-primary uk-position-cover"></div>
54
- <div class="uk-overlay uk-position-bottom uk-light">
55
- <p>Primary Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
126
+ <div class="uk-overlay-primary uk-position-cover">
127
+ <div class="uk-overlay uk-position-bottom">
128
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ </div>
134
+ <div>
135
+
136
+ <div class="uk-inline uk-inverse-dark">
137
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
138
+ <div class="uk-overlay-primary uk-position-cover">
139
+ <div class="uk-overlay uk-position-bottom">
140
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ </div>
146
+ <div>
147
+
148
+ <div class="uk-inline uk-inverse-light">
149
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
150
+ <div class="uk-overlay-primary uk-position-cover">
151
+ <div class="uk-overlay uk-position-bottom">
152
+ <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
153
+ </div>
56
154
  </div>
57
155
  </div>
58
156
 
59
157
  </div>
60
158
  </div>
61
159
 
160
+ <h2>Icon</h2>
161
+
62
162
  <div class="uk-child-width-1-3@m" uk-grid>
63
163
  <div>
64
164
 
@@ -69,10 +169,30 @@
69
169
  </div>
70
170
  </div>
71
171
 
172
+ </div>
173
+ <div>
174
+
175
+ <div class="uk-inline uk-dark">
176
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
177
+ <div class="uk-position-center">
178
+ <span uk-overlay-icon></span>
179
+ </div>
180
+ </div>
181
+
72
182
  </div>
73
183
  <div>
74
184
 
75
185
  <div class="uk-inline uk-light">
186
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
187
+ <div class="uk-position-center">
188
+ <span uk-overlay-icon></span>
189
+ </div>
190
+ </div>
191
+
192
+ </div>
193
+ <div>
194
+
195
+ <div class="uk-inline">
76
196
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
77
197
  <div class="uk-overlay-default uk-position-cover">
78
198
  <div class="uk-position-center">
@@ -84,7 +204,31 @@
84
204
  </div>
85
205
  <div>
86
206
 
87
- <div class="uk-inline uk-light">
207
+ <div class="uk-inline">
208
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
209
+ <div class="uk-overlay-default uk-position-cover">
210
+ <div class="uk-position-center">
211
+ <span uk-overlay-icon></span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ </div>
217
+ <div>
218
+
219
+ <div class="uk-inline">
220
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
221
+ <div class="uk-overlay-default uk-position-cover">
222
+ <div class="uk-position-center">
223
+ <span uk-overlay-icon></span>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ </div>
229
+ <div>
230
+
231
+ <div class="uk-inline">
88
232
  <img src="images/photo.jpg" width="1800" height="1200" alt="">
89
233
  <div class="uk-overlay-primary uk-position-cover">
90
234
  <div class="uk-position-center">
@@ -94,6 +238,30 @@
94
238
  </div>
95
239
 
96
240
  </div>
241
+ <div>
242
+
243
+ <div class="uk-inline">
244
+ <img src="images/light.jpg" width="1800" height="1200" alt="">
245
+ <div class="uk-overlay-primary uk-position-cover">
246
+ <div class="uk-position-center">
247
+ <span uk-overlay-icon></span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ </div>
253
+ <div>
254
+
255
+ <div class="uk-inline">
256
+ <img src="images/dark.jpg" width="1800" height="1200" alt="">
257
+ <div class="uk-overlay-primary uk-position-cover">
258
+ <div class="uk-position-center">
259
+ <span uk-overlay-icon></span>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ </div>
97
265
  </div>
98
266
 
99
267
  </div>
package/tests/parallax.html CHANGED
@@ -182,7 +182,7 @@
182
182
  <td><code>media</code></td>
183
183
  <td>Boolean, Number, String</td>
184
184
  <td>false</td>
185
- <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
185
+ <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
186
186
  </tr>
187
187
  </tbody>
188
188
  </table>
package/tests/position.html CHANGED
@@ -45,7 +45,7 @@
45
45
  <div class="uk-child-width-1-2@s" uk-grid>
46
46
  <div>
47
47
 
48
- <div class="uk-inline">
48
+ <div class="uk-inline uk-inverse-light">
49
49
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
50
50
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-left">Top Left</div>
51
51
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-center">Top Center</div>
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  <div>
63
63
 
64
- <div class="uk-inline">
64
+ <div class="uk-inline uk-inverse-light">
65
65
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
66
66
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top uk-text-center">Top</div>
67
67
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom uk-text-center">Bottom</div>
@@ -85,7 +85,7 @@
85
85
  <div class="uk-child-width-1-2@s" uk-grid>
86
86
  <div>
87
87
 
88
- <div class="uk-inline">
88
+ <div class="uk-inline uk-inverse-light">
89
89
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
90
90
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-left">Top Left</div>
91
91
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-center">Top Center</div>
@@ -101,7 +101,7 @@
101
101
  </div>
102
102
  <div>
103
103
 
104
- <div class="uk-inline">
104
+ <div class="uk-inline uk-inverse-light">
105
105
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
106
106
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top uk-text-center">Top</div>
107
107
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom uk-text-center">Bottom</div>
@@ -127,7 +127,7 @@
127
127
  <div class="uk-child-width-1-2@s" uk-grid>
128
128
  <div>
129
129
 
130
- <div class="uk-inline">
130
+ <div class="uk-inline uk-inverse-light">
131
131
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
132
132
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-left">Top Left</div>
133
133
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-center">Top Center</div>
@@ -143,7 +143,7 @@
143
143
  </div>
144
144
  <div>
145
145
 
146
- <div class="uk-inline">
146
+ <div class="uk-inline uk-inverse-light">
147
147
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
148
148
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top uk-text-center">Top</div>
149
149
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom uk-text-center">Bottom</div>
@@ -166,7 +166,7 @@
166
166
  <div class="uk-child-width-1-2@s" uk-grid>
167
167
  <div>
168
168
 
169
- <div class="uk-inline">
169
+ <div class="uk-inline uk-inverse-light">
170
170
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
171
171
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-left">Top Left</div>
172
172
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-center">Top Center</div>
@@ -182,7 +182,7 @@
182
182
  </div>
183
183
  <div>
184
184
 
185
- <div class="uk-inline">
185
+ <div class="uk-inline uk-inverse-light">
186
186
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
187
187
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top uk-text-center">Top</div>
188
188
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom uk-text-center">Bottom</div>
@@ -203,7 +203,7 @@
203
203
  <div class="uk-child-width-1-4@s" uk-grid>
204
204
  <div>
205
205
 
206
- <div class="uk-inline">
206
+ <div class="uk-inline uk-inverse-light">
207
207
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
208
208
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-horizontal uk-text-center">Horizontal</div>
209
209
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-vertical uk-text-center">Vertical</div>
@@ -212,7 +212,7 @@
212
212
  </div>
213
213
  <div>
214
214
 
215
- <div class="uk-inline">
215
+ <div class="uk-inline uk-inverse-light">
216
216
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
217
217
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-horizontal uk-text-center">Horizontal</div>
218
218
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-vertical uk-text-center">Vertical</div>
@@ -221,7 +221,7 @@
221
221
  </div>
222
222
  <div>
223
223
 
224
- <div class="uk-inline">
224
+ <div class="uk-inline uk-inverse-light">
225
225
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
226
226
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-horizontal uk-text-center">Horizontal</div>
227
227
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-vertical uk-text-center">Vertical</div>
@@ -230,7 +230,7 @@
230
230
  </div>
231
231
  <div>
232
232
 
233
- <div class="uk-inline">
233
+ <div class="uk-inline uk-inverse-light">
234
234
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
235
235
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-horizontal uk-text-center">Horizontal</div>
236
236
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-vertical uk-text-center">Vertical</div>
@@ -244,7 +244,7 @@
244
244
  <div class="uk-child-width-1-4@s" uk-grid>
245
245
  <div>
246
246
 
247
- <div class="uk-inline">
247
+ <div class="uk-inline uk-inverse-light">
248
248
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
249
249
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
250
250
  </div>
@@ -252,7 +252,7 @@
252
252
  </div>
253
253
  <div>
254
254
 
255
- <div class="uk-inline">
255
+ <div class="uk-inline uk-inverse-light">
256
256
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
257
257
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
258
258
  </div>
@@ -260,7 +260,7 @@
260
260
  </div>
261
261
  <div>
262
262
 
263
- <div class="uk-inline">
263
+ <div class="uk-inline uk-inverse-light">
264
264
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
265
265
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
266
266
  </div>
@@ -268,7 +268,7 @@
268
268
  </div>
269
269
  <div>
270
270
 
271
- <div class="uk-inline">
271
+ <div class="uk-inline uk-inverse-light">
272
272
  <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
273
273
  <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
274
274
  </div>
package/tests/sticky.html CHANGED
@@ -395,9 +395,9 @@
395
395
  </tr>
396
396
  <tr>
397
397
  <td><code>media</code></td>
398
- <td>Number, String</td>
398
+ <td>Boolean, Number, String</td>
399
399
  <td>false</td>
400
- <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl).</td>
400
+ <td>Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
401
401
  </tr>
402
402
  <tr>
403
403
  <td><code>target-offset</code></td>