uikit 3.9.5-dev.600ee2ba9 → 3.9.5-dev.e48c5e252

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 (55) hide show
  1. package/CHANGELOG.md +10 -1
  2. package/README.md +4 -4
  3. package/dist/css/uikit-core-rtl.css +15 -4
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +15 -4
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +15 -4
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +15 -4
  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 +1 -1
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +1 -1
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +1 -1
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +1 -1
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +1 -1
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +1 -1
  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 +14 -9
  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 +14 -9
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/core/img.js +3 -3
  45. package/src/js/core/sticky.js +6 -1
  46. package/src/less/components/link.less +6 -3
  47. package/src/less/components/search.less +22 -0
  48. package/src/less/components/utility.less +6 -0
  49. package/src/less/theme/search.less +6 -0
  50. package/src/scss/components/link.scss +6 -3
  51. package/src/scss/components/search.scss +14 -0
  52. package/src/scss/components/utility.scss +6 -0
  53. package/src/scss/mixins-theme.scss +12 -0
  54. package/src/scss/mixins.scss +12 -0
  55. package/src/scss/theme/search.scss +6 -0
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "uikit",
3
3
  "title": "UIkit",
4
4
  "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
5
- "version": "3.9.5-dev.600ee2ba9",
5
+ "version": "3.9.5-dev.e48c5e252",
6
6
  "main": "dist/js/uikit.js",
7
7
  "style": "dist/css/uikit.css",
8
8
  "sideEffects": [
@@ -1,4 +1,4 @@
1
- import {attr, children, createEvent, css, data, Dimensions, escape, getImage, includes, isUndefined, once, parent, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
1
+ import {$, attr, children, createEvent, css, data, Dimensions, escape, getImage, includes, isUndefined, once, parent, queryAll, startsWith, toFloat, toPx, trigger} from 'uikit-util';
2
2
 
3
3
  export default {
4
4
 
@@ -157,7 +157,7 @@ function setSrcAttrs(el, src) {
157
157
  }
158
158
  })
159
159
  );
