uikit 3.18.4-dev.01a468d2e → 3.18.4-dev.3b6dec3a6

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.18.4-dev.01a468d2e",
+  "version": "3.18.4-dev.3b6dec3a6",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/images/components/navbar-toggle-icon.svg

@@ -1,14 +1,14 @@
 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <style>
 
-        .uk-navbar-toggle-animate svg > [class*='line-'] {
+        .uk-navbar-toggle-icon svg > [class*='line-'] {
             transition: 0.2s ease-in-out;
             transition-property: transform, opacity;
             transform-origin: center;
             opacity: 1;
         }
 
-        .uk-navbar-toggle-animate svg > .line-3 { opacity: 0; }
+        .uk-navbar-toggle-icon svg > .line-3 { opacity: 0; }
         .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-3 { opacity: 1; }
 
         .uk-navbar-toggle-animate[aria-expanded="true"] svg > .line-2 { transform: rotate(45deg); }

package/src/js/components/slider.js

@@ -240,11 +240,7 @@ export default {
             let actives = this._getTransitioner(currentIndex).getActives();
 
             if (this.active !== 'all') {
-                let index = currentIndex;
-                if (this.active === 'center') {
-                    index += Math.ceil(actives.length / 2) - 1;
-                }
-                actives = [this.slides[this.getValidIndex(index)]];
+                actives = [this.slides[this.getValidIndex(currentIndex)]];
             }
 
             const activeClasses = [
@@ -370,7 +366,7 @@ function isFinite(list, center) {
         }
 
         if (
-            diff >
+            Math.trunc(diff) >
             sumBy(
                 slides.filter((slide) => !slidesInView.has(slide)),
                 (slide) => dimensions(slide).width,

package/src/less/components/heading.less

@@ -13,8 +13,8 @@
 // Variables
 // ========================================================================
 
-@heading-small-font-size:                       @heading-small-font-size-m * 0.8;      // 38px 0.73
-@heading-medium-font-size:                      @heading-medium-font-size-m * 0.825;     // 40px 0.714
+@heading-small-font-size:                       @heading-small-font-size-m * 0.8;       // 38px 0.73
+@heading-medium-font-size:                      @heading-medium-font-size-m * 0.825;    // 40px 0.714
 @heading-large-font-size:                       @heading-large-font-size-m * 0.85;      // 50px 0.78
 @heading-xlarge-font-size:                      @heading-large-font-size-m;             // 4rem / 64px
 @heading-2xlarge-font-size:                     @heading-xlarge-font-size-m;            // 6rem / 96px

package/src/less/components/width.less

@@ -31,10 +31,10 @@
 }
 
 .uk-child-width-1-2 > * { width: 50%; }
-.uk-child-width-1-3 > * { width: ~'calc(100% * 1 / 3.001)'; }
+.uk-child-width-1-3 > * { width: ~'calc(100% / 3)'; }
 .uk-child-width-1-4 > * { width: 25%; }
 .uk-child-width-1-5 > * { width: 20%; }
-.uk-child-width-1-6 > * { width: ~'calc(100% * 1 / 6.001)'; }
+.uk-child-width-1-6 > * { width: ~'calc(100% / 6)'; }
 
 .uk-child-width-auto > * { width: auto; }
 
@@ -57,10 +57,10 @@
 
     .uk-child-width-1-1\@s > * { width: 100%; }
     .uk-child-width-1-2\@s > * { width: 50%; }
-    .uk-child-width-1-3\@s > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-3\@s > * { width: ~'calc(100% / 3)'; }
     .uk-child-width-1-4\@s > * { width: 25%; }
     .uk-child-width-1-5\@s > * { width: 20%; }
-    .uk-child-width-1-6\@s > * { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-child-width-1-6\@s > * { width: ~'calc(100% / 6)'; }
 
     .uk-child-width-auto\@s > * {
         width: auto;
@@ -79,10 +79,10 @@
 
     .uk-child-width-1-1\@m > * { width: 100%; }
     .uk-child-width-1-2\@m > * { width: 50%; }
-    .uk-child-width-1-3\@m > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-3\@m > * { width: ~'calc(100% / 3)'; }
     .uk-child-width-1-4\@m > * { width: 25%; }
     .uk-child-width-1-5\@m > * { width: 20%; }
-    .uk-child-width-1-6\@m > * { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-child-width-1-6\@m > * { width: ~'calc(100% / 6)'; }
 
     .uk-child-width-auto\@m > * {
         width: auto;
@@ -100,10 +100,10 @@
 
     .uk-child-width-1-1\@l > * { width: 100%; }
     .uk-child-width-1-2\@l > * { width: 50%; }
-    .uk-child-width-1-3\@l > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-3\@l > * { width: ~'calc(100% / 3)'; }
     .uk-child-width-1-4\@l > * { width: 25%; }
     .uk-child-width-1-5\@l > * { width: 20%; }
-    .uk-child-width-1-6\@l > * { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-child-width-1-6\@l > * { width: ~'calc(100% / 6)'; }
 
     .uk-child-width-auto\@l > * {
         width: auto;
@@ -121,10 +121,10 @@
 
     .uk-child-width-1-1\@xl > * { width: 100%; }
     .uk-child-width-1-2\@xl > * { width: 50%; }
-    .uk-child-width-1-3\@xl > * { width: ~'calc(100% * 1 / 3.001)'; }
+    .uk-child-width-1-3\@xl > * { width: ~'calc(100% / 3)'; }
     .uk-child-width-1-4\@xl > * { width: 25%; }
     .uk-child-width-1-5\@xl > * { width: 20%; }
-    .uk-child-width-1-6\@xl > * { width: ~'calc(100% * 1 / 6.001)'; }
+    .uk-child-width-1-6\@xl > * { width: ~'calc(100% / 6)'; }
 
     .uk-child-width-auto\@xl > * {
         width: auto;
@@ -156,8 +156,8 @@
 .uk-width-1-2 { width: 50%; }
 
 /* Thirds */
-.uk-width-1-3 { width: ~'calc(100% * 1 / 3.001)'; }
-.uk-width-2-3 { width: ~'calc(100% * 2 / 3.001)'; }
+.uk-width-1-3 { width: ~'calc(100% / 3)'; }
+.uk-width-2-3 { width: ~'calc(200% / 3)'; }
 
 /* Quarters */
 .uk-width-1-4 { width: 25%; }
@@ -170,8 +170,8 @@
 .uk-width-4-5 { width: 80%; }
 
 /* Sixths */
-.uk-width-1-6 { width: ~'calc(100% * 1 / 6.001)'; }
-.uk-width-5-6 { width: ~'calc(100% * 5 / 6.001)'; }
+.uk-width-1-6 { width: ~'calc(100% / 6)'; }
+.uk-width-5-6 { width: ~'calc(500% / 6)'; }
 
 /* Pixel */
 .uk-width-small { width: @width-small-width; }
@@ -200,8 +200,8 @@
     .uk-width-1-2\@s { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@s { width: ~'calc(100% * 1 / 3.001)'; }
-    .uk-width-2-3\@s { width: ~'calc(100% * 2 / 3.001)'; }
+    .uk-width-1-3\@s { width: ~'calc(100% / 3)'; }
+    .uk-width-2-3\@s { width: ~'calc(200% / 3)'; }
 
     /* Quarters */
     .uk-width-1-4\@s { width: 25%; }
@@ -214,8 +214,8 @@
     .uk-width-4-5\@s { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@s { width: ~'calc(100% * 1 / 6.001)'; }
-    .uk-width-5-6\@s { width: ~'calc(100% * 5 / 6.001)'; }
+    .uk-width-1-6\@s { width: ~'calc(100% / 6)'; }
+    .uk-width-5-6\@s { width: ~'calc(500% / 6)'; }
 
     /* Pixel */
     .uk-width-small\@s { width: @width-small-width; }
@@ -249,8 +249,8 @@
     .uk-width-1-2\@m { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@m { width: ~'calc(100% * 1 / 3.001)'; }
-    .uk-width-2-3\@m { width: ~'calc(100% * 2 / 3.001)'; }
+    .uk-width-1-3\@m { width: ~'calc(100% / 3)'; }
+    .uk-width-2-3\@m { width: ~'calc(200% / 3)'; }
 
     /* Quarters */
     .uk-width-1-4\@m { width: 25%; }
@@ -263,8 +263,8 @@
     .uk-width-4-5\@m { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@m { width: ~'calc(100% * 1 / 6.001)'; }
-    .uk-width-5-6\@m { width: ~'calc(100% * 5 / 6.001)'; }
+    .uk-width-1-6\@m { width: ~'calc(100% / 6)'; }
+    .uk-width-5-6\@m { width: ~'calc(500% / 6)'; }
 
     /* Pixel */
     .uk-width-small\@m { width: @width-small-width; }
@@ -298,8 +298,8 @@
     .uk-width-1-2\@l { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@l { width: ~'calc(100% * 1 / 3.001)'; }
-    .uk-width-2-3\@l { width: ~'calc(100% * 2 / 3.001)'; }
+    .uk-width-1-3\@l { width: ~'calc(100% / 3)'; }
+    .uk-width-2-3\@l { width: ~'calc(200% / 3)'; }
 
     /* Quarters */
     .uk-width-1-4\@l { width: 25%; }
@@ -312,8 +312,8 @@
     .uk-width-4-5\@l { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@l { width: ~'calc(100% * 1 / 6.001)'; }
-    .uk-width-5-6\@l { width: ~'calc(100% * 5 / 6.001)'; }
+    .uk-width-1-6\@l { width: ~'calc(100% / 6)'; }
+    .uk-width-5-6\@l { width: ~'calc(500% / 6)'; }
 
     /* Pixel */
     .uk-width-small\@l { width: @width-small-width; }
@@ -347,8 +347,8 @@
     .uk-width-1-2\@xl { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@xl { width: ~'calc(100% * 1 / 3.001)'; }
-    .uk-width-2-3\@xl { width: ~'calc(100% * 2 / 3.001)'; }
+    .uk-width-1-3\@xl { width: ~'calc(100% / 3)'; }
+    .uk-width-2-3\@xl { width: ~'calc(200% / 3)'; }
 
     /* Quarters */
     .uk-width-1-4\@xl { width: 25%; }
@@ -361,8 +361,8 @@
     .uk-width-4-5\@xl { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@xl { width: ~'calc(100% * 1 / 6.001)'; }
-    .uk-width-5-6\@xl { width: ~'calc(100% * 5 / 6.001)'; }
+    .uk-width-1-6\@xl { width: ~'calc(100% / 6)'; }
+    .uk-width-5-6\@xl { width: ~'calc(500% / 6)'; }
 
     /* Pixel */
     .uk-width-small\@xl { width: @width-small-width; }

package/src/scss/components/heading.scss

@@ -13,8 +13,8 @@
 // Variables
 // ========================================================================
 
-$heading-small-font-size:                        $heading-small-font-size-m * 0.8 !default;      // 38px 0.73
-$heading-medium-font-size:                       $heading-medium-font-size-m * 0.825 !default;     // 40px 0.714
+$heading-small-font-size:                        $heading-small-font-size-m * 0.8 !default;       // 38px 0.73
+$heading-medium-font-size:                       $heading-medium-font-size-m * 0.825 !default;    // 40px 0.714
 $heading-large-font-size:                        $heading-large-font-size-m * 0.85 !default;      // 50px 0.78
 $heading-xlarge-font-size:                       $heading-large-font-size-m !default;             // 4rem / 64px
 $heading-2xlarge-font-size:                      $heading-xlarge-font-size-m !default;            // 6rem / 96px

package/src/scss/components/width.scss

@@ -26,10 +26,10 @@
 }
 
 .uk-child-width-1-2 > * { width: 50%; }
-.uk-child-width-1-3 > * { width: unquote('calc(100% * 1 / 3.001)'); }
+.uk-child-width-1-3 > * { width: unquote('calc(100% / 3)'); }
 .uk-child-width-1-4 > * { width: 25%; }
 .uk-child-width-1-5 > * { width: 20%; }
-.uk-child-width-1-6 > * { width: unquote('calc(100% * 1 / 6.001)'); }
+.uk-child-width-1-6 > * { width: unquote('calc(100% / 6)'); }
 
 .uk-child-width-auto > * { width: auto; }
 
@@ -52,10 +52,10 @@
 
     .uk-child-width-1-1\@s > * { width: 100%; }
     .uk-child-width-1-2\@s > * { width: 50%; }
-    .uk-child-width-1-3\@s > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@s > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@s > * { width: 25%; }
     .uk-child-width-1-5\@s > * { width: 20%; }
-    .uk-child-width-1-6\@s > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@s > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@s > * {
         width: auto;
@@ -74,10 +74,10 @@
 
     .uk-child-width-1-1\@m > * { width: 100%; }
     .uk-child-width-1-2\@m > * { width: 50%; }
-    .uk-child-width-1-3\@m > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@m > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@m > * { width: 25%; }
     .uk-child-width-1-5\@m > * { width: 20%; }
-    .uk-child-width-1-6\@m > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@m > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@m > * {
         width: auto;
@@ -95,10 +95,10 @@
 
     .uk-child-width-1-1\@l > * { width: 100%; }
     .uk-child-width-1-2\@l > * { width: 50%; }
-    .uk-child-width-1-3\@l > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@l > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@l > * { width: 25%; }
     .uk-child-width-1-5\@l > * { width: 20%; }
-    .uk-child-width-1-6\@l > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@l > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@l > * {
         width: auto;
@@ -116,10 +116,10 @@
 
     .uk-child-width-1-1\@xl > * { width: 100%; }
     .uk-child-width-1-2\@xl > * { width: 50%; }
-    .uk-child-width-1-3\@xl > * { width: unquote('calc(100% * 1 / 3.001)'); }
+    .uk-child-width-1-3\@xl > * { width: unquote('calc(100% / 3)'); }
     .uk-child-width-1-4\@xl > * { width: 25%; }
     .uk-child-width-1-5\@xl > * { width: 20%; }
-    .uk-child-width-1-6\@xl > * { width: unquote('calc(100% * 1 / 6.001)'); }
+    .uk-child-width-1-6\@xl > * { width: unquote('calc(100% / 6)'); }
 
     .uk-child-width-auto\@xl > * {
         width: auto;
@@ -151,8 +151,8 @@
 .uk-width-1-2 { width: 50%; }
 
 /* Thirds */
-.uk-width-1-3 { width: unquote('calc(100% * 1 / 3.001)'); }
-.uk-width-2-3 { width: unquote('calc(100% * 2 / 3.001)'); }
+.uk-width-1-3 { width: unquote('calc(100% / 3)'); }
+.uk-width-2-3 { width: unquote('calc(200% / 3)'); }
 
 /* Quarters */
 .uk-width-1-4 { width: 25%; }
@@ -165,8 +165,8 @@
 .uk-width-4-5 { width: 80%; }
 
 /* Sixths */
-.uk-width-1-6 { width: unquote('calc(100% * 1 / 6.001)'); }
-.uk-width-5-6 { width: unquote('calc(100% * 5 / 6.001)'); }
+.uk-width-1-6 { width: unquote('calc(100% / 6)'); }
+.uk-width-5-6 { width: unquote('calc(500% / 6)'); }
 
 /* Pixel */
 .uk-width-small { width: $width-small-width; }
@@ -197,8 +197,8 @@
     .uk-width-1-2\@s { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@s { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@s { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@s { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@s { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@s { width: 25%; }
@@ -211,8 +211,8 @@
     .uk-width-4-5\@s { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@s { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@s { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@s { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@s { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@s { width: $width-small-width; }
@@ -248,8 +248,8 @@
     .uk-width-1-2\@m { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@m { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@m { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@m { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@m { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@m { width: 25%; }
@@ -262,8 +262,8 @@
     .uk-width-4-5\@m { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@m { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@m { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@m { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@m { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@m { width: $width-small-width; }
@@ -299,8 +299,8 @@
     .uk-width-1-2\@l { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@l { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@l { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@l { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@l { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@l { width: 25%; }
@@ -313,8 +313,8 @@
     .uk-width-4-5\@l { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@l { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@l { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@l { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@l { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@l { width: $width-small-width; }
@@ -350,8 +350,8 @@
     .uk-width-1-2\@xl { width: 50%; }
 
     /* Thirds */
-    .uk-width-1-3\@xl { width: unquote('calc(100% * 1 / 3.001)'); }
-    .uk-width-2-3\@xl { width: unquote('calc(100% * 2 / 3.001)'); }
+    .uk-width-1-3\@xl { width: unquote('calc(100% / 3)'); }
+    .uk-width-2-3\@xl { width: unquote('calc(200% / 3)'); }
 
     /* Quarters */
     .uk-width-1-4\@xl { width: 25%; }
@@ -364,8 +364,8 @@
     .uk-width-4-5\@xl { width: 80%; }
 
     /* Sixths */
-    .uk-width-1-6\@xl { width: unquote('calc(100% * 1 / 6.001)'); }
-    .uk-width-5-6\@xl { width: unquote('calc(100% * 5 / 6.001)'); }
+    .uk-width-1-6\@xl { width: unquote('calc(100% / 6)'); }
+    .uk-width-5-6\@xl { width: unquote('calc(500% / 6)'); }
 
     /* Pixel */
     .uk-width-small\@xl { width: $width-small-width; }

package/tests/slider.html

@@ -586,7 +586,7 @@
                             <td><code>active</code></td>
                             <td>String</td>
                             <td>all</td>
-                            <td>Slider item/items to apply the transition active class to. (all|first|center)</td>
+                            <td>Slider item/items to apply the transition active class to (all|first).</td>
                         </tr>
                         <tr>
                             <td><code>pause-on-hover</code></td>

package/tests/slideshow.html

@@ -105,14 +105,14 @@
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent&amp;playsinline=1" width="1920" height="1080" allowfullscreen loading="lazy" uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">YouTube</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>
                                     </div>
                                 </li>
                                 <li>
-                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen uk-cover></iframe>
+                                    <iframe src="https://player.vimeo.com/video/1084537?title=0&amp;background=1&amp;keyboard=0" width="500" height="281" allowfullscreen loading="lazy" uk-cover></iframe>
                                     <div class="uk-position-center uk-position-small uk-text-center">
                                         <h2 uk-slideshow-parallax="x: 100,-100">Vimeo</h2>
                                         <p uk-slideshow-parallax="x: 200,-200">Lorem ipsum dolor sit amet.</p>