uikit 3.13.11-dev.98491b3f4 → 3.13.11-dev.eb080f280

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.13.11-dev.98491b3f4",
+    "version": "3.13.11-dev.eb080f280",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/js/core/sticky.js

@@ -36,11 +36,12 @@ export default {
 
     props: {
         position: String,
-        top: Boolean,
-        bottom: Boolean,
-        start: Boolean,
-        end: Boolean,
+        top: null,
+        bottom: null,
+        start: null,
+        end: null,
         offset: String,
+        overflowFlip: Boolean,
         animation: String,
         clsActive: String,
         clsInactive: String,
@@ -58,6 +59,7 @@ export default {
         start: false,
         end: false,
         offset: 0,
+        overflowFlip: false,
         animation: '',
         clsActive: 'uk-active',
         clsInactive: '',
@@ -79,8 +81,8 @@ export default {
     },
 
     connected() {
-        this.start = this.start || this.top;
-        this.end = this.end || this.bottom;
+        this.start = coerce(this.start || this.top);
+        this.end = coerce(this.end || this.bottom);
 
         this.placeholder =
             $('+ .uk-sticky-placeholder', this.$el) ||
@@ -100,6 +102,17 @@ export default {
     },
 
     events: [
+        {
+            name: 'resize',
+
+            el() {
+                return window;
+            },
+
+            handler() {
+                this.$emit('resize');
+            },
+        },
         {
             name: 'load hashchange popstate',
 
@@ -125,8 +138,8 @@ export default {
                             window,
                             targetOffset.top -
                                 elOffset.height -
-                                toPx(this.targetOffset, 'height') -
-                                toPx(this.offset, 'height')
+                                toPx(this.targetOffset, 'height', this.placeholder) -
+                                toPx(this.offset, 'height', this.placeholder)
                         );
                     }
                 });
@@ -163,16 +176,18 @@ export default {
                 const windowHeight = getHeight(window);
 
                 let position = this.position;
-                if (position === 'auto' && height > windowHeight) {
-                    position = 'bottom';
+                if (this.overflowFlip && height > windowHeight) {
+                    position = position === 'top' ? 'bottom' : 'top';
                 }
 
                 let offset = toPx(this.offset, 'height', referenceElement);
-                if (position === 'bottom') {
+                if (position === 'bottom' && (height < windowHeight || this.overflowFlip)) {
                     offset += windowHeight - height;
                 }
 
-                const overflow = Math.max(0, height + offset - windowHeight);
+                const overflow = this.overflowFlip
+                    ? 0
+                    : Math.max(0, height + offset - windowHeight);
                 const topOffset = getOffset(referenceElement).top;
 
                 const start =
@@ -400,3 +415,12 @@ function parseProp(value, el, propOffset, padding) {
         );
     }
 }
+
+function coerce(value) {
+    if (value === 'true') {
+        return true;
+    } else if (value === 'false') {
+        return false;
+    }
+    return value;
+}

package/src/less/components/sticky.less

@@ -24,10 +24,16 @@
  ========================================================================== */
 
 /*
- * Create position context so it's t the same like when fixed.
+ * 1. Create position context so it's t the same like when fixed.
+ * 2. More robust if padding and border are used and the sticky height is transitioned
  */
 
-.uk-sticky { position: relative; }
+.uk-sticky {
+    /* 1 */
+    position: relative;
+    /* 2 */
+    box-sizing: border-box;
+}
 
 /*
  * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
@@ -35,7 +41,6 @@
 
 .uk-sticky-fixed {
     z-index: @sticky-z-index;
-    box-sizing: border-box;
     margin: 0 !important;
     /* 1 */
     -webkit-backface-visibility: hidden;

package/src/scss/components/sticky.scss

@@ -24,10 +24,16 @@ $sticky-reverse-animation-duration:              0.2s !default;
  ========================================================================== */
 
 /*
- * Create position context so it's t the same like when fixed.
+ * 1. Create position context so it's t the same like when fixed.
+ * 2. More robust if padding and border are used and the sticky height is transitioned
  */
 
-.uk-sticky { position: relative; }
+.uk-sticky {
+    /* 1 */
+    position: relative;
+    /* 2 */
+    box-sizing: border-box;
+}
 
 /*
  * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
@@ -35,7 +41,6 @@ $sticky-reverse-animation-duration:              0.2s !default;
 
 .uk-sticky-fixed {
     z-index: $sticky-z-index;
-    box-sizing: border-box;
     margin: 0 !important;
     /* 1 */
     -webkit-backface-visibility: hidden;

package/tests/parallax.html

@@ -168,15 +168,15 @@
                             </tr>
                             <tr>
                                 <td><code>start</code></td>
-                                <td>Number|String</td>
+                                <td>Length</td>
                                 <td>0</td>
-                                <td>Start offset. The value can be in vh|%|px. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
+                                <td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.</td>
                             </tr>
                             <tr>
                                 <td><code>end</code></td>
-                                <td>Number|String</td>
+                                <td>Length</td>
                                 <td>0</td>
-                                <td>End offset. The value can be in vh|%|px. It supports basic mathematics operands + and -. (e.g. 50vh + 50%)</td>
+                                <td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.</td>
                             </tr>
                             <tr>
                                 <td><code>media</code></td>

package/tests/sticky-navbar.html

@@ -17,7 +17,7 @@
         </div>
 
         <div class="tm-header">
-            <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #sticky-dropdown">
+            <div uk-sticky="end: #sticky-dropdown; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container">
                         <div uk-navbar>
@@ -96,7 +96,7 @@
         </div>
 
         <div class="tm-header">
-            <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #sticky-dropbar">
+            <div uk-sticky="end: #sticky-dropbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container">
                         <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
@@ -175,7 +175,7 @@
         </div>
 
         <div class="tm-header">
-            <div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #scrollup-dropdown">
+            <div uk-sticky="end: #scrollup-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container uk-container-expand">
                         <div uk-navbar>
@@ -254,7 +254,7 @@
         </div>
 
         <div class="tm-header">
-            <div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #scrollup-dropbar">
+            <div uk-sticky="end: #scrollup-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
                 <nav class="uk-navbar-container">
                     <div class="uk-container uk-container-expand">
                         <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
@@ -335,7 +335,7 @@
         <div id="transparent-dropdown" class="uk-section-primary uk-preserve-color">
 
             <div class="tm-header">
-                <div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; top: 200; bottom: #transparent-dropdown;">
+                <div uk-sticky="start: 200; end: #transparent-dropdown; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
                     <nav class="uk-navbar-container">
                         <div class="uk-container uk-container-expand">
                             <div uk-navbar>
@@ -418,7 +418,7 @@
         <div id="transparent-dropbar" class="uk-section-secondary uk-preserve-color">
 
             <div class="tm-header">
-                <div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; top: 200; bottom: #transparent-dropbar">
+                <div uk-sticky="start: 200; end: #transparent-dropbar; show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light">
                     <nav class="uk-navbar-container">
                         <div class="uk-container uk-container-expand">
                             <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">

package/tests/sticky-parallax.html

@@ -10,7 +10,7 @@
 
     <body style="padding-bottom: 100vh;">
 
-        <div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="position: auto; bottom: +* +*" uk-height-viewport>
+        <div class="uk-section uk-section-primary uk-position-z-index-negative uk-flex uk-flex-center uk-flex-middle uk-text-center" uk-sticky="position: auto; end: 100%" uk-height-viewport>
             <div class="uk-container">
 
                 <h1 class="uk-heading-2xlarge" uk-parallax="target: !.uk-section +* +*; end: 100%; y: -400; easing: 0;">Sticky Section</h1>
@@ -22,7 +22,7 @@
             <div class="uk-container">
 
                 <div id="js-sticky-parallax-container" class="uk-position-relative uk-background-muted uk-text-center uk-height-viewport-3">
-                    <div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-container">
+                    <div class="uk-flex uk-flex-center uk-flex-middle uk-height-viewport" uk-sticky="end: #js-sticky-parallax-container">
                         <div>
 
                             <img class="uk-position-relative uk-position-z-index" src="images/size-v.jpg" width="400" height="800" alt="" style="max-width: 50vw" uk-parallax="target: #js-sticky-parallax-container; y: 0,-250; easing: -1; start: 100vh; end: 100vh;">
@@ -69,7 +69,7 @@
 
         <div class="uk-section uk-section-default uk-text-center uk-position-relative uk-position-z-index">
 
-            <div class="uk-cover-container uk-position-z-index-negative" uk-sticky="bottom: true" uk-height-viewport>
+            <div class="uk-cover-container uk-position-z-index-negative" uk-sticky="end: true" uk-height-viewport>
                 <img src="images/photo.jpg" width="1800" height="1200" alt="" uk-cover>
             </div>
 
@@ -118,7 +118,7 @@
                 </div>
                 <div>
 
-                    <div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-viewport">
+                    <div class="uk-background-muted uk-text-center uk-height-viewport" uk-sticky="end: #js-sticky-parallax-viewport">
 
                         <div uk-parallax="target: #js-sticky-parallax-viewport; start: 100vh; end: 100vh; y: 10vh, 80vh; easing: 0">
 
@@ -149,7 +149,7 @@
             <div id="js-sticky-parallax-images" style="min-height: 250vh" uk-grid>
                 <div class="uk-width-expand">
 
-                    <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images">
+                    <div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images">
                         <div uk-parallax="target: #js-sticky-parallax-images; y: 55vh, 45vh;">
                             <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 125vh; end: 100% + 100vh - 185vh; opacity: 1,1,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images; start: 175vh; end: 100% + 100vh - 235vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
@@ -209,7 +209,7 @@
             <div id="js-sticky-parallax-images-all" style="min-height: 250vh" uk-grid>
                 <div class="uk-width-expand">
 
-                    <div class="uk-background-muted uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
+                    <div class="uk-background-muted uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images-all">
                         <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
                             <img class="uk-position-center-left" src="images/photo.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 160vh; opacity: 1,1 99%,0; easing:0">
                             <img class="uk-position-center-left" src="images/photo2.jpg" width="1800" height="1200" alt="" uk-parallax="target: #js-sticky-parallax-images-all; start: 150vh; end: 100% + 100vh - 210vh; opacity: 0,1 16.666%,1 99%,0; easing:0">
@@ -226,7 +226,7 @@
                 </div>
                 <div class="uk-width-expand">
 
-                    <div class="uk-height-viewport" uk-sticky="bottom: #js-sticky-parallax-images-all">
+                    <div class="uk-height-viewport" uk-sticky="end: #js-sticky-parallax-images-all">
                         <div uk-parallax="target: #js-sticky-parallax-images-all; y: 55vh, 45vh;">
 
                             <div class="uk-position-center-left" uk-parallax="target: #js-sticky-parallax-images-all; start: 100vh; end: 100% + 100vh - 150vh; opacity: 0,1 20%,1 80%,0">
@@ -266,7 +266,7 @@
             </div>
         </div>
 
-        <div class="uk-section uk-section-primary uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center uk-position-z-index-negative" uk-sticky="position: bottom; top: -100%; bottom: body">
+        <div class="uk-section uk-section-primary uk-section-xlarge uk-flex uk-flex-center uk-flex-middle uk-text-center uk-position-z-index-negative" uk-sticky="position: bottom; start: -100%; end: 0">
             <div class="uk-container">
 
                 <h1 class="uk-heading-2xlarge">Sticky Section</h1>