uikit 3.18.4-dev.4d31fe360 → 3.18.4-dev.5aef5369c

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.4d31fe360",
+  "version": "3.18.4-dev.5aef5369c",
   "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' && !this.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/js/core/height-match.js

@@ -24,6 +24,18 @@ export default {
             elements.reduce((elements, el) => elements.concat(el, ...el.children), [$el]),
     }),
 
+    events: {
+        name: 'loadingdone',
+
+        el() {
+            return document.fonts;
+        },
+
+        handler() {
+            this.$emit('resize');
+        },
+    },
+
     update: {
         read() {
             return {

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/slider.less

@@ -106,7 +106,7 @@
 
 .uk-slider-items > * {
     /* 1 */
-    flex: none;
+    flex: none !important;
     box-sizing: border-box;
     max-width: 100%;
     /* 2 */

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; }
 
@@ -43,7 +43,6 @@
  *    flex items won't shrink below their minimum intrinsic content size.
  *    Using `1px` instead of `0`, so items still wrap into the next line,
  *    if they have zero width and padding and the predecessor is 100% wide.
- * 2. Reset flex if auto classes are combined with expand classes
  */
 
 .uk-child-width-expand > :not([class*="uk-width"]) {
@@ -57,21 +56,26 @@
 
     .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;
-        /* 2 */
-        flex: initial;
-    }
+    .uk-child-width-auto\@s > * { width: auto; }
     .uk-child-width-expand\@s > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@s > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@s > :not([class*="uk-width"]),
+    .uk-child-width-auto\@s > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Tablet landscape and bigger */
@@ -79,20 +83,26 @@
 
     .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;
-        flex: initial;
-    }
+    .uk-child-width-auto\@m > * { width: auto; }
     .uk-child-width-expand\@m > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@m > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@m > :not([class*="uk-width"]),
+    .uk-child-width-auto\@m > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Desktop and bigger */
@@ -100,20 +110,26 @@
 
     .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;
-        flex: initial;
-    }
+    .uk-child-width-auto\@l > * { width: auto; }
     .uk-child-width-expand\@l > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@l > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@l > :not([class*="uk-width"]),
+    .uk-child-width-auto\@l > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 /* Large screen and bigger */
@@ -121,20 +137,26 @@
 
     .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;
-        flex: initial;
-    }
+    .uk-child-width-auto\@xl > * { width: auto; }
     .uk-child-width-expand\@xl > :not([class*="uk-width"]) {
         flex: 1;
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-child-width-1-1\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-2\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-3\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-4\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-5\@xl > :not([class*="uk-width"]),
+    .uk-child-width-1-6\@xl > :not([class*="uk-width"]),
+    .uk-child-width-auto\@xl > :not([class*="uk-width"]) { flex: initial; }
+
 }
 
 
@@ -156,8 +178,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 +192,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 +222,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 +236,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; }
@@ -226,10 +248,7 @@
     .uk-width-xxlarge\@s when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
-    .uk-width-auto\@s {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@s { width: auto; }
 
     /* Expand */
     .uk-width-expand\@s {
@@ -237,6 +256,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@s,
+    .uk-width-1-2\@s,
+    .uk-width-1-3\@s,
+    .uk-width-2-3\@s,
+    .uk-width-1-4\@s,
+    .uk-width-3-4\@s,
+    .uk-width-1-5\@s,
+    .uk-width-2-5\@s,
+    .uk-width-3-5\@s,
+    .uk-width-4-5\@s,
+    .uk-width-1-6\@s,
+    .uk-width-5-6\@s,
+    .uk-width-small\@s,
+    .uk-width-medium\@s,
+    .uk-width-large\@s,
+    .uk-width-xlarge\@s,
+    .uk-width-2xlarge\@s,
+    .uk-width-auto\@s { flex: initial; }
+
 }
 
 /* Tablet landscape and bigger */
@@ -249,8 +288,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 +302,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; }
@@ -275,10 +314,7 @@
     .uk-width-xxlarge\@m when (@deprecated = true) { width: @width-2xlarge-width; }
 
      /* Auto */
-    .uk-width-auto\@m {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@m { width: auto; }
 
     /* Expand */
     .uk-width-expand\@m {
@@ -286,6 +322,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@m,
+    .uk-width-1-2\@m,
+    .uk-width-1-3\@m,
+    .uk-width-2-3\@m,
+    .uk-width-1-4\@m,
+    .uk-width-3-4\@m,
+    .uk-width-1-5\@m,
+    .uk-width-2-5\@m,
+    .uk-width-3-5\@m,
+    .uk-width-4-5\@m,
+    .uk-width-1-6\@m,
+    .uk-width-5-6\@m,
+    .uk-width-small\@m,
+    .uk-width-medium\@m,
+    .uk-width-large\@m,
+    .uk-width-xlarge\@m,
+    .uk-width-2xlarge\@m,
+    .uk-width-auto\@m { flex: initial; }
+
 }
 
 /* Desktop and bigger */
@@ -298,8 +354,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 +368,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; }
@@ -324,10 +380,7 @@
     .uk-width-xxlarge\@l when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
-    .uk-width-auto\@l {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@l { width: auto; }
 
     /* Expand */
     .uk-width-expand\@l {
@@ -335,6 +388,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@l,
+    .uk-width-1-2\@l,
+    .uk-width-1-3\@l,
+    .uk-width-2-3\@l,
+    .uk-width-1-4\@l,
+    .uk-width-3-4\@l,
+    .uk-width-1-5\@l,
+    .uk-width-2-5\@l,
+    .uk-width-3-5\@l,
+    .uk-width-4-5\@l,
+    .uk-width-1-6\@l,
+    .uk-width-5-6\@l,
+    .uk-width-small\@l,
+    .uk-width-medium\@l,
+    .uk-width-large\@l,
+    .uk-width-xlarge\@l,
+    .uk-width-2xlarge\@l,
+    .uk-width-auto\@l { flex: initial; }
+
 }
 
 /* Large screen and bigger */
@@ -347,8 +420,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 +434,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; }
@@ -373,10 +446,7 @@
     .uk-width-xxlarge\@xl when (@deprecated = true) { width: @width-2xlarge-width; }
 
     /* Auto */
-    .uk-width-auto\@xl {
-        width: auto;
-        flex: initial;
-    }
+    .uk-width-auto\@xl { width: auto; }
 
     /* Expand */
     .uk-width-expand\@xl {
@@ -384,6 +454,26 @@
         min-width: 1px;
     }
 
+    /* Reset expand */
+    .uk-width-1-1\@xl,
+    .uk-width-1-2\@xl,
+    .uk-width-1-3\@xl,
+    .uk-width-2-3\@xl,
+    .uk-width-1-4\@xl,
+    .uk-width-3-4\@xl,
+    .uk-width-1-5\@xl,
+    .uk-width-2-5\@xl,
+    .uk-width-3-5\@xl,
+    .uk-width-4-5\@xl,
+    .uk-width-1-6\@xl,
+    .uk-width-5-6\@xl,
+    .uk-width-small\@xl,
+    .uk-width-medium\@xl,
+    .uk-width-large\@xl,
+    .uk-width-xlarge\@xl,
+    .uk-width-2xlarge\@xl,
+    .uk-width-auto\@xl { flex: initial; }
+
 }
 
 /* Intrinsic Widths

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/slider.scss

@@ -102,7 +102,7 @@
 
 .uk-slider-items > * {
     /* 1 */
-    flex: none;
+    flex: none !important;
     box-sizing: border-box;
     max-width: 100%;
     /* 2 */