160
- attr(el, 'src', src);
160
+ src && attr(el, 'src', src);
161
161
  } else if (src) {
162
162
 
163
163
  const change = !includes(el.style.backgroundImage, src);
@@ -212,7 +212,7 @@ function getImageFromElement(el, src) {
212
212
  return new Promise((resolve, reject) => {
213
213
  const picture = parentNode.cloneNode(true);
214
214
  once(picture, 'load error', e => e.type === 'error' ? reject(e) : resolve(e.target), true);
215
- setSrcAttrs(el);
215
+ setSrcAttrs($('img', picture));
216
216
  });
217
217
  }
218
218
 
@@ -1,6 +1,6 @@
1
1
  import Class from '../mixin/class';
2
2
  import Media from '../mixin/media';
3
- import {$, addClass, after, Animation, assign, css, dimensions, fastdom, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toFloat, toggleClass, toPx, trigger, within} from 'uikit-util';
3
+ import {$, addClass, after, Animation, assign, css, dimensions, fastdom, height as getHeight, hasClass, isNumeric, isString, isVisible, noop, offset, offsetPosition, parent, query, remove, removeClass, replaceClass, scrollTop, toFloat, toggleClass, toPx, trigger, within} from 'uikit-util';
4
4
 
5
5
  export default {
6
6
 
@@ -146,6 +146,11 @@ export default {
146
146
 
147
147
  height = !this.isActive ? this.$el.offsetHeight : height;
148
148
 
149
+ if (height + this.offset > getHeight(window)) {
150
+ this.inactive = true;
151
+ return false;
152
+ }
153
+
149
154
  const referenceElement = this.isFixed ? this.placeholder : this.$el;
150
155
  this.topOffset = offset(referenceElement).top;
151
156
  this.bottomOffset = this.topOffset + height;
@@ -32,7 +32,8 @@
32
32
  ========================================================================== */
33
33
 
34
34
  a.uk-link-muted,
35
- .uk-link-muted a {
35
+ .uk-link-muted a,
36
+ .uk-link-toggle .uk-link-muted {
36
37
  color: @link-muted-color;
37
38
  .hook-link-muted();
38
39
  }
@@ -49,7 +50,8 @@ a.uk-link-muted:hover,
49
50
  ========================================================================== */
50
51
 
51
52
  a.uk-link-text,
52
- .uk-link-text a {
53
+ .uk-link-text a,
54
+ .uk-link-toggle .uk-link-text {
53
55
  color: inherit;
54
56
  .hook-link-text();
55
57
  }
@@ -66,7 +68,8 @@ a.uk-link-text:hover,
66
68
  ========================================================================== */
67
69
 
68
70
  a.uk-link-heading,
69
- .uk-link-heading a {
71
+ .uk-link-heading a,
72
+ .uk-link-toggle .uk-link-heading {
70
73
  color: inherit;
71
74
  .hook-link-heading();
72
75
  }
@@ -225,6 +225,11 @@
225
225
  .hook-search-navbar-input();
226
226
  }
227
227
 
228
+ /* Focus */
229
+ .uk-search-navbar .uk-search-input:focus {
230
+ .hook-search-navbar-input-focus();
231
+ }
232
+
228
233
  /*
229
234
  * Icon
230
235
  */
@@ -251,6 +256,11 @@
251
256
  .hook-search-large-input();
252
257
  }
253
258
 
259
+ /* Focus */
260
+ .uk-search-large .uk-search-input:focus {
261
+ .hook-search-large-input-focus();
262
+ }
263
+
254
264
  /*
255
265
  * Icon
256
266
  */
@@ -285,7 +295,9 @@
285
295
  .hook-search-default-input() {}
286
296
  .hook-search-default-input-focus() {}
287
297
  .hook-search-navbar-input() {}
298
+ .hook-search-navbar-input-focus() {}
288
299
  .hook-search-large-input() {}
300
+ .hook-search-large-input-focus() {}
289
301
 
290
302
  .hook-search-toggle() {}
291
303
  .hook-search-toggle-hover() {}
@@ -349,11 +361,19 @@
349
361
  .hook-inverse-search-navbar-input();
350
362
  }
351
363
 
364
+ .uk-search-navbar .uk-search-input:focus {
365
+ .hook-inverse-search-navbar-input-focus();
366
+ }
367
+
352
368
  .uk-search-large .uk-search-input {
353
369
  background-color: @inverse-search-large-background;
354
370
  .hook-inverse-search-large-input();
355
371
  }
356
372
 
373
+ .uk-search-large .uk-search-input:focus {
374
+ .hook-inverse-search-large-input-focus();
375
+ }
376
+
357
377
  //
358
378
  // Toggle
359
379
  //
@@ -373,6 +393,8 @@
373
393
  .hook-inverse-search-default-input() {}
374
394
  .hook-inverse-search-default-input-focus() {}
375
395
  .hook-inverse-search-navbar-input() {}
396
+ .hook-inverse-search-navbar-input-focus() {}
376
397
  .hook-inverse-search-large-input() {}
398
+ .hook-inverse-search-large-input-focus() {}
377
399
  .hook-inverse-search-toggle() {}
378
400
  .hook-inverse-search-toggle-hover() {}
@@ -242,6 +242,12 @@
242
242
  max-width: none;
243
243
  }
244
244
 
245
+ /*
246
+ * Fix initial iframe width. Without the viewport is expanded on iOS devices
247
+ */
248
+
249
+ [uk-responsive] { max-width: 100%; }
250
+
245
251
 
246
252
  /* Border
247
253
  ========================================================================== */
@@ -38,12 +38,16 @@
38
38
 
39
39
  .hook-search-navbar-input() {}
40
40
 
41
+ .hook-search-navbar-input-focus() {}
42
+
41
43
 
42
44
  // Large modifiers
43
45
  // ========================================================================
44
46
 
45
47
  .hook-search-large-input() {}
46
48
 
49
+ .hook-search-large-input-focus() {}
50
+
47
51
 
48
52
  // Toggle
49
53
  // ========================================================================
@@ -68,8 +72,10 @@
68
72
  .hook-inverse-search-default-input-focus() {}
69
73
 
70
74
  .hook-inverse-search-navbar-input() {}
75
+ .hook-inverse-search-navbar-input-focus() {}
71
76
 
72
77
  .hook-inverse-search-large-input() {}
78
+ .hook-inverse-search-large-input-focus() {}
73
79
 
74
80
  .hook-inverse-search-toggle() {}
75
81
  .hook-inverse-search-toggle-hover() {}
@@ -32,7 +32,8 @@ $link-heading-hover-text-decoration: none !default;
32
32
  ========================================================================== */
33
33
 
34
34
  a.uk-link-muted,
35
- .uk-link-muted a {
35
+ .uk-link-muted a,
36
+ .uk-link-toggle .uk-link-muted {
36
37
  color: $link-muted-color;
37
38
  @if(mixin-exists(hook-link-muted)) {@include hook-link-muted();}
38
39
  }
@@ -49,7 +50,8 @@ a.uk-link-muted:hover,
49
50
  ========================================================================== */
50
51
 
51
52
  a.uk-link-text,
52
- .uk-link-text a {
53
+ .uk-link-text a,
54
+ .uk-link-toggle .uk-link-text {
53
55
  color: inherit;
54
56
  @if(mixin-exists(hook-link-text)) {@include hook-link-text();}
55
57
  }
@@ -66,7 +68,8 @@ a.uk-link-text:hover,
66
68
  ========================================================================== */
67
69
 
68
70
  a.uk-link-heading,
69
- .uk-link-heading a {
71
+ .uk-link-heading a,
72
+ .uk-link-toggle .uk-link-heading {
70
73
  color: inherit;
71
74
  @if(mixin-exists(hook-link-heading)) {@include hook-link-heading();}
72
75
  }
@@ -225,6 +225,11 @@ $search-toggle-hover-color: $global-color !default;
225
225
  @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();}
226
226
  }
227
227
 
228
+ /* Focus */
229
+ .uk-search-navbar .uk-search-input:focus {
230
+ @if(mixin-exists(hook-search-navbar-input-focus)) {@include hook-search-navbar-input-focus();}
231
+ }
232
+
228
233
  /*
229
234
  * Icon
230
235
  */
@@ -251,6 +256,11 @@ $search-toggle-hover-color: $global-color !default;
251
256
  @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();}
252
257
  }
253
258
 
259
+ /* Focus */
260
+ .uk-search-large .uk-search-input:focus {
261
+ @if(mixin-exists(hook-search-large-input-focus)) {@include hook-search-large-input-focus();}
262
+ }
263
+
254
264
  /*
255
265
  * Icon
256
266
  */
@@ -285,7 +295,9 @@ $search-toggle-hover-color: $global-color !default;
285
295
  // @mixin hook-search-default-input(){}
286
296
  // @mixin hook-search-default-input-focus(){}
287
297
  // @mixin hook-search-navbar-input(){}
298
+ // @mixin hook-search-navbar-input-focus(){}
288
299
  // @mixin hook-search-large-input(){}
300
+ // @mixin hook-search-large-input-focus(){}
289
301
 
290
302
  // @mixin hook-search-toggle(){}
291
303
  // @mixin hook-search-toggle-hover(){}
@@ -316,6 +328,8 @@ $inverse-search-toggle-hover-color: $inverse-global-color !default;
316
328
  // @mixin hook-inverse-search-default-input(){}
317
329
  // @mixin hook-inverse-search-default-input-focus(){}
318
330
  // @mixin hook-inverse-search-navbar-input(){}
331
+ // @mixin hook-inverse-search-navbar-input-focus(){}
319
332
  // @mixin hook-inverse-search-large-input(){}
333
+ // @mixin hook-inverse-search-large-input-focus(){}
320
334
  // @mixin hook-inverse-search-toggle(){}
321
335
  // @mixin hook-inverse-search-toggle-hover(){}
@@ -242,6 +242,12 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3)
242
242
  max-width: none;
