uikit 3.14.4-dev.838f092aa → 3.14.4-dev.846652f92

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.14.4-dev.838f092aa",
+    "version": "3.14.4-dev.846652f92",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [

package/src/images/backgrounds/nav-parent-close.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" stroke-width="1.1" points="10 1 4 7 10 13" />
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 4 7 10 13 4" />
 </svg>

package/src/images/backgrounds/nav-parent-open.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
-    <polyline fill="none" stroke="#000" stroke-width="1.1" points="1 4 7 10 13 4" />
+    <polyline fill="none" stroke="#000" stroke-width="1.1" points="13 10 7 4 1 10" />
 </svg>

package/src/js/components/sortable.js

@@ -26,7 +26,6 @@ import {
     remove,
     removeClass,
     scrollParents,
-    scrollTop,
     toggleClass,
     Transition,
     trigger,
@@ -313,7 +312,7 @@ function trackScroll(pos) {
     let last = Date.now();
     trackTimer = setInterval(() => {
         let { x, y } = pos;
-        y += scrollTop(window);
+        y += document.scrollingElement.scrollTop;
 
         const dist = (Date.now() - last) * 0.3;
         last = Date.now();
@@ -334,7 +333,7 @@ function trackScroll(pos) {
                 }
 
                 if (scroll > 0 && scroll < scrollHeight - height) {
-                    scrollTop(scrollEl, scroll);
+                    scrollEl.scrollTop = scroll;
                     return true;
                 }
             });

package/src/js/core/drop.js

@@ -415,7 +415,8 @@ export default {
 
                 const viewport = offsetViewport(scrollParent);
                 const targetDim = offset(target);
-                const elOffset = Math.abs(this.getPositionOffset(this.$el)) + viewportOffset;
+                const elOffset =
+                    Math.abs(this.getPositionOffset(this.$el, target)) + viewportOffset;
 
                 css(this.$el, {
                     width:

package/src/js/core/height-viewport.js

@@ -56,14 +56,18 @@ export default {
                     0
                 );
             } else {
+                const isScrollingElement = document.scrollingElement === scrollElement;
+
                 // on mobile devices (iOS and Android) window.innerHeight !== 100vh
-                minHeight = `calc(${
-                    document.scrollingElement === scrollElement ? '100vh' : `${viewportHeight}px`
-                }`;
+                minHeight = `calc(${isScrollingElement ? '100vh' : `${viewportHeight}px`}`;
 
                 if (this.offsetTop) {
-                    const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
-                    minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    if (isScrollingElement) {
+                        const top = offsetPosition(this.$el)[0] - offsetPosition(scrollElement)[0];
+                        minHeight += top > 0 && top < viewportHeight / 2 ? ` - ${top}px` : '';
+                    } else {
+                        minHeight += ` - ${css(scrollElement, 'paddingTop')}`;
+                    }
                 }
 
                 if (this.offsetBottom === true) {

package/src/js/core/sticky.js

@@ -23,7 +23,6 @@ import {
     remove,
     removeClass,
     replaceClass,
-    scrollTop,
     toFloat,
     toggleClass,
     toPx,
@@ -125,7 +124,9 @@ export default {
             },
 
             handler() {
-                if (!location.hash || scrollTop(window) === 0) {
+                const { scrollingElement } = document;
+
+                if (!location.hash || scrollingElement.scrollTop === 0) {
                     return;
                 }
 
@@ -134,13 +135,11 @@ export default {
                     const elOffset = getOffset(this.$el);
 
                     if (this.isFixed && intersectRect(targetOffset, elOffset)) {
-                        scrollTop(
-                            window,
+                        scrollingElement.scrollTop =
                             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);
                     }
                 });
             },
@@ -238,7 +237,7 @@ export default {
                 start,
                 end,
             }) {
-                const scroll = scrollTop(window);
+                const scroll = document.scrollingElement.scrollTop;
                 const dir = prevScroll <= scroll ? 'down' : 'up';
 
                 return {

package/src/js/mixin/modal.js

@@ -127,7 +127,7 @@ export default {
                     this.$el,
                     'hide',
                     on(document, 'focusin', (e) => {
-                        if (!within(e.target, this.panel)) {
+                        if (last(active) === this && !within(e.target, this.$el)) {
                             this.$el.focus();
                         }
                     })

package/src/js/mixin/position.js

@@ -1,11 +1,16 @@
 import {
+    $,
     css,
     dimensions,
     flipPosition,
     getCssVar,
+    offset as getOffset,
     includes,
+    isNumeric,
     isRtl,
+    isString,
     positionAt,
+    scrollParents,
     toPx,
 } from 'uikit-util';
 
@@ -30,7 +35,7 @@ export default {
 
     methods: {
         positionAt(element, target, boundary) {
-            let offset = [this.getPositionOffset(element), this.getShiftOffset(element)];
+            let offset = [this.getPositionOffset(element, target), this.getShiftOffset(element)];
 
             const attach = {
                 element: [flipPosition(this.dir), this.align],
@@ -44,6 +49,9 @@ export default {
                 offset = offset.reverse();
             }
 
+            const [scrollElement] = scrollParents(element, /auto|scroll/);
+            const { scrollTop, scrollLeft } = scrollElement;
+
             // Ensure none positioned element does not generate scrollbars
             const elDim = dimensions(element);
             css(element, { top: -elDim.height, left: -elDim.width });
@@ -55,15 +63,29 @@ export default {
                 flip: this.flip,
                 viewportOffset: this.getViewportOffset(element),
             });
+
+            // Restore scroll position
+            scrollElement.scrollTop = scrollTop;
+            scrollElement.scrollLeft = scrollLeft;
         },
 
-        getPositionOffset(element) {
+        getPositionOffset(element, target) {
+            let { axis, dir, offset } = this;
+
+            if (offset && !isNumeric(offset) && !(isString(offset) && offset.match(/^-?\d/))) {
+                const node = $(offset);
+                offset = node
+                    ? getOffset(node)[axis === 'x' ? 'left' : 'top'] -
+                      getOffset(target)[axis === 'x' ? 'right' : 'bottom']
+                    : 0;
+            }
+
             return (
                 toPx(
-                    this.offset === false ? getCssVar('position-offset', element) : this.offset,
-                    this.axis === 'x' ? 'width' : 'height',
+                    offset === false ? getCssVar('position-offset', element) : offset,
+                    axis === 'x' ? 'width' : 'height',
                     element
-                ) * (includes(['left', 'top'], this.dir) ? -1 : 1)
+                ) * (includes(['left', 'top'], dir) ? -1 : 1)
             );
         },
 

package/src/js/mixin/slider-drag.js

@@ -5,16 +5,18 @@ import {
     includes,
     isRtl,
     isTouch,
+    noop,
     off,
     on,
-    pointerCancel,
-    pointerDown,
-    pointerMove,
-    pointerUp,
     selInput,
     trigger,
 } from 'uikit-util';
 
+const pointerOptions = { passive: false, capture: true };
+const pointerDown = 'touchstart mousedown';
+const pointerMove = 'touchmove mousemove';
+const pointerUp = 'touchend touchcancel mouseup click input';
+
 export default {
     props: {
         draggable: Boolean,
@@ -69,6 +71,16 @@ export default {
                 e.preventDefault();
             },
         },
+
+        {
+            // iOS workaround for slider stopping if swiping fast
+            name: `${pointerMove} ${pointerUp}`,
+            el() {
+                return this.list;
+            },
+            handler: noop,
+            ...pointerOptions,
+        },
     ],
 
     methods: {
@@ -89,10 +101,10 @@ export default {
                 this.prevIndex = this.index;
             }
 
-            on(document, pointerMove, this.move, { passive: false });
+            on(document, pointerMove, this.move, pointerOptions);
 
             // 'input' event is triggered by video controls
-            on(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
+            on(document, pointerUp, this.end, pointerOptions);
 
             css(this.list, 'userSelect', 'none');
         },
@@ -172,8 +184,8 @@ export default {
         },
 
         end() {
-            off(document, pointerMove, this.move, { passive: false });
-            off(document, `${pointerUp} ${pointerCancel} input`, this.end, true);
+            off(document, pointerMove, this.move, pointerOptions);
+            off(document, pointerUp, this.end, pointerOptions);
 
             if (this.dragging) {
                 this.dragging = null;

package/src/js/util/dimensions.js

@@ -94,13 +94,13 @@ export function position(element) {
 }
 
 export function offsetPosition(element) {
-    const offset = [0, 0];
-
     element = toNode(element);
 
-    do {
-        offset[0] += element.offsetTop;
-        offset[1] += element.offsetLeft;
+    const offset = [element.offsetTop, element.offsetLeft];
+
+    while ((element = element.offsetParent)) {
+        offset[0] += element.offsetTop + toFloat(css(element, `borderTopWidth`));
+        offset[1] += element.offsetLeft + toFloat(css(element, `borderLeftWidth`));
 
         if (css(element, 'position') === 'fixed') {
             const win = toWindow(element);
@@ -108,7 +108,7 @@ export function offsetPosition(element) {
             offset[1] += win.scrollX;
             return offset;
         }
-    } while ((element = element.offsetParent));
+    }
 
     return offset;
 }

package/src/js/util/position.js

@@ -159,6 +159,7 @@ function attachToWithFlip(element, target, options) {
                         return newPos;
                     }
                 }
+                continue;
             }
 
             // Move

package/src/js/util/viewport.js

@@ -1,18 +1,7 @@
 import { css } from './style';
 import { isVisible, parents } from './filter';
 import { offset, offsetPosition } from './dimensions';
-import {
-    clamp,
-    findIndex,
-    intersectRect,
-    isDocument,
-    isUndefined,
-    isWindow,
-    toFloat,
-    toNode,
-    toWindow,
-    ucfirst,
-} from './lang';
+import { clamp, findIndex, intersectRect, isWindow, toFloat, toWindow, ucfirst } from './lang';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     if (!isVisible(element)) {
@@ -35,20 +24,6 @@ export function isInView(element, offsetTop = 0, offsetLeft = 0) {
     );
 }
 
-export function scrollTop(element, top) {
-    if (isWindow(element) || isDocument(element)) {
-        element = scrollingElement(element);
-    } else {
-        element = toNode(element);
-    }
-
-    if (isUndefined(top)) {
-        return element.scrollTop;
-    } else {
-        element.scrollTop = top;
-    }
-}
-
 export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
     const parents = isVisible(element) ? scrollParents(element) : [];
     return parents.reduce(
@@ -90,7 +65,7 @@ export function scrollIntoView(element, { offset: offsetBy = 0 } = {}) {
             (function step() {
                 const percent = ease(clamp((Date.now() - start) / duration));
 
-                scrollTop(element, scroll + top * percent);
+                element.scrollTop = scroll + top * percent;
 
                 // scroll more if we have not reached our destination
                 if (percent === 1) {

package/src/less/components/dropdown.less

@@ -25,6 +25,8 @@
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
 
+@dropdown-large-padding:                        40px;
+
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
 @dropdown-nav-subtitle-font-size:               @global-small-font-size;
@@ -69,6 +71,12 @@
 .uk-dropdown.uk-open { display: block; }
 
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: @dropdown-large-padding; }
+
+
 /* Stretch modifier
  ========================================================================== */
 

package/src/less/components/nav.less

@@ -46,6 +46,8 @@
 @nav-divider-margin-vertical:                   5px;
 @nav-divider-margin-horizontal:                 0;
 
+@nav-default-font-size:                         @global-font-size;
+@nav-default-line-height:                       @global-line-height;
 @nav-default-item-color:                        @global-muted-color;
 @nav-default-item-hover-color:                  @global-color;
 @nav-default-item-active-color:                 @global-emphasis-color;
@@ -53,12 +55,14 @@
 @nav-default-header-color:                      @global-emphasis-color;
 @nav-default-divider-border-width:              @global-border-width;
 @nav-default-divider-border:                    @global-border;
+@nav-default-sublist-font-size:                 @nav-default-font-size;
+@nav-default-sublist-line-height:               @nav-default-line-height;
 @nav-default-sublist-item-color:                @global-muted-color;
 @nav-default-sublist-item-hover-color:          @global-color;
 @nav-default-sublist-item-active-color:         @global-emphasis-color;
 
-@nav-primary-item-font-size:                    @global-large-font-size;
-@nav-primary-item-line-height:                  @global-line-height;
+@nav-primary-font-size:                         @global-large-font-size;
+@nav-primary-line-height:                       @global-line-height;
 @nav-primary-item-color:                        @global-muted-color;
 @nav-primary-item-hover-color:                  @global-color;
 @nav-primary-item-active-color:                 @global-emphasis-color;
@@ -66,6 +70,8 @@
 @nav-primary-header-color:                      @global-emphasis-color;
 @nav-primary-divider-border-width:              @global-border-width;
 @nav-primary-divider-border:                    @global-border;
+@nav-primary-sublist-font-size:                 @global-medium-font-size;
+@nav-primary-sublist-line-height:               @global-line-height;
 @nav-primary-sublist-item-color:                @global-muted-color;
 @nav-primary-sublist-item-hover-color:          @global-color;
 @nav-primary-sublist-item-active-color:         @global-emphasis-color;
@@ -186,6 +192,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-default {
+    font-size: @nav-default-font-size;
+    line-height: @nav-default-line-height;
     .hook-nav-default();
 }
 
@@ -241,6 +249,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-default .uk-nav-sub {
+    font-size: @nav-default-sublist-font-size;
+    line-height: @nav-default-sublist-line-height;
+}
+
 .uk-nav-default .uk-nav-sub a { color: @nav-default-sublist-item-color; }
 
 .uk-nav-default .uk-nav-sub a:hover { color: @nav-default-sublist-item-hover-color; }
@@ -252,6 +265,8 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-primary {
+    font-size: @nav-primary-font-size;
+    line-height: @nav-primary-line-height;
     .hook-nav-primary();
 }
 
@@ -260,8 +275,6 @@ ul.uk-nav-sub {
  */
 
 .uk-nav-primary > li > a {
-    font-size: @nav-primary-item-font-size;
-    line-height: @nav-primary-item-line-height;
     color: @nav-primary-item-color;
     .hook-nav-primary-item();
 }
@@ -309,6 +322,11 @@ ul.uk-nav-sub {
  * Sublists
  */
 
+.uk-nav-primary .uk-nav-sub {
+    font-size: @nav-primary-sublist-font-size;
+    line-height: @nav-primary-sublist-line-height;
+}
+
 .uk-nav-primary .uk-nav-sub a { color: @nav-primary-sublist-item-color; }
 
 .uk-nav-primary .uk-nav-sub a:hover { color: @nav-primary-sublist-item-hover-color; }

package/src/less/components/navbar.less

@@ -51,7 +51,7 @@
 @navbar-nav-item-onclick-color:                 @global-emphasis-color;
 @navbar-nav-item-active-color:                  @global-emphasis-color;
 
-@navbar-item-padding-horizontal:                @navbar-nav-item-padding-horizontal;
+@navbar-item-padding-horizontal:                15px;
 @navbar-item-color:                             @global-color;
 
 @navbar-toggle-color:                           @global-muted-color;
@@ -71,6 +71,8 @@
 @navbar-dropdown-grid-gutter-horizontal:        @global-gutter;
 @navbar-dropdown-grid-gutter-vertical:          @navbar-dropdown-grid-gutter-horizontal;
 
+@navbar-dropdown-large-padding:                 40px;
+
 @navbar-dropdown-dropbar-margin-top:            0px;
 @navbar-dropdown-dropbar-margin-bottom:         @navbar-dropdown-dropbar-margin-top;
 @navbar-dropdown-dropbar-padding-horizontal:    @navbar-nav-item-padding-horizontal;
@@ -227,7 +229,6 @@
     /* 3 */
     box-sizing: border-box;
     min-height: @navbar-nav-item-height;
-    padding: 0 @navbar-nav-item-padding-horizontal;
     /* 4 */
     font-size: @navbar-nav-item-font-size;
     font-family: @navbar-nav-item-font-family;
@@ -240,6 +241,7 @@
  */
 
 .uk-navbar-nav > li > a {
+    padding: 0 @navbar-nav-item-padding-horizontal;
     color: @navbar-nav-item-color;
     .hook-navbar-nav-item();
 }
@@ -288,6 +290,7 @@
  ========================================================================== */
 
 .uk-navbar-toggle {
+    padding: 0 @navbar-item-padding-horizontal;
     color: @navbar-toggle-color;
     .hook-navbar-toggle();
 }
@@ -384,7 +387,7 @@
 /* Show */
 .uk-navbar-dropdown.uk-open { display: block; }
 
-
+// Color Mode
 .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
 .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
 
@@ -412,6 +415,12 @@
 .uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 4); }
 .uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: (@navbar-dropdown-width * 5); }
 
+/*
+ * Size modifier
+ */
+
+.uk-navbar-dropdown-large { padding: @navbar-dropdown-large-padding; }
+
 /*
  * Stretch modifier
  * 1. Allow scrolling

package/src/less/components/utility.less

@@ -384,18 +384,27 @@
  ========================================================================== */
 
 /*
- * 1. Required for `a`
+ * 1. Style
+ * 2. Required for `a`
+ * 3. Behave like image but can be overridden through flex utility classes
  */
 
 .uk-logo {
+    /* 1 */
     font-size: @logo-font-size;
     font-family: @logo-font-family;
     color: @logo-color;
-    /* 1 */
+    /* 2 */
     text-decoration: none;
     .hook-logo();
 }
 
+/* 3 */
+:where(.uk-logo) {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 /* Hover */
 .uk-logo:hover {
     color: @logo-hover-color;
@@ -404,7 +413,7 @@
     .hook-logo-hover();
 }
 
-.uk-logo > :where(img, svg, video) { display: inline-block; }
+.uk-logo > :where(img, svg, video) { display: block; }
 
 .uk-logo-inverse { display: none; }
 

package/src/less/theme/nav.less

@@ -7,14 +7,10 @@
 // Variables
 // ========================================================================
 
-@nav-default-subtitle-font-size:                12px;
-
-//
-// New
-//
-
 @nav-default-font-size:                         @global-small-font-size;
 
+@nav-default-subtitle-font-size:                12px;
+
 
 // Sublists
 // ========================================================================
@@ -43,7 +39,7 @@
 // Default style modifier
 // ========================================================================
 
-.hook-nav-default() { font-size: @nav-default-font-size; }
+.hook-nav-default() {}
 
 .hook-nav-default-item() {}
 

package/src/less/theme/navbar.less

@@ -14,6 +14,8 @@
 
 @navbar-nav-item-font-size:                     @global-small-font-size;
 
+@navbar-item-padding-horizontal:                0;
+
 @navbar-dropdown-margin:                        15px;
 @navbar-dropdown-padding:                       25px;
 @navbar-dropdown-background:                    @global-background;

package/src/scss/components/dropdown.scss

@@ -25,6 +25,8 @@ $dropdown-padding:                               15px !default;
 $dropdown-background:                            $global-muted-background !default;
 $dropdown-color:                                 $global-color !default;
 
+$dropdown-large-padding:                         40px !default;
+
 $dropdown-nav-item-color:                        $global-muted-color !default;
 $dropdown-nav-item-hover-color:                  $global-color !default;
 $dropdown-nav-subtitle-font-size:                $global-small-font-size !default;
@@ -69,6 +71,12 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 .uk-dropdown.uk-open { display: block; }
 
 
+/* Size modifier
+ ========================================================================== */
+
+.uk-dropdown-large { padding: $dropdown-large-padding; }
+
+
 /* Stretch modifier
  ========================================================================== */