uikit 3.17.1-dev.7c0766a6f → 3.17.1-dev.d66d4435e

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.1-dev.7c0766a6f",
+  "version": "3.17.1-dev.d66d4435e",
   "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/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/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] {
+:not(img,video)[uk-cover],
+:not(img,video)[data-uk-cover] {
+    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */

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] {
+:not(img,video)[uk-cover],
+:not(img,video)[data-uk-cover] {
+    pointer-events: none;
     /* 2 */
     max-width: none;
     /* 3 */