uikit 3.11.2-dev.93483bd3e → 3.11.2-dev.a1707d2db

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.11.2-dev.93483bd3e",
+    "version": "3.11.2-dev.a1707d2db",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/icon.js

@@ -68,14 +68,14 @@ const Icon = {
     },
 
     methods: {
-        getSvg() {
+        async getSvg() {
             const icon = getIcon(this.icon);
 
             if (!icon) {
-                return Promise.reject('Icon not found.');
+                throw 'Icon not found.';
             }
 
-            return Promise.resolve(icon);
+            return icon;
         },
     },
 };
@@ -137,9 +137,16 @@ export const Close = {
 export const Spinner = {
     extends: IconComponent,
 
-    async connected() {
-        const svg = await this.svg;
-        svg && this.ratio !== 1 && css($('circle', svg), 'strokeWidth', 1 / this.ratio);
+    methods: {
+        async getSvg() {
+            const icon = await Icon.methods.getSvg.call(this);
+
+            if (this.ratio !== 1) {
+                css($('circle', icon), 'strokeWidth', 1 / this.ratio);
+            }
+
+            return icon;
+        },
     },
 };
 

package/src/js/mixin/parallax.js

@@ -275,6 +275,7 @@ function toDimensions(image) {
 function parseStops(stops, fn = toFloat) {
     const result = [];
     const { length } = stops;
+    let nullIndex = 0;
     for (let i = 0; i < length; i++) {
         let [value, percent] = isString(stops[i]) ? stops[i].trim().split(' ') : [stops[i]];
         value = fn(value);
@@ -296,16 +297,17 @@ function parseStops(stops, fn = toFloat) {
         }
 
         result.push([value, percent]);
-    }
 
-    for (let i = 1; i < result.length - 1; i++) {
-        if (result[i][1] === null) {
-            const nextIndex = findIndex(result.slice(i + 1), ([, percent]) => percent !== null) + 1;
-            const percent = (result[i + nextIndex][1] - result[i - 1][1]) / (nextIndex + 1);
-            for (let j = 0; j < nextIndex; j++) {
-                result[i + j][1] = result[i - 1][1] + percent * (j + 1);
+        if (percent === null) {
+            nullIndex++;
+        } else if (nullIndex) {
+            const leftPercent = result[i - nullIndex - 1][1];
+            const p = (percent - leftPercent) / (nullIndex + 1);
+            for (let j = nullIndex; j > 0; j--) {
+                result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
             }
-            i += nextIndex;
+
+            nullIndex = 0;
         }
     }
 
@@ -326,7 +328,7 @@ function getValue(stops, percent) {
     return isNumber(start) ? start + Math.abs(start - end) * p * (start < end ? 1 : -1) : +end;
 }
 
-const unitRe = /^[\d-]+([^\s]+)/;
+const unitRe = /^-?\d+([^\s]*)/;
 function getUnit(stops, defaultUnit) {
     for (const stop of stops) {
         const match = stop.match?.(unitRe);

package/src/less/components/form-range.less

@@ -65,22 +65,18 @@
 
 /*
  * Track
- * 1. Center thumb vertically in Webkit
- * 2. Safari doesn't have a focus state. Using active instead.
+ * 1. Safari doesn't have a focus state. Using active instead.
  */
 
 /* Webkit */
 .uk-range::-webkit-slider-runnable-track {
     height: @form-range-track-height;
     background: @form-range-track-background;
-    /* 1 */
-    display: flex;
-    align-items: center;
     .hook-form-range-track();
 }
 
 .uk-range:focus::-webkit-slider-runnable-track,
-/* 2 */
+/* 1 */
 .uk-range:active::-webkit-slider-runnable-track {
     background: @form-range-track-focus-background;
     .hook-form-range-track-focus();
@@ -108,6 +104,7 @@
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
     /* 2 */
     height: @form-range-thumb-height;
     width: @form-range-thumb-width;
@@ -123,6 +120,7 @@
     /* 2 */
     height: @form-range-thumb-height;
     width: @form-range-thumb-width;
+    margin-top: (floor((@form-range-thumb-height / 2)) * -1);
     border-radius: @form-range-thumb-border-radius;
     background: @form-range-thumb-background;
     .hook-form-range-thumb();

package/src/scss/components/form-range.scss

@@ -65,22 +65,18 @@ $form-range-thumb-background:                    $global-color !default;
 
 /*
  * Track
- * 1. Center thumb vertically in Webkit
- * 2. Safari doesn't have a focus state. Using active instead.
+ * 1. Safari doesn't have a focus state. Using active instead.
  */
 
 /* Webkit */
 .uk-range::-webkit-slider-runnable-track {
     height: $form-range-track-height;
     background: $form-range-track-background;
-    /* 1 */
-    display: flex;
-    align-items: center;
     @if(mixin-exists(hook-form-range-track)) {@include hook-form-range-track();}
 }
 
 .uk-range:focus::-webkit-slider-runnable-track,
-/* 2 */
+/* 1 */
 .uk-range:active::-webkit-slider-runnable-track {
     background: $form-range-track-focus-background;
     @if(mixin-exists(hook-form-range-track-focus)) {@include hook-form-range-track-focus();}
@@ -108,6 +104,7 @@ $form-range-thumb-background:                    $global-color !default;
 .uk-range::-webkit-slider-thumb {
     /* 1 */
     -webkit-appearance: none;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;
@@ -123,6 +120,7 @@ $form-range-thumb-background:                    $global-color !default;
     /* 2 */
     height: $form-range-thumb-height;
     width: $form-range-thumb-width;
+    margin-top: (floor(($form-range-thumb-height * 0.5)) * -1);
     border-radius: $form-range-thumb-border-radius;
     background: $form-range-thumb-background;
     @if(mixin-exists(hook-form-range-thumb)) {@include hook-form-range-thumb();}

package/tests/parallax.html

@@ -55,10 +55,10 @@
 
                 <h2>Stop Positions</h2>
 
-                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,200,0,200">
+                <div id="test-stop-positions" class="uk-height-large uk-background-cover uk-margin uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');" uk-parallax="bgx: 0,50 50%, 200">
                     <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
-                        <h1 uk-parallax="x: -200,200,-200,200; scale: 2,1 10%,2 90%,1;">Headline</h1>
-                        <p uk-parallax="x: 200,-200,200,-200; scale: 1,0 20%,1 50%,0 80%,1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                        <h1 uk-parallax="x: -200,200 20%,-200 80%,200; scale: 1,1 50%,2;">Headline</h1>
+                        <p uk-parallax="x: 200,-200 20%,200 80%,-200; scale: 1,1 50%,2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                     </div>
                 </div>