uikit 3.19.2-dev.8313ce565 → 3.19.3-dev.16ee14962

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.19.2-dev.8313ce565",
+  "version": "3.19.3-dev.16ee14962",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -19,34 +19,34 @@
     "url": "https://github.com/uikit/uikit/issues"
   },
   "homepage": "https://getuikit.com",
-  "packageManager": "pnpm@8.15.1",
+  "packageManager": "pnpm@8.15.6",
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-replace": "^5.0.5",
-    "archiver": "^7.0.0",
+    "archiver": "^7.0.1",
     "camelcase": "^8.0.0",
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.3",
     "dateformat": "^5.0.3",
-    "esbuild": "^0.20.0",
-    "eslint": "^8.55.0",
+    "esbuild": "^0.20.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "execa": "^8.0.1",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
-    "inquirer": "^9.2.12",
+    "inquirer": "^9.2.15",
     "less": "^4.2.0",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",
     "p-limit": "^5.0.0",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "rollup": "^4.9.0",
-    "rollup-plugin-esbuild": "^6.1.0",
+    "rollup": "^4.13.0",
+    "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-modify": "^3.0.0",
     "rtlcss": "^4.1.1",
-    "semver": "^7.5.4",
-    "svgo": "^3.1.0"
+    "semver": "^7.6.0",
+    "svgo": "^3.2.0"
   },
   "scripts": {
     "build-scss": "node build/scss",

package/src/js/core/sticky.js

@@ -136,11 +136,12 @@ export default {
                     const elOffset = getOffset(this.$el);
 
                     if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-                        scrollingElement.scrollTop =
+                        scrollingElement.scrollTop = Math.ceil(
                             targetOffset.top -
-                            elOffset.height -
-                            toPx(this.targetOffset, 'height', this.placeholder) -
-                            toPx(this.offset, 'height', this.placeholder);
+                                elOffset.height -
+                                toPx(this.targetOffset, 'height', this.placeholder) -
+                                toPx(this.offset, 'height', this.placeholder),
+                        );
                     }
                 });
             },

package/src/less/components/position.less

@@ -131,7 +131,8 @@
 
 /* Vertical */
 [class*="uk-position-center-left"],
-[class*="uk-position-center-right"] {
+[class*="uk-position-center-right"],
+.uk-position-center-vertical {
     top: ~'calc(50% - var(--uk-position-margin-offset))';
     --uk-position-translate-y: -50%;
     transform: translate(0, var(--uk-position-translate-y));
@@ -139,6 +140,10 @@
 
 .uk-position-center-left { left: 0; }
 .uk-position-center-right { right: 0; }
+.uk-position-center-vertical {
+    left: 0;
+    right: 0;
+}
 
 .uk-position-center-left-out {
     right: 100%;
@@ -152,7 +157,8 @@
 
 /* Horizontal */
 .uk-position-top-center,
-.uk-position-bottom-center {
+.uk-position-bottom-center,
+.uk-position-center-horizontal {
     left: ~'calc(50% - var(--uk-position-margin-offset))';
     --uk-position-translate-x: -50%;
     transform: translate(var(--uk-position-translate-x), 0);
@@ -162,6 +168,10 @@
 
 .uk-position-top-center { top: 0; }
 .uk-position-bottom-center { bottom: 0; }
+.uk-position-center-horizontal {
+    top: 0;
+    bottom: 0;
+}
 
 /*
  * Cover

package/src/scss/components/position.scss

@@ -127,7 +127,8 @@
 
 /* Vertical */
 [class*="uk-position-center-left"],
-[class*="uk-position-center-right"] {
+[class*="uk-position-center-right"],
+.uk-position-center-vertical {
     top: unquote('calc(50% - var(--uk-position-margin-offset))');
     --uk-position-translate-y: -50%;
     transform: translate(0, var(--uk-position-translate-y));
@@ -135,6 +136,10 @@
 
 .uk-position-center-left { left: 0; }
 .uk-position-center-right { right: 0; }
+.uk-position-center-vertical {
+    left: 0;
+    right: 0;
+}
 
 .uk-position-center-left-out {
     right: 100%;
@@ -148,7 +153,8 @@
 
 /* Horizontal */
 .uk-position-top-center,
-.uk-position-bottom-center {
+.uk-position-bottom-center,
+.uk-position-center-horizontal {
     left: unquote('calc(50% - var(--uk-position-margin-offset))');
     --uk-position-translate-x: -50%;
     transform: translate(var(--uk-position-translate-x), 0);
@@ -158,6 +164,10 @@
 
 .uk-position-top-center { top: 0; }
 .uk-position-bottom-center { bottom: 0; }
+.uk-position-center-horizontal {
+    top: 0;
+    bottom: 0;
+}
 
 /*
  * Cover

package/tests/position.html

@@ -198,6 +198,47 @@
 
             </div>
 
+            <h2>Center Horizontal and Vertical</h2>
+
+            <div class="uk-child-width-1-4@s" uk-grid>
+                <div>
+
+                    <div class="uk-inline">
+                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-horizontal uk-text-center">Horizontal</div>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-vertical uk-text-center">Vertical</div>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-inline">
+                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-horizontal uk-text-center">Horizontal</div>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-vertical uk-text-center">Vertical</div>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-inline">
+                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-horizontal uk-text-center">Horizontal</div>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-vertical uk-text-center">Vertical</div>
+                    </div>
+
+                </div>
+                <div>
+
+                    <div class="uk-inline">
+                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-horizontal uk-text-center">Horizontal</div>
+                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-vertical uk-text-center">Vertical</div>
+                    </div>
+
+                </div>
+            </div>
+
             <h2>Cover</h2>
 
             <div class="uk-child-width-1-4@s" uk-grid>