uikit 3.17.0 → 3.17.1-dev.85059147d

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.17.0",
+  "version": "3.17.1-dev.85059147d",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/cover.js

@@ -1,17 +1,7 @@
-import { attr, css, Dimensions, isTag, parent } from 'uikit-util';
+import { css, Dimensions, isTag, parent } from 'uikit-util';
 import { resize } from '../api/observables';
 import Video from './video';
 
-const coverProps = {
-    top: 0, // resets the css from [uk-cover]
-    left: 0, // resets the css from [uk-cover]
-    width: '100%',
-    height: '100%',
-    transform: 'none',
-    objectFit: 'cover',
-    objectPosition: 'center',
-};
-
 export default {
     mixins: [Video],
 
@@ -37,16 +27,6 @@ export default {
 
     connected() {
         this._useObjectFit = isTag(this.$el, 'img', 'video');
-
-        if (this._useObjectFit) {
-            css(this.$el, coverProps);
-        }
-    },
-
-    disconnected() {
-        if (this._useObjectFit) {
-            attr(this.$el, 'style', '');
-        }
     },
 
     update: {

package/src/js/core/sticky.js

@@ -176,7 +176,10 @@ export default {
 
                 const viewport = toPx('100vh', 'height');
                 const dynamicViewport = getHeight(window);
-                const maxScrollHeight = document.scrollingElement.scrollHeight - viewport;
+                const maxScrollHeight = Math.max(
+                    0,
+                    document.scrollingElement.scrollHeight - viewport,
+                );
 
                 let position = this.position;
                 if (this.overflowFlip && height > viewport) {
@@ -412,18 +415,14 @@ export default {
                 let position = 'fixed';
 
                 if (scroll > end) {
-                    offset += end - offsetParentTop;
+                    offset += end - offsetParentTop + overflowScroll - overflow;
                     position = 'absolute';
                 }
 
                 css(this.$el, { position, width, marginTop: 0 }, 'important');
             }
 
-            if (overflow) {
-                offset -= overflowScroll;
-            }
-
-            css(this.$el, 'top', offset);
+            css(this.$el, 'top', offset - overflowScroll);
 
             this.setActive(active);
             toggleClass(

package/src/js/mixin/parallax.js

@@ -76,14 +76,11 @@ export default {
         },
 
         getCss(percent) {
-            const css = { transform: '', filter: '' };
+            const css = {};
             for (const prop in this.props) {
                 this.props[prop](css, clamp(percent));
             }
-            css.willChange = Object.keys(css)
-                .filter((key) => css[key] !== '')
-                .map(propName)
-                .join(',');
+            css.willChange = Object.keys(css).map(propName).join(',');
             return css;
         },
     },
@@ -112,7 +109,7 @@ function transformFn(prop, el, stops) {
     stops = parseStops(stops, transformFn);
 
     return (css, percent) => {
-        css.transform += ` ${prop}(${getValue(stops, percent)}${unit})`;
+        css.transform = `${css.transform || ''} ${prop}(${getValue(stops, percent)}${unit})`;
     };
 }
 
@@ -155,7 +152,7 @@ function filterFn(prop, el, stops) {
 
     return (css, percent) => {
         const value = getValue(stops, percent);
-        css.filter += ` ${prop}(${value + unit})`;
+        css.filter = `${css.filter || ''} ${prop}(${value + unit})`;
     };
 }
 

package/src/less/components/base.less

@@ -651,7 +651,8 @@ template { display: none; }
     .uk-heading-medium,
     .uk-heading-large,
     .uk-heading-xlarge,
-    .uk-heading-2xlarge {
+    .uk-heading-2xlarge,
+    .uk-heading-3xlarge {
         color: @inverse-base-heading-color;
         .hook-inverse-base-heading();
     }

package/src/less/components/cover.less

@@ -13,7 +13,24 @@
  ========================================================================== */
 
 /*
- * Works with iframes and embedded content
+ * Works with embedded content
+ */
+
+img[uk-cover],
+video[uk-cover],
+img[data-uk-cover],
+video[data-uk-cover] {
+    left: 0;
+    top: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/*
+ * Works with iframes
  * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
@@ -22,8 +39,9 @@
  */
 
 /* 1 */
-[uk-cover],
-[data-uk-cover] {
+iframe[uk-cover],
+iframe[data-uk-cover] {
+    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */
@@ -35,9 +53,6 @@
     transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
 }
 
-iframe[uk-cover],
-iframe[data-uk-cover] { pointer-events: none; }
-
 
 /* Container
  ========================================================================== */

package/src/less/components/pagination.less

@@ -32,8 +32,9 @@
 
 /*
  * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
  */
 
 .uk-pagination {
@@ -41,8 +42,10 @@
     /* 1 */
     flex-wrap: wrap;
     /* 2 */
-    margin-left: -@pagination-margin-horizontal;
+    align-items: center;
     /* 3 */
+    margin-left: -@pagination-margin-horizontal;
+    /* 4 */
     padding: 0;
     list-style: none;
     .hook-pagination();
@@ -68,14 +71,18 @@
  ========================================================================== */
 
 /*
- * 1. Prevent gap if child element is `inline-block`, e.g. an icon
- * 2. Style
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
  */
 
 .uk-pagination > * > * {
     /* 1 */
-    display: block;
+    display: flex;
+    align-items: center;
     /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
     padding: @pagination-item-padding-vertical @pagination-item-padding-horizontal;
     color: @pagination-item-color;
     .hook-pagination-item();

package/src/scss/components/cover.scss

@@ -13,7 +13,24 @@
  ========================================================================== */
 
 /*
- * Works with iframes and embedded content
+ * Works with embedded content
+ */
+
+img[uk-cover],
+video[uk-cover],
+img[data-uk-cover],
+video[data-uk-cover] {
+    left: 0;
+    top: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/*
+ * Works with iframes
  * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
@@ -22,8 +39,9 @@
  */
 
 /* 1 */
-[uk-cover],
-[data-uk-cover] {
+iframe[uk-cover],
+iframe[data-uk-cover] {
+    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */
@@ -35,9 +53,6 @@
     transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
 }
 
-iframe[uk-cover],
-iframe[data-uk-cover] { pointer-events: none; }
-
 
 /* Container
  ========================================================================== */

package/src/scss/components/pagination.scss

@@ -24,8 +24,9 @@
 
 /*
  * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
  */
 
 .uk-pagination {
@@ -33,8 +34,10 @@
     /* 1 */
     flex-wrap: wrap;
     /* 2 */
-    margin-left: (-$pagination-margin-horizontal);
+    align-items: center;
     /* 3 */
+    margin-left: (-$pagination-margin-horizontal);
+    /* 4 */
     padding: 0;
     list-style: none;
     @if(mixin-exists(hook-pagination)) {@include hook-pagination();}
@@ -60,14 +63,18 @@
  ========================================================================== */
 
 /*
- * 1. Prevent gap if child element is `inline-block`, e.g. an icon
- * 2. Style
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
  */
 
 .uk-pagination > * > * {
     /* 1 */
-    display: block;
+    display: flex;
+    align-items: center;
     /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
     padding: $pagination-item-padding-vertical $pagination-item-padding-horizontal;
     color: $pagination-item-color;
     @if(mixin-exists(hook-pagination-item)) {@include hook-pagination-item();}

package/src/scss/mixins-theme.scss

@@ -219,7 +219,8 @@
     .uk-heading-medium,
     .uk-heading-large,
     .uk-heading-xlarge,
-    .uk-heading-2xlarge {
+    .uk-heading-2xlarge,
+    .uk-heading-3xlarge {
         color: $inverse-base-heading-color;
         @if(mixin-exists(hook-inverse-base-heading)) {@include hook-inverse-base-heading();}
     }

package/src/scss/mixins.scss

@@ -156,7 +156,8 @@
     .uk-heading-medium,
     .uk-heading-large,
     .uk-heading-xlarge,
-    .uk-heading-2xlarge {
+    .uk-heading-2xlarge,
+    .uk-heading-3xlarge {
         color: $inverse-base-heading-color;
         @if(mixin-exists(hook-inverse-base-heading)) {@include hook-inverse-base-heading();}
     }