uikit 3.11.2-dev.bbaa4362f → 3.11.2-dev.c08a5b5f0

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 (64) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/build/scss.js +1 -1
  3. package/dist/css/uikit-core-rtl.css +42 -17
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +42 -17
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +42 -17
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +42 -17
  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 +36 -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 +156 -160
  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 +191 -160
  42. package/dist/js/uikit.min.js +1 -1
  43. package/package.json +1 -1
  44. package/src/js/api/component.js +1 -1
  45. package/src/js/api/state.js +20 -24
  46. package/src/js/components/slideshow.js +32 -1
  47. package/src/js/core/drop.js +1 -1
  48. package/src/js/core/img.js +128 -108
  49. package/src/js/core/navbar.js +1 -1
  50. package/src/js/util/options.js +4 -4
  51. package/src/less/components/flex.less +0 -9
  52. package/src/less/components/navbar.less +0 -7
  53. package/src/less/components/utility.less +22 -0
  54. package/src/scss/components/flex.scss +0 -9
  55. package/src/scss/components/form.scss +3 -3
  56. package/src/scss/components/icon.scss +2 -2
  57. package/src/scss/components/navbar.scss +0 -7
  58. package/src/scss/components/search.scss +1 -1
  59. package/src/scss/components/utility.scss +22 -0
  60. package/src/scss/variables-theme.scss +6 -6
  61. package/src/scss/variables.scss +6 -6
  62. package/tests/image.html +33 -37
  63. package/tests/images/test.avif +0 -0
  64. package/tests/images/test.webp +0 -0
package/src/scss/components/utility.scss CHANGED
@@ -251,6 +251,28 @@ $dragover-box-shadow: 0 0 20px rgba(100,100,100,0.3)
251
251
  [data-uk-responsive] { max-width: 100%; }
252
252
 
253
253
 
254
+ /* Object
255
+ ========================================================================== */
256
+
257
+ .uk-object-fit-none { object-fit: none; }
258
+ .uk-object-fit-cover { object-fit: cover; }
259
+ .uk-object-fit-contain { object-fit: contain; }
260
+
261
+ /*
262
+ * Position
263
+ */
264
+
265
+ .uk-object-top-left { object-position: 0 0; }
266
+ .uk-object-top-center { object-position: 50% 0; }
267
+ .uk-object-top-right { object-position: 100% 0; }
268
+ .uk-object-center-left { object-position: 0 50%; }
269
+ .uk-object-center-center { object-position: 50% 50%; }
270
+ .uk-object-center-right { object-position: 100% 50%; }
271
+ .uk-object-bottom-left { object-position: 0 100%; }
272
+ .uk-object-bottom-center { object-position: 50% 100%; }
273
+ .uk-object-bottom-right { object-position: 100% 100%; }
274
+
275
+
254
276
  /* Border
255
277
  ========================================================================== */
256
278
 
package/src/scss/variables-theme.scss CHANGED
@@ -449,16 +449,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
449
449
  $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
450
450
  $inverse-form-background: $inverse-global-muted-background !default;
451
451
  $inverse-form-color: $inverse-global-color !default;
452
- $inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
452
+ $inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
453
453
  $inverse-form-focus-color: $inverse-global-color !default;
454
454
  $inverse-form-placeholder-color: $inverse-global-muted-color !default;
455
455
  $inverse-form-select-icon-color: $inverse-global-color !default;
456
456
  $inverse-form-datalist-icon-color: $inverse-global-color !default;
457
457
  $inverse-form-radio-background: $inverse-global-muted-background !default;
458
- $inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
458
+ $inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
459
459
  $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
460
460
  $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
461
- $inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
461
+ $inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
462
462
  $inverse-form-icon-color: $inverse-global-muted-color !default;
463
463
  $inverse-form-icon-hover-color: $inverse-global-color !default;
464
464
  $grid-gutter-horizontal: $global-gutter !default;
@@ -543,9 +543,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
543
543
  $inverse-icon-link-active-color: $inverse-global-color !default;
