uikit 3.17.0 → 3.17.1-dev.7c0766a6f

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.7c0766a6f",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

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/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/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/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();}
     }