243
243
  }
244
244
 
245
+ /*
246
+ * Fix initial iframe width. Without the viewport is expanded on iOS devices
247
+ */
248
+
249
+ [uk-responsive] { max-width: 100%; }
250
+
245
251
 
246
252
  /* Border
247
253
  ========================================================================== */
@@ -1238,11 +1238,19 @@
1238
1238
  @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();}
1239
1239
  }
1240
1240
 
1241
+ .uk-search-navbar .uk-search-input:focus {
1242
+ @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
1243
+ }
1244
+
1241
1245
  .uk-search-large .uk-search-input {
1242
1246
  background-color: $inverse-search-large-background;
1243
1247
  @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();}
1244
1248
  }
1245
1249
 
1250
+ .uk-search-large .uk-search-input:focus {
1251
+ @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
1252
+ }
1253
+
1246
1254
  //
1247
1255
  // Toggle
1248
1256
  //
@@ -1839,14 +1847,18 @@
1839
1847
  @mixin hook-search-default-input(){ border: $search-default-border-width solid $search-default-border; }
1840
1848
  @mixin hook-search-default-input-focus(){ border-color: $search-default-focus-border; }
1841
1849
  @mixin hook-search-navbar-input(){}
1850
+ @mixin hook-search-navbar-input-focus(){}
1842
1851
  @mixin hook-search-large-input(){}