544
544
  $inverse-icon-button-background: $inverse-global-muted-background !default;
545
545
  $inverse-icon-button-color: $inverse-global-muted-color !default;
546
- $inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
546
+ $inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
547
547
  $inverse-icon-button-hover-color: $inverse-global-color !default;
548
- $inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
548
+ $inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
549
549
  $inverse-icon-button-active-color: $inverse-global-color !default;
550
550
  $iconnav-margin-horizontal: $global-small-margin !default;
551
551
  $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -855,7 +855,7 @@ $inverse-search-color: $inverse-global-color !default;
855
855
  $inverse-search-placeholder-color: $inverse-global-muted-color !default;
856
856
  $inverse-search-icon-color: $inverse-global-muted-color !default;
857
857
  $inverse-search-default-background: transparent !default;
858
- $inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
858
+ $inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
859
859
  $inverse-search-navbar-background: transparent !default;
860
860
  $inverse-search-large-background: transparent !default;
861
861
  $inverse-search-toggle-color: $inverse-global-muted-color !default;
package/src/scss/variables.scss CHANGED
@@ -447,16 +447,16 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
447
447
  $inverse-global-muted-background: rgba($global-inverse-color, 0.1) !default;
448
448
  $inverse-form-background: $inverse-global-muted-background !default;
449
449
  $inverse-form-color: $inverse-global-color !default;
450
- $inverse-form-focus-background: fadein($inverse-form-background, 5%) !default;
450
+ $inverse-form-focus-background: fade-in($inverse-form-background, 0.05) !default;
451
451
  $inverse-form-focus-color: $inverse-global-color !default;
452
452
  $inverse-form-placeholder-color: $inverse-global-muted-color !default;
453
453
  $inverse-form-select-icon-color: $inverse-global-color !default;
454
454
  $inverse-form-datalist-icon-color: $inverse-global-color !default;
455
455
  $inverse-form-radio-background: $inverse-global-muted-background !default;
456
- $inverse-form-radio-focus-background: fadein($inverse-form-radio-background, 5%) !default;
456
+ $inverse-form-radio-focus-background: fade-in($inverse-form-radio-background, 0.05) !default;
457
457
  $inverse-form-radio-checked-background: $inverse-global-primary-background !default;
458
458
  $inverse-form-radio-checked-icon-color: $inverse-global-inverse-color !default;
459
- $inverse-form-radio-checked-focus-background: fadein($inverse-global-primary-background, 10%) !default;
459
+ $inverse-form-radio-checked-focus-background: fade-in($inverse-global-primary-background, 0.1) !default;
460
460
  $inverse-form-icon-color: $inverse-global-muted-color !default;
461
461
  $inverse-form-icon-hover-color: $inverse-global-color !default;
462
462
  $grid-gutter-horizontal: $global-gutter !default;
@@ -541,9 +541,9 @@ $inverse-icon-link-hover-color: $inverse-global-color !default;
541
541
  $inverse-icon-link-active-color: $inverse-global-color !default;
542
542
  $inverse-icon-button-background: $inverse-global-muted-background !default;
543
543
  $inverse-icon-button-color: $inverse-global-muted-color !default;
544
- $inverse-icon-button-hover-background: fadein($inverse-icon-button-background, 5%) !default;
544
+ $inverse-icon-button-hover-background: fade-in($inverse-icon-button-background, 0.05) !default;
545
545
  $inverse-icon-button-hover-color: $inverse-global-color !default;
546
- $inverse-icon-button-active-background: fadein($inverse-icon-button-background, 10%) !default;
546
+ $inverse-icon-button-active-background: fade-in($inverse-icon-button-background, 0.1) !default;
547
547
  $inverse-icon-button-active-color: $inverse-global-color !default;
548
548
  $iconnav-margin-horizontal: $global-small-margin !default;
549
549
  $iconnav-margin-vertical: $iconnav-margin-horizontal !default;
@@ -853,7 +853,7 @@ $inverse-search-color: $inverse-global-color !default;
853
853
  $inverse-search-placeholder-color: $inverse-global-muted-color !default;
