uikit 3.18.3 → 3.18.4-dev.01a468d2e

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 (58) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/build/scss.js +3 -0
  3. package/dist/css/uikit-core-rtl.css +169 -23
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +169 -23
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +169 -23
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +169 -23
  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 +15 -8
  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 +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 +3 -12
  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 +18 -20
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/components/internal/slider-transitioner.js +2 -2
  45. package/src/js/components/slider.js +15 -6
  46. package/src/js/components/tooltip.js +1 -1
  47. package/src/js/core/img.js +1 -16
  48. package/src/less/components/flex.less +110 -2
  49. package/src/less/components/utility.less +1 -2
  50. package/src/less/components/width.less +34 -8
  51. package/src/less/theme/text.less +1 -1
  52. package/src/scss/components/flex.scss +110 -2
  53. package/src/scss/components/width.scss +34 -8
  54. package/src/scss/mixins-theme.scss +1 -2
  55. package/src/scss/mixins.scss +1 -2
  56. package/src/scss/variables-theme.scss +1 -1
  57. package/tests/slider.html +12 -1
  58. package/tests/utility.html +36 -11
package/tests/slider.html CHANGED
@@ -41,6 +41,11 @@
41
41
  <option value="0">Single</option>
42
42
  <option value="1">Sets</option>
43
43
  </select>
44
+ <select id="js-active-switcher" class="uk-select uk-form-width-small" aria-label="Active switcher">
45
+ <option value="">All</option>
46
+ <option value="first">First</option>
47
+ <option value="center">Center</option>
48
+ </select>
44
49
  </div>
45
50
 
46
51
  <h2>Content Widths</h2>
@@ -577,6 +582,12 @@
577
582
  <td>0</td>
578
583
  <td>Slider item to show. 0 based index.</td>
579
584
  </tr>
585
+ <tr>
586
+ <td><code>active</code></td>
587
+ <td>String</td>
588
+ <td>all</td>
589
+ <td>Slider item/items to apply the transition active class to. (all|first|center)</td>
590
+ </tr>
580
591
  <tr>
581
592
  <td><code>pause-on-hover</code></td>
582
593
  <td>Boolean</td>
@@ -646,7 +657,7 @@
646
657
  <script>
647
658
 
648
659
  const {attr, $$, on} = UIkit.util;
649
- for (const attribute of ['finite', 'center', 'sets']) {
660
+ for (const attribute of ['finite', 'center', 'sets', 'active']) {
650
661
  on(`#js-${attribute}-switcher`, 'change', e =>
651
662
  attr($$('[uk-slider]'), attribute, e.target.value)
652
663
  );
package/tests/utility.html CHANGED
@@ -420,39 +420,64 @@
420
420
  <a class="uk-logo" href="#">Text Logo</a>
421
421
  </p>
422
422
 
423
- <div class="uk-flex-inline uk-margin uk-grid-small" uk-grid>
423
+ <div class="uk-child-width-auto uk-grid-small" uk-grid>
424
424
  <div>
425
- <p>Image</p>
425
+ <p>Image<br>-</p>
426
426
  <a class="uk-logo" href="#" aria-label="Back to Home">
427
- <img src="images/photo.jpg" width="200" height="133" alt="">
427
+ <img src="images/photo.jpg" width="150" height="100" alt="">
428
428
  </a>
429
429
  </div>
430
430
  <div>
431
- <p>+ Inverse Image</p>
431
+ <p>Picture<br>-</p>
432
432
  <a class="uk-logo" href="#" aria-label="Back to Home">
433
- <img src="images/photo.jpg" width="200" height="133" alt="">
434
- <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
433
+ <picture>
434
+ <img src="images/photo.jpg" width="150" height="100" alt="">
435
+ </picture>
436
+ </a>
437
+ </div>
438
+ <div>
439
+ <p>Image<br>Inverse Image</p>
440
+ <a class="uk-logo" href="#" aria-label="Back to Home">
441
+ <img src="images/photo.jpg" width="150" height="100" alt="">
442
+ <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
435
443
  </a>
436
444
  </div>
437
445
  <div>
438
- <p>Picture</p>
446
+ <p>Picture<br>Inverse Picture</p>
439
447
  <a class="uk-logo" href="#" aria-label="Back to Home">
440
448
  <picture>
441
- <img src="images/photo.jpg" width="200" height="133" alt="">
449
+ <img src="images/photo.jpg" width="150" height="100" alt="">
450
+ </picture>
451
+ <picture>
452
+ <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
442
453
  </picture>
443
454
  </a>
444
455
  </div>
445
456
  <div>
446
- <p>+ Inverse Picture</p>
457
+ <p>Picture<br>Inverse SVG</p>
447
458
  <a class="uk-logo" href="#" aria-label="Back to Home">
448
459
  <picture>
449
- <img src="images/photo.jpg" width="200" height="133" alt="">
460
+ <img src="images/photo.jpg" width="150" height="100" alt="">
450
461
  </picture>
462
+ <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
463
+ </a>
464
+ </div>
465
+ <div>
466
+ <p>SVG<br>Inverse Picture</p>
467
+ <a class="uk-logo" href="#" aria-label="Back to Home">
468
+ <img src="images/icons.svg#table" alt="" uk-svg>
451
469
  <picture>
452
- <img class="uk-logo-inverse" src="images/dark.jpg" width="200" height="133" alt="">
470
+ <img class="uk-logo-inverse" src="images/dark.jpg" width="150" height="100" alt="">
453
471
  </picture>
454
472
  </a>
455
473
  </div>
474
+ <div>
475
+ <p>SVG<br>Inverse SVG</p>
476
+ <a class="uk-logo" href="#" aria-label="Back to Home">
477
+ <img src="images/icons.svg#table" alt="" uk-svg>
478
+ <img class="uk-logo-inverse" src="images/icons.svg#trash" alt="" uk-svg>
479
+ </a>
480
+ </div>
456
481
  </div>
457
482
 
458
483
  </div>