1852
+ @mixin hook-search-large-input-focus(){}
1843
1853
  @mixin hook-search-toggle(){}
1844
1854
  @mixin hook-search-toggle-hover(){}
1845
1855
  @mixin hook-search-misc(){}
1846
1856
  @mixin hook-inverse-search-default-input(){ border-color: $inverse-global-border; }
1847
1857
  @mixin hook-inverse-search-default-input-focus(){}
1848
1858
  @mixin hook-inverse-search-navbar-input(){}
1859
+ @mixin hook-inverse-search-navbar-input-focus(){}
1849
1860
  @mixin hook-inverse-search-large-input(){}
1861
+ @mixin hook-inverse-search-large-input-focus(){}
1850
1862
  @mixin hook-inverse-search-toggle(){}
1851
1863
  @mixin hook-inverse-search-toggle-hover(){}
1852
1864
  @mixin hook-section(){}
@@ -992,11 +992,19 @@
992
992
  @if(mixin-exists(hook-inverse-search-navbar-input)) {@include hook-inverse-search-navbar-input();}
993
993
  }
994
994
 
995
+ .uk-search-navbar .uk-search-input:focus {
996
+ @if(mixin-exists(hook-inverse-search-navbar-input-focus)) {@include hook-inverse-search-navbar-input-focus();}
997
+ }
998
+
995
999
  .uk-search-large .uk-search-input {
996
1000
  background-color: $inverse-search-large-background;
997
1001
  @if(mixin-exists(hook-inverse-search-large-input)) {@include hook-inverse-search-large-input();}
998
1002
  }
999
1003
 
1004
+ .uk-search-large .uk-search-input:focus {
1005
+ @if(mixin-exists(hook-inverse-search-large-input-focus)) {@include hook-inverse-search-large-input-focus();}
1006
+ }
1007
+
1000
1008
  //
1001
1009
  // Toggle
1002
1010
  //
@@ -1525,14 +1533,18 @@
1525
1533
  @mixin hook-search-default-input(){}
1526
1534
  @mixin hook-search-default-input-focus(){}
1527
1535
  @mixin hook-search-navbar-input(){}
1536
+ @mixin hook-search-navbar-input-focus(){}
1528
1537
  @mixin hook-search-large-input(){}
1538
+ @mixin hook-search-large-input-focus(){}
1529
1539
  @mixin hook-search-toggle(){}
1530
1540
  @mixin hook-search-toggle-hover(){}
1531
1541
  @mixin hook-search-misc(){}
1532
1542
  @mixin hook-inverse-search-default-input(){}
1533
1543
  @mixin hook-inverse-search-default-input-focus(){}
1534
1544
  @mixin hook-inverse-search-navbar-input(){}
1545
+ @mixin hook-inverse-search-navbar-input-focus(){}
1535
1546
  @mixin hook-inverse-search-large-input(){}
1547
+ @mixin hook-inverse-search-large-input-focus(){}
1536
1548
  @mixin hook-inverse-search-toggle(){}
1537
1549
  @mixin hook-inverse-search-toggle-hover(){}
1538
1550
  @mixin hook-section(){}
@@ -38,12 +38,16 @@ $search-default-focus-border: $global-primary-background
38
38
 
39
39
  // @mixin hook-search-navbar-input(){}
40
40
 
41
+ // @mixin hook-search-navbar-input-focus(){}
42
+
41
43
 
42
44
  // Large modifiers
43
45
  // ========================================================================
44
46
 
45
47
  // @mixin hook-search-large-input(){}
46
48
 
49
+ // @mixin hook-search-large-input-focus(){}
50
+
47
51
 
48
52
  // Toggle
49
53
  // ========================================================================
@@ -68,8 +72,10 @@ $inverse-search-default-background: transparent !default;
68
72
  // @mixin hook-inverse-search-default-input-focus(){}
69
73
 
70
74
  // @mixin hook-inverse-search-navbar-input(){}
75
+ // @mixin hook-inverse-search-navbar-input-focus(){}
71
76
 
72
77
  // @mixin hook-inverse-search-large-input(){}
78
+ // @mixin hook-inverse-search-large-input-focus(){}
73
79
 
74
80
  // @mixin hook-inverse-search-toggle(){}
75
81
  // @mixin hook-inverse-search-toggle-hover(){}