854
854
  $inverse-search-icon-color: $inverse-global-muted-color !default;
855
855
  $inverse-search-default-background: $inverse-global-muted-background !default;
856
- $inverse-search-default-focus-background: fadein($inverse-search-default-background, 5%) !default;
856
+ $inverse-search-default-focus-background: fade-in($inverse-search-default-background, 0.05) !default;
857
857
  $inverse-search-navbar-background: transparent !default;
858
858
  $inverse-search-large-background: transparent !default;
859
859
  $inverse-search-toggle-color: $inverse-global-muted-color !default;
package/tests/image.html CHANGED
@@ -14,9 +14,7 @@
14
14
 
15
15
  <h1>Image</h1>
16
16
 
17
- <p><button class="uk-button uk-button-default" onclick="sessionStorage.clear()">Clear Session Storage</button></p>
18
-
19
- <div class="uk-child-width-1-2@m" uk-grid>
17
+ <div class="uk-child-width-1-2@m uk-background-secondary" uk-grid>
20
18
  <div>
21
19
  <img data-src="https://images.unsplash.com/photo-1522201949034-507737bce479?fit=crop&w=900&h=600&q=80" width="900" height="600" alt="" uk-img>
22
20
  </div>
@@ -25,7 +23,17 @@
25
23
  </div>
26
24
  </div>
27
25
 
28
- <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" uk-img>
26
+ <div class="uk-background-primary">
27
+ <picture>
28
+ <source type="image/webp" sizes="(min-width: 780px) 780px" srcset="http://localhost/site/image?src=WyJzaXRlXC9pbWFnZXNcL2hvbWVcL3lvb3RoZW1lLXByby5qcGciLFtbInR5cGUiLFsid2VicCIsIjg1Il1dLFsiZG9SZXNpemUiLFs3ODEsNDg4LDc4MSw0ODhdXSxbImRvQ3JvcCIsWzc4MCw0ODgsMCwwXV1dXQ%3D%3D&amp;hash=9a3c6f9c 780w, /site/cache/images/yootheme-pro-5db7acab.webp 1560w">
29
+ <img src="/site/cache/images/yootheme-pro-0d67d545.jpeg" width="780" height="488" alt="Introduction Video on using the YOOtheme Pro Page Builder for WordPress and Joomla">
30
+ </picture>
31
+ </div>
32
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="srcset: images/test.avif; type: image/avif" uk-img>
33
+ <h1>Background Image</h1>
34
+ </div>
35
+
36
+ <div class="uk-height-large uk-background-cover uk-margin-medium uk-flex uk-flex-center uk-flex-middle uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=1200&h=450&q=80" data-sources="[{&quot;srcset&quot;: &quot;images/test.avif&quot;, &quot;type&quot;: &quot;image/avif&quot;},{&quot;srcset&quot;: &quot;images/test.webp&quot;, &quot;type&quot;: &quot;image/webp&quot;}]" uk-img>
29
37
  <h1>Background Image</h1>
30
38
  </div>
31
39
 
@@ -255,28 +263,28 @@
255
263
 
256
264
  <ul class="uk-slideshow-items">
257
265
  <li>
258
- <img data-src="images/photo.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
266
+ <img data-src="images/photo.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !.uk-slideshow-items > :last-child, !* +*">
259
267
  <div class="uk-position-center uk-position-small uk-text-center">
260
268
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
261
269
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
262
270
  </div>
263
271
  </li>
264
272
  <li>
265
- <img data-src="images/dark.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
273
+ <img data-src="images/dark.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
266
274
  <div class="uk-position-center uk-position-small uk-text-center">
267
275
  <h2 uk-slideshow-parallax="x: 100,-100">Heading</h2>
268
276
  <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
269
277
  </div>
270
278
  </li>
271
279
  <li>
272
- <img data-src="images/light.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !* +*">
280
+ <img data-src="images/light.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !* +*">
273
281
  <div class="uk-position-center uk-position-small uk-text-center">
274
282
  <h2 uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">Heading</h2>
275
283
  <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0">Lorem ipsum dolor sit amet.</p>
276
284
  </div>
277
285
  </li>
278
286
  <li>
279
- <img data-src="images/photo2.jpg" alt="" uk-cover data-width="1800" data-height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
287
+ <img data-src="images/photo2.jpg" alt="" uk-cover width="1800" height="1200" uk-img="target: !* -*, !.uk-slideshow-items > :first-child">
280
288
  <div class="uk-position-center uk-position-small uk-text-center">
281
289
  <h2 uk-slideshow-parallax="x: 200,0,0">Heading</h2>
282
290
  <p uk-slideshow-parallax="x: 0,0,-200">Lorem ipsum dolor sit amet.</p>
@@ -296,43 +304,43 @@
296
304
 
297
305
  <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m">
298
306
  <li>
299
- <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
307
+ <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
300
308
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">1</h1></div>
301
309
  </li>
302
310
  <li>
303
- <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
311
+ <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
304
312
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">2</h1></div>
305
313
  </li>
306
314
  <li>
307
- <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
315
+ <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
308
316
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">3</h1></div>
309
317
  </li>
310
318
  <li>
311
- <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
319
+ <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
312
320
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">4</h1></div>
313
321
  </li>
314
322
  <li>
315
- <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
323
+ <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
316
324
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">5</h1></div>
317
325
  </li>
318
326
  <li>
319
- <img data-src="images/slider1.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
327
+ <img data-src="images/slider1.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
320
328
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">6</h1></div>
321
329
  </li>
322
330
  <li>
323
- <img data-src="images/slider2.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
331
+ <img data-src="images/slider2.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
324
332
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">7</h1></div>
325
333
  </li>
326
334
  <li>
327
- <img data-src="images/slider3.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
335
+ <img data-src="images/slider3.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
328
336
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">8</h1></div>
329
337
  </li>
330
338
  <li>
331
- <img data-src="images/slider4.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
339
+ <img data-src="images/slider4.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
332
340
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">9</h1></div>
333
341
  </li>
334
342
  <li>
335
- <img data-src="images/slider5.jpg" alt="" data-width="400" data-height="600" uk-img="target: !.uk-slider-items">
343
+ <img data-src="images/slider5.jpg" alt="" width="400" height="600" uk-img="target: !.uk-slider-items">
336
344
  <div class="uk-position-center uk-panel"><h1 class="uk-transition-slide-bottom-small">10</h1></div>
337
345
  </li>
338
346
  </ul>
@@ -365,28 +373,16 @@
365
373
  <td>The image's `src` attribute.</td>
366
374
  </tr>
367
375
  <tr>
368
- <td><code>dataSrcset</code></td>
369
- <td>String</td>
370
- <td>false</td>
371
- <td>The image's `srcset` attribute.</td>
372
- </tr>
373
- <tr>
374
- <td><code>sizes</code></td>
375
- <td>String</td>
376
- <td>false</td>
377
- <td>The image's `sizes` attribute.</td>
378
- </tr>
379
- <tr>
380
- <td><code>width</code></td>
376
+ <td><code>sources</code></td>
381
377
  <td>String</td>
382
- <td>false</td>
383
- <td>The image's `width` attribute. It will be used to determine the placeholder's width and the images position in the document.</td>
378
+ <td>''</td>
379
+ <td>The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.</td>
384
380
  </tr>
385
381
  <tr>
386
- <td><code>height</code></td>
387
- <td>String</td>
388
- <td>false</td>
389
- <td>The image's `height` attribute. It will be used to determine the placeholder's height and the images position in the document.</td>
382
+ <td><code>loading</code></td>
383
+ <td>`lazy`|`eager`</td>
384
+ <td>`lazy`</td>
385
+ <td>Enable lazy/eager loading. Set to `eager` for images within the first visible viewport.</td>
390
386
  </tr>
391
387
  <tr>
392
388
  <td><code>offsetTop</code></td>
package/tests/images/test.avif ADDED
Binary file
package/tests/images/test.webp ADDED
Binary file